From 2a9a400cd439fcf9d7bc77c9146ef2668eb5e8ec Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Hartmut=20N=C3=B6renberg?= <hn@hartmut-noerenberg.com>
Date: Tue, 17 Mar 2026 10:29:12 +0100
Subject: [PATCH] fix: rewrite combobox components to inline-input pattern with
 dark mode (Gitea #12)

Replace button+dropdown pattern with single input that becomes editable on focus.
Fixes "second bar appearing" UX bug, adds dark mode, fixes z-index overlap.

Co-Authored-By: claude-flow <ruv@ruv.net>
---
 .../web/src/components/ui/ProjectCombobox.tsx | 78 ++++++++---------
 .../src/components/ui/ResourceCombobox.tsx    | 86 +++++++++----------
 2 files changed, 78 insertions(+), 86 deletions(-)

diff --git a/apps/web/src/components/ui/ProjectCombobox.tsx b/apps/web/src/components/ui/ProjectCombobox.tsx
index 731c7cc..fe95453 100644
--- a/apps/web/src/components/ui/ProjectCombobox.tsx
+++ b/apps/web/src/components/ui/ProjectCombobox.tsx
@@ -17,7 +17,7 @@ interface ProjectComboboxProps {
 export function ProjectCombobox({
   value,
   onChange,
-  placeholder = "Search project…",
+  placeholder = "Search project\u2026",
   disabled = false,
   status,
   className = "",
@@ -43,9 +43,9 @@ export function ProjectCombobox({
   const selectedLabel = useMemo(() => {
     if (!value) return "";
     const fromOpen = projects.find((p) => p.id === value);
-    if (fromOpen) return `${fromOpen.shortCode} — ${fromOpen.name}`;
+    if (fromOpen) return `${fromOpen.shortCode} \u2014 ${fromOpen.name}`;
     const fromAll = allData?.projects.find((p) => p.id === value);
-    if (fromAll) return `${fromAll.shortCode} — ${fromAll.name}`;
+    if (fromAll) return `${fromAll.shortCode} \u2014 ${fromAll.name}`;
     return value;
   }, [value, projects, allData]);
 
@@ -61,72 +61,68 @@ export function ProjectCombobox({
     return () => document.removeEventListener("mousedown", handleClick);
   }, [open]);
 
-  function handleOpen() {
+  function handleFocus() {
     if (disabled) return;
     setOpen(true);
     setSearch("");
-    setTimeout(() => inputRef.current?.focus(), 0);
   }
 
   function select(id: string | null) {
     onChange(id);
     setOpen(false);
     setSearch("");
+    inputRef.current?.blur();
   }
 
   return (
     <div className={`relative ${className}`} ref={containerRef}>
-      <button
-        type="button"
-        onClick={handleOpen}
-        disabled={disabled}
-        className={`w-full text-left px-3 py-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-brand-500 bg-white disabled:opacity-50 disabled:cursor-not-allowed ${
-          open ? "border-brand-500 ring-2 ring-brand-500" : "hover:border-gray-400"
-        }`}
-      >
-        <span className={selectedLabel ? "text-gray-900" : "text-gray-400"}>
-          {selectedLabel || placeholder}
-        </span>
-        {value && !disabled && (
-          <span
-            role="button"
-            tabIndex={0}
-            onMouseDown={(e) => { e.stopPropagation(); select(null); }}
-            onKeyDown={(e) => { if (e.key === "Enter") select(null); }}
-            className="absolute right-2 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600 text-lg leading-none"
+      <div className="relative">
+        <input
+          ref={inputRef}
+          type="text"
+          value={open ? search : selectedLabel}
+          onChange={(e) => setSearch(e.target.value)}
+          onFocus={handleFocus}
+          placeholder={placeholder}
+          disabled={disabled}
+          className={`w-full px-3 py-2 border rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-brand-500 disabled:opacity-50 disabled:cursor-not-allowed ${
+            open
+              ? "border-brand-500 ring-2 ring-brand-500"
+              : "border-gray-300 hover:border-gray-400 dark:border-gray-600 dark:hover:border-gray-500"
+          } bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 placeholder:text-gray-400 dark:placeholder:text-gray-500`}
+          readOnly={!open}
+        />
+        {value && !disabled && !open && (
+          <button
+            type="button"
+            onMouseDown={(e) => { e.preventDefault(); e.stopPropagation(); select(null); }}
+            className="absolute right-2 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 text-lg leading-none"
             aria-label="Clear"
+            tabIndex={-1}
           >
-            ×
-          </span>
+            \u00d7
+          </button>
         )}
-      </button>
+      </div>
 
       {open && (
-        <div className="absolute left-0 right-0 top-full mt-1 z-50 bg-white border border-gray-200 rounded-xl shadow-xl overflow-hidden">
-          <div className="p-2 border-b border-gray-100">
-            <input
-              ref={inputRef}
-              type="text"
-              value={search}
-              onChange={(e) => setSearch(e.target.value)}
-              placeholder="Type to search…"
-              className="w-full px-2 py-1 text-sm border-0 outline-none"
-            />
-          </div>
+        <div className="absolute left-0 right-0 top-full mt-1 z-[60] bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-600 rounded-xl shadow-xl overflow-hidden">
           <ul className="max-h-52 overflow-y-auto py-1">
             {projects.length === 0 ? (
-              <li className="px-3 py-2 text-sm text-gray-400">No results</li>
+              <li className="px-3 py-2 text-sm text-gray-400 dark:text-gray-500">No results</li>
             ) : (
               projects.map((p) => (
                 <li key={p.id}>
                   <button
                     type="button"
                     onMouseDown={() => select(p.id)}
-                    className={`w-full text-left px-3 py-1.5 text-sm hover:bg-brand-50 ${
-                      p.id === value ? "bg-brand-50 text-brand-700 font-medium" : "text-gray-700"
+                    className={`w-full text-left px-3 py-1.5 text-sm hover:bg-brand-50 dark:hover:bg-brand-950/40 ${
+                      p.id === value
+                        ? "bg-brand-50 dark:bg-brand-950/40 text-brand-700 dark:text-brand-300 font-medium"
+                        : "text-gray-700 dark:text-gray-200"
                     }`}
                   >
-                    <span className="font-medium text-xs text-gray-400 mr-1.5">{p.shortCode}</span>
+                    <span className="font-medium text-xs text-gray-400 dark:text-gray-500 mr-1.5">{p.shortCode}</span>
                     <span>{p.name}</span>
                   </button>
                 </li>
diff --git a/apps/web/src/components/ui/ResourceCombobox.tsx b/apps/web/src/components/ui/ResourceCombobox.tsx
index e57ba3e..82c3b29 100644
--- a/apps/web/src/components/ui/ResourceCombobox.tsx
+++ b/apps/web/src/components/ui/ResourceCombobox.tsx
@@ -16,7 +16,7 @@ interface ResourceComboboxProps {
 export function ResourceCombobox({
   value,
   onChange,
-  placeholder = "Search resource…",
+  placeholder = "Search resource\u2026",
   disabled = false,
   isActive = true,
   className = "",
@@ -32,22 +32,22 @@ export function ResourceCombobox({
     { enabled: open, staleTime: 30_000 },
   );
 
-  const resources = data?.resources ?? [];
+  const resources = (data?.resources ?? []) as Array<{ id: string; displayName: string; eid: string }>;
 
-  // Resolve display name for currently selected value
-  const { data: selectedData } = trpc.resource.list.useQuery(
-    { search: undefined, limit: 500, isActive: undefined as unknown as boolean },
+  const selectedQuery = trpc.resource.list.useQuery(
+    { limit: 500 },
     { enabled: !!value && !open, staleTime: 60_000 },
   );
+  const selectedResources = (selectedQuery.data?.resources ?? []) as Array<{ id: string; displayName: string; eid: string }>;
 
   const selectedLabel = useMemo(() => {
     if (!value) return "";
     const fromOpen = resources.find((r) => r.id === value);
     if (fromOpen) return `${fromOpen.displayName} (${fromOpen.eid})`;
-    const fromSelected = selectedData?.resources.find((r) => r.id === value);
+    const fromSelected = selectedResources.find((r) => r.id === value);
     if (fromSelected) return `${fromSelected.displayName} (${fromSelected.eid})`;
     return value;
-  }, [value, resources, selectedData]);
+  }, [value, resources, selectedResources]);
 
   useEffect(() => {
     if (!open) return;
@@ -61,73 +61,69 @@ export function ResourceCombobox({
     return () => document.removeEventListener("mousedown", handleClick);
   }, [open]);
 
-  function handleOpen() {
+  function handleFocus() {
     if (disabled) return;
     setOpen(true);
     setSearch("");
-    setTimeout(() => inputRef.current?.focus(), 0);
   }
 
   function select(id: string | null) {
     onChange(id);
     setOpen(false);
     setSearch("");
+    inputRef.current?.blur();
   }
 
   return (
     <div className={`relative ${className}`} ref={containerRef}>
-      <button
-        type="button"
-        onClick={handleOpen}
-        disabled={disabled}
-        className={`w-full text-left px-3 py-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-brand-500 bg-white disabled:opacity-50 disabled:cursor-not-allowed ${
-          open ? "border-brand-500 ring-2 ring-brand-500" : "hover:border-gray-400"
-        }`}
-      >
-        <span className={selectedLabel ? "text-gray-900" : "text-gray-400"}>
-          {selectedLabel || placeholder}
-        </span>
-        {value && !disabled && (
-          <span
-            role="button"
-            tabIndex={0}
-            onMouseDown={(e) => { e.stopPropagation(); select(null); }}
-            onKeyDown={(e) => { if (e.key === "Enter") select(null); }}
-            className="absolute right-2 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600 text-lg leading-none"
+      <div className="relative">
+        <input
+          ref={inputRef}
+          type="text"
+          value={open ? search : selectedLabel}
+          onChange={(e) => setSearch(e.target.value)}
+          onFocus={handleFocus}
+          placeholder={placeholder}
+          disabled={disabled}
+          className={`w-full px-3 py-2 border rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-brand-500 disabled:opacity-50 disabled:cursor-not-allowed ${
+            open
+              ? "border-brand-500 ring-2 ring-brand-500"
+              : "border-gray-300 hover:border-gray-400 dark:border-gray-600 dark:hover:border-gray-500"
+          } bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 placeholder:text-gray-400 dark:placeholder:text-gray-500`}
+          readOnly={!open}
+        />
+        {value && !disabled && !open && (
+          <button
+            type="button"
+            onMouseDown={(e) => { e.preventDefault(); e.stopPropagation(); select(null); }}
+            className="absolute right-2 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 text-lg leading-none"
             aria-label="Clear"
+            tabIndex={-1}
           >
-            ×
-          </span>
+            \u00d7
+          </button>
         )}
-      </button>
+      </div>
 
       {open && (
-        <div className="absolute left-0 right-0 top-full mt-1 z-50 bg-white border border-gray-200 rounded-xl shadow-xl overflow-hidden">
-          <div className="p-2 border-b border-gray-100">
-            <input
-              ref={inputRef}
-              type="text"
-              value={search}
-              onChange={(e) => setSearch(e.target.value)}
-              placeholder="Type to search…"
-              className="w-full px-2 py-1 text-sm border-0 outline-none"
-            />
-          </div>
+        <div className="absolute left-0 right-0 top-full mt-1 z-[60] bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-600 rounded-xl shadow-xl overflow-hidden">
           <ul className="max-h-52 overflow-y-auto py-1">
             {resources.length === 0 ? (
-              <li className="px-3 py-2 text-sm text-gray-400">No results</li>
+              <li className="px-3 py-2 text-sm text-gray-400 dark:text-gray-500">No results</li>
             ) : (
               resources.map((r) => (
                 <li key={r.id}>
                   <button
                     type="button"
                     onMouseDown={() => select(r.id)}
-                    className={`w-full text-left px-3 py-1.5 text-sm hover:bg-brand-50 ${
-                      r.id === value ? "bg-brand-50 text-brand-700 font-medium" : "text-gray-700"
+                    className={`w-full text-left px-3 py-1.5 text-sm hover:bg-brand-50 dark:hover:bg-brand-950/40 ${
+                      r.id === value
+                        ? "bg-brand-50 dark:bg-brand-950/40 text-brand-700 dark:text-brand-300 font-medium"
+                        : "text-gray-700 dark:text-gray-200"
                     }`}
                   >
                     <span>{r.displayName}</span>
-                    <span className="ml-1.5 text-xs text-gray-400">{r.eid}</span>
+                    <span className="ml-1.5 text-xs text-gray-400 dark:text-gray-500">{r.eid}</span>
                   </button>
                 </li>
               ))