"use client"; import { useEffect, useRef, useState } from "react"; import { api, ApiError, type ChannelAbout, type ChannelNotifPref } from "../lib/api"; import { UserAvatar } from "./UserAvatar"; import { IconBellOff, IconCheck, IconChevron, IconLock, IconPin, IconPlus, IconSliders, IconTrash, IconUsers, IconX, } from "./icons"; export interface RoomAboutMember { user: { id: string | number; name: string; email: string; avatarUrl?: string | null }; } /** The apps a room can link, and how each renders in the strip. Mirrors * IntegrationProvider in @slackwsh/contracts — the server rejects anything * outside this list, so the two must stay in step. */ const PROVIDERS: Array<{ id: string; name: string; short: string; tone: string }> = [ { id: "salesforce", name: "Salesforce", short: "SF", tone: "sf" }, { id: "hubspot", name: "HubSpot", short: "HS", tone: "hubspot" }, { id: "github", name: "GitHub", short: "GH", tone: "github" }, { id: "jira", name: "Jira", short: "JR", tone: "jira" }, { id: "linear", name: "Linear", short: "LN", tone: "linear" }, { id: "notion", name: "Notion", short: "NO", tone: "notion" }, { id: "zoom", name: "Zoom", short: "ZM", tone: "zoom" }, { id: "google_drive", name: "Google Drive", short: "GD", tone: "gdrive" }, ]; const NOTIF_OPTIONS: Array<{ value: ChannelNotifPref; label: string; hint: string }> = [ { value: "all", label: "All new messages", hint: "Notify me every time someone posts here." }, { value: "mentions", label: "Mentions only", hint: "Only when I'm @-mentioned or replied to." }, { value: "none", label: "Nothing", hint: "Never notify me about this room." }, ]; function providerMeta(id: string) { return PROVIDERS.find((p) => p.id === id) ?? { id, name: id, short: id.slice(0, 2).toUpperCase(), tone: "custom" }; } function relativeDay(iso: string): string { const then = new Date(iso).getTime(); const days = Math.floor((Date.now() - then) / 86_400_000); if (days <= 0) return "today"; if (days === 1) return "yesterday"; if (days < 30) return `${days}d ago`; return new Date(iso).toLocaleDateString([], { month: "short", day: "numeric" }); } function errText(err: unknown): string { if (err instanceof ApiError) { const body = err.body as { message?: unknown } | null; if (body && typeof body.message === "string") return body.message; return `Request failed (${err.status})`; } return String(err); } /** * Right-rail context panel for the current room. Everything here is live * server state (`GET .../channels/:id/about`, hydrated by the parent): the * description, the pinned messages, the linked apps, and this user's own * notification preference — which is per-person, so two members of the same * room legitimately see different values in the same place. */ export function RoomAbout({ workspaceId, channelId, channelName, channelType, members, about, loading, onClose, onAddMembers, onRefresh, onJumpToMessage, onOpenProfile, onLeft, onDeleted, }: { workspaceId: string; channelId: string; channelName?: string | null; channelType?: string | null; members: RoomAboutMember[]; about: ChannelAbout | null; loading?: boolean; onClose?: () => void; onAddMembers?: () => void; onRefresh: () => void | Promise; onJumpToMessage?: (messageId: string | number) => void; onOpenProfile?: (userId: string | number) => void; onLeft?: () => void; onDeleted?: () => void; }) { const [openSection, setOpenSection] = useState<"notifications" | "settings" | null>(null); const [editingDescription, setEditingDescription] = useState(false); const [descriptionDraft, setDescriptionDraft] = useState(""); const [nameDraft, setNameDraft] = useState(""); const [topicDraft, setTopicDraft] = useState(""); const [addingIntegration, setAddingIntegration] = useState(false); const [confirmLeave, setConfirmLeave] = useState(false); const [confirmDelete, setConfirmDelete] = useState(false); const [busy, setBusy] = useState(false); const [panelError, setPanelError] = useState(null); const descriptionRef = useRef(null); const channel = about?.channel; const caps = about?.capabilities; const membership = about?.membership; const isPrivate = (channel?.type ?? channelType) === "private"; const displayName = channel?.name ?? channelName ?? "this channel"; const shown = members.slice(0, 5); const extra = Math.max(0, members.length - shown.length); const memberCount = members.length || channel?.memberCount || 0; const linked = about?.integrations ?? []; const linkedIds = new Set(linked.map((row) => row.provider)); // Re-seed the settings drafts whenever the server row changes, so a // description someone else edited doesn't sit stale behind a closed form. useEffect(() => { setNameDraft(channel?.name ?? ""); setTopicDraft(channel?.topic ?? ""); if (!editingDescription) setDescriptionDraft(channel?.purpose ?? ""); // eslint-disable-next-line react-hooks/exhaustive-deps }, [channel?.id, channel?.name, channel?.topic, channel?.purpose]); useEffect(() => { if (editingDescription) descriptionRef.current?.focus(); }, [editingDescription]); /** Every mutation in this panel is the same shape: disable, call, refetch, * surface the failure inline rather than throwing into the page. */ async function run(action: () => Promise) { setBusy(true); setPanelError(null); try { await action(); await onRefresh(); return true; } catch (err) { setPanelError(errText(err)); return false; } finally { setBusy(false); } } async function saveDescription() { const ok = await run(() => api.updateChannel(workspaceId, channelId, { purpose: descriptionDraft.trim() })); if (ok) setEditingDescription(false); } async function saveRoomSettings() { const patch: { name?: string; topic?: string } = {}; const nextName = nameDraft.trim(); if (nextName && nextName !== (channel?.name ?? "")) patch.name = nextName; if (topicDraft.trim() !== (channel?.topic ?? "")) patch.topic = topicDraft.trim(); if (Object.keys(patch).length === 0) return; await run(() => api.updateChannel(workspaceId, channelId, patch)); } async function leaveRoom() { const ok = await run(() => api.leaveChannel(workspaceId, channelId)); if (ok) { setConfirmLeave(false); onLeft?.(); } } async function deleteRoom() { const ok = await run(() => api.permanentlyDeleteChannel(workspaceId, channelId)); if (ok) { setConfirmDelete(false); onDeleted?.(); } } return (