feat(planning): ship holiday-aware planning and assistant upgrades

apps/web/src/components/notifications/NotificationBell.tsx

@@ -1,11 +1,12 @@
 "use client";
 
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { createPortal } from "react-dom";
 import { useSession } from "next-auth/react";
 import Link from "next/link";
 import type { Route } from "next";
 import { motion, useAnimationControls } from "framer-motion";
+import { useAnchoredOverlay } from "~/hooks/useAnchoredOverlay.js";
 import { trpc } from "~/lib/trpc/client.js";
 
 function relativeTime(date: Date): string {
@@ -28,12 +29,16 @@ type TabKey = "all" | "tasks" | "reminders";
 export function NotificationBell() {
   const [open, setOpen] = useState(false);
   const [activeTab, setActiveTab] = useState<TabKey>("all");
-  const ref = useRef<HTMLDivElement>(null);
   const bellRef = useRef<HTMLButtonElement>(null);
-  const dropdownRef = useRef<HTMLDivElement>(null);
-  const [dropdownPos, setDropdownPos] = useState<{ top: number; left: number }>({ top: 0, left: 0 });
   const { data: session, status } = useSession();
   const isAuthenticated = status === "authenticated" && !!session?.user?.email;
+  const { panelRef, position, handleOpenChange } = useAnchoredOverlay<HTMLButtonElement>({
+    open,
+    onClose: () => setOpen(false),
+    side: "right",
+    crossAlign: "start",
+    triggerRef: bellRef,
+  });
 
   const badgeControls = useAnimationControls();
   const prevUnreadRef = useRef<number | null>(null);
@@ -96,39 +101,6 @@ export function NotificationBell() {
     },
   });
 
-  // Compute dropdown position when opening
-  const updatePosition = useCallback(() => {
-    if (!bellRef.current) return;
-    const rect = bellRef.current.getBoundingClientRect();
-    const panelHeight = 440; // approximate max height
-    let top = rect.top;
-    // If it would overflow the bottom, flip upward
-    if (top + panelHeight > window.innerHeight) {
-      top = Math.max(8, window.innerHeight - panelHeight - 8);
-    }
-    setDropdownPos({ top, left: rect.right + 8 });
-  }, []);
-
-  useEffect(() => {
-    if (open) updatePosition();
-  }, [open, updatePosition]);
-
-  // Close dropdown on outside click
-  useEffect(() => {
-    if (!open) return;
-    function handleClick(e: MouseEvent) {
-      const target = e.target as Node;
-      if (
-        ref.current && !ref.current.contains(target) &&
-        dropdownRef.current && !dropdownRef.current.contains(target)
-      ) {
-        setOpen(false);
-      }
-    }
-    document.addEventListener("mousedown", handleClick);
-    return () => document.removeEventListener("mousedown", handleClick);
-  }, [open]);
-
   function handleMarkAllRead() {
     if (!isAuthenticated) return;
     markRead.mutate({});
@@ -150,12 +122,18 @@ export function NotificationBell() {
   ];
 
   return (
-    <div ref={ref} className="relative">
+    <div className="relative">
       {/* Bell button */}
       <button
         ref={bellRef}
         type="button"
-        onClick={() => setOpen((v) => !v)}
+        onClick={() => {
+          setOpen((current) => {
+            const nextOpen = !current;
+            handleOpenChange(nextOpen);
+            return nextOpen;
+          });
+        }}
         className="relative p-2 text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg transition-colors"
         aria-label="Notifications"
       >
@@ -193,12 +171,12 @@ export function NotificationBell() {
       {/* Dropdown panel — rendered via portal to escape sidebar overflow */}
       {open && createPortal(
         <motion.div
-          ref={dropdownRef}
+          ref={panelRef}
           initial={{ opacity: 0, scaleY: 0.95, scaleX: 0.98 }}
           animate={{ opacity: 1, scaleY: 1, scaleX: 1 }}
           transition={{ duration: 0.15, ease: "easeOut" }}
           className="fixed w-96 bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-xl shadow-lg z-[9999] overflow-hidden origin-top"
-          style={{ top: dropdownPos.top, left: dropdownPos.left }}
+          style={{ top: position.top, left: position.left }}
         >
           {/* Header */}
           <div className="flex items-center justify-between px-4 py-3 border-b border-gray-100 dark:border-gray-800">