| 1 | import { |
| 2 | Activity, |
| 3 | BellOff, |
| 4 | BellRing, |
| 5 | BookOpen, |
| 6 | CircleUserRound, |
| 7 | Compass, |
| 8 | Ellipsis, |
| 9 | Keyboard, |
| 10 | LayoutGrid, |
| 11 | LifeBuoy, |
| 12 | LogOut, |
| 13 | Moon, |
| 14 | Settings, |
| 15 | Smile, |
| 16 | Sun, |
| 17 | } from "lucide-react"; |
| 18 | import { Dialog as Primitive } from "radix-ui"; |
| 19 | import { type ReactNode, useEffect, useRef, useState } from "react"; |
| 20 | import { Link, useLocation, useNavigate, useSubmit } from "react-router"; |
| 21 | |
| 22 | import { type Abilities, type Membership, type User, hasCodeAccess, shownUsername } from "@g1t/contracts"; |
| 23 | |
| 24 | import { appIcon, pinnedApp } from "./apps"; |
| 25 | import { CountBadge, ShortcutsDialog } from "./rail"; |
| 26 | import { Mark } from "./logo"; |
| 27 | |
| 28 | import { Avatar } from "./ui/avatar"; |
| 29 | import { NavTab, NavTabs } from "./ui/nav-tabs"; |
| 30 | import { StatusDialog } from "./presence"; |
| 31 | import { ThemeSwitch } from "./theme-switch"; |
| 32 | import { type BuiltinApp, type PinnableApp, appOf } from "../lib/apps"; |
| 33 | import { setPresence, useOwnPresence } from "../lib/notify-client"; |
| 34 | import { dndOn, liveStatus, pauseUntil, untilLabel } from "../lib/presence"; |
| 35 | import { STATUS_URL } from "../lib/status"; |
| 36 | import { type ModeKey, modeHome, modeOf } from "../lib/workspace-nav"; |
| 37 | import { PROJECT_PAGE_LINKS, type ProjectPage, projectPageAt, projectPages } from "../lib/chrome"; |
| 38 | import { ROADMAP, type RoadmapItem } from "../lib/roadmap"; |
| 39 | |
| 40 | /** |
| 41 | * The phone's layout (below 768px): a bottom bar of apps with More for |
| 42 | * the rest, the mode's sidebar as a drawer from the left, and each tab a |
| 43 | * list that pushes its detail full screen. A computer has the rail. |
| 44 | */ |
| 45 | |
| 46 | /** Whether a path is one conversation, which takes the whole screen on a phone. */ |
| 47 | export function isConversation(pathname: string): boolean { |
| 48 | return /^\/[^/]+\/-\/chat\/(?!browse\/?$)[^/]+/.test(pathname); |
| 49 | } |
| 50 | |
| 51 | /** |
| 52 | * Follows the visual viewport, which shrinks when the keyboard opens: its |
| 53 | * height and top go on the page as `--vv-height` and `--vv-top`, what |
| 54 | * the keyboard covers as `--keyboard-inset`, and |
| 55 | * `data-keyboard="open"` on <html> while the keyboard is up, so a |
| 56 | * composer can sit just above it and the tab bar can step aside. |
| 57 | */ |
| 58 | export function useVisualViewport() { |
| 59 | useEffect(() => { |
| 60 | const viewport = window.visualViewport; |
| 61 | if (!viewport) return; |
| 62 | const root = document.documentElement; |
| 63 | const update = () => { |
| 64 | root.style.setProperty("--vv-height", `${viewport.height}px`); |
| 65 | root.style.setProperty("--vv-top", `${viewport.offsetTop}px`); |
| 66 | // How much of the bottom the keyboard covers, for a sheet to sit on it. |
| 67 | root.style.setProperty("--keyboard-inset", `${Math.max(0, window.innerHeight - viewport.height - viewport.offsetTop)}px`); |
| 68 | const keyboard = window.innerHeight - viewport.height > 140; |
| 69 | if (keyboard) root.dataset.keyboard = "open"; |
| 70 | else delete root.dataset.keyboard; |
| 71 | }; |
| 72 | update(); |
| 73 | viewport.addEventListener("resize", update); |
| 74 | viewport.addEventListener("scroll", update); |
| 75 | return () => { |
| 76 | viewport.removeEventListener("resize", update); |
| 77 | viewport.removeEventListener("scroll", update); |
| 78 | }; |
| 79 | }, []); |
| 80 | } |
| 81 | |
| 82 | /** |
| 83 | * Swipe from the left edge to go back, as on a phone's own apps: a touch |
| 84 | * that starts within 28px of the edge and travels 80px right, more across |
| 85 | * than down. Going back is the browser's own back, so history stays true. |
| 86 | */ |
| 87 | export function useSwipeBack(onBack: () => void) { |
| 88 | const start = useRef<{ x: number; y: number } | null>(null); |
| 89 | return { |
| 90 | onTouchStart: (event: React.TouchEvent) => { |
| 91 | const touch = event.touches[0]; |
| 92 | start.current = touch && touch.clientX < 28 ? { x: touch.clientX, y: touch.clientY } : null; |
| 93 | }, |
| 94 | onTouchMove: (event: React.TouchEvent) => { |
| 95 | const touch = event.touches[0]; |
| 96 | if (!start.current || !touch) return; |
| 97 | const dx = touch.clientX - start.current.x; |
| 98 | const dy = Math.abs(touch.clientY - start.current.y); |
| 99 | if (dx > 80 && dx > dy * 1.5) { |
| 100 | start.current = null; |
| 101 | onBack(); |
| 102 | } |
| 103 | }, |
| 104 | onTouchEnd: () => { |
| 105 | start.current = null; |
| 106 | }, |
| 107 | }; |
| 108 | } |
| 109 | |
| 110 | /** Back, as the browser would; to `fallback` when this page was the first one opened. */ |
| 111 | export function useBack(fallback: string) { |
| 112 | const navigate = useNavigate(); |
| 113 | return () => { |
| 114 | const index = (window.history.state as { idx?: number } | null)?.idx ?? 0; |
| 115 | if (index > 0) navigate(-1); |
| 116 | else navigate(fallback, { replace: true }); |
| 117 | }; |
| 118 | } |
| 119 | |
| 120 | type Tab = { key: ModeKey; label: string; badge?: { count: number; loud: boolean } }; |
| 121 | |
| 122 | /** |
| 123 | * The bottom bar of a phone, flat along the bottom edge under a rule, as |
| 124 | * the rail stands flat beside the page on a computer: Home, Chat, |
| 125 | * Notifications and Code (for a member with Code access), each |
| 126 | * with what is unread, and More. The tab you are in has the rail's own |
| 127 | * mark: its icon on the sidebar's accent. It steps aside while the keyboard is up |
| 128 | * and inside a conversation. The tab you are in, tapped again, opens its |
| 129 | * mode's menu (its sidebar). |
| 130 | */ |
| 131 | export function BottomBar({ |
| 132 | user, |
| 133 | workspace, |
| 134 | mode: shellMode, |
| 135 | pins, |
| 136 | unread, |
| 137 | onReselect, |
| 138 | }: { |
| 139 | user: User; |
| 140 | workspace: Membership; |
| 141 | /** The mode the shell is in, when it knows more than the address (`browse`, lib/workspace-nav.ts `shellMode`). */ |
| 142 | mode?: ModeKey; |
| 143 | /** The apps pinned to this person's rail here, for the More sheet. */ |
| 144 | pins: PinnableApp[]; |
| 145 | unread: { notifications: number; chat: number; mentions: number }; |
| 146 | /** Tapping the tab you are already in: the shell opens that mode's menu (its sidebar). */ |
| 147 | onReselect?: () => void; |
| 148 | }) { |
| 149 | const { pathname } = useLocation(); |
| 150 | const [more, setMore] = useState(false); |
| 151 | useEffect(() => setMore(false), [pathname]); |
| 152 | const slug = workspace.slug; |
| 153 | const code = hasCodeAccess(workspace); |
| 154 | const mode = shellMode ?? modeOf(pathname, slug); |
| 155 | const tabs: Tab[] = [ |
| 156 | { key: "home", label: "Home" }, |
| 157 | { key: "chat", label: "Chat", badge: { count: unread.mentions > 0 ? unread.mentions : unread.chat, loud: unread.mentions > 0 } }, |
| 158 | { key: "notifications", label: "Notifications", badge: { count: unread.notifications, loud: true } }, |
| 159 | ...(code ? [{ key: "code" as const, label: "Code" }] : []), |
| 160 | ]; |
| 161 | const inTabs = tabs.some((tab) => tab.key === mode); |
| 162 | if (isConversation(pathname)) return null; |
| 163 | return ( |
| 164 | <> |
| 165 | <nav |
| 166 | aria-label="Apps" |
| 167 | className="fixed inset-x-0 bottom-0 z-40 h-(--tabbar-h) border-t border-line bg-rail pb-[env(safe-area-inset-bottom)] md:hidden in-data-[keyboard=open]:hidden" |
| 168 | > |
| 169 | <ul className="grid h-full" style={{ gridTemplateColumns: `repeat(${tabs.length + 1}, minmax(0, 1fr))` }}> |
| 170 | {tabs.map((tab) => { |
| 171 | const current = mode === tab.key && !more; |
| 172 | const count = tab.badge?.count ?? 0; |
| 173 | const to = modeHome(tab.key, slug); |
| 174 | return ( |
| 175 | <li key={tab.key} className="min-w-0"> |
| 176 | <Link |
| 177 | to={to} |
| 178 | prefetch="intent" |
| 179 | aria-current={current ? "page" : undefined} |
| 180 | aria-label={count > 0 ? `${tab.label}, ${count} unread` : tab.label} |
| 181 | onClick={(event) => { |
| 182 | // The tab you are in, tapped again: its menu, as a phone's own apps do. |
| 183 | // Chat's first page on a phone is its sidebar already. |
| 184 | if (!current || !onReselect || (tab.key === "chat" && pathname.replace(/\/$/, "") === to)) return; |
| 185 | event.preventDefault(); |
| 186 | onReselect(); |
| 187 | }} |
| 188 | className={BAR_ITEM} |
| 189 | > |
| 190 | <BarIcon current={current}> |
| 191 | {appIcon(tab.key as BuiltinApp, 20)} |
| 192 | {tab.badge && <CountBadge count={count} loud={tab.badge.loud} />} |
| 193 | </BarIcon> |
| 194 | <BarLabel current={current}>{tab.label}</BarLabel> |
| 195 | </Link> |
| 196 | </li> |
| 197 | ); |
| 198 | })} |
| 199 | <li className="min-w-0"> |
| 200 | <button type="button" aria-expanded={more} aria-haspopup="dialog" onClick={() => setMore(true)} className={BAR_ITEM}> |
| 201 | <BarIcon current={more || !inTabs}> |
| 202 | <Ellipsis size={20} /> |
| 203 | </BarIcon> |
| 204 | <BarLabel current={more || !inTabs}>More</BarLabel> |
| 205 | </button> |
| 206 | </li> |
| 207 | </ul> |
| 208 | </nav> |
| 209 | <MoreSheet open={more} onOpenChange={setMore} user={user} workspace={workspace} pins={pins} onExplore={mode === "browse" ? onReselect : undefined} /> |
| 210 | </> |
| 211 | ); |
| 212 | } |
| 213 | |
| 214 | const BAR_ITEM = "group relative flex h-full w-full flex-col items-center justify-center gap-1 outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-inset"; |
| 215 | |
| 216 | /** A tab's icon, marked as the rail marks the app you are in (ui/sidebar.tsx, `size: icon`). */ |
| 217 | function BarIcon({ current, children }: { current: boolean; children: ReactNode }) { |
| 218 | return ( |
| 219 | <span |
| 220 | className={`relative flex h-7 w-11 items-center justify-center rounded-[10px] transition-colors group-active:bg-sidebar-accent/60 ${current ? "bg-sidebar-accent text-fg" : "text-muted"}`} |
| 221 | > |
| 222 | {children} |
| 223 | </span> |
| 224 | ); |
| 225 | } |
| 226 | |
| 227 | /** A tab's name, centred under its icon; a long one gives way rather than crowding its neighbours. */ |
| 228 | function BarLabel({ current, children }: { current: boolean; children: ReactNode }) { |
| 229 | return ( |
| 230 | <span className={`block w-full truncate px-0.5 text-center text-[0.6875rem] leading-none font-medium max-[380px]:text-[0.625rem] ${current ? "text-fg" : "text-faint"}`}> |
| 231 | {children} |
| 232 | </span> |
| 233 | ); |
| 234 | } |
| 235 | |
| 236 | /** A big tile in the More sheet. */ |
| 237 | function MoreTile({ to, icon, label, onClick, disabled, note }: { to?: string; icon: ReactNode; label: string; onClick?: () => void; disabled?: boolean; note?: string }) { |
| 238 | const inner = ( |
| 239 | <> |
| 240 | <span className={`flex size-11 items-center justify-center rounded-[10px] ${disabled ? "bg-raised/60 text-faint" : "bg-raised text-fg"}`}>{icon}</span> |
| 241 | <span className={`line-clamp-2 w-full text-xs leading-tight max-[380px]:text-[0.6875rem] ${disabled ? "text-faint" : "text-fg-soft"}`}>{label}</span> |
| 242 | {note && <span className="-mt-0.5 rounded-full bg-line px-1.5 text-[0.625rem] font-medium text-muted">{note}</span>} |
| 243 | </> |
| 244 | ); |
| 245 | const className = "flex min-w-0 flex-col items-center gap-1.5 rounded-md px-1 py-2.5 text-center outline-none focus-visible:ring-2 focus-visible:ring-accent active:bg-raised/60"; |
| 246 | if (to) { |
| 247 | return ( |
| 248 | <Link to={to} className={className}> |
| 249 | {inner} |
| 250 | </Link> |
| 251 | ); |
| 252 | } |
| 253 | return ( |
| 254 | <button type="button" onClick={onClick} disabled={disabled} aria-disabled={disabled} className={className}> |
| 255 | {inner} |
| 256 | </button> |
| 257 | ); |
| 258 | } |
| 259 | |
| 260 | /** |
| 261 | * More, from the bottom bar: a flat panel standing on it, with g1t's |
| 262 | * mark at its top and a grid of big tiles: all apps, |
| 263 | * your pinned apps, Artifacts, People, Workspace, Explore, and "You and |
| 264 | * help", which opens your account's sheet. Browsing beyond your |
| 265 | * workspaces, Explore opens Explore's menu (`onExplore`) rather than the |
| 266 | * page. |
| 267 | */ |
| 268 | function MoreSheet({ |
| 269 | open, |
| 270 | onOpenChange, |
| 271 | user, |
| 272 | workspace, |
| 273 | pins, |
| 274 | onExplore, |
| 275 | }: { |
| 276 | open: boolean; |
| 277 | onOpenChange: (open: boolean) => void; |
| 278 | user: User; |
| 279 | workspace: Membership; |
| 280 | pins: PinnableApp[]; |
| 281 | onExplore?: () => void; |
| 282 | }) { |
| 283 | const slug = workspace.slug; |
| 284 | const [account, setAccount] = useState(false); |
| 285 | const shown = pins.map((key) => pinnedApp(key, slug)).filter((app) => app != null); |
| 286 | return ( |
| 287 | <> |
| 288 | <Primitive.Root open={open} onOpenChange={onOpenChange}> |
| 289 | <Primitive.Portal> |
| 290 | <Primitive.Overlay className="fixed inset-0 z-50 bg-black/50 data-[state=open]:animate-fade-in data-[state=closed]:animate-fade-out md:hidden" /> |
| 291 | <Primitive.Content |
| 292 | aria-describedby={undefined} |
| 293 | onOpenAutoFocus={(event) => event.preventDefault()} |
| 294 | className="fixed inset-x-0 bottom-(--tabbar-h) z-50 max-h-[calc(100dvh-var(--tabbar-h)-3.5rem)] overflow-y-auto border-t border-line bg-rail px-3 pt-2 pb-3.5 text-fg shadow-2xl shadow-black/60 outline-none data-[state=open]:animate-pop-in data-[state=closed]:animate-pop-out md:hidden" |
| 295 | > |
| 296 | <div aria-hidden="true" className="mx-auto mt-0.5 mb-2 h-1 w-9 rounded-full bg-line-strong" /> |
| 297 | <div className="mb-2 flex items-center gap-2 px-1"> |
| 298 | <Mark tight className="h-4 w-auto" /> |
| 299 | <Primitive.Title className="text-sm font-semibold">More</Primitive.Title> |
| 300 | <span className="ml-auto truncate font-mono text-xs text-faint">{slug}</span> |
| 301 | </div> |
| 302 | <div className="grid grid-cols-4 gap-1.5"> |
| 303 | <MoreTile to={`/${slug}/-/apps`} icon={<LayoutGrid size={20} />} label="All apps" /> |
| 304 | {shown.map((app) => ( |
| 305 | <MoreTile key={app.key} to={app.to} icon={app.icon(26)} label={app.name} /> |
| 306 | ))} |
| 307 | <MoreTile to={appOf("artifacts").path(slug)} icon={appIcon("artifacts", 20)} label="Artifacts" /> |
| 308 | <MoreTile to={appOf("people").path(slug)} icon={appIcon("people", 20)} label="People" /> |
| 309 | <MoreTile to={appOf("workspace").path(slug)} icon={appIcon("workspace", 20)} label="Workspace" /> |
| 310 | {onExplore ? ( |
| 311 | <MoreTile |
| 312 | icon={<Compass size={20} />} |
| 313 | label="Explore" |
| 314 | onClick={() => { |
| 315 | onOpenChange(false); |
| 316 | onExplore(); |
| 317 | }} |
| 318 | /> |
| 319 | ) : ( |
| 320 | <MoreTile to="/explore" icon={<Compass size={20} />} label="Explore" /> |
| 321 | )} |
| 322 | <MoreTile |
| 323 | icon={<Avatar name={user.username} image={user.avatar} size={24} />} |
| 324 | label="You and help" |
| 325 | onClick={() => { |
| 326 | onOpenChange(false); |
| 327 | setAccount(true); |
| 328 | }} |
| 329 | /> |
| 330 | </div> |
| 331 | </Primitive.Content> |
| 332 | </Primitive.Portal> |
| 333 | </Primitive.Root> |
| 334 | <AccountSheet open={account} onOpenChange={setAccount} user={user} /> |
| 335 | </> |
| 336 | ); |
| 337 | } |
| 338 | /** |
| 339 | * A sheet that rises from the bottom of a phone, with a handle to drag it |
| 340 | * back down. Escape, a tap outside or a drag of more than 90px closes it. |
| 341 | */ |
| 342 | export function BottomSheet({ |
| 343 | open, |
| 344 | onOpenChange, |
| 345 | title, |
| 346 | children, |
| 347 | }: { |
| 348 | open: boolean; |
| 349 | onOpenChange: (open: boolean) => void; |
| 350 | title: string; |
| 351 | children: ReactNode; |
| 352 | }) { |
| 353 | const [drag, setDrag] = useState(0); |
| 354 | const from = useRef<number | null>(null); |
| 355 | useEffect(() => { |
| 356 | if (!open) setDrag(0); |
| 357 | }, [open]); |
| 358 | const handlers = { |
| 359 | onPointerDown: (event: React.PointerEvent) => { |
| 360 | from.current = event.clientY; |
| 361 | (event.currentTarget as HTMLElement).setPointerCapture(event.pointerId); |
| 362 | }, |
| 363 | onPointerMove: (event: React.PointerEvent) => { |
| 364 | if (from.current == null) return; |
| 365 | setDrag(Math.max(0, event.clientY - from.current)); |
| 366 | }, |
| 367 | onPointerUp: () => { |
| 368 | if (drag > 90) onOpenChange(false); |
| 369 | else setDrag(0); |
| 370 | from.current = null; |
| 371 | }, |
| 372 | }; |
| 373 | return ( |
| 374 | <Primitive.Root open={open} onOpenChange={onOpenChange}> |
| 375 | <Primitive.Portal> |
| 376 | <Primitive.Overlay className="fixed inset-0 z-50 bg-black/60 data-[state=open]:animate-fade-in data-[state=closed]:animate-fade-out" /> |
| 377 | <Primitive.Content |
| 378 | aria-describedby={undefined} |
| 379 | onOpenAutoFocus={(event) => event.preventDefault()} |
| 380 | style={{ transform: drag ? `translateY(${drag}px)` : undefined, transition: from.current == null ? "transform 0.2s ease-out" : "none" }} |
| 381 | className="fixed inset-x-0 bottom-0 z-50 flex max-h-[88dvh] flex-col border-t border-line bg-surface pb-[env(safe-area-inset-bottom)] text-fg shadow-2xl shadow-black/60 outline-none data-[state=open]:animate-[sheet-in-bottom_0.24s_cubic-bezier(0.16,1,0.3,1)]" |
| 382 | > |
| 383 | <div {...handlers} className="flex shrink-0 cursor-grab touch-none justify-center pt-2.5 pb-2" aria-hidden="true"> |
| 384 | <span className="h-1.5 w-10 rounded-full bg-line-strong" /> |
| 385 | </div> |
| 386 | <Primitive.Title className="sr-only">{title}</Primitive.Title> |
| 387 | <div className="min-h-0 grow overflow-y-auto overscroll-contain px-3 pb-3">{children}</div> |
| 388 | </Primitive.Content> |
| 389 | </Primitive.Portal> |
| 390 | </Primitive.Root> |
| 391 | ); |
| 392 | } |
| 393 | |
| 394 | /** A row in a bottom sheet: 48px tall, an icon, words, and what sits at its end. */ |
| 395 | export function SheetRow({ to, href, icon, children, end, onClick }: { to?: string; href?: string; icon: ReactNode; children: ReactNode; end?: ReactNode; onClick?: () => void }) { |
| 396 | const className = "flex h-12 w-full items-center gap-3 rounded-md px-3 text-left text-[0.9375rem] text-fg-soft transition-colors active:bg-raised"; |
| 397 | const inner = ( |
| 398 | <> |
| 399 | <span className="flex w-6 shrink-0 justify-center text-muted [&_svg]:size-5">{icon}</span> |
| 400 | <span className="min-w-0 grow truncate">{children}</span> |
| 401 | {end} |
| 402 | </> |
| 403 | ); |
| 404 | if (to) { |
| 405 | return ( |
| 406 | <Link to={to} className={className} onClick={onClick}> |
| 407 | {inner} |
| 408 | </Link> |
| 409 | ); |
| 410 | } |
| 411 | if (href) { |
| 412 | return ( |
| 413 | <a href={href} className={className}> |
| 414 | {inner} |
| 415 | </a> |
| 416 | ); |
| 417 | } |
| 418 | return ( |
| 419 | <button type="button" onClick={onClick} className={className}> |
| 420 | {inner} |
| 421 | </button> |
| 422 | ); |
| 423 | } |
| 424 | |
| 425 | function SheetGroup({ title, children }: { title: string; children: ReactNode }) { |
| 426 | return ( |
| 427 | <section className="mt-2 border-t border-line pt-2"> |
| 428 | <h3 className="px-3 pt-1 pb-1 text-xs font-medium text-faint">{title}</h3> |
| 429 | {children} |
| 430 | </section> |
| 431 | ); |
| 432 | } |
| 433 | |
| 434 | /** Your status, away and pausing notifications, as the account menu has them on a computer. */ |
| 435 | function OwnPresenceRows({ onEdit }: { onEdit: () => void }) { |
| 436 | const me = useOwnPresence(); |
| 437 | const now = Date.now(); |
| 438 | const status = liveStatus(me?.status, now); |
| 439 | const paused = dndOn(me, now); |
| 440 | const away = me?.away_manual === true; |
| 441 | return ( |
| 442 | <> |
| 443 | <SheetRow icon={status?.emoji ? <span className="text-lg leading-none">{status.emoji}</span> : <Smile />} onClick={onEdit}> |
| 444 | {status ? status.text || "Status set" : "Set a status"} |
| 445 | </SheetRow> |
| 446 | <SheetRow icon={away ? <Sun /> : <Moon />} onClick={() => void setPresence({ away: !away }, { away_manual: !away, presence: away ? "active" : "away" })}> |
| 447 | {away ? "Set yourself active" : "Set yourself away"} |
| 448 | </SheetRow> |
| 449 | {paused ? ( |
| 450 | <SheetRow |
| 451 | icon={<BellRing />} |
| 452 | end={me?.dnd_until ? <span className="text-xs text-faint">{untilLabel(me.dnd_until, new Date(now))}</span> : null} |
| 453 | onClick={() => void setPresence({ dnd_until: null }, { dnd_until: null })} |
| 454 | > |
| 455 | Resume notifications |
| 456 | </SheetRow> |
| 457 | ) : ( |
| 458 | <SheetRow |
| 459 | icon={<BellOff />} |
| 460 | onClick={() => { |
| 461 | const until = pauseUntil("1h", new Date()); |
| 462 | void setPresence({ dnd_until: until }, { dnd_until: until }); |
| 463 | }} |
| 464 | > |
| 465 | Pause notifications for 1 hour |
| 466 | </SheetRow> |
| 467 | )} |
| 468 | </> |
| 469 | ); |
| 470 | } |
| 471 | |
| 472 | /** |
| 473 | * You and help, on a phone: your status, your profile and settings, the |
| 474 | * documentation, support, status and the keyboard's shortcuts, and signing |
| 475 | * out, as the account menu has them on a computer. |
| 476 | */ |
| 477 | export function AccountSheet({ open, onOpenChange, user }: { open: boolean; onOpenChange: (open: boolean) => void; user: User }) { |
| 478 | const submit = useSubmit(); |
| 479 | const [editing, setEditing] = useState(false); |
| 480 | const [keys, setKeys] = useState(false); |
| 481 | return ( |
| 482 | <> |
| 483 | <BottomSheet open={open} onOpenChange={onOpenChange} title="You and help"> |
| 484 | <div className="flex items-center gap-3 px-3 pt-1 pb-3"> |
| 485 | <Avatar name={user.username} image={user.avatar} size={44} /> |
| 486 | <div className="min-w-0"> |
| 487 | <p className="truncate text-base font-semibold">@{shownUsername(user)}</p> |
| 488 | </div> |
| 489 | </div> |
| 490 | <SheetGroup title="You"> |
| 491 | <OwnPresenceRows |
| 492 | onEdit={() => { |
| 493 | onOpenChange(false); |
| 494 | setEditing(true); |
| 495 | }} |
| 496 | /> |
| 497 | <SheetRow to={`/u/${user.username}`} icon={<CircleUserRound />}> |
| 498 | Your profile |
| 499 | </SheetRow> |
| 500 | <SheetRow to="/settings" icon={<Settings />}> |
| 501 | Your settings |
| 502 | </SheetRow> |
| 503 | </SheetGroup> |
| 504 | <SheetGroup title="Appearance"> |
| 505 | <ThemeSwitch size="large" className="mx-3 mt-1 mb-1.5" /> |
| 506 | </SheetGroup> |
| 507 | <SheetGroup title="Help"> |
| 508 | <SheetRow href="https://docs.g1t.sh/" icon={<BookOpen />}> |
| 509 | Documentation |
| 510 | </SheetRow> |
| 511 | <SheetRow to="/support" icon={<LifeBuoy />}> |
| 512 | Support |
| 513 | </SheetRow> |
| 514 | <SheetRow href={STATUS_URL} icon={<Activity />}> |
| 515 | Status |
| 516 | </SheetRow> |
| 517 | <SheetRow |
| 518 | icon={<Keyboard />} |
| 519 | onClick={() => { |
| 520 | onOpenChange(false); |
| 521 | setKeys(true); |
| 522 | }} |
| 523 | > |
| 524 | Keyboard shortcuts |
| 525 | </SheetRow> |
| 526 | </SheetGroup> |
| 527 | <SheetGroup title="Account"> |
| 528 | <SheetRow icon={<LogOut />} onClick={() => submit(null, { method: "post", action: "/logout" })}> |
| 529 | Sign out |
| 530 | </SheetRow> |
| 531 | </SheetGroup> |
| 532 | </BottomSheet> |
| 533 | <StatusDialog open={editing} onOpenChange={setEditing} /> |
| 534 | <ShortcutsDialog open={keys} onOpenChange={setKeys} /> |
| 535 | </> |
| 536 | ); |
| 537 | } |
| 538 | |
| 539 | /** Which project page a roadmap page (`soon/<key>`) sits under, by its section. */ |
| 540 | const SOON_UNDER: Partial<Record<RoadmapItem["section"], ProjectPage>> = { |
| 541 | Code: "code", |
| 542 | Issues: "issues", |
| 543 | Deployments: "deployments", |
| 544 | Observability: "observability", |
| 545 | Security: "security", |
| 546 | Insights: "insights", |
| 547 | }; |
| 548 | const SOON_PAGES: Record<string, ProjectPage> = Object.fromEntries( |
| 549 | ROADMAP.flatMap((item) => (SOON_UNDER[item.section] ? [[item.key, SOON_UNDER[item.section]!] as const] : [])), |
| 550 | ); |
| 551 | |
| 552 | /** |
| 553 | * A project's pages along the bottom of its header: the sidebar's own list |
| 554 | * (lib/chrome.ts) as a row of tabs that scrolls sideways on a phone, the |
| 555 | * current one underlined on the header's border and kept in view, so Issues |
| 556 | * and Pull requests are one tap away. From 768px a member's sidebar has |
| 557 | * them; a visitor, who has none, always sees the row. |
| 558 | */ |
| 559 | export function ProjectStrip({ |
| 560 | base, |
| 561 | member, |
| 562 | can, |
| 563 | settings, |
| 564 | counts, |
| 565 | always = false, |
| 566 | }: { |
| 567 | /** `/<namespace>/<name>`. */ |
| 568 | base: string; |
| 569 | member: boolean; |
| 570 | can?: Partial<Abilities>; |
| 571 | /** Whether they see its settings (lib/access.ts `seesSettings`), as the sidebar decides. */ |
| 572 | settings?: boolean; |
| 573 | counts?: { issues: number; pulls: number }; |
| 574 | /** On a computer too: for a visitor, who has no sidebar to list them. */ |
| 575 | always?: boolean; |
| 576 | }) { |
| 577 | const { pathname } = useLocation(); |
| 578 | const rest = pathname.toLowerCase().startsWith(base.toLowerCase()) ? pathname.slice(base.length) : ""; |
| 579 | const at = projectPageAt(rest, SOON_PAGES); |
| 580 | const pages: (ProjectPage | "overview")[] = ["overview", ...projectPages(member, can).filter((page) => page !== "observability" && page !== "settings"), |
| 581 | ...(settings ?? member ? (["settings"] as const) : []), |
| 582 | ]; |
| 583 | return ( |
| 584 | <NavTabs label="Project" className={always ? undefined : "md:hidden"}> |
| 585 | {pages.map((page) => { |
| 586 | const link = page === "overview" ? { label: "Overview", path: "" } : PROJECT_PAGE_LINKS[page]; |
| 587 | return ( |
| 588 | <NavTab |
| 589 | key={page} |
| 590 | to={link.path ? `${base}/${link.path}` : base} |
| 591 | current={at === page} |
| 592 | count={page === "issues" ? counts?.issues : page === "pulls" ? counts?.pulls : undefined} |
| 593 | > |
| 594 | {link.label} |
| 595 | </NavTab> |
| 596 | ); |
| 597 | })} |
| 598 | </NavTabs> |
| 599 | ); |
| 600 | } |