add doom scroll

frontend/src/pages/SearchPage.tsx

@@ -1,13 +1,22 @@
 import { useState } from "react";
+import { useNavigate } from "react-router-dom";
 import { useQuery } from "@tanstack/react-query";
 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"],
@@ -78,6 +87,15 @@ 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} onClick={() => setViewingId(item.id)} style={{ border: "1px solid var(--border)", borderRadius: 6, overflow: "hidden", background: "var(--bg-card)", cursor: "pointer" }}>
@@ -107,6 +125,14 @@ export default function SearchPage() {
         <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,