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, | |
| Previews build from any branch; Agent in place of Ask AI; pin from the sidebar | 18 | small, |
| Navigation: the workspace's own page with tabs, pins and recent in the sidebar | 19 | className, |
| 20 | }: { | |
| 21 | workspace: string; | |
| 22 | slug: string; | |
| 23 | /** For what the button says to a screen reader. */ | |
| 24 | name: string; | |
| 25 | pinned: boolean; | |
| 26 | /** Only the pin, as on a row; the header says it in words too. */ | |
| 27 | compact?: boolean; | |
| Previews build from any branch; Agent in place of Ask AI; pin from the sidebar | 28 | /** Row-sized, for the sidebar. */ |
| 29 | small?: boolean; | |
| Navigation: the workspace's own page with tabs, pins and recent in the sidebar | 30 | className?: string; |
| 31 | }) { | |
| 32 | const fetcher = useFetcher<{ error: string | null }>({ key: `pin:${workspace}/${slug}` }); | |
| 33 | const asked = fetcher.formData?.get("intent"); | |
| 34 | const shown = asked === "pin" ? true : asked === "unpin" ? false : pinned; | |
| 35 | const label = shown ? `Unpin ${name}` : `Pin ${name}`; | |
| 36 | const error = fetcher.state === "idle" ? fetcher.data?.error : null; | |
| 37 | return ( | |
| 38 | <fetcher.Form method="post" action={`/${workspace}/-/pins`} className={cn("relative flex", className)}> | |
| 39 | <input type="hidden" name="intent" value={shown ? "unpin" : "pin"} /> | |
| 40 | <input type="hidden" name="slug" value={slug} /> | |
| 41 | <button | |
| 42 | type="submit" | |
| 43 | aria-label={label} | |
| 44 | aria-pressed={shown} | |
| 45 | title={error ?? (shown ? "Unpin from the sidebar" : "Pin to the sidebar")} | |
| 46 | className={cn( | |
| 47 | "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", | |
| Previews build from any branch; Agent in place of Ask AI; pin from the sidebar | 48 | small |
| 49 | ? "relative z-10 size-6 hover:bg-raised" | |
| 50 | : compact | |
| Navigation: the workspace's own page with tabs, pins and recent in the sidebar | 51 | ? "relative z-10 size-8 hover:bg-raised" |
| 52 | : "h-8 border border-line px-2.5 text-fg/80 hover:border-line-strong hover:bg-surface hover:text-fg", | |
| Previews build from any branch; Agent in place of Ask AI; pin from the sidebar | 53 | shown ? "text-accent" : compact || small ? "text-faint hover:text-fg" : "", |
| Navigation: the workspace's own page with tabs, pins and recent in the sidebar | 54 | error && "text-danger", |
| 55 | )} | |
| 56 | > | |
| Previews build from any branch; Agent in place of Ask AI; pin from the sidebar | 57 | <Pin size={small ? 12 : 14} className={shown ? "fill-current" : undefined} /> |
| 58 | {!compact && !small && <span className="hidden sm:inline">{shown ? "Unpin" : "Pin"}</span>} | |
| Navigation: the workspace's own page with tabs, pins and recent in the sidebar | 59 | </button> |
| 60 | </fetcher.Form> | |
| 61 | ); | |
| 62 | } |