Skip to content
Sign up

flagon-io/g1t

public
0

Commit

Sidebar: its hover hints are the site's tooltip

Soon items, the workspace name, the workspace menu's names and the project's Overview link use Hint. The reorder hint for pinned projects moves from the whole row to the grip, so it no longer stacks on the pin button's own tooltip.

syntaqxcommitted Parentcc3a6eeBrowse files
1 file+24−200/1 viewed
+24−20
88 import { AgentButton, InboxBell } from "./inbox";
99 import { PinButton } from "./pin-button";
1010 import { Tooltip, TooltipContent, TooltipTrigger } from "./ui/tooltip";
11+import { Hint } from "./ui/hint";
1112 import { Sheet, SheetContent, SheetTitle, SheetTrigger } from "./ui/sheet";
1213 import { StatusDot, useSiteStatus } from "./footer";
1314 import { Logo, Mark } from "./logo";
136137 */
137138 function SidebarSoon({ icon, children, about }: { icon: ReactNode; children: ReactNode; about: string }) {
138139 return (
139− <div
140− title={about}
141− aria-disabled="true"
142− className="flex h-8 cursor-default items-center gap-2.5 rounded-md px-2 text-[0.8125rem] text-faint"
143− >
144− <span className="shrink-0 opacity-70">{icon}</span>
145− <span className="grow truncate">{children}</span>
146− <SoonPill />
147− </div>
140+ <Hint label={about} side="right">
141+ <div aria-disabled="true" className="flex h-8 cursor-default items-center gap-2.5 rounded-md px-2 text-[0.8125rem] text-faint">
142+ <span className="shrink-0 opacity-70">{icon}</span>
143+ <span className="grow truncate">{children}</span>
144+ <span className="sr-only">{about}</span>
145+ <SoonPill />
146+ </div>
147+ </Hint>
148148 );
149149 }
150150
167167 }) {
168168 const { pathname } = useLocation();
169169 return (
170+ <Hint label={about} side="right">
170171 <NavLink
171172 to={to}
172− title={about}
173173 prefetch="intent"
174174 className={({ isActive }) => {
175175 const current = isActive || (also ?? []).some((prefix) => pathname === prefix || pathname.startsWith(prefix + "/"));
182182 <span className="min-w-0 grow truncate">{children}</span>
183183 <SoonPill />
184184 </NavLink>
185+ </Hint>
185186 );
186187 }
187188
234235 <DropdownMenu>
235236 {/* The name goes to the workspace; only the arrows switch it. The
236237 name gets all the room there is, and the whole of it on hover. */}
238+ <Hint label={workspace ? `${label} · g1t.sh/${workspace.slug}` : undefined}>
237239 <Link
238240 to={current ? `/${current}` : "/workspaces/new"}
239241 prefetch="intent"
240− title={workspace ? `${label} · g1t.sh/${workspace.slug}` : undefined}
241242 className="flex h-9 min-w-0 grow items-center gap-2 rounded-md px-2 transition-colors hover:bg-raised"
242243 >
243244 {workspace ? (
247248 )}
248249 <span className="min-w-0 truncate text-[0.8125rem] font-medium">{label}</span>
249250 </Link>
251+ </Hint>
250252 <DropdownMenuTrigger
251253 aria-label="Switch workspace"
252254 className="flex h-9 w-7 shrink-0 items-center justify-center rounded-md text-faint outline-none transition-colors hover:bg-raised hover:text-fg focus-visible:ring-2 focus-visible:ring-accent data-[state=open]:bg-raised data-[state=open]:text-fg"
274276 )}
275277 <DropdownMenuLabel>Workspaces</DropdownMenuLabel>
276278 {(user.workspaces ?? []).map((membership) => (
277− <DropdownMenuItem asChild key={membership.slug}>
278− <Link to={`/${membership.slug}`} title={displayName(membership)}>
279+ <Hint key={membership.slug} label={displayName(membership)} side="right">
280+ <DropdownMenuItem asChild>
281+ <Link to={`/${membership.slug}`}>
279282 <Avatar name={membership.slug} image={membership.avatar} size={24} square />
280283 <span className="flex min-w-0 grow flex-col leading-tight">
281284 <span className="truncate">{displayName(membership)}</span>
289292 )}
290293 </Link>
291294 </DropdownMenuItem>
295+ </Hint>
292296 ))}
293297 <DropdownMenuSeparator />
294298 <DropdownMenuItem asChild>
655659 event.preventDefault();
656660 move(index, event.key === "ArrowUp" ? -1 : 1);
657661 }}
658− title={pinned.length > 1 ? "Drag, or Alt and an arrow key, to reorder" : undefined}
659662 className={`group/pin relative ${dragging === index ? "opacity-50" : ""}`}
660663 >
661664 {row(project, true)}
662665 {pinned.length > 1 && (
663− <GripVertical
664− size={12}
665− aria-hidden="true"
666− className="pointer-events-none absolute top-1/2 -left-1.5 -translate-y-1/2 text-faint opacity-0 transition-opacity group-hover/pin:opacity-100"
667− />
666+ <Hint label="Drag, or Alt and an arrow key, to reorder" side="right">
667+ <span className="absolute top-1/2 -left-1.5 -translate-y-1/2 cursor-grab text-faint opacity-0 transition-opacity group-hover/pin:opacity-100">
668+ <GripVertical size={12} aria-hidden="true" />
669+ </span>
670+ </Hint>
668671 )}
669672 </li>
670673 ))}
903906 return (
904907 <nav aria-label={`${repo.namespace}/${repo.name}`} className={PANEL}>
905908 <BackRow to={back.to} label={back.label} />
909+ <Hint label="Overview" side="right">
906910 <NavLink
907911 to={base}
908912 end
909913 prefetch="intent"
910− title="Overview"
911914 className={({ isActive }) =>
912915 `mt-2 flex items-center gap-2 rounded-md px-2 py-1.5 transition-colors ${isActive ? "bg-raised" : "hover:bg-raised/60"}`
913916 }
920923 <span className="font-semibold text-fg">{repo.name}</span>
921924 </span>
922925 </NavLink>
926+ </Hint>
923927 {/* A project's pages, in the order people use them. A page with more
924928 than one view shows them as tabs across its top. */}
925929 <Rule />