IMPROVED - Fan the corner controls out along a radial arc

components/layout/floating-controls.tsx

@@ -1,8 +1,8 @@
 "use client";
 
 import { AnimatePresence, motion, useReducedMotion } from "framer-motion";
-import { ShieldCheck, SlidersHorizontal, X } from "lucide-react";
-import { useTranslations } from "next-intl";
+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";
@@ -19,12 +19,10 @@ type FloatingControlsProps = {
 };
 
 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";
+  "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";
 
-const itemVariants = {
-  hidden: { opacity: 0, y: 12, scale: 0.8 },
-  show: { opacity: 1, y: 0, scale: 1 },
-};
+/** Radius (px) of the arc the items fan out along. */
+const RADIUS = 92;
 
 export function FloatingControls({
   locale,
@@ -33,6 +31,8 @@ export function FloatingControls({
 }: FloatingControlsProps) {
   const [open, setOpen] = useState(false);
   const t = useTranslations("navigation");
+  const activeLocale = useLocale();
+  const isRtl = activeLocale === "ar";
   const reducedMotion = useReducedMotion();
 
   const controls: ReactNode[] = [
@@ -65,50 +65,85 @@ export function FloatingControls({
     );
   }
 
+  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 flex flex-col items-center gap-2 p-4"
-      style={{ paddingBottom: "calc(1rem + env(safe-area-inset-bottom, 0px))" }}>
+    <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 ? (
-          <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) => (
+            <>
+              {/* 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}
-                variants={reducedMotion ? undefined : itemVariants}
-                transition={{ type: "spring", stiffness: 460, damping: 28 }}
+                    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>
-            ))}
-          </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, "pointer-events-auto")}
+          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 ? 90 : 0 }}
-          transition={reducedMotion ? { duration: 0 } : { type: "spring", stiffness: 400, damping: 24 }}
+            animate={{ rotate: open ? 135 : 0 }}
+            transition={reducedMotion ? { duration: 0 } : { type: "spring", stiffness: 400, damping: 22 }}
             className="flex items-center justify-center"
           >
-          {open ? <X className="h-[1.125rem] w-[1.125rem]" /> : <SlidersHorizontal className="h-[1.125rem] w-[1.125rem]" />}
+            <Plus className="h-5 w-5" />
           </motion.span>
         </button>
       </div>
+    </div>
   );
 }