comment-panel.tsx

comment-panel.tsxapps/web/src/components/comments/comment-panel.tsxraw ← comments4,666 B← Back to the app
1"use client";
2 
3/**
4 * CommentPanel — the page's comment drawer (TASK-0094 R2).
5 *
6 * Mounts the Phase-3 `CommentThread` (the thread list + composer, already
7 * TanStack-backed) and wires it to realtime:
8 *   - on a `comment.event` frame for this page (the room's fan-out, R1):
9 *       created / replied  → bump the "New comments (n)" pill (when the
10 *         panel is closed) + invalidate the thread list (a refetch is the
11 *         authoritative state — the frame carries only a `preview`),
12 *       resolved/reopened/reacted/deleted → invalidate (a state change on an
13 *         existing thread, not a new comment — the pill is untouched),
14 *   - opening the panel clears the pill (the refetch shows the new comments)
15 *     + refetches (a fresh mount re-reads the server, the source of truth).
16 *
17 * The panel is REMOTE-update only: the local save path (the composer's
18 * mutation) is already optimistic via the thread list; the frame reconciles
19 * it. The 300 ms budget (R2) is REST write → api publish → stream → this
20 * frame → refetch — the frame is the fast path, the refetch is lossless.
21 */
22import { useEffect } from "react";
23import { X } from "lucide-react";
24import { useQueryClient } from "@tanstack/react-query";
25import { useWorkspaceMembers } from "@/hooks/use-workspace";
26import { useAuthStore } from "@/lib/auth-store";
27import { realtime } from "@/lib/realtime";
28import { useCommentPillStore } from "@/stores/comment-pill-store";
29import { CommentThread, type CommentAnchor } from "./comment-thread";
30 
31export interface CommentPanelProps {
32  pageId: string;
33  workspaceId: string;
34  open: boolean;
35  onClose: () => void;
36}
37 
38export function CommentPanel({ pageId, workspaceId, open, onClose }: CommentPanelProps) {
39  const qc = useQueryClient();
40  const currentUserId = useAuthStore((s) => s.user?.id ?? null);
41  const { data: members = [] } = useWorkspaceMembers(workspaceId);
42  const clearPill = useCommentPillStore((s) => s.clear);
43 
44  // The composer is enabled for workspace members (the server re-authorizes
45  // COMMENT — this is UX only; a shared viewer without a membership is
46  // view-only).
47  const canComment = members.some((m) => m.userId === currentUserId);
48  const composerMembers = members.map((m) => m.user);
49 
50  // Realtime: fold this page's `comment.event` frames into the thread list.
51  // The socket + the `page:<id>` channel are already open (the page layout's
52  // usePageRealtime) — the panel reuses the same connection (R2). The "New
53  // comments" pill is owned by the page header (it bumps only while this
54  // panel is CLOSED) — here every frame is a thread change → refetch.
55  useEffect(() => {
56    if (!open) return;
57    const off = realtime.on("comment.event", (frame) => {
58      if (frame.type !== "comment.event" || frame.pageId !== pageId) return;
59      // The frame is a hint (a `preview`); the refetch is authoritative +
60      // lossless (correct author/timestamps/reactions).
61      void qc.invalidateQueries({ queryKey: ["comments", pageId] });
62    });
63    return () => off();
64  }, [open, pageId, qc]);
65 
66  // Opening the panel: clear the pill (a refetch shows the new comments) +
67  // a fresh read of the thread list.
68  useEffect(() => {
69    if (open) {
70      clearPill(pageId);
71      void qc.invalidateQueries({ queryKey: ["comments", pageId] });
72    }
73  }, [open, pageId, qc, clearPill]);
74 
75  if (!open) return null;
76 
77  const anchor: CommentAnchor = { pageId };
78  return (
79    <>
80      {/* Backdrop (a click closes the panel). */}
81      <div
82        className="fixed inset-0 z-40 bg-black/20"
83        aria-hidden
84        onClick={onClose}
85      />
86      <aside
87        className="fixed inset-y-0 right-0 z-50 flex w-full max-w-md flex-col border-l border-border bg-background shadow-xl"
88        role="dialog"
89        aria-label="Comments"
90        data-testid="comment-panel"
91      >
92        <div className="flex shrink-0 items-center justify-between border-b border-border px-4 py-3">
93          <h2 className="text-sm font-semibold">Comments</h2>
94          <button
95            type="button"
96            className="rounded-md p-1.5 text-muted-foreground hover:bg-accent hover:text-foreground"
97            onClick={onClose}
98            aria-label="Close comments"
99          >
100            <X className="size-4" aria-hidden />
101          </button>
102        </div>
103        <div className="min-h-0 flex-1 overflow-y-auto p-4">
104          <CommentThread
105            anchor={anchor}
106            members={composerMembers}
107            canComment={canComment}
108            currentUserId={currentUserId}
109            workspaceId={workspaceId}
110          />
111        </div>
112      </aside>
113    </>
114  );
115}
116