Froidefond Julien
4f6833b42b
- Extend API /folders endpoint to support browsing subdirectories with path parameter - Add depth and has_children fields to FolderItem - Create FolderBrowser component with tree view navigation - Create FolderPicker component with input, browse button and popup modal - Add API proxy route for /api/folders - Update LibraryForm to use new FolderPicker component - Fix path handling to correctly resolve /libraries/ subdirectories
39 lines
1.1 KiB
TypeScript
39 lines
1.1 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
import { FolderPicker } from "./FolderPicker";
|
|
import { FolderItem } from "../../lib/api";
|
|
import { Button, FormField, FormInput, FormRow } from "./ui";
|
|
|
|
interface LibraryFormProps {
|
|
initialFolders: FolderItem[];
|
|
action: (formData: FormData) => void;
|
|
}
|
|
|
|
export function LibraryForm({ initialFolders, action }: LibraryFormProps) {
|
|
const [selectedPath, setSelectedPath] = useState<string>("");
|
|
|
|
return (
|
|
<form action={action}>
|
|
<FormRow>
|
|
<FormField className="flex-1 min-w-48">
|
|
<FormInput name="name" placeholder="Library name" required />
|
|
</FormField>
|
|
<FormField className="flex-1 min-w-64">
|
|
<input type="hidden" name="root_path" value={selectedPath} />
|
|
<FolderPicker
|
|
initialFolders={initialFolders}
|
|
selectedPath={selectedPath}
|
|
onSelect={setSelectedPath}
|
|
/>
|
|
</FormField>
|
|
</FormRow>
|
|
<div className="mt-4 flex justify-end">
|
|
<Button type="submit" disabled={!selectedPath}>
|
|
Add Library
|
|
</Button>
|
|
</div>
|
|
</form>
|
|
);
|
|
}
|