Skip to content
Sign up

flagon-io/g1t

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