"use client"; import { useState, useRef, useEffect } from "react"; import { motion, AnimatePresence } from "motion/react"; import { Search, Music2, Timer, Pen, X, Play, Pause, SkipForward, SkipBack, RotateCcw, Plus, } from "lucide-react"; type Mode = "pill" | "dock" | "search" | "player" | "timer" | "note"; const spring = { type: "spring" as const, damping: 28, stiffness: 380, mass: 0.7, }; const dockActions: { id: Mode; icon: typeof Search }[] = [ { id: "search", icon: Search }, { id: "player", icon: Music2 }, { id: "timer", icon: Timer }, { id: "note", icon: Pen }, ]; const dims: Record = { pill: [44, 44, 50], dock: [200, 44, 22], search: [280, 218, 18], player: [280, 172, 18], timer: [220, 180, 18], note: [256, 182, 18], }; export function MorphingExpandableMenu() { const [mode, setMode] = useState("pill"); const [hoveredDock, setHoveredDock] = useState(null); const ref = useRef(null); const [playing, setPlaying] = useState(false); const [progress] = useState(35); const [timeLeft, setTimeLeft] = useState(25 * 60); const [running, setRunning] = useState(false); const [noteText, setNoteText] = useState(""); const [query, setQuery] = useState(""); useEffect(() => { function onOutside(e: MouseEvent) { if (ref.current && !ref.current.contains(e.target as Node)) { setMode("pill"); setQuery(""); } } function onKey(e: KeyboardEvent) { if (e.key !== "Escape") return; if (mode === "pill") return; setMode(mode === "dock" ? "pill" : "dock"); } document.addEventListener("mousedown", onOutside); document.addEventListener("keydown", onKey); return () => { document.removeEventListener("mousedown", onOutside); document.removeEventListener("keydown", onKey); }; }, [mode]); useEffect(() => { if (!running) return; const id = setInterval(() => setTimeLeft((t) => Math.max(0, t - 1)), 1000); return () => clearInterval(id); }, [running]); useEffect(() => { if (mode !== "dock") setHoveredDock(null); }, [mode]); const fmt = (s: number) => { const m = Math.floor(s / 60); const sec = s % 60; return `${String(m).padStart(2, "0")}:${String(sec).padStart(2, "0")}`; }; const goBack = () => setMode("dock"); const [w, h, r] = dims[mode]; const isDockOrPill = mode === "pill" || mode === "dock"; return (

{/* ── dock / pill bar ──────────────────────────── */} {isDockOrPill && ( {dockActions.map((item, i) => ( setMode(item.id)} onMouseEnter={() => setHoveredDock(item.id)} onMouseLeave={() => setHoveredDock(null)} animate={{ width: mode === "dock" ? 36 : 0, marginLeft: mode === "dock" ? 3 : 0, opacity: mode === "dock" ? 1 : 0, }} transition={{ ...spring, delay: mode === "dock" ? (3 - i) * 0.03 : 0, }} style={{ height: 36, pointerEvents: mode === "dock" ? "auto" : "none", }} className="relative flex shrink-0 cursor-pointer items-center justify-center overflow-hidden rounded-xl text-muted-foreground transition-colors duration-150 hover:text-foreground" > {hoveredDock === item.id && ( )} ))} setMode(mode === "pill" ? "dock" : "pill")} className="ml-auto flex h-11 w-11 shrink-0 cursor-pointer items-center justify-center" whileTap={{ scale: 0.85 }} > )} {/* ── panels ───────────────────────────────────── */} {/* search */} {mode === "search" && (

setQuery(e.target.value)} placeholder="Search..." className="flex-1 bg-transparent text-[13px] outline-none placeholder:text-muted-foreground/50" />

Recent

{[ "Project settings", "API documentation", "Team members", "Billing", ].map((item, i) => ( {item} ))}

)} {/* player */} {mode === "player" && (

Midnight City

M83 — Hurry Up, We're Dreaming

1:24 4:03

setPlaying(!playing)} className="flex size-9 cursor-pointer items-center justify-center rounded-full bg-foreground text-background" > {playing ? ( ) : ( )}

)} {/* timer */} {mode === "timer" && (

Focus

{fmt(timeLeft)}

setRunning(!running)} className="h-8 cursor-pointer rounded-lg bg-foreground px-5 text-xs font-medium text-background" > {running ? "Pause" : "Start"} { setRunning(false); setTimeLeft(25 * 60); }} className="flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg border border-border/50 text-muted-foreground/60 hover:text-foreground" >

)} {/* note */} {mode === "note" && (

Quick Note