REVERTED - Restore corner radial controls; make dock icons full-bleed

- Bring back the corner fan-out controls; drop the in-dock settings tile.
- Regenerate public/dock/*.svg so the squircle fills the whole tile with
  no inner margin.
This commit is contained in:
moh
2026-09-20 19:37:17 +02:00
parent a6be3c26d2
commit 70203732d2
12 changed files with 195 additions and 162 deletions
+6 -122
View File
@@ -1,18 +1,12 @@
"use client";
import { AnimatePresence, motion, useReducedMotion } from "framer-motion";
import { Settings, 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 { 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 { FloatingControls } from "@/components/layout/floating-controls";
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";
@@ -43,18 +37,6 @@ const navItems: NavItem[] = [
{ key: "contact", path: "/contact" },
];
// Graphite squircle matching the SVG page icons, used for the settings tile.
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)]";
// Glass pill used for each control that fans out along the arc.
const fanPill =
"flex h-11 w-11 items-center justify-center rounded-full border border-transparent bg-background/90 text-foreground/85 shadow-panel backdrop-blur-chrome transition-colors hover:bg-accent hover:text-foreground";
// Radius (px) and opening angles of the arc the controls fan out along.
const ARC_RADIUS = 74;
const ARC_START = 46;
const ARC_END = 134;
function isNavItemActive(currentPath: string, itemPath: string) {
if (itemPath === "/") {
return currentPath === "/";
@@ -66,52 +48,13 @@ export function SiteDock({ defaultLocale, isSuperAdmin = false }: SiteDockProps)
const locale = useLocale();
const pathname = usePathname();
const t = useTranslations("navigation");
const reducedMotion = useReducedMotion();
const [settingsOpen, setSettingsOpen] = useState(false);
const currentPath = stripLocalePrefix(pathname);
const homeHref = getLocalizedPath(locale, "/", defaultLocale);
const fanItems: ReactNode[] = [
<SoundToggle
key="sound"
ariaLabel={t("soundMute")}
mutedAriaLabel={t("soundUnmute")}
variant="ghost"
className={fanPill}
/>,
<ThemeToggle key="theme" ariaLabel={t("themeToggle")} variant="ghost" className={fanPill} />,
<LocaleToggle key="locale" locale={locale} defaultLocale={defaultLocale} className={cn(fanPill, "p-0")} />,
];
if (isSuperAdmin) {
fanItems.push(
<a key="admin" href={buildAdminUrl("/")} aria-label="Open admin dashboard" className={fanPill}>
<ShieldCheck className="h-[1.125rem] w-[1.125rem]" />
</a>,
);
}
const arcPosition = (index: number) => {
const count = fanItems.length;
const angle = count === 1 ? 90 : ARC_START + ((ARC_END - ARC_START) * index) / (count - 1);
const radians = (angle * Math.PI) / 180;
return { x: Math.cos(radians) * ARC_RADIUS, y: -Math.sin(radians) * ARC_RADIUS };
};
return (
<>
{/* click-away scrim (below the dock, above the page) */}
{settingsOpen ? (
<button
type="button"
aria-hidden
tabIndex={-1}
onClick={() => setSettingsOpen(false)}
className="fixed inset-0 z-30 cursor-default bg-transparent"
/>
) : null}
{/* ===== 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))" }}
@@ -143,7 +86,7 @@ export function SiteDock({ defaultLocale, isSuperAdmin = false }: SiteDockProps)
<DockTip label="mohfarawati" />
</DockIcon>
<DockSeparator />
<div className="mx-0.5 h-9 w-px self-center bg-border/70" aria-hidden />
{/* ── Pages ── */}
{navItems.map(({ key, path, disabled }) => {
@@ -194,74 +137,15 @@ export function SiteDock({ defaultLocale, isSuperAdmin = false }: SiteDockProps)
</DockIcon>
);
})}
<DockSeparator />
{/* ── Settings — press to fan the controls out along an arc ── */}
<DockIcon className={controlTile}>
<TileGloss />
<AnimatePresence>
{settingsOpen
? fanItems.map((node, index) => {
const { x, y } = arcPosition(index);
return (
<motion.div
key={index}
className="absolute inset-0 z-10 flex items-center justify-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: 480, damping: 26, delay: index * 0.035 }
}
>
{node}
</motion.div>
);
})
: null}
</AnimatePresence>
<button
type="button"
onClick={() => setSettingsOpen((value) => !value)}
aria-expanded={settingsOpen}
aria-label={settingsOpen ? t("closeMenu") : t("openMenu")}
className="relative z-20 flex h-full w-full items-center justify-center rounded-[inherit] text-white hover:bg-white/10"
>
<motion.span
animate={{ rotate: settingsOpen ? 90 : 0 }}
transition={reducedMotion ? { duration: 0 } : { type: "spring", stiffness: 400, damping: 22 }}
className="flex items-center justify-center"
>
<Settings className="h-[46%] w-[46%]" />
</motion.span>
</button>
{settingsOpen ? null : <DockTip label={t("themeToggle")} />}
</DockIcon>
</Dock>
</div>
{/* ===== Corner controls — theme / language / sound / admin (fan out) ===== */}
<FloatingControls locale={locale} defaultLocale={defaultLocale} isSuperAdmin={isSuperAdmin} />
</>
);
}
function DockSeparator() {
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"
/>
);
}
function DockTip({ label, soon }: { label: string; soon?: string }) {
return (
<span