feat : ask for noti

components/comments/admin-comment-inbox.tsx

@@ -9,18 +9,20 @@ import { Field, FieldGroup, FieldLabel } from "@/components/ui/field";
 import { FuzzyCombobox, ComboboxContent, ComboboxEmpty, ComboboxInput, ComboboxItem, ComboboxList } from "@/components/ui/combobox";
 import { Alert, AlertDescription } from "@/components/ui/alert";
 import { Empty, EmptyHeader, EmptyTitle, EmptyDescription } from "@/components/ui/empty";
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@/components/ui/dialog";
 import type { CommentPage } from "@/lib/comments/types";
 import { characterRarityGradientClass } from "@/lib/catalog/rarity";
 import { cn } from "@/lib/utils";
 import { useMarkCommentsRead } from "./admin-unread-comments";
 import { CommentPushPrompt } from "./comment-push-prompt";
-import { CommentCard } from "./comment-card";
+import { CommentCard, CommentThread } from "./comment-card";
 import { CommentSkeleton } from "./comment-skeleton";
 import { useCommentEvents } from "./use-comment-events";
 import { useCommentFeed } from "./use-comment-feed";
 
 type TargetOption = { value: string; label: string; image: string | null; rarity: number | null; characterKey: string | null };
-export function AdminCommentInbox({ initial, targets, initialTarget }: { initial: CommentPage; targets: TargetOption[]; initialTarget?: string }) {
+export function AdminCommentInbox({ initial, targets, initialTarget, initialComment }: { initial: CommentPage; targets: TargetOption[]; initialTarget?: string; initialComment?: string }) {
+  const [notificationOpen, setNotificationOpen] = useState(Boolean(initialComment));
   const [target, setTarget] = useState<TargetOption | null>(targets.find((item) => item.value === initialTarget) ?? null);
   const [status, setStatus] = useState("all");
   const [answered, setAnswered] = useState("all");
@@ -31,7 +33,11 @@ export function AdminCommentInbox({ initial, targets, initialTarget }: { initial
   const markRead = useMarkCommentsRead();
   useEffect(() => { void markRead(target?.value ?? "all"); }, [markRead, target, feed.revision]);
   return <div className="flex flex-col gap-6">
-    {feed.page.viewer && <CommentPushPrompt userId={feed.page.viewer.id} />}
+    {feed.page.viewer && <CommentPushPrompt userId={feed.page.viewer.id} admin />}
+    {initialComment && initialTarget && <Dialog open={notificationOpen} onOpenChange={setNotificationOpen}><DialogContent className="max-h-[90svh] overflow-y-auto sm:max-w-4xl">
+      <DialogHeader><DialogTitle>การสนทนา</DialogTitle><DialogDescription>ความคิดเห็นจากการแจ้งเตือนและคำตอบกลับ</DialogDescription></DialogHeader>
+      {notificationOpen && <CommentThread rootId={initialComment} expectedTarget={initialTarget} onChange={() => feed.refresh({ silent: true })} />}
+    </DialogContent></Dialog>}
     <FieldGroup className="md:grid md:grid-cols-3">
       <Field><FieldLabel>ไกด์หรือรอบ Stygian</FieldLabel>
         <FuzzyCombobox items={targets} value={target} onValueChange={setTarget} itemToStringLabel={(item) => item.label} itemToStringValue={(item) => item.value}