media viewer visual update

frontend/src/components/MediaViewer/MediaViewer.tsx

@@ -1,4 +1,4 @@
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 import { useQuery } from "@tanstack/react-query";
 import { api, type BrowseEntry, type MediaItem } from "../../api/client";
 import TagPanel from "../TagPanel/TagPanel";
@@ -11,6 +11,8 @@ interface Props {
 }
 
 export default function MediaViewer({ mediaId, siblings, onClose, onNavigate }: Props) {
+  const [showTags, setShowTags] = useState(true);
+
   const { data: item } = useQuery<MediaItem>({
     queryKey: ["media", mediaId],
     queryFn: () => api.media.get(mediaId),
@@ -32,74 +34,80 @@ export default function MediaViewer({ mediaId, siblings, onClose, onNavigate }:
   }, [prevId, nextId, onClose, onNavigate]);
 
   return (
-    <div
-      onClick={onClose}
-      style={{
-        position: "fixed", inset: 0, background: "rgba(0,0,0,0.85)",
-        display: "flex", alignItems: "center", justifyContent: "center", zIndex: 100,
-      }}
-    >
+    <>
+      {/* Backdrop */}
+      <div
+        onClick={onClose}
+        style={{ position: "fixed", inset: 0, background: "rgba(0,0,0,0.85)", zIndex: 100 }}
+      />
+
+      {/* Prev */}
+      <button
+        onClick={() => prevId && onNavigate(prevId)}
+        disabled={!prevId}
+        style={{ position: "fixed", left: 16, top: "50%", transform: "translateY(-50%)", zIndex: 102, fontSize: 36, background: "none", border: "none", color: prevId ? "#fff" : "#444", cursor: prevId ? "pointer" : "default" }}
+      >
+        ‹
+      </button>
+
+      {/* Next */}
+      <button
+        onClick={() => nextId && onNavigate(nextId)}
+        disabled={!nextId}
+        style={{ position: "fixed", right: showTags ? 276 : 16, top: "50%", transform: "translateY(-50%)", zIndex: 102, fontSize: 36, background: "none", border: "none", color: nextId ? "#fff" : "#444", cursor: nextId ? "pointer" : "default" }}
+      >
+        ›
+      </button>
+
+      {/* Media card */}
       <div
         onClick={(e) => e.stopPropagation()}
-        style={{
-          display: "flex", gap: 16, background: "#1a1a1a", borderRadius: 8,
-          padding: 16, maxWidth: "95vw", maxHeight: "95vh", overflow: "auto",
-        }}
+        style={{ position: "fixed", top: "50%", left: "50%", transform: "translate(-50%, -50%)", zIndex: 101, background: "#1a1a1a", borderRadius: 8, padding: 16, display: "flex", flexDirection: "column", alignItems: "center", gap: 12, maxWidth: "80vw", maxHeight: "90vh", overflow: "auto" }}
       >
-        {/* Prev */}
-        <button
-          onClick={() => prevId && onNavigate(prevId)}
-          disabled={!prevId}
-          style={{ alignSelf: "center", fontSize: 24, background: "none", border: "none", color: prevId ? "#fff" : "#444", cursor: prevId ? "pointer" : "default" }}
-        >
-          ‹
-        </button>
-
-        {/* Media */}
-        <div style={{ flex: 1, display: "flex", flexDirection: "column", alignItems: "center", gap: 12 }}>
-          {item?.filename && (
-            <div style={{ color: "#ccc", fontSize: 13 }}>{item.filename}</div>
-          )}
-          {item?.media_type === "image" && (
-            <img
-              src={api.media.fileUrl(mediaId)}
-              alt={item.filename}
-              style={{ maxWidth: "70vw", maxHeight: "80vh", objectFit: "contain" }}
-            />
-          )}
-          {item?.media_type === "video" && (
-            <video
-              src={api.media.fileUrl(mediaId)}
-              controls
-              style={{ maxWidth: "70vw", maxHeight: "80vh" }}
-            />
-          )}
-        </div>
-
-        {/* Next */}
-        <button
-          onClick={() => nextId && onNavigate(nextId)}
-          disabled={!nextId}
-          style={{ alignSelf: "center", fontSize: 24, background: "none", border: "none", color: nextId ? "#fff" : "#444", cursor: nextId ? "pointer" : "default" }}
-        >
-          ›
-        </button>
-
-        {/* Tag panel */}
-        {item && (
-          <div style={{ color: "#fff", borderLeft: "1px solid #333", paddingLeft: 16, minWidth: 200 }}>
-            <TagPanel item={item} />
-          </div>
+        {item?.filename && (
+          <div style={{ color: "#ccc", fontSize: 13 }}>{item.filename}</div>
         )}
+        {item?.media_type === "image" && (
+          <img
+            src={api.media.fileUrl(mediaId)}
+            alt={item.filename}
+            style={{ maxWidth: "70vw", maxHeight: "82vh", objectFit: "contain" }}
+          />
+        )}
+        {item?.media_type === "video" && (
+          <video
+            src={api.media.fileUrl(mediaId)}
+            controls
+            style={{ maxWidth: "70vw", maxHeight: "82vh" }}
+          />
+        )}
+      </div>
 
-        {/* Close */}
+      {/* Top-right controls */}
+      <div style={{ position: "fixed", top: 16, right: 16, zIndex: 103, display: "flex", gap: 8 }}>
+        <button
+          onClick={() => setShowTags((v) => !v)}
+          style={{ background: "none", border: "none", color: "#fff", fontSize: 20, cursor: "pointer" }}
+        >
+          ☰
+        </button>
         <button
           onClick={onClose}
-          style={{ position: "absolute", top: 16, right: 16, background: "none", border: "none", color: "#fff", fontSize: 20, cursor: "pointer" }}
+          style={{ background: "none", border: "none", color: "#fff", fontSize: 20, cursor: "pointer" }}
         >
           ✕
         </button>
       </div>
-    </div>
+
+      {/* Tag panel */}
+      {showTags && item && (
+        <div
+          onClick={(e) => e.stopPropagation()}
+          style={{ position: "fixed", top: 0, right: 0, height: "100%", width: 260, background: "#1a1a1a", borderLeft: "1px solid #333", padding: "48px 16px 16px", zIndex: 101, overflowY: "auto" }}
+        >
+          <TagPanel item={item} />
+        </div>
+      )}
+    </>
   );
 }

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