g1t/apps/web/app/components/pin-button.tsx
Pick any line to see why it is the way it is: the commit, the pull request and issue it came from, and what the agent was thinking.
| Navigation: the workspace's own page with tabs, pins and recent in the sidebar | 1 | /** |
| 2 | * Pinning a project, so it stays at the top of the workspace's sidebar: | |
| 3 | * a button on the project's header and on each row of the Projects page. | |
| 4 | * Posts to the workspace's pins route (routes/workspace/pins.ts); while it | |
| 5 | * is on its way, it shows as done. | |
| 6 | */ | |
| 7 | import { Pin } from "lucide-react"; | |
| 8 | import { useFetcher } from "react-router"; | |
| 9 | ||
| 10 | import { cn } from "../lib/cn"; | |
| 11 | ||
| 12 | export function PinButton({ | |
| 13 | workspace, | |
| 14 | slug, | |
| 15 | name, | |
| 16 | pinned, | |
| 17 | compact, | |
| 18 | className, | |
| 19 | }: { | |
| 20 | workspace: string; | |
| 21 | slug: string; | |
| 22 | /** For what the button says to a screen reader. */ | |
| 23 | name: string; | |
| 24 | pinned: boolean; | |
| 25 | /** Only the pin, as on a row; the header says it in words too. */ | |
| 26 | compact?: boolean; | |
| 27 | className?: string; | |
| 28 | }) { | |
| 29 | const fetcher = useFetcher<{ error: string | null }>({ key: `pin:${workspace}/${slug}` }); | |
| 30 | const asked = fetcher.formData?.get("intent"); | |
| 31 | const shown = asked === "pin" ? true : asked === "unpin" ? false : pinned; | |
| 32 | const label = shown ? `Unpin ${name}` : `Pin ${name}`; | |
| 33 | const error = fetcher.state === "idle" ? fetcher.data?.error : null; | |
| 34 | return ( | |
| 35 | <fetcher.Form method="post" action={`/${workspace}/-/pins`} className={cn("relative flex", className)}> | |
| 36 | <input type="hidden" name="intent" value={shown ? "unpin" : "pin"} /> | |
| 37 | <input type="hidden" name="slug" value={slug} /> | |
| 38 | <button | |
| 39 | type="submit" | |
| 40 | aria-label={label} | |
| 41 | aria-pressed={shown} | |
| 42 | title={error ?? (shown ? "Unpin from the sidebar" : "Pin to the sidebar")} | |
| 43 | className={cn( | |
| 44 | "inline-flex shrink-0 items-center justify-center gap-1.5 rounded-md text-[0.8125rem] transition-colors outline-none focus-visible:ring-2 focus-visible:ring-accent", | |
| 45 | compact | |
| 46 | ? "relative z-10 size-8 hover:bg-raised" | |
| 47 | : "h-8 border border-line px-2.5 text-fg/80 hover:border-line-strong hover:bg-surface hover:text-fg", | |
| 48 | shown ? "text-accent" : compact ? "text-faint hover:text-fg" : "", | |
| 49 | error && "text-danger", | |
| 50 | )} | |
| 51 | > | |
| 52 | <Pin size={14} className={shown ? "fill-current" : undefined} /> | |
| 53 | {!compact && <span className="hidden sm:inline">{shown ? "Unpin" : "Pin"}</span>} | |
| 54 | </button> | |
| 55 | </fetcher.Form> | |
| 56 | ); | |
| 57 | } |