fix centering issue in media viewer

Reviewed-on: http://gitea.lan/gpatti/MediaLore-Web-App/pulls/3

backend/app/routers/libraries.py

@@ -2,10 +2,11 @@ from pathlib import Path
 from fastapi import APIRouter, BackgroundTasks, Depends, HTTPException
 from sqlalchemy.ext.asyncio import AsyncSession
 from sqlalchemy import select
+from sqlalchemy.orm import selectinload
 
 from app.database import get_db
 from app.models import Library, MediaItem
-from app.schemas import LibraryCreate, LibraryOut, BrowseResult, BrowseEntry
+from app.schemas import LibraryCreate, LibraryOut, MediaItemOut, BrowseResult, BrowseEntry
 from app.services import scanner, watcher as watcher_service
 
 router = APIRouter(prefix="/libraries", tags=["libraries"])
@@ -63,6 +64,28 @@ async def rescan_library(
     return {"scanning": True}
 
 
+@router.get("/{library_id}/doom-scroll", response_model=list[MediaItemOut])
+async def doom_scroll(
+    library_id: int,
+    path: str = "",
+    db: AsyncSession = Depends(get_db),
+):
+    result = await db.execute(select(Library).where(Library.id == library_id))
+    if not result.scalars().first():
+        raise HTTPException(404, "Library not found")
+
+    stmt = (
+        select(MediaItem)
+        .options(selectinload(MediaItem.tags))
+        .where(MediaItem.library_id == library_id, MediaItem.missing == False)  # noqa: E712
+    )
+    if path:
+        stmt = stmt.where(MediaItem.rel_path.like(path + "/%"))
+
+    result = await db.execute(stmt)
+    return result.scalars().all()
+
+
 @router.delete("/{library_id}", status_code=204)
 async def delete_library(library_id: int, db: AsyncSession = Depends(get_db)):
     result = await db.execute(select(Library).where(Library.id == library_id))

backend/app/services/scanner.py

@@ -8,6 +8,7 @@ from sqlalchemy.ext.asyncio import AsyncSession
 from sqlalchemy import select
 from app.models import MediaItem
 from app.database import SessionLocal
+from app.services.thumbnails import thumbnail_path
 
 log = logging.getLogger(__name__)
 
@@ -86,6 +87,11 @@ async def _do_scan(library_id: int, library_path: str, db: AsyncSession) -> None
 
             if rel in db_items:
                 item = db_items[rel]
+                new_hash = await loop.run_in_executor(None, hash_file, file_path)
+                if item.file_hash != new_hash:
+                    item.file_hash = new_hash
+                    item.updated_at = datetime.utcnow()
+                    thumbnail_path(item.id).unlink(missing_ok=True)
                 if item.missing:
                     item.missing = False
                     item.updated_at = datetime.utcnow()
@@ -93,6 +99,7 @@ async def _do_scan(library_id: int, library_path: str, db: AsyncSession) -> None
                 file_hash = await loop.run_in_executor(None, hash_file, file_path)
                 moved = await _find_by_hash(library_id, file_hash, db)
                 if moved:
+                    thumbnail_path(moved.id).unlink(missing_ok=True)
                     moved.rel_path = rel
                     moved.filename = file_path.name
                     moved.missing = False
@@ -131,4 +138,5 @@ async def _find_by_hash(library_id: int, file_hash: str, db: AsyncSession) -> Me
             MediaItem.missing == True,  # noqa: E712
         )
     )
-    return result.scalars().first()
+    rows = result.scalars().all()
+    return rows[0] if len(rows) == 1 else None

backend/app/services/watcher.py

@@ -9,6 +9,7 @@ from sqlalchemy import select
 from app.database import SessionLocal
 from app.models import Library, MediaItem
 from app.services.scanner import classify, hash_file
+from app.services.thumbnails import thumbnail_path
 
 log = logging.getLogger(__name__)
 
@@ -59,6 +60,7 @@ class LibraryEventHandler(FileSystemEventHandler):
                 )
                 item = result.scalars().first()
                 if item:
