Add directory dialog

music-metadata-manager-frontend/src/components/add-library-form.tsx

@@ -6,6 +6,7 @@ import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { toast } from "sonner";
+import { DirectoryDialog } from "./directory-dialog";
 
 export function AddLibraryForm() {
   const [path, setPath] = useState("");
@@ -35,12 +36,16 @@ export function AddLibraryForm() {
     <form onSubmit={handleSubmit} className="space-y-4 p-4 max-w-md">
       <div>
         <Label htmlFor="path">Music Library Path</Label>
-        <Input
-          id="path"
-          value={path}
-          onChange={(e) => setPath(e.target.value)}
-          placeholder="/home/username/Music"
-        />
+        <div className="flex gap-2">
+          <Input
+            id="path"
+            value={path}
+            onChange={(e) => setPath(e.target.value)}
+            placeholder="/home/username/Music"
+            className="flex-1"
+          />
+          <DirectoryDialog onSelect={(selectedPath) => setPath(selectedPath)} />
+        </div>
       </div>
       <Button type="submit" disabled={loading}>
         {loading ? "Adding..." : "Add Library"}

music-metadata-manager-frontend/src/components/directory-dialog.tsx

@@ -0,0 +1,173 @@
+"use client";
+
+import { JSX, useEffect, useState } from "react";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { fetchFromApi } from "@/lib/api";
+import { ChevronDown, ChevronRight, Folder } from "lucide-react";
+import { DialogDescription, DialogTitle } from "@radix-ui/react-dialog";
+import { cn } from "@/lib/utils";
+import { Input } from "@/components/ui/input";
+
+export type Directory = {
+  name: string;
+  path: string;
+  parent: string | null;
+  is_root: boolean;
+};
+
+type DirectoryDialogProps = {
+  onSelect: (path: string) => void;
+};
+
+type DirectoryNode = Directory & { children: DirectoryNode[] };
+
+function buildDirectoryTree(flatList: Directory[]): DirectoryNode[] {
+  const pathMap = new Map<string, DirectoryNode>();
+  const roots: DirectoryNode[] = [];
+
+  // Convert to map with empty children arrays
+  for (const dir of flatList) {
+    pathMap.set(dir.path, { ...dir, children: [] });
+  }
+
+  // Build the tree
+  for (const dir of pathMap.values()) {
+    if (dir.parent && pathMap.has(dir.parent)) {
+      pathMap.get(dir.parent)!.children.push(dir);
+    } else {
+      roots.push(dir);
+    }
+  }
+
+  return roots;
+}
+
+export function DirectoryDialog({ onSelect }: DirectoryDialogProps) {
+  const [directories, setDirectories] = useState<Directory[]>([]);
+  const [open, setOpen] = useState(false);
+  const [expanded, setExpanded] = useState<Set<string>>(new Set());
+  const [searchQuery, setSearchQuery] = useState("");
+  const [selectedPath, setSelectedPath] = useState<string | null>(null);
+  const [directoryTree, setDirectoryTree] = useState<DirectoryNode[]>([]);
+
+  useEffect(() => {
+    if (open) {
+      fetchFromApi<Directory[]>("/fs/directories")
+        .then((dirs) => {
+          setDirectories(dirs);
+          setDirectoryTree(buildDirectoryTree(dirs));
+        })
+        .catch(console.error);
+    }
+  }, [open]);
+
+  const toggleExpand = (path: string) => {
+    setExpanded((prev) => {
+      const next = new Set(prev);
+      next.has(path) ? next.delete(path) : next.add(path);
+      return next;
+    });
+  };
+
+  const isMatch = (dir: Directory) =>
+    dir.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
+    dir.path.toLowerCase().includes(searchQuery.toLowerCase());
+
+  const renderTree = (
+    nodes: DirectoryNode[],
+    level: number = 0
+  ): JSX.Element[] => {
+    return nodes
+      .sort((a, b) => a.name.localeCompare(b.name))
+      .flatMap((dir) => {
+        const isExpanded = expanded.has(dir.path);
+        const matchesSearch = dir.name
+          .toLowerCase()
+          .includes(searchQuery.toLowerCase());
+
+        const children =
+          isExpanded && dir.children.length > 0
+            ? renderTree(dir.children, level + 1)
+            : [];
+
+        // Hide non-matching nodes if search is active
+        if (searchQuery && !matchesSearch && children.length === 0) return [];
+
+        return [
+          <div
+            key={dir.path}
+            style={{ paddingLeft: `${level * 16}px` }}
+            className={cn(
+              "py-1 flex items-center gap-1 cursor-pointer rounded px-2 group",
+              selectedPath === dir.path && "bg-muted"
+            )}
+            onClick={() => {
+              setSelectedPath(dir.path);
+              onSelect(dir.path);
+              setOpen(false);
+            }}
+          >
+            {dir.children.length > 0 ? (
+              <div
+                onClick={(e) => {
+                  e.stopPropagation();
+                  toggleExpand(dir.path);
+                }}
+                className="w-4 h-4 flex items-center justify-center"
+              >
+                {isExpanded ? (
+                  <ChevronDown className="w-4 h-4" />
+                ) : (
+                  <ChevronRight className="w-4 h-4" />
+                )}
+              </div>
+            ) : (
+              <div className="w-4 h-4" />
+            )}
+            <Folder className="w-4 h-4 text-muted-foreground" />
+            <span title={dir.path} className="truncate">
+              {dir.name}
+            </span>
+          </div>,
+          ...children,
+        ];
+      });
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>
+        <Button type="button" variant="outline">
+          Browse...
+        </Button>
+      </DialogTrigger>
+      <DialogContent className="flex flex-col">
+        <DialogHeader>
+          <DialogTitle>Choose a directory</DialogTitle>
+          <DialogDescription>
+            Browse for a directory to add as a library.
+          </DialogDescription>
+        </DialogHeader>
+        <Input
+          type="search"
+          placeholder="Search..."
+          value={searchQuery}
+          onChange={(e) => setSearchQuery(e.target.value)}
+          className="my-2"
+        />
+        <ScrollArea className="h-[60vh]">
+          <div className="p-2 flex flex-col w-full">
+            {renderTree(directoryTree)}
+          </div>
+        </ScrollArea>
+      </DialogContent>
+    </Dialog>
+  );
+}