From ad2e6e78c60db069deac145140731c8d17e05b00 Mon Sep 17 00:00:00 2001
From: InstaZDLL <github.105mh@8shield.net>
Date: Tue, 5 May 2026 00:03:53 +0200
Subject: [PATCH 1/4] fix(search): keyboard navigation in global search results

The Cmd+K palette had no keyboard navigation: users had to leave the
keyboard and click to pick a result. Add Arrow Up/Down to move the
selection and Enter to open it. The hovered row syncs with the
keyboard cursor and the selected row scrolls into view as needed.
---
 apps/web/src/components/global-search.tsx | 52 ++++++++++++++++++++---
 1 file changed, 47 insertions(+), 5 deletions(-)

diff --git a/apps/web/src/components/global-search.tsx b/apps/web/src/components/global-search.tsx
index 5cc11d4..b9737f3 100644
--- a/apps/web/src/components/global-search.tsx
+++ b/apps/web/src/components/global-search.tsx
@@ -1,4 +1,4 @@
-import { useState, useMemo, useCallback, useEffect, useRef } from "react";
+import { useState, useMemo, useCallback, useEffect, useRef, type KeyboardEvent as ReactKeyboardEvent } from "react";
 import { useLocation } from "wouter";
 import { Search, X, BookOpen, Flag, CheckSquare, FileCheck } from "lucide-react";
 import { format, parseISO } from "date-fns";
