IMPROVED - Move theme/sound/language controls into the dock after a separator

Replace the custom radial corner menu with in-dock control tiles so the
whole bar reads as one macOS dock: logo | pages | settings, each group
divided by a separator. Controls reuse the existing toggle components on
graphite squircle tiles matching the page icons.

components/layout/floating-controls.tsx

@@ -1,149 +0,0 @@
-"use client";
-
-import { AnimatePresence, motion, useReducedMotion } from "framer-motion";
-import { Plus, ShieldCheck } from "lucide-react";
-import { useLocale, 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/85 text-foreground/80 shadow-panel backdrop-blur-chrome transition-colors hover:bg-accent hover:text-foreground";
-
-/** Radius (px) of the arc the items fan out along. */
-const RADIUS = 92;
-
-export function FloatingControls({
-  locale,
-  defaultLocale,
-  isSuperAdmin = false,
-}: FloatingControlsProps) {
-  const [open, setOpen] = useState(false);
-  const t = useTranslations("navigation");
-  const activeLocale = useLocale();
-  const isRtl = activeLocale === "ar";
-  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>,
-    );
-  }
-
-  const count = controls.length;
-  // Fan the items across a quarter arc from "up" (90°) to "sideways" (180°),
-  // mirrored for RTL so they always spread away from the corner into the page.
-  const startAngle = 94;
-  const endAngle = 176;
-  const positionFor = (index: number) => {
-    const angle = count === 1 ? 135 : startAngle + ((endAngle - startAngle) * index) / (count - 1);
-    const radians = (angle * Math.PI) / 180;
-    return {
-      x: (isRtl ? -1 : 1) * Math.cos(radians) * RADIUS,
-      y: -Math.sin(radians) * RADIUS,
-    };
-  };
-
-  return (
-    <div
-      className="pointer-events-none fixed bottom-0 end-0 z-50 p-4"
-      style={{ paddingBottom: "calc(1.1rem + env(safe-area-inset-bottom, 0px))" }}
-    >
-      <div className="pointer-events-auto relative h-12 w-12">
-        <AnimatePresence>
-          {open ? (
-            <>
-              {/* click-away scrim */}
-              <motion.button
-                key="scrim"
-                type="button"
-                aria-hidden
-                tabIndex={-1}
-                onClick={() => setOpen(false)}
-                initial={{ opacity: 0 }}
-                animate={{ opacity: 1 }}
-                exit={{ opacity: 0 }}
-                className="fixed inset-0 -z-10 cursor-default bg-transparent"
-              />
-              {controls.map((control, index) => {
-                const { x, y } = positionFor(index);
-                return (
-                  <motion.div
-                    key={index}
-                    className="absolute bottom-0 end-0 grid h-12 w-12 place-items-center"
-                    initial={reducedMotion ? { opacity: 0 } : { opacity: 0, x: 0, y: 0, scale: 0.4 }}
-                    animate={reducedMotion ? { opacity: 1 } : { opacity: 1, x, y, scale: 1 }}
-                    exit={reducedMotion ? { opacity: 0 } : { opacity: 0, x: 0, y: 0, scale: 0.4 }}
-                    transition={
-                      reducedMotion
-                        ? { duration: 0 }
-                        : { type: "spring", stiffness: 460, damping: 26, delay: index * 0.035 }
-                    }
-                  >
-                    {control}
-                  </motion.div>
-                );
-              })}
-            </>
-          ) : null}
-        </AnimatePresence>
-
-        {/* trigger */}
-        <button
-          type="button"
-          onClick={() => setOpen((value) => !value)}
-          aria-expanded={open}
-          aria-label={open ? t("closeMenu") : t("openMenu")}
-          className={cn(
-            pill,
-            "relative h-12 w-12",
-            open && "bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground",
-          )}
-        >
-          <motion.span
-            animate={{ rotate: open ? 135 : 0 }}
-            transition={reducedMotion ? { duration: 0 } : { type: "spring", stiffness: 400, damping: 22 }}
-            className="flex items-center justify-center"
-          >
-            <Plus className="h-5 w-5" />
-          </motion.span>
-        </button>
-      </div>
-    </div>
-  );
-}

components/layout/site-dock.tsx

@@ -1,12 +1,16 @@
 "use client";
 
+import { ShieldCheck } from "lucide-react";
 import Image from "next/image";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
 import { useLocale, useTranslations } from "next-intl";
 
-import { FloatingControls } from "@/components/layout/floating-controls";
+import { LocaleToggle } from "@/components/layout/locale-toggle";
+import { SoundToggle } from "@/components/sound-toggle";
+import { ThemeToggle } from "@/components/theme-toggle";
 import { Dock, DockIcon } from "@/components/ui/dock";
+import { buildAdminUrl } from "@/lib/admin-routing";
 import { getLocalizedPath, stripLocalePrefix, type AppLocale } from "@/lib/locale";
 import { cn } from "@/lib/utils";
 
@@ -37,6 +41,13 @@ const navItems: NavItem[] = [
   { key: "contact", path: "/contact" },
 ];
 
