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

apps/web/src/components/timeline/DemandPopover.tsx

@@ -1,8 +1,8 @@
 "use client";
 
-import { useEffect, useRef } from "react";
 import type { TimelineDemandEntry } from "./TimelineContext.js";
 import { formatCents, formatDateLong } from "~/lib/format.js";
+import { useViewportPopover } from "~/hooks/useViewportPopover.js";
 
 interface DemandPopoverProps {
   demand: TimelineDemandEntry;
@@ -21,17 +21,12 @@ export function DemandPopover({
   anchorX,
   anchorY,
 }: DemandPopoverProps) {
-  const ref = useRef<HTMLDivElement>(null);
-
-  useEffect(() => {
-    function handleClick(e: MouseEvent) {
-      if (ref.current && !ref.current.contains(e.target as Node)) {
-        onClose();
-      }
-    }
-    document.addEventListener("mousedown", handleClick);
-    return () => document.removeEventListener("mousedown", handleClick);
-  }, [onClose]);
+  const { ref, style } = useViewportPopover({
+    anchor: { kind: "point", x: anchorX, y: anchorY },
+    width: 300,
+    estimatedHeight: 340,
+    onClose,
+  });
 
   const roleName = demand.roleEntity?.name ?? demand.role ?? "Unspecified";
   const roleColor = demand.roleEntity?.color ?? "#f59e0b";
@@ -41,18 +36,10 @@ export function DemandPopover({
   const totalHours = demand.hoursPerDay * days;
   const budgetCents = demand.dailyCostCents * days;
 
-  const popoverStyle: React.CSSProperties = {
-    position: "fixed",
-    left: Math.min(anchorX, window.innerWidth - 320),
-    top: Math.min(anchorY + 8, window.innerHeight - 340),
-    zIndex: 50,
-    width: 300,
-  };
-
   return (
     <div
       ref={ref}
-      style={popoverStyle}
+      style={style}
       className="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-600 rounded-xl shadow-xl overflow-hidden"
     >
       {/* Header */}