Merge branch 'worktree-neo-surveillance-redesign'

services/frontend/src/app/(dashboard)/messages/page.tsx

@@ -2,10 +2,11 @@
 
 import { useCallback, useEffect, useState } from "react";
 import { useSearchParams, useRouter } from "next/navigation";
-import { Search, Flag, Image, Loader2, RefreshCw } from "lucide-react";
+import { Flag, Image, Loader2, RefreshCw, Search } from "lucide-react";
 import { MessageList } from "@/components/messages/message-list";
-import { MessageDetail } from "@/components/messages/message-detail";
+import { MessageDetailView } from "@/components/messages/message-detail-view";
 import { SearchOverlay } from "@/components/messages/search-overlay";
+import { extractFirstImage } from "@/components/messages/message-card";
 import { SubNav } from "@/components/layout/sub-nav";
 import { ErrorState, LoadingSkeleton } from "@/components/shared";
 import { GlassCard } from "@/components/glass/card";
@@ -31,9 +32,10 @@ import {
   useReview,
   useTextChannels,
 } from "@/hooks";
+import type { MessageRecord } from "@/lib/types";
+import { cn } from "@/lib/utils";
 import { useWebSocket } from "@/lib/ws/context";
 import { GuildSelector } from "@/components/shared/guild-selector";
-import { cn } from "@/lib/utils";
 
 type MessagesTab = "all" | "images" | "review";
 
