434 lines
23 KiB
TypeScript
434 lines
23 KiB
TypeScript
"use client";
|
||
|
||
import { useRef, useState } from "react";
|
||
import { useRouter } from "next/navigation";
|
||
import { useSdk, useChannel } from "@lynkd/messaging-inbox-sdk";
|
||
import { useUi } from "@/lib/ui-state";
|
||
import { Modal, Field, inputCls, PrimaryBtn, GhostBtn } from "@/components/ui/Modal";
|
||
import { Avatar } from "@/components/ui/primitives";
|
||
import { EmojiPicker } from "@/components/message/EmojiPicker";
|
||
import { Hash, Lock, Smile, Upload, Trash2 } from "lucide-react";
|
||
import clsx from "clsx";
|
||
|
||
const AVATAR_COLORS = ["#FDA913", "#5b9dff", "#3ecf8e", "#bb98ff", "#f2555a", "#ff7a3d", "#54e7ff", "#f5b544", "#8c8c94"];
|
||
|
||
export function Modals() {
|
||
const { modal } = useUi();
|
||
if (!modal) return null;
|
||
return (
|
||
<>
|
||
{modal === "create-channel" && <CreateChannelModal />}
|
||
{modal === "new-message" && <NewMessageModal />}
|
||
{modal === "invite" && <InviteModal />}
|
||
{modal === "create-workspace" && <CreateWorkspaceModal />}
|
||
{modal === "callback" && <CallbackModal />}
|
||
{modal === "channel-details" && <ChannelDetailsModal />}
|
||
{modal === "channel-members" && <ChannelMembersModal />}
|
||
{modal === "set-status" && <StatusModal />}
|
||
{modal === "edit-profile" && <EditProfileModal />}
|
||
</>
|
||
);
|
||
}
|
||
|
||
function ChannelMembersModal() {
|
||
const { modalArg, closeModal, toast } = useUi();
|
||
const { channelById, users, client, refresh, me } = useSdk();
|
||
const channel = useChannel(modalArg ?? null);
|
||
const [q, setQ] = useState("");
|
||
const [busy, setBusy] = useState(false);
|
||
if (!channel) return <Modal title="Members" onClose={closeModal}><p className="text-[13px] text-muted">No channel selected.</p></Modal>;
|
||
|
||
const memberIds = channelById(channel.id)?.memberIds ?? channel.memberIds;
|
||
const members = memberIds.map((id) => users.find((u) => u.id === id)).filter(Boolean) as typeof users;
|
||
const candidates = users.filter((u) => !memberIds.includes(u.id) && (u.name.toLowerCase().includes(q.toLowerCase()) || !q));
|
||
|
||
const add = async (userId: string, name: string) => { setBusy(true); await client.addMember(channel.id, userId); refresh(); setBusy(false); toast(`Added ${name} to #${channel.name}`, "success"); };
|
||
const remove = async (userId: string, name: string) => { setBusy(true); await client.removeMember(channel.id, userId); refresh(); setBusy(false); toast(`Removed ${name}`, "default"); };
|
||
|
||
return (
|
||
<Modal title={`Members of ${channel.kind === "channel" ? "#" + channel.name : channel.name}`} subtitle={`${members.length} member${members.length === 1 ? "" : "s"}`} onClose={closeModal} wide>
|
||
<div className="mb-4">
|
||
<div className="mb-2 text-[12px] font-bold uppercase text-dim">In this channel</div>
|
||
<div className="max-h-56 space-y-1 overflow-y-auto">
|
||
{members.map((u) => (
|
||
<div key={u.id} className="flex items-center gap-3 rounded-control px-2 py-1.5 hover:bg-hover">
|
||
<Avatar user={u} size={30} />
|
||
<div className="min-w-0 flex-1"><div className="truncate text-[13.5px] font-medium">{u.name}{u.id === me?.id ? " (you)" : ""}</div><div className="truncate text-[11.5px] text-muted">{u.title}</div></div>
|
||
{u.id !== me?.id && <button disabled={busy} onClick={() => remove(u.id, u.name)} className="rounded-control px-2 py-1 text-[12px] font-semibold text-danger hover:bg-hover disabled:opacity-40">Remove</button>}
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<div className="mb-2 text-[12px] font-bold uppercase text-dim">Add people</div>
|
||
<input value={q} onChange={(e) => setQ(e.target.value)} placeholder="Search people to add…" className={inputCls} />
|
||
<div className="mt-2 max-h-52 space-y-1 overflow-y-auto">
|
||
{candidates.map((u) => (
|
||
<div key={u.id} className="flex items-center gap-3 rounded-control px-2 py-1.5 hover:bg-hover">
|
||
<Avatar user={u} size={30} />
|
||
<div className="min-w-0 flex-1"><div className="truncate text-[13.5px] font-medium">{u.name}</div><div className="truncate text-[11.5px] text-muted">{u.title}</div></div>
|
||
<button disabled={busy} onClick={() => add(u.id, u.name)} className="rounded-control border border-border px-2.5 py-1 text-[12px] font-semibold hover:bg-hover disabled:opacity-40">Add</button>
|
||
</div>
|
||
))}
|
||
{candidates.length === 0 && <div className="py-4 text-center text-[12.5px] text-muted">Everyone's already here.</div>}
|
||
</div>
|
||
</div>
|
||
</Modal>
|
||
);
|
||
}
|
||
|
||
const CLEAR_OPTIONS: { label: string; ms: number | null }[] = [
|
||
{ label: "Don't clear", ms: null },
|
||
{ label: "30 minutes", ms: 30 * 60_000 },
|
||
{ label: "1 hour", ms: 60 * 60_000 },
|
||
{ label: "4 hours", ms: 4 * 60 * 60_000 },
|
||
{ label: "Today", ms: -1 }, // end of today
|
||
];
|
||
|
||
function StatusModal() {
|
||
const { closeModal, toast } = useUi();
|
||
const { me, client, refresh } = useSdk();
|
||
const [emoji, setEmoji] = useState(me?.statusEmoji ?? "");
|
||
const [text, setText] = useState(me?.statusText ?? "");
|
||
const [pickerOpen, setPickerOpen] = useState(false);
|
||
const [clearIdx, setClearIdx] = useState(0);
|
||
const [customAt, setCustomAt] = useState("");
|
||
const presets = [
|
||
{ e: "🏗️", t: "On site" }, { e: "📅", t: "In a meeting" }, { e: "🎧", t: "Focusing" },
|
||
{ e: "🌴", t: "On vacation" }, { e: "🤒", t: "Out sick" }, { e: "🏠", t: "Working remotely" },
|
||
{ e: "🍽️", t: "Out for lunch" }, { e: "🚗", t: "Commuting" },
|
||
];
|
||
const computeClearAt = (): number | undefined => {
|
||
if (customAt) { const t = Date.parse(customAt); return Number.isNaN(t) ? undefined : t; }
|
||
const opt = CLEAR_OPTIONS[clearIdx];
|
||
if (opt.ms === null) return undefined;
|
||
if (opt.ms === -1) { const d = new Date(); d.setHours(23, 59, 0, 0); return d.getTime(); }
|
||
return Date.now() + opt.ms;
|
||
};
|
||
const save = async () => { await client.setStatus(text.trim() || undefined, emoji || undefined, computeClearAt()); refresh(); closeModal(); toast("Status updated", "success"); };
|
||
const clear = async () => { await client.setStatus(undefined, undefined); refresh(); closeModal(); toast("Status cleared", "default"); };
|
||
return (
|
||
<Modal title="Set a status" onClose={closeModal} footer={<><GhostBtn onClick={clear}>Clear</GhostBtn><PrimaryBtn onClick={save}>Save</PrimaryBtn></>}>
|
||
<div className="relative mb-3 flex items-center gap-2 rounded-control border border-border bg-panel pl-1.5 pr-3">
|
||
<button onClick={() => setPickerOpen((o) => !o)} className="grid h-9 w-9 place-items-center rounded-control text-lg hover:bg-hover" title="Pick an emoji">
|
||
{emoji || <Smile size={18} className="text-muted" />}
|
||
</button>
|
||
{pickerOpen && <EmojiPicker onPick={(e) => { setEmoji(e); setPickerOpen(false); }} onClose={() => setPickerOpen(false)} />}
|
||
<input autoFocus value={text} onChange={(e) => setText(e.target.value)} placeholder="What's your status?" className="w-full bg-transparent py-2 text-[14px] outline-none placeholder:text-dim" onKeyDown={(e) => e.key === "Enter" && save()} />
|
||
</div>
|
||
<div className="mb-4 grid grid-cols-2 gap-2">
|
||
{presets.map((p) => (
|
||
<button key={p.t} onClick={() => { setEmoji(p.e); setText(p.t); }} className="flex items-center gap-2 rounded-control border border-border px-3 py-2 text-left text-[13px] hover:bg-hover">
|
||
<span className="text-base">{p.e}</span> {p.t}
|
||
</button>
|
||
))}
|
||
</div>
|
||
<Field label="Clear after">
|
||
<div className="flex flex-wrap gap-1.5">
|
||
{CLEAR_OPTIONS.map((o, i) => (
|
||
<button key={o.label} onClick={() => { setClearIdx(i); setCustomAt(""); }} className={clsx("rounded-pill border px-2.5 py-1 text-[12px] font-medium", !customAt && clearIdx === i ? "border-accent text-accent" : "border-border text-muted hover:text-ink")}>{o.label}</button>
|
||
))}
|
||
</div>
|
||
<input type="datetime-local" value={customAt} onChange={(e) => setCustomAt(e.target.value)} className={clsx(inputCls, "mt-2")} title="Custom clear time" />
|
||
</Field>
|
||
</Modal>
|
||
);
|
||
}
|
||
|
||
function EditProfileModal() {
|
||
const { closeModal, toast } = useUi();
|
||
const { me, client, refresh } = useSdk();
|
||
const fileRef = useRef<HTMLInputElement>(null);
|
||
const [name, setName] = useState(me?.name ?? "");
|
||
const [title, setTitle] = useState(me?.title ?? "");
|
||
const [color, setColor] = useState(me?.avatarColor ?? AVATAR_COLORS[0]);
|
||
const [avatarUrl, setAvatarUrl] = useState<string | null>(me?.avatarUrl ?? null);
|
||
|
||
const onFile = (f: File | undefined) => {
|
||
if (!f) return;
|
||
const reader = new FileReader();
|
||
reader.onload = () => setAvatarUrl(String(reader.result));
|
||
reader.readAsDataURL(f);
|
||
};
|
||
const save = async () => {
|
||
await client.updateMe({ name: name.trim() || undefined, title: title.trim() || undefined, avatarColor: color, avatarUrl: avatarUrl });
|
||
refresh();
|
||
closeModal();
|
||
toast("Profile updated", "success");
|
||
};
|
||
|
||
const preview = { avatarText: (name || "?").slice(0, 2).toUpperCase(), avatarColor: color, presence: (me?.presence ?? "active") as any, name, avatarUrl: avatarUrl ?? undefined };
|
||
|
||
return (
|
||
<Modal title="Edit profile" onClose={closeModal} footer={<><GhostBtn onClick={closeModal}>Cancel</GhostBtn><PrimaryBtn onClick={save}>Save changes</PrimaryBtn></>}>
|
||
<div className="mb-4 flex items-center gap-4">
|
||
<Avatar user={preview} size={72} showPresence={false} rounded="20px" />
|
||
<div className="flex flex-col gap-2">
|
||
<button onClick={() => fileRef.current?.click()} className="focus-ring flex items-center gap-2 rounded-control border border-border px-3 py-1.5 text-[13px] font-semibold hover:bg-hover"><Upload size={14} /> Upload image</button>
|
||
{avatarUrl && <button onClick={() => setAvatarUrl(null)} className="flex items-center gap-1.5 text-[12px] text-danger hover:underline"><Trash2 size={12} /> Remove image</button>}
|
||
<input ref={fileRef} type="file" accept="image/*" className="hidden" onChange={(e) => { onFile(e.target.files?.[0]); e.target.value = ""; }} />
|
||
</div>
|
||
</div>
|
||
{!avatarUrl && (
|
||
<Field label="Avatar color">
|
||
<div className="flex flex-wrap gap-2">
|
||
{AVATAR_COLORS.map((c) => (
|
||
<button key={c} onClick={() => setColor(c)} className="h-8 w-8 rounded-full ring-2 ring-transparent transition-all hover:scale-110" style={{ background: c, boxShadow: color === c ? "0 0 0 2px var(--c-bg), 0 0 0 4px " + c : undefined }} />
|
||
))}
|
||
</div>
|
||
</Field>
|
||
)}
|
||
<Field label="Display name"><input value={name} onChange={(e) => setName(e.target.value)} className={inputCls} /></Field>
|
||
<Field label="Title"><input value={title} onChange={(e) => setTitle(e.target.value)} className={inputCls} /></Field>
|
||
</Modal>
|
||
);
|
||
}
|
||
|
||
function CreateChannelModal() {
|
||
const { client, refresh, users, me } = useSdk();
|
||
const { closeModal, toast } = useUi();
|
||
const router = useRouter();
|
||
const [name, setName] = useState("");
|
||
const [topic, setTopic] = useState("");
|
||
const [priv, setPriv] = useState(false);
|
||
const [busy, setBusy] = useState(false);
|
||
const [selected, setSelected] = useState<string[]>([]);
|
||
const [q, setQ] = useState("");
|
||
|
||
const others = users.filter((u) => u.id !== me?.id);
|
||
const candidates = others.filter((u) => u.name.toLowerCase().includes(q.toLowerCase()) || u.handle.toLowerCase().includes(q.toLowerCase()));
|
||
const toggle = (id: string) => setSelected((s) => (s.includes(id) ? s.filter((x) => x !== id) : [...s, id]));
|
||
|
||
async function create() {
|
||
const clean = name.trim().toLowerCase().replace(/\s+/g, "-").replace(/[^a-z0-9-]/g, "");
|
||
if (!clean) return;
|
||
setBusy(true);
|
||
// Public channels include the whole team automatically; private channels
|
||
// include only the members you explicitly select.
|
||
const memberIds = priv ? selected : others.map((u) => u.id);
|
||
const { channel } = await client.createChannel({ name: clean, topic: topic.trim() || undefined, kind: priv ? "private" : "channel", memberIds });
|
||
refresh();
|
||
closeModal();
|
||
toast(`Created #${channel.name}`, "success");
|
||
router.push(`/c/${channel.id}`);
|
||
}
|
||
|
||
return (
|
||
<Modal
|
||
title="Create a channel"
|
||
subtitle="Channels are where your team communicates."
|
||
onClose={closeModal}
|
||
footer={<><GhostBtn onClick={closeModal}>Cancel</GhostBtn><PrimaryBtn onClick={create} disabled={!name.trim() || busy || (priv && selected.length === 0)}>Create channel</PrimaryBtn></>}
|
||
>
|
||
<Field label="Name">
|
||
<div className="flex items-center gap-2 rounded-control border border-border bg-panel px-3">
|
||
{priv ? <Lock size={15} className="text-muted" /> : <Hash size={15} className="text-muted" />}
|
||
<input autoFocus value={name} onChange={(e) => setName(e.target.value)} placeholder="e.g. marketing" className="w-full bg-transparent py-2 text-[14px] outline-none placeholder:text-dim" onKeyDown={(e) => e.key === "Enter" && create()} />
|
||
</div>
|
||
</Field>
|
||
<Field label="Description (optional)">
|
||
<input value={topic} onChange={(e) => setTopic(e.target.value)} placeholder="What's this channel about?" className={inputCls} />
|
||
</Field>
|
||
<label className="flex items-center gap-2.5 rounded-control border border-border bg-panel px-3 py-2.5 text-[13px]">
|
||
<input type="checkbox" checked={priv} onChange={(e) => setPriv(e.target.checked)} className="accent-[var(--c-accent)]" />
|
||
<span><b>Make private</b> — only invited members can view</span>
|
||
</label>
|
||
|
||
{priv ? (
|
||
<div className="mt-3">
|
||
<div className="mb-1.5 text-[12px] font-bold uppercase text-dim">Add members · {selected.length} selected</div>
|
||
{selected.length > 0 && (
|
||
<div className="mb-2 flex flex-wrap gap-1.5">
|
||
{selected.map((id) => {
|
||
const u = users.find((x) => x.id === id);
|
||
if (!u) return null;
|
||
return (
|
||
<span key={id} className="inline-flex items-center gap-1.5 rounded-pill bg-accent-soft py-1 pl-1.5 pr-2 text-[12px] font-medium text-accent">
|
||
<Avatar user={u} size={16} showPresence={false} /> {u.name}
|
||
<button onClick={() => toggle(id)} className="text-accent/70 hover:text-accent">✕</button>
|
||
</span>
|
||
);
|
||
})}
|
||
</div>
|
||
)}
|
||
<input value={q} onChange={(e) => setQ(e.target.value)} placeholder="Search people to add…" className={inputCls} />
|
||
<div className="mt-2 max-h-44 space-y-1 overflow-y-auto">
|
||
{candidates.map((u) => (
|
||
<button key={u.id} onClick={() => toggle(u.id)} className="flex w-full items-center gap-3 rounded-control px-2 py-1.5 text-left hover:bg-hover">
|
||
<input type="checkbox" readOnly checked={selected.includes(u.id)} className="accent-[var(--c-accent)]" />
|
||
<Avatar user={u} size={28} />
|
||
<div className="min-w-0 flex-1"><div className="truncate text-[13.5px] font-medium">{u.name}</div><div className="truncate text-[11.5px] text-muted">{u.title}</div></div>
|
||
</button>
|
||
))}
|
||
{candidates.length === 0 && <div className="py-4 text-center text-[12.5px] text-muted">No people match “{q}”.</div>}
|
||
</div>
|
||
</div>
|
||
) : (
|
||
<p className="mt-3 flex items-center gap-2 rounded-control border border-border bg-panel px-3 py-2 text-[12.5px] text-muted">
|
||
<Hash size={14} className="text-accent" /> Everyone on the team ({others.length}) will be added automatically.
|
||
</p>
|
||
)}
|
||
</Modal>
|
||
);
|
||
}
|
||
|
||
function NewMessageModal() {
|
||
const { users, me, channels, client, refresh } = useSdk();
|
||
const { closeModal, toast } = useUi();
|
||
const router = useRouter();
|
||
const [q, setQ] = useState("");
|
||
const people = users.filter((u) => u.id !== me?.id && u.name.toLowerCase().includes(q.toLowerCase()));
|
||
|
||
async function openDm(userId: string, name: string) {
|
||
const existing = channels.find((c) => c.kind === "dm" && c.memberIds.includes(userId));
|
||
closeModal();
|
||
if (existing) { router.push(`/c/${existing.id}`); return; }
|
||
const { channel } = await client.createChannel({ name, kind: "dm", memberIds: [userId] });
|
||
refresh();
|
||
toast(`Started a conversation with ${name}`, "success");
|
||
router.push(`/c/${channel.id}`);
|
||
}
|
||
|
||
return (
|
||
<Modal title="New message" subtitle="Start a direct message" onClose={closeModal}>
|
||
<input autoFocus value={q} onChange={(e) => setQ(e.target.value)} placeholder="Search people…" className={inputCls} />
|
||
<div className="mt-3 max-h-72 space-y-1 overflow-y-auto">
|
||
{people.map((u) => (
|
||
<button key={u.id} onClick={() => openDm(u.id, u.name)} className="flex w-full items-center gap-3 rounded-control px-2 py-2 text-left hover:bg-hover">
|
||
<Avatar user={u} size={34} />
|
||
<div className="min-w-0">
|
||
<div className="truncate text-[14px] font-medium">{u.name}</div>
|
||
<div className="truncate text-[12px] text-muted">{u.title}</div>
|
||
</div>
|
||
</button>
|
||
))}
|
||
{people.length === 0 && <div className="py-6 text-center text-[13px] text-muted">No people match “{q}”.</div>}
|
||
</div>
|
||
</Modal>
|
||
);
|
||
}
|
||
|
||
function InviteModal() {
|
||
const { closeModal, toast } = useUi();
|
||
const [chips, setChips] = useState<string[]>([]);
|
||
const [draft, setDraft] = useState("");
|
||
const isEmail = (v: string) => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(v);
|
||
|
||
const commit = (raw: string) => {
|
||
const v = raw.trim().replace(/,$/, "").trim();
|
||
if (!v) return;
|
||
if (!isEmail(v)) { toast(`“${v}” doesn't look like an email`, "default"); return; }
|
||
setChips((c) => (c.includes(v) ? c : [...c, v]));
|
||
setDraft("");
|
||
};
|
||
const onKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
|
||
if (e.key === "," || e.key === "Enter" || e.key === " ") { e.preventDefault(); commit(draft); }
|
||
else if (e.key === "Backspace" && !draft && chips.length) { setChips((c) => c.slice(0, -1)); }
|
||
};
|
||
const total = chips.length + (isEmail(draft.trim()) ? 1 : 0);
|
||
|
||
return (
|
||
<Modal
|
||
title="Invite people"
|
||
subtitle="Invite teammates to LynkedUp Pro"
|
||
onClose={closeModal}
|
||
footer={<><GhostBtn onClick={closeModal}>Cancel</GhostBtn><PrimaryBtn disabled={total === 0} onClick={() => { const all = [...chips, ...(isEmail(draft.trim()) ? [draft.trim()] : [])]; closeModal(); toast(`${all.length} invitation${all.length === 1 ? "" : "s"} sent (demo)`, "success"); }}>Send invites</PrimaryBtn></>}
|
||
>
|
||
<Field label="Email addresses">
|
||
<div className="flex flex-wrap items-center gap-1.5 rounded-control border border-border bg-panel px-2 py-2">
|
||
{chips.map((email) => (
|
||
<span key={email} className="inline-flex items-center gap-1.5 rounded-pill bg-accent-soft py-1 pl-2.5 pr-1.5 text-[12.5px] font-medium text-accent">
|
||
{email}
|
||
<button onClick={() => setChips((c) => c.filter((x) => x !== email))} className="grid h-4 w-4 place-items-center rounded-full text-accent/70 hover:bg-accent/20 hover:text-accent">✕</button>
|
||
</span>
|
||
))}
|
||
<input
|
||
autoFocus
|
||
value={draft}
|
||
onChange={(e) => { const v = e.target.value; if (v.endsWith(",")) commit(v); else setDraft(v); }}
|
||
onKeyDown={onKeyDown}
|
||
onBlur={() => commit(draft)}
|
||
placeholder={chips.length ? "" : "name@company.com, another@company.com"}
|
||
className="min-w-[160px] flex-1 bg-transparent py-1 text-[14px] outline-none placeholder:text-dim"
|
||
/>
|
||
</div>
|
||
</Field>
|
||
<p className="text-[12px] text-muted">Type an email and press <b>,</b> or <b>Enter</b> to add it as a chip.</p>
|
||
</Modal>
|
||
);
|
||
}
|
||
|
||
function CreateWorkspaceModal() {
|
||
const { closeModal, toast } = useUi();
|
||
const [name, setName] = useState("");
|
||
return (
|
||
<Modal
|
||
title="Create a workspace"
|
||
subtitle="Spin up a new workspace"
|
||
onClose={closeModal}
|
||
footer={<><GhostBtn onClick={closeModal}>Cancel</GhostBtn><PrimaryBtn disabled={!name.trim()} onClick={() => { closeModal(); toast(`Workspace “${name}” created (demo)`, "success"); }}>Create</PrimaryBtn></>}
|
||
>
|
||
<Field label="Workspace name"><input autoFocus value={name} onChange={(e) => setName(e.target.value)} placeholder="e.g. Acme Field Ops" className={inputCls} /></Field>
|
||
</Modal>
|
||
);
|
||
}
|
||
|
||
function CallbackModal() {
|
||
const { closeModal, toast } = useUi();
|
||
const [channel, setChannel] = useState("PHONE");
|
||
const [time, setTime] = useState("");
|
||
return (
|
||
<Modal
|
||
title="Request a callback"
|
||
subtitle="We'll schedule a call with the customer"
|
||
onClose={closeModal}
|
||
footer={<><GhostBtn onClick={closeModal}>Cancel</GhostBtn><PrimaryBtn onClick={() => { closeModal(); toast("Callback requested — scheduled follow-up created", "success"); }}>Request callback</PrimaryBtn></>}
|
||
>
|
||
<Field label="Preferred channel">
|
||
<div className="grid grid-cols-3 gap-2">
|
||
{["PHONE", "ZOOM", "IN_APP"].map((c) => (
|
||
<button key={c} onClick={() => setChannel(c)} className={clsx("rounded-control border py-2 text-[12.5px] font-semibold", channel === c ? "border-accent bg-accent-soft text-accent" : "border-border hover:bg-hover")}>
|
||
{c.replace("_", "-")}
|
||
</button>
|
||
))}
|
||
</div>
|
||
</Field>
|
||
<Field label="Preferred time (optional)"><input value={time} onChange={(e) => setTime(e.target.value)} placeholder="e.g. Tomorrow 2–4pm CT" className={inputCls} /></Field>
|
||
</Modal>
|
||
);
|
||
}
|
||
|
||
function ChannelDetailsModal() {
|
||
const { modalArg, closeModal, openModal } = useUi();
|
||
const { userById } = useSdk();
|
||
const channel = useChannel(modalArg ?? null);
|
||
if (!channel) { return <Modal title="Details" onClose={closeModal}><p className="text-[13px] text-muted">No channel selected.</p></Modal>; }
|
||
return (
|
||
<Modal title={channel.kind === "channel" ? `#${channel.name}` : channel.name} subtitle={channel.topic} onClose={closeModal} wide>
|
||
<div className="space-y-4">
|
||
<div className="rounded-control border border-border bg-panel p-3">
|
||
<div className="text-[11px] font-semibold uppercase text-dim">Topic</div>
|
||
<div className="mt-1 text-[13.5px]">{channel.topic || "No topic set"}</div>
|
||
</div>
|
||
<div>
|
||
<div className="mb-2 flex items-center justify-between">
|
||
<span className="text-[12px] font-semibold uppercase text-dim">Members · {channel.memberIds.length}</span>
|
||
<button onClick={() => openModal("channel-members", channel.id)} className="focus-ring rounded-control border border-border px-2 py-1 text-[12px] font-semibold hover:bg-hover">+ Add people</button>
|
||
</div>
|
||
<div className="grid grid-cols-2 gap-2">
|
||
{channel.memberIds.map((id) => {
|
||
const u = userById(id);
|
||
return u ? (
|
||
<div key={id} className="flex items-center gap-2 rounded-control border border-border bg-panel px-2.5 py-2">
|
||
<Avatar user={u} size={28} />
|
||
<div className="min-w-0"><div className="truncate text-[13px] font-medium">{u.name}</div><div className="truncate text-[11px] text-muted">{u.title}</div></div>
|
||
</div>
|
||
) : null;
|
||
})}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</Modal>
|
||
);
|
||
}
|