From ef8e6623517778f737df8b86e9aab395a68d4ce7 Mon Sep 17 00:00:00 2001
From: InstaZDLL <github.105mh@8shield.net>
Date: Mon, 4 May 2026 23:39:42 +0200
Subject: [PATCH] fix(search): show only one search field when global search
 opens

The trigger button stayed visible while the open panel rendered its
own input, leaving two stacked search fields. The trigger now turns
into the live input on open and the dropdown shows only results.
---
 apps/web/src/components/global-search.tsx | 76 +++++++++++------------
 1 file changed, 37 insertions(+), 39 deletions(-)

diff --git a/apps/web/src/components/global-search.tsx b/apps/web/src/components/global-search.tsx
index b83035d0..5cc11d42 100644
--- a/apps/web/src/components/global-search.tsx
+++ b/apps/web/src/components/global-search.tsx
@@ -136,48 +136,46 @@ export function GlobalSearch() {
 
   return (
     <div ref={containerRef} className="relative">
-      <button
-        onClick={() => {
-          setIsOpen(true);
-          setTimeout(() => inputRef.current?.focus(), 50);
-        }}
-        className={cn(
-          "flex items-center gap-2 px-3 py-2 rounded-xl border text-sm transition-all w-full",
-          isOpen
-            ? "border-primary bg-background"
-            : "border-border bg-secondary/50 text-muted-foreground hover:border-primary/50 hover:text-foreground"
-        )}
-      >
-        <Search className="w-4 h-4 flex-shrink-0" />
-        <span className="flex-1 text-left truncate">Rechercher...</span>
-        <kbd className="hidden md:inline-flex h-5 items-center gap-0.5 rounded border border-border bg-background px-1.5 text-[10px] font-medium text-muted-foreground">
-          Ctrl+K
-        </kbd>
-      </button>
+      {isOpen ? (
+        <div className="relative">
+          <Search className="pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
+          <Input
+            ref={inputRef}
+            value={query}
+            onChange={(e) => setQuery(e.target.value)}
+            placeholder="Rechercher dans les tâches, journal, jalons..."
+            className="pl-9 pr-9 h-10 rounded-xl border-primary"
+          />
+          {query && (
+            <button
+              type="button"
+              onClick={() => setQuery("")}
+              aria-label="Effacer la recherche"
+              className="absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
+            >
+              <X className="w-4 h-4" />
+            </button>
+          )}
+        </div>
+      ) : (
+        <button
+          type="button"
+          onClick={() => {
+            setIsOpen(true);
+            setTimeout(() => inputRef.current?.focus(), 50);
+          }}
+          className="flex w-full items-center gap-2 rounded-xl border border-border bg-secondary/50 px-3 py-2 text-sm text-muted-foreground transition-all hover:border-primary/50 hover:text-foreground"
+        >
+          <Search className="w-4 h-4 flex-shrink-0" />
+          <span className="flex-1 text-left truncate">Rechercher...</span>
+          <kbd className="hidden md:inline-flex h-5 items-center gap-0.5 rounded border border-border bg-background px-1.5 text-[10px] font-medium text-muted-foreground">
+            Ctrl+K
+          </kbd>
+        </button>
+      )}
 
       {isOpen && (
         <div className="absolute left-0 right-0 top-full mt-2 z-50 rounded-2xl border border-border/50 bg-card/75 backdrop-blur-md shadow-xl overflow-hidden">
-          <div className="p-3 border-b border-border">
-            <div className="relative">
-              <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
-              <Input
-                ref={inputRef}
-                value={query}
-                onChange={(e) => setQuery(e.target.value)}
-                placeholder="Rechercher dans les tâches, journal, jalons..."
-                className="pl-9 pr-9 h-10"
-              />
-              {query && (
-                <button
-                  onClick={() => setQuery("")}
-                  className="absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
-                >
-                  <X className="w-4 h-4" />
-                </button>
-              )}
-            </div>
-          </div>
-
           <div className="max-h-80 overflow-y-auto">
             {query.length < 2 ? (
               <div className="p-6 text-center text-sm text-muted-foreground">