fix(web): reuse project combobox in timeline popovers

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

@@ -6,6 +6,7 @@ import { createPortal } from "react-dom";
 import { AllocationStatus } from "@capakraken/shared";
 import { trpc } from "~/lib/trpc/client.js";
 import { useInvalidateTimeline } from "~/hooks/useInvalidatePlanningViews.js";
+import { ProjectCombobox } from "~/components/ui/ProjectCombobox.js";
 
 interface BatchAssignPopoverProps {
   resourceIds: string[];
@@ -33,23 +34,10 @@ export function BatchAssignPopover({
   const ref = useRef<HTMLDivElement>(null);
   const invalidateTimeline = useInvalidateTimeline();
 
-  const [search, setSearch] = useState("");
   const [selectedProjectId, setSelectedProjectId] = useState<string | null>(
     null,
   );
   const [hoursPerDay, setHoursPerDay] = useState(8);
-  const [dropdownOpen, setDropdownOpen] = useState(true);
-
-  const { data: projectsData } = trpc.project.list.useQuery(
-    { search, limit: 20 },
-    { staleTime: 30_000 },
-  );
-
-  const projects = (projectsData?.projects ?? []) as Array<{
-    id: string;
-    name: string;
-  }>;
-  const selectedProject = projects.find((p) => p.id === selectedProjectId);
 
   const batchMutation = trpc.timeline.batchQuickAssign.useMutation({
     onSuccess: () => {
@@ -136,54 +124,12 @@ export function BatchAssignPopover({
           <label className="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">
             Project
           </label>
-          {selectedProject && !dropdownOpen ? (
-            <div
-              className="flex items-center gap-2 border border-sky-300 dark:border-sky-700 rounded-lg px-3 py-2 cursor-pointer bg-sky-50 dark:bg-sky-950/30"
-              onClick={() => {
-                setDropdownOpen(true);
-                setSearch("");
-              }}
-            >
-              <span className="text-sm text-gray-800 dark:text-gray-200 truncate flex-1">
-                {selectedProject.name}
-              </span>
-              <span className="text-xs text-gray-400 dark:text-gray-500">
-                &#9662;
-              </span>
-            </div>
-          ) : (
-            <div className="relative">
-              <input
-                autoFocus
-                type="text"
-                placeholder="Search projects\u2026"
-                value={search}
-                onChange={(e) => setSearch(e.target.value)}
-                onFocus={() => setDropdownOpen(true)}
-                className="w-full border border-gray-200 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 dark:placeholder-gray-400 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-sky-400 dark:focus:ring-sky-500"
-              />
-              {dropdownOpen && projects.length > 0 && (
-                <div className="absolute top-full left-0 right-0 z-50 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-xl shadow-lg dark:shadow-black/40 mt-1 max-h-44 overflow-y-auto">
-                  {projects.map((p) => (
-                    <button
-                      key={p.id}
-                      type="button"
-                      onClick={() => {
-                        setSelectedProjectId(p.id);
-                        setDropdownOpen(false);
-                        setSearch("");
-                      }}
-                      className="w-full text-left px-3 py-2 hover:bg-gray-50 dark:hover:bg-gray-700 flex items-center gap-2 border-b border-gray-50 dark:border-gray-700 last:border-0"
-                    >
-                      <span className="text-sm text-gray-800 dark:text-gray-200 truncate">
-                        {p.name}
-                      </span>
-                    </button>
-                  ))}
-                </div>
-              )}
-            </div>
-          )}
+          <ProjectCombobox
+            value={selectedProjectId}
+            onChange={setSelectedProjectId}
+            placeholder="Search project…"
+            className="w-full"
+          />
         </div>
 
         {/* Hours per day */}