Merge remote-tracking branch 'origin/feature/amev-picker-and-collapsible-sidebar'

src/app/globals.css

@@ -1396,3 +1396,68 @@ a.kpi:hover {
     max-height: calc(100vh - 5.5rem);
   }
 }
+
+/* ── Seitenleiste: eingeklappter Zustand ─────────────────────────────── */
+
+.app-shell {
+  transition: grid-template-columns 0.18s ease;
+}
+
+.app-shell-collapsed {
+  grid-template-columns: 64px 1fr;
+}
+
+.sidebar {
+  transition: padding 0.18s ease;
+}
+
+.sidebar-brand {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 8px;
+}
+
+.sidebar-toggle {
+  background: rgba(255, 255, 255, 0.08);
+  border: 0;
+  border-radius: 6px;
+  color: #fff;
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  font-size: 0.8rem;
+  line-height: 1;
+  width: 26px;
+  height: 26px;
+}
+
+.sidebar-toggle:hover {
+  background: rgba(255, 255, 255, 0.18);
+}
+
+.sidebar-collapsed .sidebar-brand {
+  padding: 16px 10px;
+  flex-direction: column;
+  align-items: center;
+}
+
+.sidebar-collapsed .sidebar-brand-text {
+  display: none;
+}
+
+.sidebar-collapsed .sidebar-nav {
+  padding: 12px 8px;
+}
+
+.sidebar-collapsed .sidebar-link {
+  justify-content: center;
+  padding: 10px;
+}
+
+.sidebar-collapsed .sidebar-section-label,
+.sidebar-collapsed .sidebar-label {
+  display: none;
+}

src/app/projects/page.tsx

@@ -14,6 +14,7 @@ import type {
   CreateGlobalDeviceInput,
   GlobalDeviceDto,
 } from "../../frontend/types";
+import { GzfPickerModal } from "../../frontend/components/gzf-picker-modal";
 
 const PROJECTS_CHANGED_EVENT = "leistungsbilanz:projects-changed";
 
@@ -67,6 +68,7 @@ export default function ProjectsPage() {
     id: string;
     name: string;
   } | null>(null);
+  const [isGzfPickerOpen, setIsGzfPickerOpen] = useState(false);
 
   async function loadData() {
     setError(null);
@@ -380,18 +382,28 @@ export default function ProjectsPage() {
                 }
               />
             </div>
-            <div className="col-6 col-md-1">
-              <input
-                className="form-control"
-                type="number"
-                step="0.01"
-                min="0"
-                max="1"
-                value={globalDeviceForm.demandFactor}
-                onChange={(event) =>
-                  setGlobalDeviceForm((current) => ({ ...current, demandFactor: event.target.value }))
-                }
-              />
+            <div className="col-6 col-md-2">
+              <div className="input-group">
+                <input
+                  className="form-control"
+                  type="number"
+                  step="0.01"
+                  min="0"
+                  max="1"
+                  value={globalDeviceForm.demandFactor}
+                  onChange={(event) =>
+                    setGlobalDeviceForm((current) => ({ ...current, demandFactor: event.target.value }))
+                  }
+                />
+                <button
+                  className="btn btn-outline-primary"
+                  onClick={() => setIsGzfPickerOpen(true)}
+                  title="Gleichzeitigkeitsfaktor nach AMEV wählen"
+                  type="button"
+                >
+                  AMEV
+                </button>
+              </div>
             </div>
             <div className="col-6 col-md-1">
               <select
@@ -505,6 +517,16 @@ export default function ProjectsPage() {
         </div>
       </section>
       </div>
+
+      {isGzfPickerOpen ? (
+        <GzfPickerModal
+          onClose={() => setIsGzfPickerOpen(false)}
+          onSelect={(value) => {
+            setGlobalDeviceForm((current) => ({ ...current, demandFactor: String(value) }));
+            setIsGzfPickerOpen(false);
+          }}
+        />
+      ) : null}
     </main>
   );
 }