@@ -41,9 +43,15 @@ export default function MessagesPage() {
   const router = useRouter();
   const searchParams = useSearchParams();
   const [guildId, setGuildId] = useState(searchParams.get("guild") || "");
-  const [selectedChannel, setSelectedChannel] = useState(searchParams.get("channel") || "");
-  const [detailId, setDetailId] = useState<string | null>(searchParams.get("selected"));
-  const [tab, setTab] = useState<MessagesTab>((searchParams.get("tab") as MessagesTab) || "all");
+  const [selectedChannel, setSelectedChannel] = useState(
+    searchParams.get("channel") || "",
+  );
+  const [detailId, setDetailId] = useState<string | null>(
+    searchParams.get("selected"),
+  );
+  const [tab, setTab] = useState<MessagesTab>(
+    (searchParams.get("tab") as MessagesTab) || "all",
+  );
   const [searchOpen, setSearchOpen] = useState(false);
 
   const ws = useWebSocket();
@@ -64,7 +72,7 @@ export default function MessagesPage() {
 
   useMessagesWsSync(ws, guildId);
 
-  // Sync to URL
+  // Sync state to URL
   useEffect(() => {
     const params = new URLSearchParams();
     if (guildId) params.set("guild", guildId);
@@ -74,7 +82,7 @@ export default function MessagesPage() {
     router.replace(`/messages?${params.toString()}`, { scroll: false });
   }, [guildId, selectedChannel, detailId, tab, router]);
 
-  // Global Cmd+K
+  // Global Cmd+K search trigger
   useEffect(() => {
     const handleKey = (e: KeyboardEvent) => {
       if ((e.metaKey || e.ctrlKey) && e.key === "k") {
@@ -95,8 +103,14 @@ export default function MessagesPage() {
     });
   }, [cursorData, loadMoreMut, guildId, selectedChannel]);
 
+  const handleGuildChange = useCallback((g: string) => {
+    setGuildId(g);
+    setSelectedChannel("");
+    setDetailId(null);
+  }, []);
+
   const subNavTabs = [
-    { id: "all", label: "All" },
+    { id: "all", label: "All", icon: null },
     { id: "images", label: "Images", icon: <Image className="size-3" /> },
     { id: "review", label: "Review", icon: <Flag className="size-3" /> },
   ];
@@ -105,11 +119,14 @@ export default function MessagesPage() {
 
   return (
     <div className="animate-fade-in-up space-y-4">
-      {/* Controls bar */}
+      {/* ── Controls bar ── */}
       <div className="flex items-center gap-3">
-        <GuildSelector value={guildId} onChange={(g) => { setGuildId(g ?? ""); setSelectedChannel(""); }} />
+        <GuildSelector value={guildId} onChange={handleGuildChange} />
         {channels.length > 0 && (
-          <Select value={selectedChannel} onValueChange={(v) => setSelectedChannel(v ?? "")}>
+          <Select
+            value={selectedChannel}
+            onValueChange={(v) => setSelectedChannel(v ?? "")}
+          >
             <SelectTrigger className="h-8 w-40 glass border-glass-border text-xs">
               <SelectValue placeholder="All channels" />
             </SelectTrigger>
@@ -124,105 +141,183 @@ export default function MessagesPage() {
         <button
           type="button"
           onClick={() => setSearchOpen(true)}
-          className="flex items-center gap-1.5 px-3 py-1.5 rounded-md text-xs text-text-secondary/60 hover:text-text-primary glass hover:glass-elevated transition-all ml-auto"
+          className="ml-auto flex items-center gap-1.5 rounded-md px-3 py-1.5 text-xs text-text-secondary/60 hover:text-text-primary glass hover:glass-elevated transition-all"
         >
           <Search className="size-3.5" />
           Search
-          <span className="text-[10px] text-text-secondary/30 font-mono hidden sm:inline">⌘K</span>
+          <span className="hidden font-mono text-[10px] text-text-secondary/30 sm:inline">
+            &#8984;K
+          </span>
         </button>
-        <Button variant="outline" size="sm" onClick={() => reanalyzeBatchMut.mutate(guildId)} className="h-8 text-xs">
-          <RefreshCw className="size-3 mr-1" /> Reanalyze
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={() => reanalyzeBatchMut.mutate(guildId)}
+          className="h-8 text-xs"
+        >
+          <RefreshCw className="mr-1 size-3" /> Reanalyze
         </Button>
       </div>
 
-      <SubNav tabs={subNavTabs} activeTab={tab} onTabChange={(t) => setTab(t as MessagesTab)} />
+      {/* ── Sub navigation ── */}
+      <SubNav
+        tabs={subNavTabs}
+        activeTab={tab}
+        onTabChange={(t) => setTab(t as MessagesTab)}
+      />
 
-      {/* Split pane */}
+      {/* ── Split pane ── */}
       {error ? (
         <ErrorState message={error.message} onRetry={refetch} />
       ) : isLoading ? (
         <LoadingSkeleton count={6} height="h-20" />
       ) : (
         <div className="flex gap-4">
-          {/* Left pane — message list */}
-          <div className={cn("space-y-2", detailId ? "w-1/2 lg:w-2/5" : "w-full")}>
+          {/* Left pane */}
+          <div
+            className={cn(
+              "space-y-2",
+              detailId ? "w-1/2 lg:w-2/5" : "w-full",
+            )}
+          >
             {tab === "all" && (
-              <>
-                <MessageList messages={currentMessages} selectedId={detailId} onSelect={setDetailId} />
-                {cursorData?.hasMore && (
-                  <div className="flex justify-center py-4">
-                    <Button variant="outline" size="sm" onClick={handleLoadMore} disabled={loadMoreMut.isPending} className="text-xs glass">
-                      {loadMoreMut.isPending && <Loader2 className="size-3 animate-spin mr-1" />}
-                      Load more
-                    </Button>
-                  </div>
-                )}
-              </>
+              <MessageList
+                messages={currentMessages}
+                selectedId={detailId}
+                onSelect={setDetailId}
+                onReanalyze={(id) => reanalyzeMut.mutate(id)}
+                hasMore={cursorData?.hasMore}
+                onLoadMore={handleLoadMore}
+                isLoadingMore={loadMoreMut.isPending}
+              />
             )}
             {tab === "images" && (
               <ImageGrid items={images ?? []} onSelect={setDetailId} />
             )}
             {tab === "review" && (
-              <ReviewList items={reviews ?? []} onSelect={setDetailId} onReanalyze={(id: string) => reanalyzeMut.mutate(id)} />
+              <ReviewList
+                items={reviews ?? []}
+                onSelect={setDetailId}
+              />
             )}
           </div>
 
-          {/* Right pane — detail */}
+          {/* Right pane — message detail */}
           {detailId && (
-            <div className="hidden md:block w-1/2 lg:w-3/5 sticky top-16 self-start">
+            <div className="sticky top-16 hidden w-1/2 self-start md:block lg:w-3/5">
               {detailLoading ? (
                 <GlassPanel dense className="flex items-center justify-center py-12">
                   <Loader2 className="size-5 animate-spin text-text-secondary/60" />
                 </GlassPanel>
               ) : detailMessage ? (
-                <MessageDetail
-                  message={detailMessage}
-                  attachments={detailAttachments}
-                  onBack={() => setDetailId(null)}
-                />
+                <div className="space-y-3">
+                  <button
+                    type="button"
+                    onClick={() => setDetailId(null)}
+                    className="text-xs text-text-secondary/60 hover:text-text-primary transition-colors"
+                  >
+                    &larr; Back to list
+                  </button>
+                  <MessageDetailView
+                    message={detailMessage}
+                    attachments={detailAttachments}
+                  />
+                </div>
               ) : null}
             </div>
           )}
         </div>
       )}
 
-      {/* Search overlay */}
-      <SearchOverlay open={searchOpen} onClose={() => setSearchOpen(false)} onSelect={setDetailId} />
+      {/* ── Search overlay ── */}
+      <SearchOverlay
+        open={searchOpen}
+        onClose={() => setSearchOpen(false)}
+        onSelect={(id) => {
+          setDetailId(id);
+          setTab("all");
+        }}
+      />
     </div>
   );
 }
 
-// Inline ImageGrid and ReviewList
-function ImageGrid({ items, onSelect }: { items: any[]; onSelect: (id: string) => void }) {
+// ── Inline ImageGrid (glass-styled) ────────────────
+
+function ImageGrid({
+  items,
+  onSelect,
+}: {
+  items: MessageRecord[];
+  onSelect: (id: string) => void;
+}) {
   return (
     <div className="grid grid-cols-3 gap-2">
-      {items.map((item: any) => (
-        <button key={item.id} type="button" onClick={() => onSelect(item.message_id)} className="glass rounded-lg overflow-hidden hover:scale-[1.02] transition-transform">
-          <img src={item.uploaded_url || item.discord_url} alt="" className="w-full h-24 object-cover" loading="lazy" />
-        </button>
-      ))}
+      {items.map((item) => {
+        const imgUrl = extractFirstImage(item.metadata);
+        return (
+          <button
+            key={item.id}
+            type="button"
+            onClick={() => onSelect(item.id)}
+            className="glass overflow-hidden rounded-lg transition-transform hover:scale-[1.02]"
+          >
+            {imgUrl ? (
+              <img
+                src={imgUrl}
+                alt=""
+                className="h-24 w-full object-cover"
+                loading="lazy"
+              />
+            ) : (
+              <div className="flex h-24 w-full items-center justify-center text-xs text-text-secondary/40">
+                No image
+              </div>
+            )}
+          </button>
+        );
+      })}
       {items.length === 0 && (
-        <div className="col-span-3 py-12 text-center text-xs text-text-secondary/40">No images</div>
+        <div className="col-span-3 py-12 text-center text-xs text-text-secondary/40">
+          No images
+        </div>
       )}
     </div>
   );
 }
 
-function ReviewList({ items, onSelect, onReanalyze }: { items: any[]; onSelect: (id: string) => void; onReanalyze: (id: string) => void }) {
+// ── Inline ReviewList (glass-styled) ────────────────
+
+function ReviewList({
+  items,
+  onSelect,
+}: {
+  items: MessageRecord[];
+  onSelect: (id: string) => void;
+}) {
   return (
     <div className="space-y-2">
-      {items.map((item: any) => (
-        <GlassCard key={item.id} variant="danger" className="p-3 cursor-pointer" onClick={() => onSelect(item.message_id)}>
+      {items.map((item) => (
+        <GlassCard
+          key={item.id}
+          variant="danger"
+          className="cursor-pointer p-3"
+          onClick={() => onSelect(item.id)}
+        >
           <div className="flex items-start gap-2">
-            <Flag className="size-3.5 text-accent-purple mt-0.5 shrink-0" />
-            <div className="flex-1 min-w-0">
-              <p className="text-xs text-text-secondary line-clamp-2">{item.content || item.id}</p>
+            <Flag className="mt-0.5 size-3.5 shrink-0 text-accent-purple" />
+            <div className="min-w-0 flex-1">
+              <p className="line-clamp-2 text-xs text-text-secondary">
+                {item.content || item.id}
+              </p>
             </div>
           </div>
         </GlassCard>
       ))}
       {items.length === 0 && (
-        <div className="py-12 text-center text-xs text-text-secondary/40">No flagged messages</div>
+        <div className="py-12 text-center text-xs text-text-secondary/40">
+          No flagged messages
+        </div>
       )}
     </div>
   );