From 7f1bc6055e948a8296c30cfb2acada13b6287408 Mon Sep 17 00:00:00 2001
From: Hitonabi <Hitonabi@dreivontanke.ddnsfree.com>
Date: Thu, 24 Sep 2026 22:33:38 +0200
Subject: [PATCH] modelle: Aufraeumen-Listen eingeklappt mit Zusammenfassung,
 ruhigere Loeschknoepfe

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 frontend/src/views/Modelle.tsx | 43 ++++++++++++++++++++++++----------
 1 file changed, 31 insertions(+), 12 deletions(-)

diff --git a/frontend/src/views/Modelle.tsx b/frontend/src/views/Modelle.tsx
index 94510fe..c9b9864 100644
--- a/frontend/src/views/Modelle.tsx
+++ b/frontend/src/views/Modelle.tsx
@@ -1,7 +1,7 @@
-import { useEffect, useRef, useState } from "react"
+import { type ReactNode, useEffect, useRef, useState } from "react"
 import { useQueryClient } from "@tanstack/react-query"
 import { useLocation } from "@tanstack/react-router"
-import { Search } from "lucide-react"
+import { ChevronRight, Search } from "lucide-react"
 import { Auftraege } from "@/components/cockpit/Auftraege"
 import { Bestaetigen } from "@/components/cockpit/Bestaetigen"
 import { Chip, type ChipArt, Zustandsfeld } from "@/components/cockpit/Chip"
@@ -325,6 +325,25 @@ function RadarPanel({ hirn, coder }: { hirn: string | undefined; coder: string |
   )
 }
 
+/** Löschen in Listen: ruhig und erst beim Zeigen rot — die Rückfrage danach ist rot und endgültig. */
+const LOESCHKNOPF = "text-rot-text hover:bg-rot-grund hover:text-rot-text"
+
+/** Eine eingeklappte Liste mit Zusammenfassung — lange Aufräum-Listen erst auf Wunsch. */
+function Klappe({ titel, zusatz, children }: { titel: string; zusatz: string; children: ReactNode }) {
+  return (
+    <details className="group rounded-xl border border-linie bg-erhaben/40 px-4 open:pb-2">
+      <summary className="flex min-h-12 cursor-pointer list-none items-center justify-between gap-3 [&::-webkit-details-marker]:hidden">
+        <span className="flex items-center gap-2 text-[15px] font-medium">
+          <ChevronRight className="size-4 text-text-3 transition-transform group-open:rotate-90" aria-hidden />
+          {titel}
+        </span>
+        <span className="ziffern text-sm text-text-2">{zusatz}</span>
+      </summary>
+      <div className="flex flex-col gap-2 pb-1">{children}</div>
+    </details>
+  )
+}
+
 /** Was ungenutzt Platz belegt. Gelöscht wird nur auf Knopfdruck, mit Rückfrage — Löschen ist endgültig. */
 function AufraeumenPanel() {
   const liste = useAufraeumen()
@@ -355,6 +374,7 @@ function AufraeumenPanel() {
       ) : kandidaten.length === 0 ? (
         <p className="text-[15px] text-text-2">Nichts aufzuräumen.</p>
       ) : (
+        <Klappe titel="Modelle und Ordner" zusatz={`${kandidaten.length} Einträge · bis zu ${summe.toLocaleString("de-DE", { maximumFractionDigits: 0 })} GB`}>
         <ul className="m-0 flex list-none flex-col p-0">
           {kandidaten.map((k) => (
             <li key={`${k.art}-${k.name}`} className="flex flex-wrap items-center justify-between gap-3 border-t border-linie py-3">
@@ -367,13 +387,14 @@ function AufraeumenPanel() {
               </span>
               <span className="flex items-center gap-3">
                 <span className="ziffern text-sm text-text-2">{k.groesse_gb.toLocaleString("de-DE")} GB</span>
-                <Button variant="gefahr" size="sm" disabled={loeschen.isPending} onClick={() => setFrage(k)}>
+                <Button variant="ghost" size="sm" className={LOESCHKNOPF} disabled={loeschen.isPending} onClick={() => setFrage(k)}>
                   Löschen
                 </Button>
               </span>
             </li>
           ))}
         </ul>
+        </Klappe>
       )}
       <Bestaetigen
         offen={frage !== null}
@@ -410,14 +431,6 @@ function Altreste() {
   const summe = reste.reduce((s, a) => s + a.groesse_bytes, 0)
   return (
     <div className="flex flex-col gap-2">
-      <div className="flex flex-wrap items-center justify-between gap-3 border-t border-linie pt-4">
-        <h3 className="schild text-sm text-text-3">Altreste neben dem Betrieb</h3>
-        {reste.length > 0 && <span className="ziffern text-sm text-text-2">zusammen {mengeText(summe)}</span>}
-      </div>
-      <p className="text-sm text-text-2">
-        Test-Ordner, alte Umgebungen und Arbeitskopien, die nichts mehr nutzt. Die Box prüft sie gegen eine feste Liste und
-        löscht auch hier nie von selbst.
-      </p>
       {liste.isPending ? (
         <p className="text-[15px] text-text-2">Wird gelesen …</p>
       ) : liste.isError && !liste.data ? (
@@ -425,6 +438,11 @@ function Altreste() {
       ) : reste.length === 0 ? (
         <p className="text-[15px] text-text-2">Keine Altreste mehr.</p>
       ) : (
+        <Klappe titel="Altreste neben dem Betrieb" zusatz={`${reste.length} Einträge · ${mengeText(summe)}`}>
+        <p className="text-sm text-text-2">
+          Test-Ordner, alte Umgebungen und Arbeitskopien, die nichts mehr nutzt. Die Box prüft sie gegen eine feste Liste
+          und löscht auch hier nie von selbst.
+        </p>
         <ul className="m-0 flex list-none flex-col p-0">
           {reste.map((a) => (
             <li key={a.id} className="flex flex-wrap items-center justify-between gap-3 border-t border-linie py-3">
@@ -438,13 +456,14 @@ function Altreste() {
               </span>
               <span className="flex items-center gap-3">
                 <span className="ziffern text-sm text-text-2">{a.groesse}</span>
-                <Button variant="gefahr" size="sm" disabled={loeschen.isPending} onClick={() => setFrage(a)}>
+                <Button variant="ghost" size="sm" className={LOESCHKNOPF} disabled={loeschen.isPending} onClick={() => setFrage(a)}>
                   Löschen
                 </Button>
               </span>
             </li>
           ))}
         </ul>
+        </Klappe>
       )}
       <Bestaetigen
         offen={frage !== null}