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