@@ -25,9 +25,11 @@ const TYPE_CONFIG = {
 export function GlobalSearch() {
   const [query, setQuery] = useState("");
   const [isOpen, setIsOpen] = useState(false);
+  const [selectedIndex, setSelectedIndex] = useState(0);
   const [, navigate] = useLocation();
   const inputRef = useRef<HTMLInputElement>(null);
   const containerRef = useRef<HTMLDivElement>(null);
+  const resultRefs = useRef<Array<HTMLButtonElement | null>>([]);
 
   const { data: tasks = [] } = useListTasks();
   const { data: journalEntries = [] } = useListJournalEntries();
@@ -100,11 +102,41 @@ export function GlobalSearch() {
     (result: SearchResult) => {
       setQuery("");
       setIsOpen(false);
+      setSelectedIndex(0);
       navigate(result.href);
     },
     [navigate]
   );
 
+  const activeIndex = results.length > 0 ? Math.min(selectedIndex, results.length - 1) : 0;
+
+  useEffect(() => {
+    resultRefs.current[activeIndex]?.scrollIntoView({ block: "nearest" });
+  }, [activeIndex]);
+
+  const handleQueryChange = useCallback((value: string) => {
+    setQuery(value);
+    setSelectedIndex(0);
+  }, []);
+
+  const handleInputKeyDown = useCallback(
+    (e: ReactKeyboardEvent<HTMLInputElement>) => {
+      if (results.length === 0) return;
+      if (e.key === "ArrowDown") {
+        e.preventDefault();
+        setSelectedIndex((i) => Math.min(i + 1, results.length - 1));
+      } else if (e.key === "ArrowUp") {
+        e.preventDefault();
+        setSelectedIndex((i) => Math.max(i - 1, 0));
+      } else if (e.key === "Enter") {
+        e.preventDefault();
+        const target = results[activeIndex];
+        if (target) handleSelect(target);
+      }
+    },
+    [results, activeIndex, handleSelect]
+  );
+
   // Keyboard shortcut Ctrl+K to open search
   useEffect(() => {
     const handler = (e: KeyboardEvent) => {
@@ -116,6 +148,7 @@ export function GlobalSearch() {
       if (e.key === "Escape") {
         setIsOpen(false);
         setQuery("");
+        setSelectedIndex(0);
       }
     };
     window.addEventListener("keydown", handler);
@@ -142,14 +175,15 @@ export function GlobalSearch() {
           <Input
             ref={inputRef}
             value={query}
-            onChange={(e) => setQuery(e.target.value)}
+            onChange={(e) => handleQueryChange(e.target.value)}
+            onKeyDown={handleInputKeyDown}
             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("")}
+              onClick={() => handleQueryChange("")}
               aria-label="Effacer la recherche"
               className="absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
             >
@@ -187,14 +221,22 @@ export function GlobalSearch() {
               </div>
             ) : (
               <div className="p-1">
-                {results.map((result) => {
+                {results.map((result, index) => {
                   const config = TYPE_CONFIG[result.type];
                   const Icon = config.icon;
+                  const isActive = index === activeIndex;
                   return (
                     <button
                       key={result.id}
+                      ref={(el) => {
+                        resultRefs.current[index] = el;
+                      }}
                       onClick={() => handleSelect(result)}
-                      className="w-full flex items-start gap-3 rounded-xl p-3 text-left hover:bg-secondary/50 transition-colors"
+                      onMouseEnter={() => setSelectedIndex(index)}
+                      className={cn(
+                        "w-full flex items-start gap-3 rounded-xl p-3 text-left transition-colors",
+                        isActive ? "bg-secondary/70" : "hover:bg-secondary/50"
+                      )}
                     >
                       <Icon className={cn("w-4 h-4 mt-0.5 flex-shrink-0", config.color)} />
                       <div className="flex-1 min-w-0">

From 9f155896e2af7053cd53740900d63fa03bde4e80 Mon Sep 17 00:00:00 2001
From: "coderabbitai[bot]"
 <136622811+coderabbitai[bot]@users.noreply.github.com>
Date: Mon, 4 May 2026 22:17:19 +0000
Subject: [PATCH 2/4] fix: apply CodeRabbit auto-fixes

Fixed 1 file(s) based on 1 unresolved review comment.

Co-authored-by: CodeRabbit <noreply@coderabbit.ai>
---
 apps/web/src/components/global-search.tsx | 16 ++++++++++++++--
 1 file changed, 14 insertions(+), 2 deletions(-)

diff --git a/apps/web/src/components/global-search.tsx b/apps/web/src/components/global-search.tsx
index b9737f3..780ffca 100644
--- a/apps/web/src/components/global-search.tsx
+++ b/apps/web/src/components/global-search.tsx
@@ -22,6 +22,9 @@ const TYPE_CONFIG = {
   deliverable: { icon: FileCheck, color: "text-amber-500", label: "Livrable" },
 } as const;
 
+const getSuggestionId = (index: number) => `global-search-suggestion-${index}`;
+const LISTBOX_ID = "global-search-listbox";
+
 export function GlobalSearch() {
   const [query, setQuery] = useState("");
   const [isOpen, setIsOpen] = useState(false);
@@ -167,10 +170,13 @@ export function GlobalSearch() {
     return () => document.removeEventListener("mousedown", handler);
   }, [isOpen]);
 
+  const hasResults = results.length > 0;
+  const activeDescendantId = hasResults ? getSuggestionId(activeIndex) : undefined;
+
   return (
     <div ref={containerRef} className="relative">
       {isOpen ? (
-        <div className="relative">
+        <div className="relative" role="combobox" aria-expanded={isOpen} aria-haspopup="listbox" aria-owns={LISTBOX_ID}>
           <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}
@@ -179,6 +185,9 @@ export function GlobalSearch() {
             onKeyDown={handleInputKeyDown}
             placeholder="Rechercher dans les tâches, journal, jalons..."
             className="pl-9 pr-9 h-10 rounded-xl border-primary"
+            aria-autocomplete="list"
+            aria-controls={LISTBOX_ID}
+            aria-activedescendant={activeDescendantId}
           />
           {query && (
             <button
@@ -220,7 +229,7 @@ export function GlobalSearch() {
                 Aucun résultat pour "{query}"
               </div>
             ) : (
-              <div className="p-1">
+              <div id={LISTBOX_ID} role="listbox" className="p-1">
                 {results.map((result, index) => {
                   const config = TYPE_CONFIG[result.type];
                   const Icon = config.icon;
@@ -228,6 +237,9 @@ export function GlobalSearch() {
                   return (
                     <button
                       key={result.id}
+                      id={getSuggestionId(index)}
+                      role="option"
+                      aria-selected={isActive}
                       ref={(el) => {
                         resultRefs.current[index] = el;
                       }}

From e2ddff3d5d9b6d01567be0b3685b6a4e9ecdf47f Mon Sep 17 00:00:00 2001
From: "coderabbitai[bot]"
 <136622811+coderabbitai[bot]@users.noreply.github.com>
Date: Mon, 4 May 2026 22:26:18 +0000
Subject: [PATCH 3/4] fix: apply CodeRabbit auto-fixes

Fixed 1 file(s) based on 2 unresolved review comments.

Co-authored-by: CodeRabbit <noreply@coderabbit.ai>
---
 apps/web/src/components/global-search.tsx | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/apps/web/src/components/global-search.tsx b/apps/web/src/components/global-search.tsx
index 780ffca..8952eb3 100644
--- a/apps/web/src/components/global-search.tsx
+++ b/apps/web/src/components/global-search.tsx
@@ -127,10 +127,10 @@ export function GlobalSearch() {
       if (results.length === 0) return;
       if (e.key === "ArrowDown") {
         e.preventDefault();
-        setSelectedIndex((i) => Math.min(i + 1, results.length - 1));
+        setSelectedIndex(() => Math.min(activeIndex + 1, results.length - 1));
       } else if (e.key === "ArrowUp") {
         e.preventDefault();
-        setSelectedIndex((i) => Math.max(i - 1, 0));
+        setSelectedIndex(() => Math.max(activeIndex - 1, 0));
       } else if (e.key === "Enter") {
         e.preventDefault();
         const target = results[activeIndex];
@@ -171,12 +171,13 @@ export function GlobalSearch() {
   }, [isOpen]);
 
   const hasResults = results.length > 0;
-  const activeDescendantId = hasResults ? getSuggestionId(activeIndex) : undefined;
+  const shouldRenderListbox = isOpen && query.length >= 2 && hasResults;
+  const activeDescendantId = shouldRenderListbox ? getSuggestionId(activeIndex) : undefined;
 
   return (
     <div ref={containerRef} className="relative">
       {isOpen ? (
-        <div className="relative" role="combobox" aria-expanded={isOpen} aria-haspopup="listbox" aria-owns={LISTBOX_ID}>
+        <div className="relative" role="combobox" aria-expanded={isOpen} aria-haspopup="listbox" aria-owns={shouldRenderListbox ? LISTBOX_ID : undefined}>
           <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}
@@ -186,7 +187,7 @@ export function GlobalSearch() {
             placeholder="Rechercher dans les tâches, journal, jalons..."
             className="pl-9 pr-9 h-10 rounded-xl border-primary"
             aria-autocomplete="list"
-            aria-controls={LISTBOX_ID}
+            aria-controls={shouldRenderListbox ? LISTBOX_ID : undefined}
             aria-activedescendant={activeDescendantId}
           />
           {query && (

From aa397e144ab8b4bac7889739baa19081c0237bed Mon Sep 17 00:00:00 2001
From: InstaZDLL <github.105mh@8shield.net>
Date: Tue, 5 May 2026 09:23:52 +0200
Subject: [PATCH 4/4] fix(search): bind aria-expanded to actual listbox
 visibility

---
 apps/web/src/components/global-search.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/web/src/components/global-search.tsx b/apps/web/src/components/global-search.tsx
index 8952eb3..42e7654 100644
--- a/apps/web/src/components/global-search.tsx
+++ b/apps/web/src/components/global-search.tsx
@@ -177,7 +177,7 @@ export function GlobalSearch() {
   return (
     <div ref={containerRef} className="relative">
       {isOpen ? (
-        <div className="relative" role="combobox" aria-expanded={isOpen} aria-haspopup="listbox" aria-owns={shouldRenderListbox ? LISTBOX_ID : undefined}>
+        <div className="relative" role="combobox" aria-expanded={shouldRenderListbox} aria-haspopup="listbox" aria-owns={shouldRenderListbox ? LISTBOX_ID : undefined}>
           <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}