feat(settings): add AccessSettings and room context updates

Add AccessSettings component for project access management,
update room context with improved state management.

src/app/project/settings/AccessSettings.tsx

@@ -1,192 +1,560 @@
-import { useState } from "react";
+import { useMemo, useState } from "react";
 import { useParams } from "react-router-dom";
 import { useQuery, useQueryClient } from "@tanstack/react-query";
+import { Check, Copy, Loader2, Mail, Plus, Shield, Trash2, User, X } from "lucide-react";
 import {
-  projectInvitations, projectInviteUser, projectCancelInvitation,
+  projectCancelInvitation,
-  projectJoinSettings, projectUpdateJoinSettings,
+  projectInvitations,
-  projectJoinRequests, projectProcessJoinRequest,
+  projectInviteUser,
+  projectJoinAnswers,
+  projectJoinRequests,
+  projectJoinSettings,
+  projectProcessJoinRequest,
+  projectUpdateJoinSettings,
 } from "@/client/api";
-import type { InvitationResponse, JoinSettingsResponse, JoinRequestResponse, MemberRole, QuestionSchema } from "@/client/model";
+import type {
+  InvitationResponse,
+  JoinAnswerResponse,
+  JoinRequestResponse,
+  JoinSettingsResponse,
+  MemberRole,
+  QuestionSchema,
+} from "@/client/model";
+import { Alert, AlertDescription } from "@/components/ui/alert";
+import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardAction,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import {
+  Empty,
+  EmptyDescription,
+  EmptyHeader,
+  EmptyMedia,
+  EmptyTitle,
+} from "@/components/ui/empty";
+import { Field, FieldDescription, FieldGroup, FieldLabel } from "@/components/ui/field";
 import { Input } from "@/components/ui/input";
