Skip to content
Sign up

flagon-io/g1t

public
0
564 linesCodeBlameRaw
1import { BellOff, Bot, ChevronDown, Compass, Hash, Lock, Pin, PinOff, Plus, Search } from "lucide-react";
2import { ContextMenu } from "radix-ui";
3import { type ReactNode, useEffect, useState } from "react";
4import { Link, NavLink, useFetcher, useLocation, useNavigate } from "react-router";
5
6import type { ChatSidebarEntry, WorkspaceAgent } from "@g1t/contracts";
7
8import { conversationCache } from "./conversation-cache";
9import { CreateChannelButton, NewMessageButton, useChatData, useChatSend, useChatSidebar } from "./actions";
10import { DndMenu } from "./dnd-menu";
11import { MemberAvatar, StatusDot, statusLabel } from "./marks";
12import { AgentAvatar } from "../agent-avatar";
13import { PersonStatusEmoji } from "../presence";
14import { isOrchestrator } from "../orchestrator";
15import { Button } from "../ui/button";
16import { Hint } from "../ui/hint";
17import { Skeleton } from "../ui/skeleton";
18import { type ChatFilter, agentDmOf, channelPath, filterEntries, sections } from "../../lib/chat";
19import { feedConnected } from "../../lib/notify-client";
20import { FALLBACK_REFRESH_MS } from "../../lib/notify-store";
21import { setMutedConversations } from "../../lib/sound-events";
22
23/** How often the sidebar asks again while the tab is shown and the feed socket is down. */
24const REFRESH_MS = FALLBACK_REFRESH_MS;
25
26const ROW =
27 "group/row flex h-9 items-center gap-2 rounded-md pr-1.5 pl-2 text-[0.8125rem] transition-colors max-md:h-11 max-md:text-[0.9375rem] max-md:active:bg-raised";
28
29/** Unread on a row: lavender for a mention, quiet for the rest. */
30function Count({ entry }: { entry: ChatSidebarEntry | undefined }) {
31 if (!entry || entry.muted) return null;
32 const count = entry.mentions > 0 ? entry.mentions : entry.unread;
33 if (count <= 0) return null;
34 return (
35 <span
36 className={`min-w-5 shrink-0 rounded-full group-hover/row:invisible px-1.5 text-center text-[0.6875rem] leading-[1.125rem] font-semibold tabular-nums ${
37 entry.mentions > 0 ? "bg-accent text-bg" : "bg-line-strong text-fg"
38 }`}
39 >
40 {count}
41 </span>
42 );
43}
44
45/**
46 * Chat mode's sidebar: what you pinned, the channels (and a way to browse
47 * the rest), then direct messages, the latest first, with people and
48 * agents alike. Last, the agents you have not talked to yet, g1t first:
49 * one click opens a conversation with any of them. Sections fold, and
50 * stay folded on this device. All, Unread and Mentions filter every
51 * section. It refreshes itself while the tab is shown, so unread counts
52 * move without a reload.
53 */
54export function ChatSidebar({ slug, heading = true }: { slug: string; heading?: boolean }) {
55 const data = useChatData();
56 const { sidebar, refresh } = useChatSidebar();
57 const send = useChatSend(slug);
58 const [filter, setFilter] = useState<ChatFilter>("all");
59 const [query, setQuery] = useState("");
60 const [opening, setOpening] = useState<string | null>(null);
61 const navigate = useNavigate();
62 const { pathname } = useLocation();
63
64 useEffect(() => {
65 if (!data) return;
66 // Notify: counts arrive live over the feed socket; this asks again only while it is down.
67 const tick = () => {
68 if (document.visibilityState === "visible" && !feedConnected()) refresh();
69 };
70 const timer = setInterval(tick, REFRESH_MS);
71 document.addEventListener("visibilitychange", tick);
72 return () => {
73 clearInterval(timer);
74 document.removeEventListener("visibilitychange", tick);
75 };
76 }, [data, refresh]);
77
78 // Pins show at once and go back if the service refuses.
79 const [pins, setPins] = useState<Map<string, boolean>>(new Map());
80 useEffect(() => setPins(new Map()), [sidebar]);
81 // Sounds leave muted conversations alone (lib/sound-events.ts).
82 useEffect(() => {
83 if (sidebar) setMutedConversations(sidebar.entries.filter((e) => e.muted).map((e) => e.channel.id));
84 }, [sidebar]);
85 const entries = (sidebar?.entries ?? []).map((e) => (pins.has(e.channel.id) ? { ...e, starred: pins.get(e.channel.id)! } : e));
86 const shown = filterEntries(entries, filter, query);
87 const { pinned, channels, dms } = sections(shown);
88 const { agentDms } = sections(entries);
89 const loading = !data;
90 const owner = data?.role === "owner";
91
92 // The agents you have not talked to yet, g1t first: one click opens a
93 // conversation, which then lists under Direct messages like anyone's.
94 // Nothing of theirs is unread, so Unread and Mentions leave them out.
95 const q = query.trim().toLowerCase().replace(/^@/, "");
96 const agents =
97 filter !== "all"
98 ? []
99 : [...(data?.agents ?? [])]
100 .filter((agent) => !agentDms.has(agent.id))
101 .sort((a, b) => Number(isOrchestrator(b)) - Number(isOrchestrator(a)) || a.display_name.localeCompare(b.display_name))
102 .filter((agent) => !q || agent.handle.includes(q) || agent.display_name.toLowerCase().includes(q) || agent.role.toLowerCase().includes(q));
103
104 // Folded sections, remembered per workspace on this device. A folded
105 // section still shows what is unread and the conversation open now.
106 const [folded, setFolded] = useState<ReadonlySet<string>>(new Set());
107 useEffect(() => setFolded(readFolded(slug)), [slug]);
108 const fold = (id: string) =>
109 setFolded((now) => {
110 const next = new Set(now);
111 if (!next.delete(id)) next.add(id);
112 writeFolded(slug, next);
113 return next;
114 });
115 const keepShown = (entry: ChatSidebarEntry) => {
116 const to = channelPath(slug, entry.channel);
117 return pathname === to || pathname.startsWith(`${to}/`) || (!entry.muted && (entry.unread > 0 || entry.mentions > 0));
118 };
119
120 /** The direct message with an agent: opened, or made on first use. */
121 const openAgent = async (agent: WorkspaceAgent, pin = false) => {
122 const had = agentDms.get(agent.id);
123 if (had && !pin) return navigate(channelPath(slug, had.channel));
124 setOpening(agent.id);
125 const opened = had ? { ok: true as const, value: { channel: had.channel, to: channelPath(slug, had.channel) } } : await send<{ channel: ChatSidebarEntry["channel"]; to: string }>({ intent: "dm", members: [`agent:${agent.id}`] });
126 if (opened.ok && pin) await send({ intent: "preferences", channel_id: opened.value.channel.id, starred: !had?.starred });
127 setOpening(null);
128 if (opened.ok && !pin) navigate(opened.value.to);
129 if (pin) refresh();
130 };
131 const togglePin = async (entry: ChatSidebarEntry) => {
132 const next = !entry.starred;
133 setPins((now) => new Map(now).set(entry.channel.id, next));
134 const done = await send({ intent: "preferences", channel_id: entry.channel.id, starred: next });
135 if (!done.ok)
136 setPins((now) => {
137 const back = new Map(now);
138 back.delete(entry.channel.id);
139 return back;
140 });
141 };
142
143 const conversation = (entry: ChatSidebarEntry) => (
144 <ConversationRow key={entry.channel.id} entry={entry} slug={slug} pathname={pathname} agents={data?.agents ?? []} onPin={() => void togglePin(entry)} />
145 );
146
147 return (
148 // The colour behind it, for the dots cut out of people's avatars.
149 <div className="flex h-full flex-col [--chat-sidebar-bg:var(--color-sidebar)]">
150 {heading && (
151 <div className="flex h-9 shrink-0 items-center justify-between pr-1 pl-3">
152 <h2 className="text-[0.6875rem] font-medium tracking-wide text-faint uppercase">Chat</h2>
153 <div className="flex items-center gap-0.5">
154 <DndMenu />
155 <NewMessageButton slug={slug} />
156 </div>
157 </div>
158 )}
159 <div className="space-y-2.5 px-2.5 pt-3">
160 <div className="flex items-center gap-2">
161 <label className="flex h-8 min-w-0 grow items-center gap-2 rounded-md bg-surface px-2.5 text-[0.8125rem] ring-1 ring-line transition-shadow focus-within:ring-accent-dim/70">
162 <Search size={14} className="shrink-0 text-faint" />
163 <input
164 value={query}
165 onChange={(event) => setQuery(event.target.value)}
166 onKeyDown={(event) => {
167 if (event.key === "Enter") {
168 const first = [...pinned, ...channels, ...dms][0];
169 if (first) {
170 navigate(channelPath(slug, first.channel));
171 setQuery("");
172 } else if (agents[0]) void openAgent(agents[0]);
173 } else if (event.key === "Escape") setQuery("");
174 }}
175 placeholder="Jump to channel or person"
176 aria-label="Jump to channel or person"
177 autoComplete="off"
178 data-1p-ignore
179 className="min-w-0 grow bg-transparent text-fg outline-none placeholder:text-faint"
180 />
181 </label>
182 {/* A phone has no heading row: Do not disturb sits by the search box instead. */}
183 {!heading && <DndMenu className="size-8 max-md:size-11" />}
184 </div>
185 <div role="radiogroup" aria-label="Show" className="grid grid-cols-3 rounded-md bg-surface p-0.5 ring-1 ring-line">
186 {(["all", "unread", "mentions"] as const).map((key) => (
187 <button
188 key={key}
189 type="button"
190 role="radio"
191 aria-checked={filter === key}
192 onClick={() => setFilter(key)}
193 className={`h-6 rounded-[5px] text-xs font-medium capitalize transition-colors ${
194 filter === key ? "bg-raised text-fg shadow-sm ring-1 ring-line-strong" : "text-muted hover:text-fg"
195 }`}
196 >
197 {key}
198 </button>
199 ))}
200 </div>
201 </div>
202 {/* A phone's list (no heading): room at the end so the compose button never covers the last row. */}
203 <nav
204 aria-label="Conversations"
205 className={`min-h-0 grow overflow-y-auto px-2.5 pt-3 [scrollbar-width:thin] ${heading ? "pb-4" : "pb-[calc(5.5rem+env(safe-area-inset-bottom))]"}`}
206 >
207 {loading ? (
208 <SidebarSkeleton />
209 ) : !sidebar ? (
210 <p className="px-2 py-3 text-xs leading-relaxed text-faint">Chat didn&apos;t answer. Your conversations will show here once it does.</p>
211 ) : (
212 <>
213 {pinned.length > 0 && (
214 <Section id="pinned" title="Pinned" folded={folded} onFold={fold} keep={pinned.filter(keepShown).map(conversation)}>
215 {pinned.map(conversation)}
216 </Section>
217 )}
218 <Section
219 id="channels"
220 title="Channels"
221 folded={folded}
222 onFold={fold}
223 action={<CreateChannelButton slug={slug} />}
224 keep={channels.filter(keepShown).map(conversation)}
225 >
226 {channels.map(conversation)}
227 {channels.length === 0 && filter === "all" && !query && <Empty>No channels yet.</Empty>}
228 {filter === "all" && !query && (
229 <ExtraRow to={`/${slug}/-/chat/browse`} icon={<Compass size={15} />} count={sidebar.browsable > 0 ? sidebar.browsable : undefined} countLabel="to join">
230 Browse channels
231 </ExtraRow>
232 )}
233 </Section>
234 <Section
235 id="dms"
236 title="Direct messages"
237 folded={folded}
238 onFold={fold}
239 action={<NewMessageButton slug={slug} />}
240 keep={dms.filter(keepShown).map(conversation)}
241 >
242 {dms.map(conversation)}
243 {dms.length === 0 && filter === "all" && !query && <Empty>Message a teammate or an agent.</Empty>}
244 </Section>
245 {(agents.length > 0 || (filter === "all" && !query)) && (
246 <Section
247 id="agents"
248 title="Agents"
249 folded={folded}
250 onFold={fold}
251 action={
252 owner ? (
253 <Hint label="New agent">
254 <Link
255 to={`/${slug}/-/agents/new`}
256 aria-label="New agent"
257 className="flex size-7 items-center justify-center rounded-md text-faint transition-colors hover:bg-raised hover:text-fg"
258 >
259 <Plus size={14} />
260 </Link>
261 </Hint>
262 ) : null
263 }
264 >
265 {agents.map((agent) => (
266 <AgentRow
267 key={agent.id}
268 agent={agent}
269 busy={opening === agent.id}
270 onOpen={() => void openAgent(agent)}
271 onPin={() => void openAgent(agent, true)}
272 />
273 ))}
274 {filter === "all" && !query && (
275 <ExtraRow to={`/${slug}/-/agents`} icon={<Bot size={15} />}>
276 {(data?.agents ?? []).length === 0 ? (owner ? "Hire an agent" : "No agents yet") : "All agents"}
277 </ExtraRow>
278 )}
279 </Section>
280 )}
281 {shown.length === 0 && agents.length === 0 && (filter !== "all" || query) && (
282 <p className="px-2 py-2 text-xs text-faint">{query ? "Nothing matches." : filter === "unread" ? "You're all caught up." : "No mentions."}</p>
283 )}
284 </>
285 )}
286 </nav>
287 </div>
288 );
289}
290
291const FOLDED_KEY = (slug: string) => `g1t:chat-folded:${slug}`;
292
293/** The sections folded in this workspace, as last left; none if storage is not there. */
294function readFolded(slug: string): ReadonlySet<string> {
295 try {
296 const saved = JSON.parse(localStorage.getItem(FOLDED_KEY(slug)) ?? "[]");
297 return new Set(Array.isArray(saved) ? saved.filter((id): id is string => typeof id === "string") : []);
298 } catch {
299 return new Set();
300 }
301}
302
303function writeFolded(slug: string, folded: ReadonlySet<string>) {
304 try {
305 if (folded.size === 0) localStorage.removeItem(FOLDED_KEY(slug));
306 else localStorage.setItem(FOLDED_KEY(slug), JSON.stringify([...folded]));
307 } catch {
308 // Private windows and blocked storage: folding still works until a reload.
309 }
310}
311
312/**
313 * A titled part of the sidebar that folds away. Folded, it keeps `keep`
314 * showing: the unread conversations and the open one.
315 */
316function Section({
317 id,
318 title,
319 folded,
320 onFold,
321 action,
322 keep,
323 children,
324}: {
325 id: string;
326 title: string;
327 folded: ReadonlySet<string>;
328 onFold: (id: string) => void;
329 action?: ReactNode;
330 keep?: ReactNode[];
331 children: ReactNode;
332}) {
333 const open = !folded.has(id);
334 const list = `chat-section-${id}`;
335 return (
336 <section className="mb-3">
337 <div className="group/head flex h-7 items-center justify-between pr-0.5 pl-1">
338 <button
339 type="button"
340 onClick={() => onFold(id)}
341 aria-expanded={open}
342 aria-controls={list}
343 className="flex min-w-0 grow items-center gap-1 rounded px-1 py-1 text-left text-[0.6875rem] font-medium tracking-wide text-faint uppercase transition-colors hover:text-muted focus-visible:ring-2 focus-visible:ring-accent focus-visible:outline-none max-md:text-[0.8125rem]"
344 >
345 <ChevronDown size={12} className={`shrink-0 transition-transform ${open ? "" : "-rotate-90"}`} />
346 {title}
347 </button>
348 <span className="opacity-70 transition-opacity group-hover/head:opacity-100 focus-within:opacity-100 [@media(hover:none)]:opacity-100">{action}</span>
349 </div>
350 {(open || (keep && keep.length > 0)) && (
351 <ul id={list} className="space-y-px">
352 {open ? children : keep}
353 </ul>
354 )}
355 </section>
356 );
357}
358
359/** A quieter row at the end of a section: somewhere to go rather than a conversation. */
360function ExtraRow({ to, icon, count, countLabel, children }: { to: string; icon: ReactNode; count?: number; countLabel?: string; children: ReactNode }) {
361 return (
362 <li>
363 <NavLink
364 to={to}
365 end
366 className={({ isActive }) => `${ROW} ${isActive ? "bg-sidebar-accent text-fg" : "text-faint hover:bg-sidebar-accent/60 hover:text-muted"}`}
367 >
368 <span className="flex w-4.5 shrink-0 justify-center">{icon}</span>
369 <span className="min-w-0 grow truncate">{children}</span>
370 {count != null && (
371 <span className="shrink-0 text-xs tabular-nums">
372 {count}
373 {countLabel && <span className="sr-only"> {countLabel}</span>}
374 </span>
375 )}
376 </NavLink>
377 </li>
378 );
379}
380
381function Empty({ children }: { children: ReactNode }) {
382 return <li className="px-2 py-1 text-xs text-faint">{children}</li>;
383}
384
385/** Pin or unpin, on hover or focus; the same as the context menu's first item. */
386function PinButton({ pinned, onPin, label }: { pinned: boolean; onPin: () => void; label: string }) {
387 return (
388 <Hint label={pinned ? "Unpin" : "Pin to the top"}>
389 <Button
390 type="button"
391 aria-label={`${pinned ? "Unpin" : "Pin"} ${label}`}
392 onClick={(event) => {
393 event.preventDefault();
394 event.stopPropagation();
395 onPin();
396 }}
397 variant="secondary" size="icon"
398 className="absolute top-1/2 right-1 hidden size-6 -translate-y-1/2 rounded text-faint group-hover/row:flex group-focus-within/row:flex hover:text-fg [@media(hover:none)]:hidden"
399 >
400 {pinned ? <PinOff size={13} /> : <Pin size={13} />}
401 </Button>
402 </Hint>
403 );
404}
405
406/** Right-click on a row: pin it, or open it. */
407function RowMenu({ pinned, onPin, to, children }: { pinned: boolean; onPin: () => void; to?: string; children: ReactNode }) {
408 const navigate = useNavigate();
409 const item =
410 "flex cursor-default items-center gap-2 rounded-md px-2 py-1.5 text-[0.8125rem] text-fg/90 outline-none select-none data-highlighted:bg-line data-highlighted:text-fg [&_svg]:size-4 [&_svg]:text-muted";
411 return (
412 <ContextMenu.Root>
413 <ContextMenu.Trigger asChild>{children}</ContextMenu.Trigger>
414 <ContextMenu.Portal>
415 <ContextMenu.Content className="z-50 min-w-44 rounded-lg border border-line-strong bg-raised p-1 shadow-xl shadow-black/40 data-[state=open]:animate-pop-in">
416 <ContextMenu.Item className={item} onSelect={onPin}>
417 {pinned ? <PinOff /> : <Pin />}
418 {pinned ? "Unpin" : "Pin to the top"}
419 </ContextMenu.Item>
420 {to && (
421 <ContextMenu.Item className={item} onSelect={() => navigate(to)}>
422 <Hash />
423 Open
424 </ContextMenu.Item>
425 )}
426 </ContextMenu.Content>
427 </ContextMenu.Portal>
428 </ContextMenu.Root>
429 );
430}
431
432/**
433 * Reads a conversation ahead, on hover, focus or the start of a touch, so
434 * opening it draws at once (its route's `clientLoader` keeps it).
435 */
436function usePrefetchConversation(to: string) {
437 const fetcher = useFetcher();
438 const load = () => {
439 if (fetcher.state === "idle" && fetcher.data === undefined && !conversationCache.has(to)) fetcher.load(to);
440 };
441 return { onPointerEnter: load, onFocus: load, onTouchStart: load };
442}
443
444/** One channel or direct message: its mark, its name, its unread count, and a pin. */
445function ConversationRow({
446 entry,
447 slug,
448 pathname,
449 agents,
450 onPin,
451}: {
452 entry: ChatSidebarEntry;
453 slug: string;
454 pathname: string;
455 agents: WorkspaceAgent[];
456 onPin: () => void;
457}) {
458 const to = channelPath(slug, entry.channel);
459 const current = pathname === to || pathname.startsWith(`${to}/`);
460 const prefetch = usePrefetchConversation(to);
461 const unread = !entry.muted && (entry.unread > 0 || entry.mentions > 0);
462 const agentId = agentDmOf(entry);
463 const agent = agentId ? agents.find((a) => a.id === agentId) : null;
464 const other = entry.others[0];
465 const g1t = agent ? isOrchestrator(agent) : false;
466 const icon = agent ? (
467 <AgentFace agent={agent} g1t={g1t} />
468 ) : entry.channel.kind === "dm" && other ? (
469 // One person: their dot, cut out of the sidebar behind it.
470 <MemberAvatar member={other} size={18} presence={entry.others.length === 1} ring="var(--chat-sidebar-bg)" />
471 ) : entry.channel.private ? (
472 <Lock size={14} />
473 ) : (
474 <Hash size={15} />
475 );
476 return (
477 <li className="group/row relative">
478 <RowMenu pinned={entry.starred} onPin={onPin} to={to}>
479 <NavLink
480 to={to}
481 {...prefetch}
482 aria-current={current ? "page" : undefined}
483 className={`${ROW} ${
484 current ? "bg-sidebar-accent text-fg" : unread ? "text-fg hover:bg-sidebar-accent/60" : entry.muted ? "text-faint hover:bg-sidebar-accent/60 hover:text-muted" : "text-muted hover:bg-sidebar-accent/60 hover:text-fg"
485 }`}
486 >
487 <span className={`flex w-4.5 shrink-0 justify-center ${current || unread ? "text-muted" : "text-faint"}`}>{icon}</span>
488 <span className={`min-w-0 grow truncate ${unread ? "font-semibold" : current ? "font-medium" : ""}`}>
489 {agent ? agent.display_name : entry.title}
490 {agent && <span className="ml-1.5 text-[0.6875rem] font-normal text-faint">{g1t ? "orchestrator" : agent.title}</span>}
491 {entry.channel.kind === "dm" && other?.kind === "user" && entry.others.length === 1 && (
492 <PersonStatusEmoji person={{ id: other.id, username: other.name }} size={13} className="ml-1.5 align-[-2px]" inert />
493 )}
494 </span>
495 {entry.muted && <BellOff size={12} className="shrink-0 text-faint" aria-label="Muted" />}
496 <Count entry={entry} />
497 </NavLink>
498 </RowMenu>
499 <PinButton pinned={entry.starred} onPin={onPin} label={entry.title} />
500 </li>
501 );
502}
503
504/** An agent's face in a row; any but g1t carries its status, cut out of the sidebar behind it. */
505function AgentFace({ agent, g1t }: { agent: WorkspaceAgent; g1t: boolean }) {
506 return (
507 <span className="relative inline-flex shrink-0">
508 <AgentAvatar agent={{ ...agent, builtin: g1t }} size={18} />
509 {!g1t && agent.status !== "idle" && (
510 <span className="absolute -right-1 -bottom-1 flex rounded-full p-[2px]" style={{ background: "var(--chat-sidebar-bg)" }}>
511 <StatusDot status={agent.status} className="size-[7px] shadow-none" />
512 </span>
513 )}
514 </span>
515 );
516}
517
518/** An agent you have not talked to yet: its face, name and title. Opening it starts your conversation. */
519function AgentRow({ agent, busy, onOpen, onPin }: { agent: WorkspaceAgent; busy: boolean; onOpen: () => void; onPin: () => void }) {
520 const g1t = isOrchestrator(agent);
521 return (
522 <li className="group/row relative">
523 <RowMenu pinned={false} onPin={onPin}>
524 <button
525 type="button"
526 onClick={onOpen}
527 aria-busy={busy || undefined}
528 aria-label={`Message ${agent.display_name}, ${g1t ? "orchestrator" : agent.title}${g1t ? "" : `, ${statusLabel(agent.status).toLowerCase()}`}`}
529 className={`${ROW} w-full text-left text-muted hover:bg-sidebar-accent/60 hover:text-fg ${busy ? "opacity-60" : ""}`}
530 >
531 <span className="flex w-4.5 shrink-0 justify-center">
532 <AgentFace agent={agent} g1t={g1t} />
533 </span>
534 <span className="min-w-0 grow truncate">
535 {agent.display_name}
536 <span className="ml-1.5 text-[0.6875rem] text-faint">{g1t ? "orchestrator" : agent.title}</span>
537 </span>
538 </button>
539 </RowMenu>
540 <PinButton pinned={false} onPin={onPin} label={agent.display_name} />
541 </li>
542 );
543}
544
545function SidebarSkeleton() {
546 return (
547 <div className="space-y-2 px-2 pt-1" aria-busy="true">
548 <Skeleton className="h-3 w-16" />
549 {[70, 52, 84, 60].map((w) => (
550 <div key={w} className="flex h-6 items-center gap-2">
551 <Skeleton className="size-4 rounded" />
552 <Skeleton className="h-3" style={{ width: `${w}%` }} />
553 </div>
554 ))}
555 <Skeleton className="mt-4 h-3 w-24" />
556 {[64, 48, 72].map((w) => (
557 <div key={w} className="flex h-6 items-center gap-2">
558 <Skeleton className="size-4 rounded-full" />
559 <Skeleton className="h-3" style={{ width: `${w}%` }} />
560 </div>
561 ))}
562 </div>
563 );
564}