import { useState } from 'react' import { Check, Folder, FolderOpen, FolderPlus, Layers, PenLine, Trash2, X } from 'lucide-react' import { api, type Folders } from '../api' import { bytes } from '../format' import { run } from '../store' /** Die Ordnerübersicht neben der Galerie. * * Kein aufklappbarer Baum, sondern eine flache Liste mit Einrückung. Bei * einer Handvoll Ordner ist ein Aufklappmechanismus mehr Bedienung als * Nutzen — und was man nicht aufklappen muss, kann man auch nicht zugeklappt * übersehen. * * HIER STEHT AUCH "NEUER ORDNER", und das ist eine Korrektur: anlegen ging * bisher NUR im Verschieben-Dialog. Wer einen leeren Ordner wollte, musste * also erst Dateien auswählen, „Verschieben" drücken und dort das Feld * finden — eine Funktion, die man nur über eine andere Funktion erreicht, ist * für den, der sie sucht, nicht vorhanden. */ export function Ordner({ daten, gewaehlt, onWahl, onAngelegt, onUmbenennen, onEntfernt, }: { daten: Folders | null gewaehlt: string onWahl: (ordner: string) => void /** Damit die Liste den neuen Ordner auch zeigt. */ onAngelegt: () => void onUmbenennen: (pfad: string) => void /** Nach dem Entfernen muss die Liste neu geladen werden -- sonst steht * dort ein Ordner, den es nicht mehr gibt. */ onEntfernt: () => void }) { const [neu, setNeu] = useState(null) const [legtAn, setLegtAn] = useState(false) if (!daten) return null async function entfernen(pfad: string) { // Nachfragen, und dabei sagen, was NICHT passiert: der Ordner geht, // die Dateien darin gehen nicht -- der Dienst laesst ihn ohnehin nur // leer entfernen. if (!confirm(`Ordner "${pfad}" entfernen? Er muss leer sein; Dateien darin werden nicht angetastet.`)) { return } const r = await run(() => api.ordnerEntfernen(pfad), `Ordner ${pfad} entfernt.`) if (r) onEntfernt() } async function anlegen() { const name = (neu ?? '').trim() if (!name) return setLegtAn(true) // Relativ zum GEWÄHLTEN Ordner. Wer in "items" steht und "waffen" // tippt, meint items/waffen -- alles andere wäre eine Überraschung. const pfad = gewaehlt ? `${gewaehlt}/${name}` : name const r = await run(() => api.ordnerAnlegen(pfad), (x) => `Ordner ${x.pfad} angelegt.`) setLegtAn(false) if (r) { setNeu(null) onAngelegt() onWahl(r.pfad) } } const zeile = ( aktiv: boolean, kind: React.ReactNode, name: string, anzahl: number, groesse: number, tiefe = 0, onClick?: () => void, pfad?: string, ) => (
{/* Erst beim Darueberfahren. Eine Zeile mit drei Zahlen und einem dauerhaft sichtbaren Knopf waere Laerm — und bei einem Dutzend Ordnern zwoelfmal derselbe. */} {pfad !== undefined && ( )} {/* ORDNER ENTFERNEN. Den Weg gab es im Dienst und in `api.ts` laengst -- es fehlte allein der Knopf, und damit war die Funktion fuer den, der sie sucht, nicht vorhanden. Dieselbe Lehre wie beim "Neuer Ordner" ein paar Zeilen weiter oben. DIE PRUEFUNG BLEIBT BEIM DIENST: er lehnt einen Ordner mit Inhalt ab und sagt, wieviele Dateien darin liegen. Diese Regel hier zu wiederholen hiesse, sie zweimal zu pflegen -- und die zweite Fassung ist irgendwann die falsche. */} {pfad !== undefined && ( )} {anzahl} {bytes(groesse)}
) return ( ) }