search navigation

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>
   );
 }