Headless-Titelleiste (Tauri decorations:false): Fensterknöpfe links + Drag-Region, Tauri-Fenstersteuerung + Window-Capabilities

src/ui/WindowControls.tsx

@@ -1,33 +1,75 @@
-// Eigene Fenstersteuerung (Minimieren/Maximieren/Schliessen) für das randlose
-// Electron-Fenster (frame:false, s. scripts/electron-main.cjs) — ohne native
-// Titelleiste gibt es sonst keine Möglichkeit, das Fenster zu steuern.
+// Eigene Fenstersteuerung (Minimieren/Maximieren/Schliessen) für das RANDLOSE
+// Fenster — sowohl Electron (frame:false, s. scripts/electron-main.cjs) ALS AUCH
+// Tauri (decorations:false, s. tauri.conf.json). Ohne native Titelleiste gibt es
+// sonst keine Möglichkeit, das Fenster zu steuern.
 //
-// Rendert NUR, wenn `window.dossierWindow` existiert (vom Preload-Skript
-// injiziert) — also nur unter Electron. In Tauri (native Fensterdekoration)
-// und im Browser-Dev-Modus (?vite) bleibt die Komponente unsichtbar (`null`),
-// dort steuert das Betriebssystem bzw. der Browser das Fenster.
+// Rendert NUR, wenn eine Fenster-API vorhanden ist: unter Electron
+// `window.dossierWindow` (Preload), unter Tauri `getCurrentWindow()`
+// (@tauri-apps/api/window, dynamisch geladen wie in nativeSync.ts). Im reinen
+// Browser-Dev-Modus (?vite) bleibt die Komponente unsichtbar (`null`) — dort
+// steuert der Browser das Fenster. Die Tauri-Permissions liegen in
+// src-tauri/capabilities/default.json (core:window:allow-minimize/…/close).
 
 import { useEffect, useState } from "react";
 
-/** Von electron-preload.cjs via contextBridge injiziert (nur unter Electron). */
-interface DossierWindowApi {
+/** Gemeinsame, minimale Fenster-API (Electron-Preload ODER Tauri-Adapter). */
+interface WindowApi {
   minimize: () => void;
   toggleMaximize: () => void;
   close: () => void;
   isMaximized: () => Promise<boolean>;
+  /** Abo auf Maximiert-Wechsel; liefert eine Abmelde-Funktion. */
   onMaximizedChange: (callback: (isMaximized: boolean) => void) => () => void;
 }
 
 declare global {
   interface Window {
-    dossierWindow?: DossierWindowApi;
+    dossierWindow?: WindowApi;
   }
 }
 
+/** Tauri-Laufzeit erkannt (analog nativeSync.ts). */
+function isTauri(): boolean {
+  return typeof window !== "undefined" && "__TAURI_INTERNALS__" in window;
+}
+
 export function WindowControls() {
-  const api = window.dossierWindow;
+  const [api, setApi] = useState<WindowApi | null>(null);
   const [maximized, setMaximized] = useState(false);
 
+  // Passende Fenster-API einmalig auflösen: Electron synchron, Tauri asynchron
+  // (dynamischer Import, damit Browser-/Build-Pfad ohne @tauri-apps grün bleibt).
+  useEffect(() => {
+    if (window.dossierWindow) {
+      setApi(window.dossierWindow);
+      return;
+    }
+    if (!isTauri()) return;
+    let disposed = false;
+    import(/* @vite-ignore */ "@tauri-apps/api/window")
+      .then(({ getCurrentWindow }) => {
+        if (disposed) return;
+        const w = getCurrentWindow();
+        setApi({
+          minimize: () => void w.minimize(),
+          toggleMaximize: () => void w.toggleMaximize(),
+          close: () => void w.close(),
+          isMaximized: () => w.isMaximized(),
+          onMaximizedChange: (cb) => {
+            // Bei jeder Größenänderung den Maximiert-Zustand neu melden.
+            const unlisten = w.onResized(() => {
+              void w.isMaximized().then(cb);
+            });
+            return () => void unlisten.then((fn) => fn());
+          },
+        });
+      })
+      .catch(() => {});
+    return () => {
+      disposed = true;
+    };
+  }, []);
+
   useEffect(() => {
     if (!api) return;
     let cancelled = false;
@@ -43,8 +85,25 @@ export function WindowControls() {
 
   if (!api) return null;
 
+  // Reihenfolge (macOS-Titelleiste links): Schliessen · Minimieren · Maximieren.
   return (
     <div className="win-controls" role="group" aria-label="Fenster">
+      <button
+        type="button"
+        className="win-btn win-btn-close"
+        onClick={() => api.close()}
+        title="Schliessen"
+        aria-label="Schliessen"
+      >
+        <svg width="10" height="10" viewBox="0 0 10 10" aria-hidden="true">
+          <path
+            d="M1 1 L9 9 M9 1 L1 9"
+            stroke="currentColor"
+            strokeWidth="1.2"
+            strokeLinecap="round"
+          />
+        </svg>
+      </button>
       <button
         type="button"
         className="win-btn"
@@ -86,22 +145,6 @@ export function WindowControls() {
           </svg>
         )}
       </button>
-      <button
-        type="button"
-        className="win-btn win-btn-close"
-        onClick={() => api.close()}
-        title="Schliessen"
-        aria-label="Schliessen"
-      >
-        <svg width="10" height="10" viewBox="0 0 10 10" aria-hidden="true">
-          <path
-            d="M1 1 L9 9 M9 1 L1 9"
-            stroke="currentColor"
-            strokeWidth="1.2"
-            strokeLinecap="round"
-          />
-        </svg>
-      </button>
     </div>
   );
 }