+// Graphite squircle that matches the SVG page icons, used for the live control
+// tiles (theme / sound / language / admin) so the whole dock reads as one set.
+const controlTile =
+  "group relative overflow-visible rounded-[26%] bg-gradient-to-b from-[#3f4551] to-[#191d24] shadow-[0_6px_14px_-6px_rgba(0,0,0,0.5)] ring-1 ring-white/10 transition-shadow duration-200 hover:shadow-[0_10px_22px_-8px_rgba(0,0,0,0.6)]";
+const controlButton =
+  "h-full w-full rounded-[inherit] border-0 bg-transparent text-white hover:bg-white/10 hover:text-white";
+
 function isNavItemActive(currentPath: string, itemPath: string) {
   if (itemPath === "/") {
     return currentPath === "/";
@@ -53,8 +64,6 @@ export function SiteDock({ defaultLocale, isSuperAdmin = false }: SiteDockProps)
   const homeHref = getLocalizedPath(locale, "/", defaultLocale);
 
   return (
-    <>
-      {/* ===== Bottom dock (Magic UI) — primary navigation ===== */}
     <div
       className="pointer-events-none fixed inset-x-0 bottom-0 z-40 flex justify-center px-4"
       style={{ paddingBottom: "calc(0.9rem + env(safe-area-inset-bottom, 0px))" }}
@@ -66,7 +75,7 @@ export function SiteDock({ defaultLocale, isSuperAdmin = false }: SiteDockProps)
         iconDistance={160}
         className="pointer-events-auto h-[68px] gap-2.5 border-border/60 bg-background/70 shadow-panel"
       >
-          {/* Logo — first icon in the dock (fixed src, no theme swap → no flash) */}
+        {/* ── Logo (fixed src → no refresh flash) ── */}
         <DockIcon className="group relative overflow-visible rounded-[26%] bg-white shadow-[0_6px_14px_-6px_rgba(0,0,0,0.5)] ring-1 ring-black/10">
           <Link
             href={homeHref}
@@ -86,8 +95,9 @@ export function SiteDock({ defaultLocale, isSuperAdmin = false }: SiteDockProps)
           <DockTip label="mohfarawati" />
         </DockIcon>
 
-          <div className="mx-0.5 h-9 w-px self-center bg-border/70" aria-hidden />
+        <DockSeparator />
 
+        {/* ── Pages ── */}
         {navItems.map(({ key, path, disabled }) => {
           const itemPath = path || "/";
           const isActive = isNavItemActive(currentPath, itemPath);
@@ -132,17 +142,70 @@ export function SiteDock({ defaultLocale, isSuperAdmin = false }: SiteDockProps)
                   {icon}
                 </Link>
               )}
-
               <DockTip label={label} soon={disabled ? t("soon") : undefined} />
             </DockIcon>
           );
         })}
+
+        <DockSeparator />
+
+        {/* ── Settings (live controls) ── */}
+        <DockIcon className={controlTile}>
+          <TileGloss />
+          <SoundToggle
+            ariaLabel={t("soundMute")}
+            mutedAriaLabel={t("soundUnmute")}
+            variant="ghost"
+            className={controlButton}
+            iconClassName="h-[46%] w-[46%]"
+          />
+          <DockTip label={t("soundMute")} />
+        </DockIcon>
+
+        <DockIcon className={controlTile}>
+          <TileGloss />
+          <ThemeToggle ariaLabel={t("themeToggle")} variant="ghost" className={controlButton} iconClassName="h-[46%] w-[46%]" />
+          <DockTip label={t("themeToggle")} />
+        </DockIcon>
+
+        <DockIcon className={controlTile}>
+          <TileGloss />
+          <LocaleToggle
+            locale={locale}
+            defaultLocale={defaultLocale}
+            className={cn(controlButton, "p-0")}
+          />
+          <DockTip label={locale.toUpperCase()} />
+        </DockIcon>
+
+        {isSuperAdmin ? (
+          <DockIcon className={controlTile}>
+            <TileGloss />
+            <a
+              href={buildAdminUrl("/")}
+              aria-label="Open admin dashboard"
+              className="flex h-full w-full items-center justify-center rounded-[inherit] text-white hover:bg-white/10"
+            >
+              <ShieldCheck className="h-[46%] w-[46%]" />
+            </a>
+            <DockTip label="Admin" />
+          </DockIcon>
+        ) : null}
       </Dock>
     </div>
+  );
+}
 
-      {/* ===== Corner controls — theme / language / sound / admin ===== */}
+function DockSeparator() {
-      <FloatingControls locale={locale} defaultLocale={defaultLocale} isSuperAdmin={isSuperAdmin} />
+  return <div className="mx-0.5 h-9 w-px self-center bg-border/70" aria-hidden />;
-    </>
+}
+
+function TileGloss() {
+  return (
+    <span
+      aria-hidden
+      className="pointer-events-none absolute inset-x-0 top-0 h-1/2 rounded-t-[26%] bg-gradient-to-b from-white/25 to-transparent"
+    />
   );
 }