zu fabricjs gewechselt, noch nicht funktionsfähig

resources/js/admin/components/DevTenantSwitcher.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Loader2 } from 'lucide-react';
+import { Loader2, PanelLeftClose, PanelRightOpen } from 'lucide-react';
 
 import { Button } from '@/components/ui/button';
 
@@ -22,11 +22,48 @@ declare global {
 export function DevTenantSwitcher() {
   const helper = window.fotospielDemoAuth;
   const [loggingIn, setLoggingIn] = React.useState<string | null>(null);
+  const [collapsed, setCollapsed] = React.useState<boolean>(() => {
+    if (typeof window === 'undefined') {
+      return false;
+    }
+
+    try {
+      return window.localStorage.getItem('fotospiel-dev-switcher-collapsed') === '1';
+    } catch (error) {
+      console.warn('[DevAuth] Failed to read collapse state', error);
+      return false;
+    }
+  });
+
+  React.useEffect(() => {
+    if (typeof window === 'undefined') {
+      return;
+    }
+
+    try {
+      window.localStorage.setItem('fotospiel-dev-switcher-collapsed', collapsed ? '1' : '0');
+    } catch (error) {
+      console.warn('[DevAuth] Failed to persist collapse state', error);
+    }
+  }, [collapsed]);
 
   if (!helper) {
     return null;
   }
 
+  if (collapsed) {
+    return (
+      <button
+        type="button"
+        className="pointer-events-auto fixed bottom-4 right-4 z-[1000] flex items-center gap-2 rounded-full border border-amber-200 bg-white/95 px-4 py-2 text-sm font-medium text-amber-700 shadow-lg shadow-amber-200/60 transition hover:bg-amber-50"
+        onClick={() => setCollapsed(false)}
+      >
+        <PanelRightOpen className="h-4 w-4" />
+        Demo tenants
+      </button>
+    );
+  }
+
   async function handleLogin(key: string) {
     if (!helper) return;
     setLoggingIn(key);
@@ -41,8 +78,18 @@ export function DevTenantSwitcher() {
   return (
     <div className="pointer-events-auto fixed bottom-4 right-4 z-[1000] flex max-w-xs flex-col gap-2 rounded-xl border border-amber-200 bg-white/95 p-3 text-sm shadow-xl shadow-amber-200/60">
       <div className="flex items-center justify-between gap-2">
-        <strong className="text-amber-800">Demo tenants</strong>
-        <span className="text-xs uppercase tracking-wide text-amber-600">Dev mode</span>
+        <div className="flex items-center gap-2">
+          <strong className="text-amber-800">Demo tenants</strong>
+          <span className="text-xs uppercase tracking-wide text-amber-600">Dev mode</span>
+        </div>
+        <button
+          type="button"
+          onClick={() => setCollapsed(true)}
+          className="inline-flex h-7 w-7 items-center justify-center rounded-full border border-amber-200 bg-white text-amber-600 transition hover:bg-amber-50"
+          aria-label="Switcher minimieren"
+        >
+          <PanelLeftClose className="h-4 w-4" />
+        </button>
       </div>
       <p className="text-xs text-amber-700">
         Select a seeded tenant to mint OAuth tokens and jump straight into their admin space. Available only in development builds.