-import { Loader2, Mail, X, Check, Shield, User, EyeOff } from "lucide-react";
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Switch } from "@/components/ui/switch";
+import { Textarea } from "@/components/ui/textarea";
+
+type ActionKey = `invite:${string}` | `request:${number}:${"approve" | "reject"}` | "settings" | null;
+
+function parseQuestions(settings?: JoinSettingsResponse | null): QuestionSchema[] {
+  if (!settings || !Array.isArray(settings.questions)) return [];
+  return settings.questions
+    .map((item) => {
+      if (typeof item === "string") return { question: item };
+      if (item && typeof item === "object" && "question" in item) {
+        return { question: String((item as { question: unknown }).question ?? "") };
+      }
+      return { question: "" };
+    })
+    .filter((item) => item.question.trim().length > 0);
+}
+
+function formatDate(value?: string | null) {
+  if (!value) return "Unknown";
+  return new Intl.DateTimeFormat(undefined, {
+    dateStyle: "medium",
+    timeStyle: "short",
+  }).format(new Date(value));
+}
+
+function getInvitationUrl(projectName?: string) {
+  if (!projectName) return "";
+  return `${window.location.origin}/projects/${projectName}/invitations`;
+}
+
+function JoinRequestAnswers({ projectName, requestId }: { projectName: string; requestId: number }) {
+  const { data = [], isLoading } = useQuery({
+    queryKey: ["project-join-answers", projectName, requestId],
+    queryFn: async () => {
+      const res = await projectJoinAnswers(projectName, requestId);
+      return (res.data?.data?.answers ?? []) as JoinAnswerResponse[];
+    },
+    staleTime: 30_000,
+  });
+
+  if (isLoading) {
+    return (
+      <div className="flex items-center gap-2 text-sm text-muted-foreground">
+        <Loader2 className="animate-spin" />
+        Loading answers...
+      </div>
+    );
+  }
+
+  if (data.length === 0) return null;
+
+  return (
+    <div className="flex flex-col gap-2 rounded-lg bg-muted/30 p-3">
+      {data.map((answer) => (
+        <div key={`${answer.question}-${answer.created_at}`} className="flex flex-col gap-1">
+          <span className="text-xs font-medium text-muted-foreground">{answer.question}</span>
+          <span className="text-sm">{answer.answer}</span>
+        </div>
+      ))}
+    </div>
+  );
+}
 
 export function AccessSettings() {
   const { projectName } = useParams<{ projectName: string }>();
   const queryClient = useQueryClient();
+  const [inviteForm, setInviteForm] = useState({ email: "", scope: "Member" as MemberRole });
+  const [requestRoles, setRequestRoles] = useState<Record<number, MemberRole>>({});
+  const [rejectReasons, setRejectReasons] = useState<Record<number, string>>({});
+  const [settingsDraft, setSettingsDraft] = useState<{
+    require_approval: boolean;
+    require_questions: boolean;
+    questions: QuestionSchema[];
+  } | null>(null);
+  const [actionKey, setActionKey] = useState<ActionKey>(null);
+  const [message, setMessage] = useState<{ type: "success" | "error"; text: string } | null>(null);
 
-  // Invitations
+  const invitationsQuery = useQuery({
-  const { data: invData, isLoading: invLoading } = useQuery({
     queryKey: ["project-invitations", projectName],
     queryFn: async () => {
-      const res = await projectInvitations(projectName!, {});
+      const res = await projectInvitations(projectName!, { page: 1, per_page: 50 });
       return (res.data?.data?.invitations ?? []) as InvitationResponse[];
     },
-    enabled: !!projectName, staleTime: 30_000,
+    enabled: !!projectName,
+    staleTime: 30_000,
   });
 
-  // Join settings
+  const settingsQuery = useQuery({
-  const { data: joinSettings, isLoading: jsLoading } = useQuery({
     queryKey: ["project-join-settings", projectName],
     queryFn: async () => {
       const res = await projectJoinSettings(projectName!);
       return res.data?.data as JoinSettingsResponse;
     },
-    enabled: !!projectName, staleTime: 30_000,
+    enabled: !!projectName,
+    staleTime: 30_000,
   });
 
-  // Join requests
+  const requestsQuery = useQuery({
-  const { data: joinReqs } = useQuery({
     queryKey: ["project-join-requests", projectName],
     queryFn: async () => {
-      const res = await projectJoinRequests(projectName!, { status: "pending" });
+      const res = await projectJoinRequests(projectName!, { status: "pending", page: 1, per_page: 50 });
       return (res.data?.data?.requests ?? []) as JoinRequestResponse[];
     },
-    enabled: !!projectName, staleTime: 30_000,
+    enabled: !!projectName,
+    staleTime: 30_000,
   });
 
-  const [inviteForm, setInviteForm] = useState({ email: "", scope: "Member" as MemberRole });
+  const currentSettings = useMemo(() => {
-  const [sending, setSending] = useState(false);
+    if (!settingsQuery.data) return null;
-  const [actionLoading, setActionLoading] = useState<string | number | null>(null);
+    return {
-  const [jsSaving, setJsSaving] = useState(false);
+      require_approval: settingsQuery.data.require_approval,
-  const [msg, setMsg] = useState<{ type: "success" | "error"; text: string } | null>(null);
+      require_questions: settingsQuery.data.require_questions,
+      questions: parseQuestions(settingsQuery.data),
+    };
+  }, [settingsQuery.data]);
+
+  const draft = settingsDraft ?? currentSettings;
+  const pendingInvitations = (invitationsQuery.data ?? []).filter((item) => !item.accepted && !item.rejected);
+  const pendingRequests = requestsQuery.data ?? [];
 
   const invalidateAll = () => {
     queryClient.invalidateQueries({ queryKey: ["project-invitations", projectName] });
     queryClient.invalidateQueries({ queryKey: ["project-join-settings", projectName] });
     queryClient.invalidateQueries({ queryKey: ["project-join-requests", projectName] });
+    queryClient.invalidateQueries({ queryKey: ["project-members-grouped", projectName] });
   };
 
   const handleInvite = async () => {
-    if (!inviteForm.email.trim()) return;
+    if (!projectName || !inviteForm.email.trim()) return;
-    try { setSending(true); setMsg(null); await projectInviteUser(projectName!, { email: inviteForm.email.trim(), scope: inviteForm.scope }); setMsg({ type: "success", text: "Invitation sent" }); setInviteForm({ email: "", scope: "Member" }); invalidateAll(); }
+    setActionKey("settings");
-    catch { setMsg({ type: "error", text: "Failed to send invitation" }); }
+    setMessage(null);
-    finally { setSending(false); }
+    try {
+      await projectInviteUser(projectName, {
+        email: inviteForm.email.trim(),
+        scope: inviteForm.scope,
+      });
+      setInviteForm({ email: "", scope: "Member" });
+      setMessage({ type: "success", text: "Invitation sent." });
+      invalidateAll();
+    } catch {
+      setMessage({ type: "error", text: "Failed to send invitation." });
+    } finally {
+      setActionKey(null);
+    }
   };
 
   const handleCancelInvite = async (userId: string) => {
-    try { setActionLoading(userId); await projectCancelInvitation(projectName!, userId); invalidateAll(); }
+    if (!projectName) return;
-    catch { setMsg({ type: "error", text: "Failed to cancel invitation" }); }
+    setActionKey(`invite:${userId}`);
-    finally { setActionLoading(null); }
+    setMessage(null);
+    try {
+      await projectCancelInvitation(projectName, userId);
+      setMessage({ type: "success", text: "Invitation cancelled." });
+      invalidateAll();
+    } catch {
+      setMessage({ type: "error", text: "Failed to cancel invitation." });
+    } finally {
+      setActionKey(null);
+    }
   };
 
-  const handleProcessRequest = async (reqId: number, approve: boolean) => {
+  const handleProcessRequest = async (request: JoinRequestResponse, approve: boolean) => {
-    try { setActionLoading(reqId); await projectProcessJoinRequest(projectName!, reqId, { approve, scope: "Member", reject_reason: approve ? null : "Rejected" }); setMsg({ type: "success", text: approve ? "Request approved" : "Request rejected" }); invalidateAll(); }
+    if (!projectName) return;
-    catch { setMsg({ type: "error", text: "Failed to process request" }); }
+    setActionKey(`request:${request.id}:${approve ? "approve" : "reject"}`);
-    finally { setActionLoading(null); }
+    setMessage(null);
+    try {
+      await projectProcessJoinRequest(projectName, request.id, {
+        approve,
+        scope: requestRoles[request.id] ?? "Member",
+        reject_reason: approve ? null : rejectReasons[request.id]?.trim() || "Rejected",
+      });
+      setMessage({ type: "success", text: approve ? "Join request approved." : "Join request rejected." });
+      invalidateAll();
+    } catch {
+      setMessage({ type: "error", text: "Failed to process join request." });
+    } finally {
+      setActionKey(null);
+    }
   };
 
-  const handleToggleApproval = async () => {
+  const handleSaveSettings = async () => {
-    if (!joinSettings) return;
+    if (!projectName || !draft) return;
-    try { setJsSaving(true); await projectUpdateJoinSettings(projectName!, { require_approval: !joinSettings.require_approval, require_questions: joinSettings.require_questions, questions: (joinSettings.questions as QuestionSchema[]) || [] }); setMsg({ type: "success", text: "Join settings updated" }); invalidateAll(); }
+    const questions = draft.require_questions
-    catch { setMsg({ type: "error", text: "Failed to update join settings" }); }
+      ? draft.questions.map((item) => ({ question: item.question.trim() })).filter((item) => item.question)
-    finally { setJsSaving(false); }
+      : [];
+    setActionKey("settings");
+    setMessage(null);
+    try {
+      await projectUpdateJoinSettings(projectName, {
+        require_approval: draft.require_approval,
+        require_questions: draft.require_questions,
+        questions,
+      });
+      setSettingsDraft(null);
+      setMessage({ type: "success", text: "Join settings saved." });
+      invalidateAll();
+    } catch {
+      setMessage({ type: "error", text: "Failed to save join settings." });
+    } finally {
+      setActionKey(null);
+    }
   };
 
+  const handleCopyInviteLink = async () => {
+    if (!projectName) return;
+    await navigator.clipboard.writeText(getInvitationUrl(projectName));
+    setMessage({ type: "success", text: "Invitation link copied." });
+  };
+
+  const isSettingsDirty = settingsDraft !== null;
+  const isSettingsSaving = actionKey === "settings";
+
   return (
-    <div className="space-y-8">
+    <div className="flex flex-col gap-6">
-      {msg && <div className="text-[13px]" style={{ color: msg.type === "success" ? "var(--success)" : "var(--destructive)" }}>{msg.text}</div>}
+      {message && (
-
+        <Alert variant={message.type === "error" ? "destructive" : "default"}>
-      {/* Invite */}
+          <AlertDescription>{message.text}</AlertDescription>
-      <section className="p-4 rounded-lg" style={{ backgroundColor: "var(--surface-elevated)", border: "1px solid var(--border-default)" }}>
+        </Alert>
-        <h2 className="text-[14px] font-semibold mb-3" style={{ color: "var(--text-primary)" }}>Invite Member</h2>
-        <div className="flex gap-2">
-          <Input
-            value={inviteForm.email}
-            onChange={e => setInviteForm(f => ({ ...f, email: e.target.value }))}
-            placeholder="user@example.com"
-            className="text-[14px] flex-1"
-            style={{ backgroundColor: "var(--surface-ground)", borderColor: "var(--border-default)", color: "var(--text-primary)" }}
-          />
-          <select
-            value={inviteForm.scope}
-            onChange={e => setInviteForm(f => ({ ...f, scope: e.target.value as MemberRole }))}
-            className="text-[14px] px-3 rounded-md"
-            style={{ backgroundColor: "var(--surface-ground)", border: "1px solid var(--border-default)", color: "var(--text-primary)" }}
-          >
-            <option value="Admin">Admin</option>
-            <option value="Member">Member</option>
-          </select>
-          <Button size="sm" onClick={handleInvite} disabled={sending || !inviteForm.email.trim()} style={{ backgroundColor: "var(--accent)", color: "var(--accent-fg)" }}>
-            {sending ? <Loader2 className="w-3.5 h-3.5 mr-1 animate-spin" /> : <Mail className="w-3.5 h-3.5 mr-1" />}
-            Invite
-          </Button>
-        </div>
-      </section>
-
-      {/* Pending Invitations */}
-      <section className="p-4 rounded-lg" style={{ backgroundColor: "var(--surface-elevated)", border: "1px solid var(--border-default)" }}>
-        <h2 className="text-[14px] font-semibold mb-3" style={{ color: "var(--text-primary)" }}>
-          Pending Invitations {invData ? `(${invData.filter(i => !i.accepted && !i.rejected).length})` : ""}
-        </h2>
-        {invLoading ? <Loader2 className="w-4 h-4 animate-spin" /> :
-          !invData?.length ? <p className="text-[13px]" style={{ color: "var(--text-muted)" }}>No pending invitations</p> :
-            <div className="space-y-1">
-              {invData.filter(i => !i.accepted && !i.rejected).map(inv => (
-                <div key={inv.user_uid} className="flex items-center justify-between py-2 px-3 rounded" style={{ backgroundColor: "var(--surface-ground)" }}>
-                  <div className="flex items-center gap-2">
-                    {inv.scope === "Admin" ? <Shield className="w-4 h-4" style={{ color: "var(--role-orange)" }} /> : <User className="w-4 h-4" style={{ color: "var(--role-blue)" }} />}
-                    <span className="text-[13px]" style={{ color: "var(--text-primary)" }}>{inv.user_uid}</span>
-                    <span className="text-[11px] px-1.5 py-0.5 rounded" style={{ backgroundColor: "var(--hover-bg)", color: "var(--text-muted)" }}>{inv.scope}</span>
-                  </div>
-                  <Button size="sm" variant="ghost" className="h-7 text-[12px]" style={{ color: "var(--destructive)" }} onClick={() => handleCancelInvite(inv.user_uid)} disabled={actionLoading === inv.user_uid}>
-                    {actionLoading === inv.user_uid ? <Loader2 className="w-3 h-3 animate-spin" /> : <X className="w-3 h-3" />}
-                  </Button>
-                </div>
-              ))}
-            </div>
-        }
-      </section>
-
-      {/* Join Settings */}
-      <section className="p-4 rounded-lg" style={{ backgroundColor: "var(--surface-elevated)", border: "1px solid var(--border-default)" }}>
-        <h2 className="text-[14px] font-semibold mb-3" style={{ color: "var(--text-primary)" }}>Join Settings</h2>
-        {jsLoading ? <Loader2 className="w-4 h-4 animate-spin" /> : joinSettings ? (
-          <div className="flex items-center justify-between">
-            <div>
-              <p className="text-[14px] font-medium" style={{ color: "var(--text-primary)" }}>
-                {joinSettings.require_approval ? "Approval required" : "Open access"}
-              </p>
-              <p className="text-[12px]" style={{ color: "var(--text-muted)" }}>
-                {joinSettings.require_approval ? "New members must be approved by an admin" : "Anyone can join without approval"}
-              </p>
-            </div>
-            <Button size="sm" variant="outline" onClick={handleToggleApproval} disabled={jsSaving}>
-              {jsSaving ? <Loader2 className="w-3.5 h-3.5 mr-2 animate-spin" /> : joinSettings.require_approval ? <EyeOff className="w-3.5 h-3.5 mr-2" /> : <Check className="w-3.5 h-3.5 mr-2" />}
-              {joinSettings.require_approval ? "Disable Approval" : "Require Approval"}
-            </Button>
-          </div>
-        ) : null}
-      </section>
-
-      {/* Pending Join Requests */}
-      {joinSettings?.require_approval && (
-        <section className="p-4 rounded-lg" style={{ backgroundColor: "var(--surface-elevated)", border: "1px solid var(--border-default)" }}>
-          <h2 className="text-[14px] font-semibold mb-3" style={{ color: "var(--text-primary)" }}>
-            Pending Join Requests {joinReqs ? `(${joinReqs.length})` : ""}
-          </h2>
-          {!joinReqs?.length ? <p className="text-[13px]" style={{ color: "var(--text-muted)" }}>No pending requests</p> :
-            <div className="space-y-1">
-              {joinReqs.map(req => (
-                <div key={req.id} className="flex items-center justify-between py-2 px-3 rounded" style={{ backgroundColor: "var(--surface-ground)" }}>
-                  <div className="flex items-center gap-2">
-                    <span className="text-[13px]" style={{ color: "var(--text-primary)" }}>{req.username}</span>
-                    {req.message && <span className="text-[12px] truncate max-w-[200px]" style={{ color: "var(--text-muted)" }}>{req.message}</span>}
-                  </div>
-                  <div className="flex items-center gap-1">
-                    <Button size="sm" variant="ghost" className="h-7 text-[12px]" style={{ color: "var(--success)" }} onClick={() => handleProcessRequest(req.id, true)} disabled={actionLoading === req.id}>
-                      {actionLoading === req.id ? <Loader2 className="w-3 h-3 animate-spin" /> : <Check className="w-3.5 h-3.5" />}
-                    </Button>
-                    <Button size="sm" variant="ghost" className="h-7 text-[12px]" style={{ color: "var(--destructive)" }} onClick={() => handleProcessRequest(req.id, false)} disabled={actionLoading === req.id}>
-                      {actionLoading === req.id ? <Loader2 className="w-3 h-3 animate-spin" /> : <X className="w-3.5 h-3.5" />}
-                    </Button>
-                  </div>
-                </div>
-              ))}
-            </div>
-          }
-        </section>
       )}
+
+      <Card>
+        <CardHeader>
+          <CardTitle>Invite Member</CardTitle>
+          <CardDescription>Invite an existing user by email. The invitee can accept or reject from their invitations page.</CardDescription>
+          <CardAction>
+            <Button size="sm" variant="outline" onClick={handleCopyInviteLink}>
+              <Copy data-icon="inline-start" />
+              Copy invite link
+            </Button>
+          </CardAction>
+        </CardHeader>
+        <CardContent>
+          <FieldGroup>
+            <Field>
+              <FieldLabel htmlFor="invite-email">Email</FieldLabel>
+              <div className="flex flex-col gap-2 sm:flex-row">
+                <Input
+                  id="invite-email"
+                  value={inviteForm.email}
+                  onChange={(event) => setInviteForm((current) => ({ ...current, email: event.target.value }))}
+                  placeholder="user@example.com"
+                  type="email"
+                />
+                <Select
+                  value={inviteForm.scope}
+                  onValueChange={(value) => setInviteForm((current) => ({ ...current, scope: value as MemberRole }))}
+                >
+                  <SelectTrigger className="w-full sm:w-36">
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectGroup>
+                      <SelectItem value="Member">Member</SelectItem>
+                      <SelectItem value="Admin">Admin</SelectItem>
+                    </SelectGroup>
+                  </SelectContent>
+                </Select>
+                <Button onClick={handleInvite} disabled={isSettingsSaving || !inviteForm.email.trim()}>
+                  {isSettingsSaving ? <Loader2 data-icon="inline-start" className="animate-spin" /> : <Mail data-icon="inline-start" />}
+                  Invite
+                </Button>
+              </div>
+              <FieldDescription>Copied invitation links open the invite decision page for this project.</FieldDescription>
+            </Field>
+          </FieldGroup>
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>Join Settings</CardTitle>
+          <CardDescription>Control whether users can apply to join and whether they must answer questions.</CardDescription>
+          <CardAction>
+            <Button size="sm" onClick={handleSaveSettings} disabled={!isSettingsDirty || isSettingsSaving}>
+              {isSettingsSaving ? <Loader2 data-icon="inline-start" className="animate-spin" /> : <Check data-icon="inline-start" />}
+              Save
+            </Button>
+          </CardAction>
+        </CardHeader>
+        <CardContent>
+          {settingsQuery.isLoading || !draft ? (
+            <div className="flex items-center justify-center py-10">
+              <Loader2 className="animate-spin" />
+            </div>
+          ) : (
+            <FieldGroup>
+              <Field orientation="horizontal">
+                <Switch
+                  checked={draft.require_approval}
+                  onCheckedChange={(checked) =>
+                    setSettingsDraft({ ...draft, require_approval: checked })
+                  }
+                />
+                <div className="flex flex-col gap-1">
+                  <FieldLabel>Require admin approval</FieldLabel>
+                  <FieldDescription>Submitted join requests remain pending until an admin approves them.</FieldDescription>
+                </div>
+              </Field>
+
+              <Field orientation="horizontal">
+                <Switch
+                  checked={draft.require_questions}
+                  onCheckedChange={(checked) =>
+                    setSettingsDraft({
+                      ...draft,
+                      require_questions: checked,
+                      questions: checked && draft.questions.length === 0 ? [{ question: "" }] : draft.questions,
+                    })
+                  }
+                />
+                <div className="flex flex-col gap-1">
+                  <FieldLabel>Require answers</FieldLabel>
+                  <FieldDescription>Ask applicants to answer project-specific questions.</FieldDescription>
+                </div>
+              </Field>
+
+              {draft.require_questions && (
+                <Field>
+                  <FieldLabel>Questions</FieldLabel>
+                  <div className="flex flex-col gap-2">
+                    {draft.questions.map((item, index) => (
+                      <div key={index} className="flex gap-2">
+                        <Input
+                          value={item.question}
+                          onChange={(event) => {
+                            const nextQuestions = [...draft.questions];
+                            nextQuestions[index] = { question: event.target.value };
+                            setSettingsDraft({ ...draft, questions: nextQuestions });
+                          }}
+                          placeholder="What do you want to ask?"
+                        />
+                        <Button
+                          type="button"
+                          variant="outline"
+                          size="icon"
+                          onClick={() =>
+                            setSettingsDraft({
+                              ...draft,
+                              questions: draft.questions.filter((_, questionIndex) => questionIndex !== index),
+                            })
+                          }
+                        >
+                          <Trash2 />
+                        </Button>
+                      </div>
+                    ))}
+                    <Button
+                      type="button"
+                      variant="outline"
+                      onClick={() => setSettingsDraft({ ...draft, questions: [...draft.questions, { question: "" }] })}
+                    >
+                      <Plus data-icon="inline-start" />
+                      Add question
+                    </Button>
+                  </div>
+                </Field>
+              )}
+            </FieldGroup>
+          )}
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>Pending Invitations</CardTitle>
+          <CardDescription>Invitations that have not been accepted or rejected.</CardDescription>
+        </CardHeader>
+        <CardContent className="flex flex-col gap-3">
+          {invitationsQuery.isLoading ? (
+            <div className="flex items-center justify-center py-10">
+              <Loader2 className="animate-spin" />
+            </div>
+          ) : pendingInvitations.length === 0 ? (
+            <Empty>
+              <EmptyHeader>
+                <EmptyMedia variant="icon">
+                  <Mail />
+                </EmptyMedia>
+                <EmptyTitle>No pending invitations</EmptyTitle>
+                <EmptyDescription>Invitations you send will be listed here.</EmptyDescription>
+              </EmptyHeader>
+            </Empty>
+          ) : (
+            pendingInvitations.map((invitation) => {
+              const loading = actionKey === `invite:${invitation.user_uid}`;
+              return (
+                <Card key={invitation.user_uid} size="sm" className="bg-muted/20">
+                  <CardHeader>
+                    <CardTitle className="flex items-center gap-2">
+                      {invitation.scope === "Admin" ? <Shield /> : <User />}
+                      <span className="font-mono text-sm">{invitation.user_uid}</span>
+                      <Badge variant="secondary">{invitation.scope}</Badge>
+                    </CardTitle>
+                    <CardDescription>
+                      Invited by {invitation.invited_by_username ?? "Unknown"} on {formatDate(invitation.created_at)}
+                    </CardDescription>
+                    <CardAction>
+                      <Button
+                        size="sm"
+                        variant="outline"
+                        onClick={() => handleCancelInvite(invitation.user_uid)}
+                        disabled={loading}
+                      >
+                        {loading ? <Loader2 data-icon="inline-start" className="animate-spin" /> : <X data-icon="inline-start" />}
+                        Cancel
+                      </Button>
+                    </CardAction>
+                  </CardHeader>
+                </Card>
+              );
+            })
+          )}
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>Join Requests</CardTitle>
+          <CardDescription>Approve or reject users who requested project access.</CardDescription>
+        </CardHeader>
+        <CardContent className="flex flex-col gap-3">
+          {requestsQuery.isLoading ? (
+            <div className="flex items-center justify-center py-10">
+              <Loader2 className="animate-spin" />
+            </div>
+          ) : pendingRequests.length === 0 ? (
+            <Empty>
+              <EmptyHeader>
+                <EmptyTitle>No pending requests</EmptyTitle>
+                <EmptyDescription>User applications will appear here.</EmptyDescription>
+              </EmptyHeader>
+            </Empty>
+          ) : (
+            pendingRequests.map((request) => {
+              const approveLoading = actionKey === `request:${request.id}:approve`;
+              const rejectLoading = actionKey === `request:${request.id}:reject`;
+              return (
+                <Card key={request.id} size="sm" className="bg-muted/20">
+                  <CardHeader>
+                    <CardTitle className="flex items-center gap-2">
+                      {request.username}
+                      <Badge variant="secondary">pending</Badge>
+                    </CardTitle>
+                    <CardDescription>
+                      Requested on {formatDate(request.created_at)}
+                      {request.message ? ` · ${request.message}` : ""}
+                    </CardDescription>
+                  </CardHeader>
+                  <CardContent className="flex flex-col gap-4">
+                    {projectName && <JoinRequestAnswers projectName={projectName} requestId={request.id} />}
+                    <div className="flex flex-col gap-3 md:flex-row md:items-end">
+                      <Field className="md:max-w-40">
+                        <FieldLabel>Approval role</FieldLabel>
+                        <Select
+                          value={requestRoles[request.id] ?? "Member"}
+                          onValueChange={(value) =>
+                            setRequestRoles((current) => ({ ...current, [request.id]: value as MemberRole }))
+                          }
+                        >
+                          <SelectTrigger className="w-full">
+                            <SelectValue />
+                          </SelectTrigger>
+                          <SelectContent>
+                            <SelectGroup>
+                              <SelectItem value="Member">Member</SelectItem>
+                              <SelectItem value="Admin">Admin</SelectItem>
+                            </SelectGroup>
+                          </SelectContent>
+                        </Select>
+                      </Field>
+                      <Field className="flex-1">
+                        <FieldLabel>Reject reason</FieldLabel>
+                        <Textarea
+                          value={rejectReasons[request.id] ?? ""}
+                          onChange={(event) =>
+                            setRejectReasons((current) => ({ ...current, [request.id]: event.target.value }))
+                          }
+                          rows={2}
+                          placeholder="Optional reason shown in request history."
+                        />
+                      </Field>
+                      <div className="flex gap-2">
+                        <Button
+                          onClick={() => handleProcessRequest(request, true)}
+                          disabled={approveLoading || rejectLoading}
+                        >
+                          {approveLoading ? <Loader2 data-icon="inline-start" className="animate-spin" /> : <Check data-icon="inline-start" />}
+                          Approve
+                        </Button>
+                        <Button
+                          variant="outline"
+                          onClick={() => handleProcessRequest(request, false)}
+                          disabled={approveLoading || rejectLoading}
+                        >
+                          {rejectLoading ? <Loader2 data-icon="inline-start" className="animate-spin" /> : <X data-icon="inline-start" />}
+                          Reject
+                        </Button>
+                      </div>
+                    </div>
+                  </CardContent>
+                </Card>
+              );
+            })
+          )}
+        </CardContent>
+      </Card>
     </div>
   );
 }

src/contexts/room/room-context.tsx

@@ -10,7 +10,7 @@ import {
 } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { useWsEvent, useWsStatus, getWsClient, useRoomSubscription } from '@/ws';
-import { roomGet, participantList, pinList, threadList } from '@/client/api';
+import { roomGet, participantList, pinAdd, pinRemove, pinList, threadList } from '@/client/api';
 import type { AxiosResponse } from 'axios';
 import type {
   ApiResponseRoomResponse,
@@ -74,8 +74,8 @@ export interface RoomContextValue {
   deleteAi: (agentId: string) => void;
 
   /** Pin management */
-  addPin: (messageId: string) => void;
+  addPin: (messageId: string) => Promise<void>;
-  removePin: (messageId: string) => void;
+  removePin: (messageId: string) => Promise<void>;
 
   /** Member state */
   updateDoNotDisturb: (dnd: boolean) => Promise<void>;
@@ -199,14 +199,18 @@ export function RoomProvider({ roomId, projectName, children }: RoomProviderProp
     if (client && roomId) client.deleteAi(roomId, agentId);
   }, [roomId]);
 
-  const addPin = useCallback((messageId: string) => {
+  const addPin = useCallback(async (messageId: string) => {
-    const client = safeGetClient();
+    if (!roomId) return;
-    if (client && roomId) client.emitRaw('pin_add', { room: roomId, message: messageId });
+    const res = await pinAdd(roomId, messageId);
+    const pin = res.data?.data;
+    if (!pin) return;
+    setPinnedMessages((prev) => (prev.some((p) => p.message === pin.message) ? prev : [...prev, pin]));
   }, [roomId]);
 
-  const removePin = useCallback((messageId: string) => {
+  const removePin = useCallback(async (messageId: string) => {
-    const client = safeGetClient();
+    if (!roomId) return;
-    if (client && roomId) client.emitRaw('pin_remove', { room: roomId, message: messageId });
+    await pinRemove(roomId, messageId);
+    setPinnedMessages((prev) => prev.filter((p) => p.message !== messageId));
   }, [roomId]);
 
   const updateDoNotDisturb = useCallback(async (dnd: boolean) => {
@@ -467,7 +471,11 @@ export function RoomProvider({ roomId, projectName, children }: RoomProviderProp
   useWsEvent('pin_added', (event) => {
     if (event.room_id !== roomId) return;
     const { room, message, pinned_by, pinned_at } = event.data;
-    setPinnedMessages((prev: PinnedMessage[]) => [...prev, { room, message, pinned_by, pinned_at }]);
+    setPinnedMessages((prev: PinnedMessage[]) => (
+      prev.some((p) => p.message === message)
+        ? prev
+        : [...prev, { room, message, pinned_by, pinned_at }]
+    ));
   });
 
   useWsEvent('pin_removed', (event) => {