From a105d2a480a471fd522563300a5ad715cff1ad1b Mon Sep 17 00:00:00 2001
From: Michael Hoennig <michael@hoennig.de>
Date: Tue, 21 Jul 2026 11:01:28 +0200
Subject: [PATCH] frontend: Minimieren kollabiert Panel auf die Titelzeile
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Statt Preset-Größen minimiert/maximiert min/max jetzt echt:
- minimieren blendet den Panel-Körper aus, nur die Titelzeile bleibt;
  gestapelt als horizontale Leiste, seitlich als schmaler vertikaler
  Streifen mit gedrehter Beschriftung.
- maximieren des einen minimiert das andere Panel (gespiegelt).
- freies Ziehen am Splitter stellt beide wieder her.

Schmaler Viewport (<=820px) verhält sich wie gestapelt.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 frontend/index.html | 59 +++++++++++++++++++++++++++++++++++----------
 1 file changed, 46 insertions(+), 13 deletions(-)

diff --git a/frontend/index.html b/frontend/index.html
index 1e26e50..bd9e853 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -54,10 +54,14 @@
   /* Im gestapelten Modus die Diagrammhöhe per Gutter begrenzen (scrollt intern). */
   .app:not(.side) .diagram{max-height:var(--diagram-h,none)}
   @media (max-width:820px){
-    .app.side{
+    .app.side,.app.side.collapse-editor,.app.side.collapse-diagram{
       grid-template-columns:1fr;
       grid-template-areas:"diagram" "gutter" "editor";
     }
+    /* Im schmalen Viewport verhält sich Minimieren wie gestapelt (Kopf horizontal). */
+    .app.side .panel.collapsed .panel-head{flex-direction:row;height:auto;padding:10px 16px}
+    .app.side .panel.collapsed .panel-head>span{writing-mode:horizontal-tb;transform:none}
+    .app.side .panel.collapsed .winbtns{flex-direction:row}
   }
 
   /* Splitter/Gutter: stapelweise horizontal, seitlich vertikal. */
@@ -74,6 +78,30 @@
   .app.side .gutter::before{width:4px;height:46px}
   .gutter:hover::before,.gutter.dragging::before{background:var(--or)}
 
+  /* Minimieren: Panel auf seine Titelzeile schrumpfen, Körper ausblenden.
+     'a' = Diagramm minimiert (Editor maximal), 'b' = Editor minimiert. */
+  .panel.collapsed .editor-body,
+  .panel.collapsed .diagram,
+  .panel.collapsed .warnings{display:none}
+  .panel.collapsed .copybtn,
+  .panel.collapsed .switch,
+  .panel.collapsed .seg{display:none}
+  /* Gestapelt: nur die Kopfzeile bleibt, das andere Panel füllt. */
+  .app.collapse-diagram{grid-template-rows:auto 14px 1fr}
+  /* Seitlich: schmaler vertikaler Streifen mit gedrehter Beschriftung. */
+  .app.side.collapse-editor{grid-template-columns:auto 14px 1fr}
+  .app.side.collapse-diagram{grid-template-columns:1fr 14px auto}
+  .app.side .panel.collapsed{align-self:stretch}
+  .app.side .panel.collapsed .panel-head{
+    flex-direction:column;align-items:center;gap:12px;
+    height:100%;padding:12px 6px;border-bottom:0;
+  }
+  .app.side .panel.collapsed .panel-head>span{
+    writing-mode:vertical-rl;transform:rotate(180deg);
+    margin:0;white-space:nowrap;
+  }
+  .app.side .panel.collapsed .winbtns{flex-direction:column}
+
   /* Editor-Innenaufbau: Textarea + aufklappbare Agenda.
      Horizontal nebeneinander, vertikal (.side) untereinander. */
   .editor-body{display:flex;align-items:stretch}
@@ -609,19 +637,21 @@ document.querySelectorAll('input[name="layout"]').forEach(radio => {
 });
 
 /* ---------- Min/Normal/Max je Bereich (Fenster-Buttons) ---------- */
-/* Zustand 'a' = Editor bevorzugt, 'b' = Diagramm bevorzugt, 'normal' = Default.
-   Maximieren des einen entspricht Minimieren des anderen. */
+/* Zustand 'a' = Diagramm minimiert (Editor maximiert),
+   'b' = Editor minimiert (Diagramm maximiert), 'normal' = beide sichtbar.
+   Minimieren schrumpft ein Panel auf seine Titelzeile; Maximieren des einen
+   entspricht dem Minimieren des anderen. */
 let splitState = 'normal';
+const editorPanel = document.querySelector('.panel.editor');
+const diagramPanel = document.querySelector('.panel.right');
 function applySplit(){
-  if(app.classList.contains('side')){
-    app.style.removeProperty('--diagram-h');
-    app.style.setProperty('--col', splitState==='a' ? '72%' : splitState==='b' ? '20%' : '360px');
-  } else {
-    app.style.removeProperty('--col');
-    if(splitState==='a') app.style.setProperty('--diagram-h','160px');
-    else if(splitState==='b') app.style.setProperty('--diagram-h','72vh');
-    else app.style.removeProperty('--diagram-h');
-  }
+  /* Preset-/Drag-Größen bei Preset-Wechsel zurücksetzen */
+  app.style.removeProperty('--col');
+  app.style.removeProperty('--diagram-h');
+  app.classList.toggle('collapse-diagram', splitState==='a');
+  app.classList.toggle('collapse-editor',  splitState==='b');
+  diagramPanel.classList.toggle('collapsed', splitState==='a');
+  editorPanel.classList.toggle('collapsed', splitState==='b');
   document.querySelectorAll('.winbtn').forEach(b => b.classList.toggle('active', b.dataset.state===splitState));
 }
 document.querySelectorAll('.winbtn').forEach(b => {
@@ -637,8 +667,11 @@ gutter.addEventListener('pointerdown', e => {
   gutter.classList.add('dragging');
   gutter.setPointerCapture(e.pointerId);
   document.body.style.userSelect = 'none';
-  /* Freies Ziehen hebt das aktive Preset auf */
+  /* Freies Ziehen hebt Preset und Minimierung auf */
   splitState = 'custom';
+  app.classList.remove('collapse-editor','collapse-diagram');
+  editorPanel.classList.remove('collapsed');
+  diagramPanel.classList.remove('collapsed');
   document.querySelectorAll('.winbtn').forEach(b => b.classList.remove('active'));
   e.preventDefault();
 });