mirror of
https://github.com/mauriceboe/TREK.git
synced 2026-10-21 14:36:31 +00:00
Maurice
fe05afec19
The Share button becomes the trip's Settings, a round button beside the back pill. The dialog is rebuilt around three areas (People, Sharing, Journal) with a side navigation, a fixed height and 960 px width on wide screens. Journal links one of your journals from the Journey addon to the trip. Every trip member is ticked as a reader by default, each can be raised to editor or left out, and the people a save would let in for the first time are named before it saves. The link can be changed or removed. With a link the trip gets a Journal tab on desktop and phone that shows the Journey addon's own view, live through its sync and trip:journal:changed. Nothing shows with the addon off. members.shareTrip and nav.share are gone with the button that used them.
38 lines
1.4 KiB
TypeScript
38 lines
1.4 KiB
TypeScript
import { BookOpen, Link2 } from 'lucide-react';
|
|
|
|
/**
|
|
* The trip's Journal tab: a book with a link on its corner, because the journal
|
|
* is not the trip's own but one from the Journey addon tied to it. Takes the
|
|
* props the tab bars hand a lucide icon.
|
|
*
|
|
* The book is masked out under the link rather than the link given a backing:
|
|
* a backing has to match whatever the icon sits on (a card, the accent of a
|
|
* picked tab), and the moment it does not, the link vanishes into it.
|
|
*/
|
|
export function LinkedJournalIcon({
|
|
size = 16,
|
|
strokeWidth = 2,
|
|
className,
|
|
}: {
|
|
size?: number;
|
|
strokeWidth?: number;
|
|
className?: string;
|
|
}) {
|
|
const badge = Math.round(size * 0.6);
|
|
// The hole: a circle round the link's centre, a little wider than the link.
|
|
const hole = `radial-gradient(circle at calc(100% + 2px) calc(100% + 1px), transparent ${badge * 0.62}px, currentColor ${badge * 0.62 + 0.5}px)`;
|
|
return (
|
|
// dir="ltr": the hole is cut on the right, so the link has to stay there in Arabic too.
|
|
<span
|
|
dir="ltr"
|
|
className={`relative inline-flex flex-none ${className ?? ''}`}
|
|
style={{ width: size, height: size }}
|
|
>
|
|
<span className="inline-flex" style={{ maskImage: hole, WebkitMaskImage: hole }}>
|
|
<BookOpen size={size} strokeWidth={strokeWidth} />
|
|
</span>
|
|
<Link2 size={badge} strokeWidth={strokeWidth + 0.6} className="absolute -bottom-[3px] -end-[4px]" />
|
|
</span>
|
|
);
|
|
}
|