d4rk_media/server/ui/src/pages/Papierkorb.tsx

import { useCallback, useEffect, useState } from 'react'
import { AlertTriangle, Loader2, RotateCcw, Trash2 } from 'lucide-react'
import { api, type PapierkorbSeite, type PapierkorbEintrag } from '../api'
import { run, useStore } from '../store'
import { bytes, zeit } from '../format'
import { Karte, Knopf, Leer, Nachfrage } from '../components/Bausteine'

/** Der Papierkorb.
 *
 *  Löschen war bis vor Kurzem endgültig — die Sicherung half nur bis zum
 *  letzten nächtlichen Lauf. Bei einem Knopf „alle 3670 wählen" direkt neben
 *  „löschen" ist das die falsche Härte.
 *
 *  Was hier steht, liegt weiterhin auf der Platte, nur nicht mehr unter seiner
 *  öffentlichen Adresse. Nach 30 Tagen räumt der Dienst selbst auf. */
export function Papierkorb() {
    const note = useStore((s) => s.note)
    const [daten, setDaten] = useState<PapierkorbSeite | null>(null)
    const [gewaehlt, setGewaehlt] = useState<Set<number>>(new Set())
    const [laeuft, setLaeuft] = useState(false)
    const [fragt, setFragt] = useState<PapierkorbEintrag[] | 'alles' | null>(null)

    const laden = useCallback(async () => {
        try {
            setDaten(await api.papierkorb())
        } catch (err) {
            note('fehler', err instanceof Error ? err.message : 'Unbekannt')
        }
    }, [note])

    useEffect(() => {
        void laden()
    }, [laden])

    if (!daten) {
        return (
            <div className="flex justify-center py-16">
                <Loader2 className="animate-spin text-schrift-leise" />
            </div>
        )
    }

    const items = daten.items
    const auswahl = items.filter((i) => gewaehlt.has(i.id))

    async function zurueck(liste: PapierkorbEintrag[]) {
        setLaeuft(true)
        await run(
            () => api.papierkorbZurueck(liste.map((e) => e.id)),
            (r) =>
                r.fehlgeschlagen === 0
                    ? `${r.zurueck} zurückgeholt.`
                    : `${r.zurueck} zurückgeholt, ${r.fehlgeschlagen} nicht: ` +
                      r.ergebnisse
                          .filter((e) => !e.ok)
                          .slice(0, 3)
                          .map((e) => `${e.path} (${e.error})`)
                          .join('; '),
        )
        setLaeuft(false)
        setGewaehlt(new Set())
        void laden()
    }

    return (
        <div className="flex flex-col gap-4">
            <div className="flex flex-wrap items-center gap-3">
                <span className="text-sm text-schrift-leise">
                    {daten.n} {daten.n === 1 ? 'Eintrag' : 'Einträge'} · {bytes(daten.bytes)}
                </span>

                {auswahl.length > 0 && (
                    <>
                        <Knopf
                            art="haupt"
                            wartet={laeuft}
                            onClick={() => void zurueck(auswahl)}
                            kind={
                                <>
                                    <RotateCcw size={15} />
                                    {auswahl.length} zurückholen
                                </>
                            }
                        />
                        <Knopf
                            art="gefahr"
                            onClick={() => setFragt(auswahl)}
                            kind={`${auswahl.length} endgültig löschen`}
                        />
                    </>
                )}

                {items.length > 0 && (
                    <Knopf
                        art="gefahr"
                        className="ml-auto"
                        onClick={() => setFragt('alles')}
                        kind={
                            <>
                                <Trash2 size={15} />
                                Papierkorb leeren
                            </>
                        }
                    />
                )}
            </div>

            <Karte>
                {items.length === 0 ? (
                    <Leer
                        kind={<Trash2 size={26} className="text-schrift-leise/50" />}
                        text="Der Papierkorb ist leer."
                    />
                ) : (
                    <table className="w-full table-fixed text-sm">
                        <colgroup>
                            <col className="w-10" />
                            <col />
                            <col className="w-24" />
                            <col className="w-40" />
                            <col className="w-32" />
                        </colgroup>
                        <thead>
                            <tr className="text-left text-xs text-schrift-leise">
                                <th className="px-3 pb-2" />
                                <th className="px-3 pb-2 font-medium">Pfad</th>
                                <th className="px-3 pb-2 text-right font-medium">Größe</th>
                                <th className="px-3 pb-2 font-medium">Gelöscht</th>
                                <th className="px-3 pb-2 font-medium">Von</th>
                            </tr>
                        </thead>
                        <tbody>
                            {items.map((e) => (
                                <tr key={e.id} className="border-t border-rand">
                                    <td className="px-3 py-1.5">
                                        <input
                                            type="checkbox"
                                            checked={gewaehlt.has(e.id)}
                                            onChange={(ev) =>
                                                setGewaehlt((alt) => {
                                                    const neu = new Set(alt)
                                                    if (ev.target.checked) neu.add(e.id)
                                                    else neu.delete(e.id)
                                                    return neu
                                                })
                                            }
                                            className="accent-akzent"
                                        />
                                    </td>
                                    <td
                                        className="max-w-0 truncate px-3 py-1.5 font-mono text-xs"
                                        title={e.path}
                                    >
                                        {e.path}
                                    </td>
                                    <td className="px-3 py-1.5 text-right tabular-nums">
                                        {bytes(e.size)}
                                    </td>
                                    <td className="px-3 py-1.5 whitespace-nowrap text-schrift-leise tabular-nums">
                                        {zeit(e.geloescht)}
                                    </td>
                                    <td className="truncate px-3 py-1.5 text-schrift-leise">
                                        {e.von}
                                    </td>
                                </tr>
                            ))}
                        </tbody>
                    </table>
                )}
            </Karte>

            <p className="text-xs text-schrift-leise">
                Einträge werden nach {daten.haltbarTage} Tagen von selbst endgültig entfernt.
                Solange sie hier stehen, liegen sie weiterhin auf der Platte — nur nicht mehr
                unter ihrer öffentlichen Adresse.
            </p>

            <Nachfrage
                offen={fragt !== null}
                titel={fragt === 'alles' ? 'Papierkorb leeren?' : 'Endgültig löschen?'}
                bestaetigung="Endgültig löschen"
                wartet={laeuft}
                onNein={() => setFragt(null)}
                onJa={async () => {
                    setLaeuft(true)
                    await run(
                        () =>
                            api.papierkorbLeeren(
                                fragt === 'alles' ? undefined : (fragt ?? []).map((e) => e.id),
                            ),
                        (r) => `${r.geleert} endgültig entfernt.`,
                    )
                    setLaeuft(false)
                    setFragt(null)
                    setGewaehlt(new Set())
                    void laden()
                }}
                text={
                    <p className="flex items-start gap-2">
                        <AlertTriangle size={16} className="mt-0.5 shrink-0 text-schlecht" />
                        <span>
                            {fragt === 'alles'
                                ? `Alle ${daten.n} Einträge werden von der Platte entfernt.`
                                : `${(fragt as PapierkorbEintrag[])?.length} Einträge werden von der Platte entfernt.`}{' '}
                            Danach hilft nur noch die Sicherung — und die ist bis zu 24 Stunden
                            alt.
                        </span>
                    </p>
                }
            />
        </div>
    )
}