IMPROVED - Use swappable image icons and move controls to a corner dock

- Dock icons are now real SVG files under public/dock/ (macOS squircle look, active variants), so they can be replaced with custom art later. - Full-bleed icons (DockIcon padding 0), fixed logo src to stop the refresh flash. - Remove the top menu bar entirely; relocate theme/language/sound (+admin) into a corner control dock that expands on click.
2026-09-20 19:12:44 +02:00
parent 6e7cc4dbc6
commit ac8746a287
15 changed files with 267 additions and 271 deletions
@@ -0,0 +1,114 @@
+"use client";
+
+import { AnimatePresence, motion, useReducedMotion } from "framer-motion";
+import { ShieldCheck, SlidersHorizontal, X } from "lucide-react";
+import { useTranslations } from "next-intl";
+import { useState, type ReactNode } from "react";
+
+import { LocaleToggle } from "@/components/layout/locale-toggle";
+import { SoundToggle } from "@/components/sound-toggle";
+import { ThemeToggle } from "@/components/theme-toggle";
+import { buildAdminUrl } from "@/lib/admin-routing";
+import type { AppLocale } from "@/lib/locale";
+import { cn } from "@/lib/utils";
+
+type FloatingControlsProps = {
+  locale: string;
+  defaultLocale: AppLocale;
+  isSuperAdmin?: boolean;
+};
+
+const pill =
+  "flex h-11 w-11 items-center justify-center rounded-full border border-border/60 bg-background/80 text-foreground/80 shadow-panel backdrop-blur-chrome transition-colors hover:bg-accent hover:text-foreground";
+
+const itemVariants = {
+  hidden: { opacity: 0, y: 12, scale: 0.8 },
+  show: { opacity: 1, y: 0, scale: 1 },
+};
+
+export function FloatingControls({
+  locale,
+  defaultLocale,
+  isSuperAdmin = false,
+}: FloatingControlsProps) {
+  const [open, setOpen] = useState(false);
+  const t = useTranslations("navigation");
+  const reducedMotion = useReducedMotion();
+
+  const controls: ReactNode[] = [
+    <SoundToggle
+      key="sound"
+      ariaLabel={t("soundMute")}
+      mutedAriaLabel={t("soundUnmute")}
+      variant="ghost"
+      className={cn(pill, "border-transparent bg-transparent")}
+    />,
+    <ThemeToggle
+      key="theme"
+      ariaLabel={t("themeToggle")}
+      variant="ghost"
+      className={cn(pill, "border-transparent bg-transparent")}
+    />,
+    <LocaleToggle
+      key="locale"
+      locale={locale}
+      defaultLocale={defaultLocale}
+      className={cn(pill, "border-transparent bg-transparent p-0")}
+    />,
+  ];
+
+  if (isSuperAdmin) {
+    controls.push(
+      <a key="admin" href={buildAdminUrl("/")} aria-label="Open admin dashboard" className={pill}>
+        <ShieldCheck className="h-[1.125rem] w-[1.125rem]" />
+      </a>,
+    );
+  }
+
+  return (
+    <div className="pointer-events-none fixed bottom-0 end-0 z-50 flex flex-col items-center gap-2 p-4"
+      style={{ paddingBottom: "calc(1rem + env(safe-area-inset-bottom, 0px))" }}>
+      <AnimatePresence>
+        {open ? (
+          <motion.div
+            key="tray"
+            className="pointer-events-auto flex flex-col items-center gap-2 rounded-full border border-border/50 bg-background/60 p-1.5 shadow-panel backdrop-blur-chrome"
+            initial={reducedMotion ? { opacity: 0 } : "hidden"}
+            animate={reducedMotion ? { opacity: 1 } : "show"}
+            exit={reducedMotion ? { opacity: 0 } : "hidden"}
+            variants={{
+              hidden: { transition: { staggerChildren: 0.04, staggerDirection: -1 } },
+              show: { transition: { staggerChildren: 0.05, delayChildren: 0.02 } },
+            }}
+          >
+            {controls.map((control, index) => (
+              <motion.div
+                key={index}
+                variants={reducedMotion ? undefined : itemVariants}
+                transition={{ type: "spring", stiffness: 460, damping: 28 }}
+              >
+                {control}
+              </motion.div>
+            ))}
+          </motion.div>
+        ) : null}
+      </AnimatePresence>
+
+      <button
+        type="button"
+        onClick={() => setOpen((value) => !value)}
+        aria-expanded={open}
+        aria-label={open ? t("closeMenu") : t("openMenu")}
+        className={cn(pill, "pointer-events-auto")}
+      >
+        <motion.span
+          animate={{ rotate: open ? 90 : 0 }}
+          transition={reducedMotion ? { duration: 0 } : { type: "spring", stiffness: 400, damping: 24 }}
+          className="flex items-center justify-center"
+        >
+          {open ? <X className="h-[1.125rem] w-[1.125rem]" /> : <SlidersHorizontal className="h-[1.125rem] w-[1.125rem]" />}
+        </motion.span>
+      </button>
+    </div>
+  );
+}