From 5c766f042c31bbcbbbfc703aa7ce7c4c1ee44ac6 Mon Sep 17 00:00:00 2001
From: Garret Patti <garretpatti@gmail.com>
Date: Sat, 16 May 2026 15:13:56 -0400
Subject: [PATCH] search navigation

---
 frontend/src/pages/SearchPage.tsx | 23 +++++++++++++++++++++--
 1 file changed, 21 insertions(+), 2 deletions(-)

diff --git a/frontend/src/pages/SearchPage.tsx b/frontend/src/pages/SearchPage.tsx
index 09d16b2..d0a339e 100644
--- a/frontend/src/pages/SearchPage.tsx
+++ b/frontend/src/pages/SearchPage.tsx
@@ -1,11 +1,13 @@
 import { useState } from "react";
 import { useQuery } from "@tanstack/react-query";
-import { api, type MediaItem, type TagsByCategory } from "../api/client";
+import { api, type MediaItem, type TagsByCategory, type BrowseEntry } from "../api/client";
+import MediaViewer from "../components/MediaViewer/MediaViewer";
 
 export default function SearchPage() {
   const [q, setQ] = useState("");
   const [selectedTags, setSelectedTags] = useState<number[]>([]);
   const [submitted, setSubmitted] = useState(false);
+  const [viewingId, setViewingId] = useState<number | null>(null);
 
   const { data: grouped = [] } = useQuery<TagsByCategory[]>({
     queryKey: ["tags"],
@@ -78,7 +80,7 @@ export default function SearchPage() {
 
       <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(140px, 1fr))", gap: 12 }}>
         {results.map((item) => (
-          <div key={item.id} style={{ border: "1px solid var(--border)", borderRadius: 6, overflow: "hidden", background: "var(--bg-card)" }}>
+          <div key={item.id} onClick={() => setViewingId(item.id)} style={{ border: "1px solid var(--border)", borderRadius: 6, overflow: "hidden", background: "var(--bg-card)", cursor: "pointer" }}>
             <img
               src={api.media.thumbnailUrl(item.id)}
               alt={item.filename}
@@ -104,6 +106,23 @@ export default function SearchPage() {
       {submitted && !isFetching && results.length === 0 && (
         <p style={{ color: "var(--text-secondary)" }}>No results found.</p>
       )}
+
+      {viewingId !== null && (() => {
+        const siblings: BrowseEntry[] = results.map((item) => ({
+          name: item.filename,
+          type: item.media_type,
+          rel_path: item.rel_path,
+          media_item_id: item.id,
+        }));
+        return (
+          <MediaViewer
+            mediaId={viewingId}
+            siblings={siblings}
+            onClose={() => setViewingId(null)}
+            onNavigate={(id) => setViewingId(id)}
+          />
+        );
+      })()}
     </div>
   );
 }