+                    thumbnail_path(item.id).unlink(missing_ok=True)
                     item.rel_path = dest_rel
                     item.filename = Path(event.dest_path).name
                     item.missing = False

docker-compose.yml

@@ -3,14 +3,12 @@ services:
     build: ./backend
     restart: unless-stopped
     volumes:
-      - ./data:/data
-      - ${MEDIA_ROOT:-/media}:/media:ro
+      - medialore-data:/data
+      - /data/smb/adult/Images:/media/Images
+      - /data/smb/adult/Video Clips:/media/Video Clips
     environment:
       - DATABASE_URL=sqlite+aiosqlite:////data/medialore.db
       - THUMBNAIL_DIR=/data/thumbnails
-    env_file:
-      - .env
-
   frontend:
     build: ./frontend
     restart: unless-stopped
@@ -18,3 +16,6 @@ services:
       - "8080:80"
     depends_on:
       - backend
+
+volumes:
+  medialore-data:

frontend/src/App.tsx

@@ -21,7 +21,7 @@ function useTheme() {
   return { dark, toggle: () => setDark((d) => !d) };
 }
 
-function Sidebar({ onToggleTheme, dark }: { onToggleTheme: () => void; dark: boolean }) {
+function Sidebar({ onToggleTheme, dark, onClose }: { onToggleTheme: () => void; dark: boolean; onClose?: () => void }) {
   const { data: libraries = [] } = useQuery<Library[]>({
     queryKey: ["libraries"],
     queryFn: api.libraries.list,
@@ -52,7 +52,7 @@ function Sidebar({ onToggleTheme, dark }: { onToggleTheme: () => void; dark: boo
         MediaLore
       </div>
 
-      <NavLink to="/search" style={linkStyle}>Search</NavLink>
+      <NavLink to="/search" style={linkStyle} onClick={onClose}>Search</NavLink>
 
       {libraries.length > 0 && (
         <>
@@ -60,7 +60,7 @@ function Sidebar({ onToggleTheme, dark }: { onToggleTheme: () => void; dark: boo
             Libraries
           </div>
           {libraries.map((lib) => (
-            <NavLink key={lib.id} to={`/library/${lib.id}`} style={linkStyle}>
+            <NavLink key={lib.id} to={`/library/${lib.id}`} style={linkStyle} onClick={onClose}>
               {lib.name}
             </NavLink>
           ))}
@@ -68,7 +68,7 @@ function Sidebar({ onToggleTheme, dark }: { onToggleTheme: () => void; dark: boo
       )}
 
       <div style={{ marginTop: "auto", display: "flex", flexDirection: "column", gap: 4 }}>
-        <NavLink to="/settings" style={linkStyle}>Settings</NavLink>
+        <NavLink to="/settings" style={linkStyle} onClick={onClose}>Settings</NavLink>
         <button
           onClick={onToggleTheme}
           title={dark ? "Switch to light mode" : "Switch to dark mode"}
@@ -83,11 +83,51 @@ function Sidebar({ onToggleTheme, dark }: { onToggleTheme: () => void; dark: boo
 
 function AppShell() {
   const { dark, toggle } = useTheme();
+  const [isMobile, setIsMobile] = useState(() => window.innerWidth < 768);
+  const [sidebarOpen, setSidebarOpen] = useState(false);
+
+  useEffect(() => {
+    const mq = window.matchMedia("(max-width: 767px)");
+    setIsMobile(mq.matches);
+    const handler = (e: MediaQueryListEvent) => {
+      setIsMobile(e.matches);
+      if (!e.matches) setSidebarOpen(false);
+    };
+    mq.addEventListener("change", handler);
+    return () => mq.removeEventListener("change", handler);
+  }, []);
 
   return (
     <div style={{ display: "flex", height: "100vh", background: "var(--bg)", color: "var(--text)" }}>
-      <Sidebar onToggleTheme={toggle} dark={dark} />
-      <main style={{ flex: 1, overflow: "auto", background: "var(--bg)" }}>
+      {/* Mobile hamburger button */}
+      {isMobile && (
+        <button
+          onClick={() => setSidebarOpen((v) => !v)}
+          style={{ position: "fixed", top: 12, left: 12, zIndex: 301, background: "var(--bg)", border: "1px solid var(--border)", borderRadius: 6, padding: "6px 10px", color: "var(--text)", fontSize: 18, cursor: "pointer" }}
+          aria-label="Toggle menu"
+        >
+          ☰
+        </button>
+      )}
+
+      {/* Mobile backdrop */}
+      {isMobile && sidebarOpen && (
+        <div
+          onClick={() => setSidebarOpen(false)}
+          style={{ position: "fixed", inset: 0, background: "rgba(0,0,0,0.4)", zIndex: 299 }}
+        />
+      )}
+
+      {/* Sidebar */}
+      <div style={isMobile ? {
+        position: "fixed", top: 0, left: 0, bottom: 0, zIndex: 300,
+        transform: sidebarOpen ? "translateX(0)" : "translateX(-100%)",
+        transition: "transform 0.2s ease",
+      } : {}}>
+        <Sidebar onToggleTheme={toggle} dark={dark} onClose={isMobile ? () => setSidebarOpen(false) : undefined} />
+      </div>
+
+      <main style={{ flex: 1, overflow: "auto", background: "var(--bg)", paddingTop: isMobile ? 48 : 0 }}>
         <Routes>
           <Route path="/" element={<SearchPage />} />
           <Route path="/search" element={<SearchPage />} />

frontend/src/api/client.ts

@@ -71,6 +71,8 @@ export const api = {
       request<{ scanning: boolean }>(`/libraries/${id}/scan-status`),
     rescan: (id: number) =>
       request<{ scanning: boolean }>(`/libraries/${id}/rescan`, { method: "POST" }),
+    doomScroll: (id: number, path = "") =>
+      request<MediaItem[]>(`/libraries/${id}/doom-scroll?path=${encodeURIComponent(path)}`),
   },
 
   media: {

frontend/src/components/DoomScrollViewer/DoomScrollViewer.tsx

@@ -0,0 +1,167 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+import { api, type MediaItem } from "../../api/client";
+
+interface Props {
+  items: MediaItem[];
+  onClose: () => void;
+  onViewInLibrary: (item: MediaItem) => void;
+}
+
+export default function DoomScrollViewer({ items, onClose, onViewInLibrary }: Props) {
+  const [index, setIndex] = useState(0);
+  const [fading, setFading] = useState(false);
+  const wheelLock = useRef(false);
+  const touchStartY = useRef<number | null>(null);
+  const contentRef = useRef<HTMLDivElement>(null);
+
+  const item = items[index];
+
+  const go = useCallback((delta: 1 | -1) => {
+    if (wheelLock.current) return;
+    const next = index + delta;
+    if (next < 0 || next >= items.length) return;
+    wheelLock.current = true;
+    setFading(true);
+    setTimeout(() => {
+      setIndex(next);
+      setFading(false);
+      wheelLock.current = false;
+    }, 200);
+  }, [index, items.length]);
+
+  useEffect(() => {
+    const onWheel = (e: WheelEvent) => { e.deltaY > 0 ? go(1) : go(-1); };
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === "ArrowDown" || e.key === " ") { e.preventDefault(); go(1); }
+      if (e.key === "ArrowUp") { e.preventDefault(); go(-1); }
+      if (e.key === "Escape") onClose();
+    };
+    window.addEventListener("wheel", onWheel, { passive: true });
+    window.addEventListener("keydown", onKey);
+    return () => {
+      window.removeEventListener("wheel", onWheel);
+      window.removeEventListener("keydown", onKey);
+    };
+  }, [go, onClose]);
+
+  useEffect(() => {
+    const onTouchStart = (e: TouchEvent) => {
+      touchStartY.current = e.touches[0].clientY;
+      if (contentRef.current) contentRef.current.style.transition = "none";
+    };
+
+    const onTouchMove = (e: TouchEvent) => {
+      e.preventDefault();
+      if (touchStartY.current === null || !contentRef.current) return;
+      const offset = e.touches[0].clientY - touchStartY.current;
+      contentRef.current.style.transform = `translateY(${offset}px)`;
+      contentRef.current.style.opacity = String(Math.max(0.3, 1 - Math.abs(offset) / 300));
+    };
+
+    const onTouchEnd = (e: TouchEvent) => {
+      if (touchStartY.current === null) return;
+      const delta = touchStartY.current - e.changedTouches[0].clientY;
+      touchStartY.current = null;
+
+      if (Math.abs(delta) > 80) {
+        // Hand off to the fading animation
+        if (contentRef.current) {
+          contentRef.current.style.transition = "";
+          contentRef.current.style.transform = "";
+          contentRef.current.style.opacity = "";
+        }
+        go(delta > 0 ? 1 : -1);
+      } else {
+        // Snap back to center
+        if (contentRef.current) {
+          const el = contentRef.current;
+          el.style.transition = "opacity 0.25s ease, transform 0.25s ease";
+          el.style.transform = "translateY(0)";
+          el.style.opacity = "1";
+          setTimeout(() => {
+            if (contentRef.current) {
+              contentRef.current.style.transition = "";
+              contentRef.current.style.transform = "";
+              contentRef.current.style.opacity = "";
+            }
+          }, 260);
+        }
+      }
+    };
+
+    window.addEventListener("touchstart", onTouchStart);
+    window.addEventListener("touchmove", onTouchMove, { passive: false });
+    window.addEventListener("touchend", onTouchEnd);
+    return () => {
+      window.removeEventListener("touchstart", onTouchStart);
+      window.removeEventListener("touchmove", onTouchMove);
+      window.removeEventListener("touchend", onTouchEnd);
+    };
+  }, [go]);
+
+  return (
+    <>
+      {/* Backdrop */}
+      <div style={{ position: "fixed", inset: 0, background: "rgba(0,0,0,0.95)", zIndex: 200 }} />
+
+      {/* Media area */}
+      <div
+        ref={contentRef}
+        style={{
+          position: "fixed", inset: 0, zIndex: 201,
+          display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center",
+          gap: 12, paddingBottom: 56,
+          transition: "opacity 0.2s ease, transform 0.2s ease",
+          opacity: fading ? 0 : 1,
+          transform: fading ? "translateY(-12px)" : "translateY(0)",
+        }}
+      >
+        {item?.media_type === "image" && (
+          <img
+            key={item.id}
+            src={api.media.fileUrl(item.id)}
+            alt={item.filename}
+            style={{ maxWidth: "90vw", maxHeight: "82vh", objectFit: "contain" }}
+          />
+        )}
+        {item?.media_type === "video" && (
+          <video
+            key={item.id}
+            src={api.media.fileUrl(item.id)}
+            autoPlay
+            muted
+            playsInline
+            controls
+            loop
+            style={{ maxWidth: "90vw", maxHeight: "82vh" }}
+          />
+        )}
+      </div>
+
+      {/* Bottom bar */}
+      <div
+        style={{
+          position: "fixed", bottom: 0, left: 0, right: 0, zIndex: 202,
+          display: "flex", alignItems: "center", justifyContent: "space-between",
+          padding: "12px 20px", background: "rgba(0,0,0,0.6)",
+        }}
+      >
+        <button
+          onClick={onClose}
+          style={{ background: "none", border: "none", color: "#fff", fontSize: 15, cursor: "pointer" }}
+        >
+          ✕ Close
+        </button>
+        <span style={{ color: "#888", fontSize: 13 }}>
+          {index + 1} / {items.length}
+        </span>
+        <button
+          onClick={() => onViewInLibrary(item)}
+          style={{ background: "none", border: "none", color: "var(--accent, #60a5fa)", fontSize: 15, cursor: "pointer" }}
+        >
+          View in Library →
+        </button>
+      </div>
+    </>
+  );
+}

frontend/src/components/FileBrowser/FileBrowser.tsx

@@ -1,15 +1,21 @@
 import { useState } from "react";
+import { useSearchParams } from "react-router-dom";
 import { useQuery } from "@tanstack/react-query";
-import { api, type BrowseResult } from "../../api/client";
+import { api, type BrowseResult, type MediaItem } from "../../api/client";
 import MediaViewer from "../MediaViewer/MediaViewer";
+import DoomScrollViewer from "../DoomScrollViewer/DoomScrollViewer";
 
 interface Props {
   libraryId: number;
 }
 
 export default function FileBrowser({ libraryId }: Props) {
-  const [libraryPaths, setLibraryPaths] = useState<Record<number, string>>({});
+  const [searchParams] = useSearchParams();
+  const [libraryPaths, setLibraryPaths] = useState<Record<number, string>>({
+    [libraryId]: searchParams.get("path") ?? "",
+  });
   const [viewingId, setViewingId] = useState<number | null>(null);
+  const [doomScrollItems, setDoomScrollItems] = useState<MediaItem[] | null>(null);
 
   const currentPath = libraryPaths[libraryId] ?? "";
 
@@ -25,6 +31,17 @@ export default function FileBrowser({ libraryId }: Props) {
     setViewingId(null);
   }
 
+  async function startDoomScroll() {
+    const items = await api.libraries.doomScroll(libraryId, currentPath);
+    setDoomScrollItems([...items].sort(() => Math.random() - 0.5));
+  }
+
+  function handleViewInLibrary(item: MediaItem) {
+    const dirPath = item.rel_path.split("/").slice(0, -1).join("/");
+    navigate(dirPath);
+    setDoomScrollItems(null);
+  }
+
   return (
     <div style={{ padding: "1rem" }}>
       {/* Breadcrumb */}
@@ -43,6 +60,9 @@ export default function FileBrowser({ libraryId }: Props) {
             </span>
           );
         })}
+        <button onClick={startDoomScroll} style={{ marginLeft: "auto", background: "var(--accent)", color: "#fff", border: "none", borderRadius: 4, padding: "4px 10px", cursor: "pointer", fontSize: 13 }}>
+          Doom Scroll
+        </button>
       </nav>
 
       {isLoading && <p style={{ color: "var(--text-secondary)" }}>Loading…</p>}
@@ -94,6 +114,14 @@ export default function FileBrowser({ libraryId }: Props) {
           onNavigate={setViewingId}
         />
       )}
+
+      {doomScrollItems && (
+        <DoomScrollViewer
+          items={doomScrollItems}
+          onClose={() => setDoomScrollItems(null)}
+          onViewInLibrary={handleViewInLibrary}
+        />
+      )}
     </div>
   );
 }

frontend/src/components/MediaViewer/MediaViewer.tsx

@@ -1,4 +1,4 @@
-import { useEffect } from "react";
+import { useEffect, useRef, 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,15 @@ interface Props {
 }
 
 export default function MediaViewer({ mediaId, siblings, onClose, onNavigate }: Props) {
+  const TAG_PANEL_WIDTH = 260;
+  const EDGE_GAP = 16;
+  const BASE_CARD_TRANSFORM = "translate(-50%, -50%)";
+  const [showTags, setShowTags] = useState(() => window.innerWidth >= 768);
+  const touchStartX = useRef<number | null>(null);
+  const touchStartY = useRef<number | null>(null);
+  const swipeAxis = useRef<"horizontal" | "vertical" | null>(null);
+  const contentRef = useRef<HTMLDivElement>(null);
+
   const { data: item } = useQuery<MediaItem>({
     queryKey: ["media", mediaId],
     queryFn: () => api.media.get(mediaId),
@@ -20,6 +29,16 @@ export default function MediaViewer({ mediaId, siblings, onClose, onNavigate }:
   const currentIndex = mediaSiblings.findIndex((e) => e.media_item_id === mediaId);
   const prevId = currentIndex > 0 ? mediaSiblings[currentIndex - 1].media_item_id : null;
   const nextId = currentIndex < mediaSiblings.length - 1 ? mediaSiblings[currentIndex + 1].media_item_id : null;
+  const cardCenterX = showTags ? `calc((100vw - ${TAG_PANEL_WIDTH}px) / 2)` : "50%";
+
+  // Clear inline styles when a new item loads so the card appears cleanly
+  useEffect(() => {
+    if (contentRef.current) {
+      contentRef.current.style.transition = "";
+      contentRef.current.style.transform = BASE_CARD_TRANSFORM;
+      contentRef.current.style.opacity = "1";
+    }
+  }, [mediaId, BASE_CARD_TRANSFORM]);
 
   useEffect(() => {
     function onKey(e: KeyboardEvent) {
@@ -27,79 +46,170 @@ export default function MediaViewer({ mediaId, siblings, onClose, onNavigate }:
       if (e.key === "ArrowLeft" && prevId) onNavigate(prevId);
       if (e.key === "ArrowRight" && nextId) onNavigate(nextId);
     }
+
+    const onTouchStart = (e: TouchEvent) => {
+      touchStartX.current = e.touches[0].clientX;
+      touchStartY.current = e.touches[0].clientY;
+      swipeAxis.current = null;
+      if (contentRef.current) contentRef.current.style.transition = "none";
+    };
+
+    const onTouchMove = (e: TouchEvent) => {
+      if (touchStartX.current === null || touchStartY.current === null) return;
+      const dx = e.touches[0].clientX - touchStartX.current;
+      const dy = e.touches[0].clientY - touchStartY.current;
+
+      // Commit to an axis on the first significant movement
+      if (swipeAxis.current === null && (Math.abs(dx) > 8 || Math.abs(dy) > 8)) {
+        swipeAxis.current = Math.abs(dx) >= Math.abs(dy) ? "horizontal" : "vertical";
+      }
+
+      // Vertical gestures (tag panel scroll, etc.) pass through untouched
+      if (swipeAxis.current !== "horizontal") return;
+
+      e.preventDefault();
+      if (!contentRef.current) return;
+      contentRef.current.style.transform = `translate(calc(-50% + ${dx}px), -50%)`;
+      contentRef.current.style.opacity = String(Math.max(0.4, 1 - Math.abs(dx) / 400));
+    };
+
+    const onTouchEnd = (e: TouchEvent) => {
+      if (touchStartX.current === null) return;
+      const delta = touchStartX.current - e.changedTouches[0].clientX;
+      touchStartX.current = null;
+      touchStartY.current = null;
+
+      // Non-horizontal gesture: just reset the transition we disabled on touchstart
+      if (swipeAxis.current !== "horizontal") {
+        swipeAxis.current = null;
+        if (contentRef.current) {
+          contentRef.current.style.transition = "";
+          contentRef.current.style.transform = BASE_CARD_TRANSFORM;
+          contentRef.current.style.opacity = "1";
+        }
+        return;
+      }
+      swipeAxis.current = null;
+
+      const targetId = delta > 0 ? nextId : prevId;
+
+      if (Math.abs(delta) > 80 && targetId) {
+        const el = contentRef.current;
+        if (el) {
+          const slideX = delta > 0 ? -120 : 120;
+          el.style.transition = "opacity 0.2s ease, transform 0.2s ease";
+          el.style.transform = `translate(calc(-50% + ${slideX}px), -50%)`;
+          el.style.opacity = "0";
+          setTimeout(() => onNavigate(targetId), 200);
+        } else {
+          onNavigate(targetId);
+        }
+      } else {
+        // Snap back to center
+        const el = contentRef.current;
+        if (el) {
+          el.style.transition = "opacity 0.25s ease, transform 0.25s ease";
+          el.style.transform = "translate(-50%, -50%)";
+          el.style.opacity = "1";
+          setTimeout(() => {
+            if (contentRef.current) {
+              contentRef.current.style.transition = "";
+              contentRef.current.style.transform = BASE_CARD_TRANSFORM;
+              contentRef.current.style.opacity = "1";
+            }
+          }, 260);
+        }
+      }
+    };
+
     window.addEventListener("keydown", onKey);
-    return () => window.removeEventListener("keydown", onKey);
-  }, [prevId, nextId, onClose, onNavigate]);
+    window.addEventListener("touchstart", onTouchStart);
+    window.addEventListener("touchmove", onTouchMove, { passive: false });
+    window.addEventListener("touchend", onTouchEnd);
+    return () => {
+      window.removeEventListener("keydown", onKey);
+      window.removeEventListener("touchstart", onTouchStart);
+      window.removeEventListener("touchmove", onTouchMove);
+      window.removeEventListener("touchend", onTouchEnd);
+    };
+  }, [prevId, nextId, onClose, onNavigate, BASE_CARD_TRANSFORM]);
 
   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={(e) => e.stopPropagation()}
-        style={{
-          display: "flex", gap: 16, background: "#1a1a1a", borderRadius: 8,
-          padding: 16, maxWidth: "95vw", maxHeight: "95vh", overflow: "auto",
-        }}
+        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" }}
       >
-        {/* 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>
+        ‹
+      </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={{ position: "fixed", right: showTags ? TAG_PANEL_WIDTH + EDGE_GAP : EDGE_GAP, top: "50%", transform: "translateY(-50%)", zIndex: 102, fontSize: 36, background: "none", border: "none", color: nextId ? "#fff" : "#444", cursor: nextId ? "pointer" : "default" }}
+      >
+        ›
+      </button>
 
-        {/* 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>
+      {/* Media card */}
+      <div
+        ref={contentRef}
+        onClick={(e) => e.stopPropagation()}
+        style={{ position: "fixed", top: "50%", left: cardCenterX, transform: BASE_CARD_TRANSFORM, zIndex: 101, background: "#1a1a1a", borderRadius: 8, padding: 16, display: "flex", flexDirection: "column", alignItems: "center", gap: 12, maxWidth: "80vw", maxHeight: "90vh", overflow: "auto" }}
+      >
+        {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: TAG_PANEL_WIDTH, 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,22 @@
 import { useState } from "react";
+import { useNavigate } from "react-router-dom";
 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";
+import DoomScrollViewer from "../components/DoomScrollViewer/DoomScrollViewer";
 
 export default function SearchPage() {
+  const routerNavigate = useNavigate();
   const [q, setQ] = useState("");
   const [selectedTags, setSelectedTags] = useState<number[]>([]);
   const [submitted, setSubmitted] = useState(false);
+  const [viewingId, setViewingId] = useState<number | null>(null);
+  const [doomScrollItems, setDoomScrollItems] = useState<MediaItem[] | null>(null);
+
+  function handleViewInLibrary(item: MediaItem) {
+    const dirPath = item.rel_path.split("/").slice(0, -1).join("/");
+    routerNavigate(`/library/${item.library_id}?path=${encodeURIComponent(dirPath)}`);
+  }
 
   const { data: grouped = [] } = useQuery<TagsByCategory[]>({
     queryKey: ["tags"],
@@ -76,9 +87,18 @@ export default function SearchPage() {
 
       {isFetching && <p style={{ color: "var(--text-secondary)" }}>Searching…</p>}
 
+      {results.length > 0 && (
+        <button
+          onClick={() => setDoomScrollItems([...results].sort(() => Math.random() - 0.5))}
+          style={{ background: "var(--accent)", color: "#fff", border: "none", borderRadius: 4, padding: "4px 10px", cursor: "pointer", fontSize: 13, marginBottom: 16 }}
+        >
+          Doom Scroll
+        </button>
+      )}
+
       <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 +124,31 @@ export default function SearchPage() {
       {submitted && !isFetching && results.length === 0 && (
         <p style={{ color: "var(--text-secondary)" }}>No results found.</p>
       )}
+
+      {doomScrollItems && (
+        <DoomScrollViewer
+          items={doomScrollItems}
+          onClose={() => setDoomScrollItems(null)}
+          onViewInLibrary={handleViewInLibrary}
+        />
+      )}
+
+      {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>
   );
 }