feat: extend event toolkit and polish guest pwa

resources/js/components/appearance-dropdown.tsx

@@ -1,53 +1,72 @@
 import { Button } from '@/components/ui/button';
-import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@/components/ui/dropdown-menu';
 import { useAppearance } from '@/hooks/use-appearance';
-import { Monitor, Moon, Sun } from 'lucide-react';
-import { HTMLAttributes } from 'react';
+import { Moon, Sun } from 'lucide-react';
+import { HTMLAttributes, useEffect, useMemo, useState } from 'react';
 
 export default function AppearanceToggleDropdown({ className = '', ...props }: HTMLAttributes<HTMLDivElement>) {
-    const { appearance, updateAppearance } = useAppearance();
+  const { appearance, updateAppearance } = useAppearance();
+  const [prefersDark, setPrefersDark] = useState<boolean>(() => {
+    if (typeof window === 'undefined') {
+      return false;
+    }
+    return window.matchMedia('(prefers-color-scheme: dark)').matches;
+  });
+  const [documentLang, setDocumentLang] = useState<string>(() => (typeof document !== 'undefined' ? document.documentElement.lang ?? '' : ''));
 
-    const getCurrentIcon = () => {
-        switch (appearance) {
-            case 'dark':
-                return <Moon className="h-5 w-5" />;
-            case 'light':
-                return <Sun className="h-5 w-5" />;
-            default:
-                return <Monitor className="h-5 w-5" />;
-        }
+  useEffect(() => {
+    if (typeof window === 'undefined') return;
+
+    const media = window.matchMedia('(prefers-color-scheme: dark)');
+    const handleChange = (event: MediaQueryListEvent) => setPrefersDark(event.matches);
+    setPrefersDark(media.matches);
+    media.addEventListener('change', handleChange);
+
+    return () => media.removeEventListener('change', handleChange);
+  }, []);
+
+  useEffect(() => {
+    if (typeof document === 'undefined') return;
+    const observer = new MutationObserver(() => setDocumentLang(document.documentElement.lang ?? ''));
+    observer.observe(document.documentElement, { attributes: true, attributeFilter: ['lang'] });
+    return () => observer.disconnect();
+  }, []);
+
+  const resolvedAppearance = appearance === 'system' ? (prefersDark ? 'dark' : 'light') : appearance;
+  const isDark = resolvedAppearance === 'dark';
+  const Icon = isDark ? Moon : Sun;
+
+  const { ariaLabel, title } = useMemo(() => {
+    const isGerman = documentLang.toLowerCase().startsWith('de');
+    if (isDark) {
+      return {
+        ariaLabel: isGerman ? 'Zum hellen Modus wechseln' : 'Switch to light mode',
+        title: isGerman ? 'Zum hellen Modus wechseln' : 'Switch to light mode',
+      };
+    }
+    return {
+      ariaLabel: isGerman ? 'Zum dunklen Modus wechseln' : 'Switch to dark mode',
+      title: isGerman ? 'Zum dunklen Modus wechseln' : 'Switch to dark mode',
     };
+  }, [documentLang, isDark]);
 
-    return (
-        <div className={className} {...props}>
-            <DropdownMenu>
-                <DropdownMenuTrigger asChild>
-                    <Button variant="ghost" size="icon" className="h-9 w-9 rounded-md">
-                        {getCurrentIcon()}
-                        <span className="sr-only">Toggle theme</span>
-                    </Button>
-                </DropdownMenuTrigger>
-                <DropdownMenuContent align="end">
-                    <DropdownMenuItem onClick={() => updateAppearance('light')}>
-                        <span className="flex items-center gap-2">
-                            <Sun className="h-5 w-5" />
-                            Light
-                        </span>
-                    </DropdownMenuItem>
-                    <DropdownMenuItem onClick={() => updateAppearance('dark')}>
-                        <span className="flex items-center gap-2">
-                            <Moon className="h-5 w-5" />
-                            Dark
-                        </span>
-                    </DropdownMenuItem>
-                    <DropdownMenuItem onClick={() => updateAppearance('system')}>
-                        <span className="flex items-center gap-2">
-                            <Monitor className="h-5 w-5" />
-                            System
-                        </span>
-                    </DropdownMenuItem>
-                </DropdownMenuContent>
-            </DropdownMenu>
-        </div>
-    );
+  const handleToggle = () => {
+    updateAppearance(isDark ? 'light' : 'dark');
+  };
+
+  return (
+    <div className={className} {...props}>
+      <Button
+        variant="ghost"
+        size="icon"
+        className="h-9 w-9 rounded-md"
+        type="button"
+        onClick={handleToggle}
+        aria-pressed={isDark}
+        aria-label={ariaLabel}
+        title={title}
+      >
+        <Icon className="h-5 w-5" aria-hidden />
+      </Button>
+    </div>
+  );
 }