add doom scroll

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 */}
@@ -32,6 +49,9 @@ export default function FileBrowser({ libraryId }: Props) {
         <button onClick={() => navigate("")} style={{ background: "none", border: "none", cursor: "pointer", fontWeight: 600, color: "var(--text)", padding: "2px 4px" }}>
           Root
         </button>
+        <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>
         {pathParts.map((part, i) => {
           const partPath = pathParts.slice(0, i + 1).join("/");
           return (
@@ -94,6 +114,14 @@ export default function FileBrowser({ libraryId }: Props) {
           onNavigate={setViewingId}
         />
       )}
+
+      {doomScrollItems && (
+        <DoomScrollViewer
+          items={doomScrollItems}
+          onClose={() => setDoomScrollItems(null)}
+          onViewInLibrary={handleViewInLibrary}
+        />
+      )}
     </div>
   );
 }