Hartmut/CapaKraken
1
0
Fork 0
Code Issues 10 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

fix: rewrite combobox components to inline-input pattern with dark mode (Gitea #12)

Browse Source 
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>
This commit is contained in:
Hartmut Nörenberg
2026-03-17 10:29:12 +01:00
parent eb283147d1
commit 2a9a400cd4
2 changed files with 78 additions and 86 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/src/components/ui/ProjectCombobox.tsx
+36 -40
View File
@@ -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"
aria-label="Clear"
>
×
</span>
)}
</button>
{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">
<div className="relative">
<input
ref={inputRef}
type="text"
value={search}
value={open ? search : selectedLabel}
onChange={(e) => setSearch(e.target.value)}
placeholder="Type to search…"
className="w-full px-2 py-1 text-sm border-0 outline-none"
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}
>
\u00d7
</button>
)}
</div>
{open && (
<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>
apps/web/src/components/ui/ResourceCombobox.tsx
+40 -44
View File
@@ -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"
aria-label="Clear"
>
×
</span>
)}
</button>
{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">
<div className="relative">
<input
ref={inputRef}
type="text"
value={search}
value={open ? search : selectedLabel}
onChange={(e) => setSearch(e.target.value)}
placeholder="Type to search…"
className="w-full px-2 py-1 text-sm border-0 outline-none"
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}
>
\u00d7
</button>
)}
</div>
{open && (
<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>
))