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

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

@@ -5,6 +5,7 @@ import { useEffect, useRef, useState } from "react";
 import { AllocationStatus } from "@capakraken/shared";
 import { trpc } from "~/lib/trpc/client.js";
 import { useInvalidateTimeline } from "~/hooks/useInvalidatePlanningViews.js";
+import { useViewportPopover } from "~/hooks/useViewportPopover.js";
 import { DateInput } from "~/components/ui/DateInput.js";
 
 interface NewAllocationPopoverProps {
@@ -36,7 +37,12 @@ export function NewAllocationPopover({
   onClose,
   onCreated,
 }: NewAllocationPopoverProps) {
-  const ref = useRef<HTMLDivElement>(null);
+  const { ref, style } = useViewportPopover({
+    anchor: { kind: "point", x: anchorX - 10, y: anchorY },
+    width: 320,
+    estimatedHeight: 440,
+    onClose,
+  });
   const invalidateTimeline = useInvalidateTimeline();
 
   const [search, setSearch] = useState("");
@@ -67,17 +73,6 @@ export function NewAllocationPopover({
     },
   });
 
-  // Close on outside click
-  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]);
-
   function handleCreate() {
     if (!selectedProjectId) return;
     createMutation.mutate({
@@ -93,13 +88,10 @@ export function NewAllocationPopover({
 
   const canCreate = !!selectedProjectId && !!start && !!end && hoursPerDay > 0;
 
-  const left = Math.min(anchorX - 10, typeof window !== "undefined" ? window.innerWidth - 340 : anchorX);
-  const top = Math.min(anchorY + 8, typeof window !== "undefined" ? window.innerHeight - 440 : anchorY);
-
   return (
     <div
       ref={ref}
-      style={{ position: "fixed", left, top, zIndex: 60, width: 320 }}
+      style={style}
       className="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-xl shadow-2xl dark:shadow-black/40 overflow-hidden"
     >
       {/* Header */}