From 13bcfc13149ccbeab9609b11f42f8140527e49b5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Cau=C3=AA=20Faleiros?= <cauefaleiros@gmail.com>
Date: Mon, 9 Mar 2026 15:54:49 -0300
Subject: [PATCH] feat: enhance global search UI and positioning

- Moved search bar to the left/center for better accessibility.

- Increased search bar width to max-w-2xl.

- Refined search results dropdown layout and styling.
---
 components/Layout.tsx | 233 +++++++++++++++++++++---------------------
 1 file changed, 115 insertions(+), 118 deletions(-)

diff --git a/components/Layout.tsx b/components/Layout.tsx
index 9f98354..07e86e9 100644
--- a/components/Layout.tsx
+++ b/components/Layout.tsx
@@ -194,14 +194,126 @@ export const Layout: React.FC<{ children: React.ReactNode }> = ({ children }) =>
       {/* Main Content */}
       <div className="flex-1 flex flex-col min-w-0">
         {/* Header */}
-        <header className="h-20 bg-white dark:bg-dark-header border-b border-zinc-200 dark:border-dark-border px-4 sm:px-8 flex items-center justify-between z-10 sticky top-0 transition-colors">
-          <div className="flex items-center gap-4">
+        <header className="h-20 bg-white dark:bg-dark-header border-b border-zinc-200 dark:border-dark-border px-4 sm:px-8 flex items-center gap-4 sm:gap-8 z-10 sticky top-0 transition-colors">
+          <div className="flex items-center gap-4 shrink-0">
             <button onClick={() => setIsMobileMenuOpen(true)} className="lg:hidden text-zinc-500 hover:text-zinc-900 dark:hover:text-white">
               <Menu size={24} />
             </button>
           </div>
 
-          <div className="flex items-center gap-4 sm:gap-6">
+          {/* Search Bar - Moved to left/center and made wider */}
+          <div className="hidden md:block relative flex-1 max-w-2xl">
+            <div className="flex items-center bg-zinc-100 dark:bg-dark-bg rounded-xl px-4 py-2.5 w-full border border-transparent focus-within:bg-white dark:focus-within:bg-dark-card focus-within:border-brand-yellow focus-within:ring-2 focus-within:ring-brand-yellow/20 dark:focus-within:ring-brand-yellow/10 transition-all">
+              {isSearching ? <Loader2 size={18} className="text-brand-yellow animate-spin" /> : <Search size={18} className="text-zinc-400 dark:text-dark-muted" />}
+              <input 
+                type="text" 
+                placeholder="Buscar membros, equipes ou atendimentos..." 
+                value={searchQuery}
+                onChange={(e) => setSearchQuery(e.target.value)}
+                onFocus={() => searchQuery.length >= 2 && setShowSearchResults(true)}
+                className="bg-transparent border-none outline-none text-sm ml-3 w-full text-zinc-700 dark:text-dark-text placeholder-zinc-400 dark:placeholder-dark-muted" 
+              />
+            </div>
+
+            {/* Search Results Dropdown */}
+            {showSearchResults && (
+              <div className="absolute top-full mt-2 left-0 w-full bg-white dark:bg-dark-card border border-zinc-200 dark:border-dark-border rounded-2xl shadow-2xl overflow-hidden z-50 animate-in fade-in slide-in-from-top-2 duration-200">
+                <div className="max-h-[480px] overflow-y-auto p-2">
+                  {/* Members Section */}
+                  {searchResults.members.length > 0 && (
+                    <div className="mb-4">
+                      <div className="px-3 py-2 text-[10px] font-bold text-zinc-400 dark:text-dark-muted uppercase tracking-widest border-b border-zinc-50 dark:border-dark-border/50 mb-1">Membros</div>
+                      {searchResults.members.map(m => (
+                        <button
+                          key={m.id}
+                          onClick={() => {
+                            navigate(`/users/${m.slug || m.id}`);
+                            setShowSearchResults(false);
+                            setSearchQuery('');
+                          }}
+                          className="w-full flex items-center gap-3 p-2 hover:bg-zinc-50 dark:hover:bg-dark-border rounded-xl transition-colors text-left"
+                        >
+                          <img 
+                            src={m.avatar_url?.startsWith('http') ? m.avatar_url : `${import.meta.env.PROD ? '' : 'http://localhost:3001'}${m.avatar_url || ''}`} 
+                            alt={m.name} 
+                            className="w-9 h-9 rounded-full border border-zinc-100 dark:border-dark-border object-cover"
+                            onError={(e) => { (e.target as HTMLImageElement).src = `https://ui-avatars.com/api/?name=${encodeURIComponent(m.name)}&background=random`; }}
+                          />
+                          <div>
+                            <div className="text-sm font-semibold text-zinc-900 dark:text-dark-text">{m.name}</div>
+                            <div className="text-xs text-zinc-500 dark:text-dark-muted">{m.email}</div>
+                          </div>
+                        </button>
+                      ))}
+                    </div>
+                  )}
+
+                  {/* Teams Section */}
+                  {searchResults.teams.length > 0 && (
+                    <div className="mb-4">
+                      <div className="px-3 py-2 text-[10px] font-bold text-zinc-400 dark:text-dark-muted uppercase tracking-widest border-b border-zinc-50 dark:border-dark-border/50 mb-1">Equipes</div>
+                      {searchResults.teams.map(t => (
+                        <button
+                          key={t.id}
+                          onClick={() => {
+                            navigate(`/admin/teams`);
+                            setShowSearchResults(false);
+                            setSearchQuery('');
+                          }}
+                          className="w-full flex items-center gap-3 p-2 hover:bg-zinc-50 dark:hover:bg-dark-border rounded-xl transition-colors text-left"
+                        >
+                          <div className="w-9 h-9 rounded-lg bg-zinc-100 dark:bg-dark-bg flex items-center justify-center text-zinc-500 dark:text-dark-muted border border-zinc-200 dark:border-dark-border">
+                            <Building2 size={18} />
+                          </div>
+                          <div>
+                            <div className="text-sm font-semibold text-zinc-900 dark:text-dark-text">{t.name}</div>
+                            <div className="text-xs text-zinc-500 dark:text-dark-muted line-clamp-1">{t.description || 'Sem descrição'}</div>
+                          </div>
+                        </button>
+                      ))}
+                    </div>
+                  )}
+
+                  {/* Attendances Section */}
+                  {searchResults.attendances.length > 0 && (
+                    <div className="mb-2">
+                      <div className="px-3 py-2 text-[10px] font-bold text-zinc-400 dark:text-dark-muted uppercase tracking-widest border-b border-zinc-50 dark:border-dark-border/50 mb-1">Atendimentos</div>
+                      {searchResults.attendances.map(a => (
+                        <button
+                          key={a.id}
+                          onClick={() => {
+                            navigate(`/attendances/${a.id}`);
+                            setShowSearchResults(false);
+                            setSearchQuery('');
+                          }}
+                          className="w-full flex items-center gap-3 p-2 hover:bg-zinc-50 dark:hover:bg-dark-border rounded-xl transition-colors text-left"
+                        >
+                          <div className="w-9 h-9 rounded-lg bg-zinc-100 dark:bg-dark-bg flex items-center justify-center text-zinc-500 dark:text-dark-muted text-[10px] font-bold border border-zinc-200 dark:border-dark-border">
+                            KPI
+                          </div>
+                          <div className="flex-1 min-w-0">
+                            <div className="text-sm font-semibold text-zinc-900 dark:text-dark-text truncate">{a.summary}</div>
+                            <div className="text-[10px] text-zinc-500 dark:text-dark-muted flex justify-between mt-0.5">
+                              <span className="font-medium">{a.user_name}</span>
+                              <span>{new Date(a.created_at).toLocaleDateString()}</span>
+                            </div>
+                          </div>
+                        </button>
+                      ))}
+                    </div>
+                  )}
+
+                  {searchResults.members.length === 0 && searchResults.teams.length === 0 && searchResults.attendances.length === 0 && (
+                    <div className="p-8 text-center text-zinc-500 dark:text-dark-muted text-sm">
+                      Nenhum resultado encontrado para "{searchQuery}"
+                    </div>
+                  )}
+                </div>
+              </div>
+            )}
+          </div>
+
+          <div className="flex items-center gap-4 sm:gap-6 ml-auto shrink-0">
             {/* Dark Mode Toggle */}
             <button 
               onClick={toggleDarkMode}
@@ -211,121 +323,6 @@ export const Layout: React.FC<{ children: React.ReactNode }> = ({ children }) =>
               {isDark ? <Sun size={20} /> : <Moon size={20} />}
             </button>
 
-            {/* Search Bar */}
-            <div className="hidden md:block relative">
-              <div className="flex items-center bg-zinc-100 dark:bg-dark-bg rounded-full px-4 py-2 w-64 border border-transparent focus-within:bg-white dark:focus-within:bg-dark-card focus-within:border-brand-yellow focus-within:ring-2 focus-within:ring-brand-yellow/20 dark:focus-within:ring-brand-yellow/10 transition-all">
-                {isSearching ? <Loader2 size={18} className="text-brand-yellow animate-spin" /> : <Search size={18} className="text-zinc-400 dark:text-dark-muted" />}
-                <input 
-                  type="text" 
-                  placeholder="Buscar..." 
-                  value={searchQuery}
-                  onChange={(e) => setSearchQuery(e.target.value)}
-                  onFocus={() => searchQuery.length >= 2 && setShowSearchResults(true)}
-                  className="bg-transparent border-none outline-none text-sm ml-2 w-full text-zinc-700 dark:text-dark-text placeholder-zinc-400 dark:placeholder-dark-muted" 
-                />
-              </div>
-
-              {/* Search Results Dropdown */}
-              {showSearchResults && (
-                <div className="absolute top-full mt-2 left-0 right-0 w-[400px] bg-white dark:bg-dark-card border border-zinc-200 dark:border-dark-border rounded-2xl shadow-2xl overflow-hidden z-50 animate-in fade-in slide-in-from-top-2 duration-200">
-                  <div className="max-h-[480px] overflow-y-auto p-2">
-                    {/* Members Section */}
-                    {searchResults.members.length > 0 && (
-                      <div className="mb-4">
-                        <div className="px-3 py-2 text-[10px] font-bold text-zinc-400 dark:text-dark-muted uppercase tracking-widest">Membros</div>
-                        {searchResults.members.map(m => (
-                          <button
-                            key={m.id}
-                            onClick={() => {
-                              navigate(`/users/${m.slug || m.id}`);
-                              setShowSearchResults(false);
-                              setSearchQuery('');
-                            }}
-                            className="w-full flex items-center gap-3 p-2 hover:bg-zinc-50 dark:hover:bg-dark-border rounded-xl transition-colors text-left"
-                          >
-                            <img 
-                              src={m.avatar_url?.startsWith('http') ? m.avatar_url : `${import.meta.env.PROD ? '' : 'http://localhost:3001'}${m.avatar_url || ''}`} 
-                              alt={m.name} 
-                              className="w-8 h-8 rounded-full border border-zinc-100 dark:border-dark-border"
-                              onError={(e) => { (e.target as HTMLImageElement).src = `https://ui-avatars.com/api/?name=${encodeURIComponent(m.name)}&background=random`; }}
-                            />
-                            <div>
-                              <div className="text-sm font-semibold text-zinc-900 dark:text-dark-text">{m.name}</div>
-                              <div className="text-xs text-zinc-500 dark:text-dark-muted">{m.email}</div>
-                            </div>
-                          </button>
-                        ))}
-                      </div>
-                    )}
-
-                    {/* Teams Section */}
-                    {searchResults.teams.length > 0 && (
-                      <div className="mb-4">
-                        <div className="px-3 py-2 text-[10px] font-bold text-zinc-400 dark:text-dark-muted uppercase tracking-widest">Equipes</div>
-                        {searchResults.teams.map(t => (
-                          <button
-                            key={t.id}
-                            onClick={() => {
-                              navigate(`/admin/teams`); // For now just to teams list
-                              setShowSearchResults(false);
-                              setSearchQuery('');
-                            }}
-                            className="w-full flex items-center gap-3 p-2 hover:bg-zinc-50 dark:hover:bg-dark-border rounded-xl transition-colors text-left"
-                          >
-                            <div className="w-8 h-8 rounded-lg bg-zinc-100 dark:bg-dark-bg flex items-center justify-center text-zinc-500 dark:text-dark-muted">
-                              <Building2 size={16} />
-                            </div>
-                            <div>
-                              <div className="text-sm font-semibold text-zinc-900 dark:text-dark-text">{t.name}</div>
-                              <div className="text-xs text-zinc-500 dark:text-dark-muted line-clamp-1">{t.description || 'Sem descrição'}</div>
-                            </div>
-                          </button>
-                        ))}
-                      </div>
-                    )}
-
-                    {/* Attendances Section */}
-                    {searchResults.attendances.length > 0 && (
-                      <div className="mb-2">
-                        <div className="px-3 py-2 text-[10px] font-bold text-zinc-400 dark:text-dark-muted uppercase tracking-widest">Atendimentos</div>
-                        {searchResults.attendances.map(a => (
-                          <button
-                            key={a.id}
-                            onClick={() => {
-                              navigate(`/attendances/${a.id}`);
-                              setShowSearchResults(false);
-                              setSearchQuery('');
-                            }}
-                            className="w-full flex items-center gap-3 p-2 hover:bg-zinc-50 dark:hover:bg-dark-border rounded-xl transition-colors text-left"
-                          >
-                            <div className="w-8 h-8 rounded-lg bg-zinc-100 dark:bg-dark-bg flex items-center justify-center text-zinc-500 dark:text-dark-muted text-[10px] font-bold">
-                              KPI
-                            </div>
-                            <div className="flex-1 min-w-0">
-                              <div className="text-sm font-semibold text-zinc-900 dark:text-dark-text truncate">{a.summary}</div>
-                              <div className="text-[10px] text-zinc-500 dark:text-dark-muted flex justify-between">
-                                <span>{a.user_name}</span>
-                                <span>{new Date(a.created_at).toLocaleDateString()}</span>
-                              </div>
-                            </div>
-                          </button>
-                        ))}
-                      </div>
-                    )}
-
-                    {searchResults.members.length === 0 && searchResults.teams.length === 0 && searchResults.attendances.length === 0 && (
-                      <div className="p-8 text-center text-zinc-500 dark:text-dark-muted text-sm">
-                        Nenhum resultado encontrado para "{searchQuery}"
-                      </div>
-                    )}
-                  </div>
-                </div>
-              )}
-            </div>
-
-            {/* Close results when clicking outside */}
-            {showSearchResults && <div className="fixed inset-0 z-40" onClick={() => setShowSearchResults(false)} />}
-
             {/* Notifications */}
             <div className="relative">
               <button className="p-2 text-zinc-500 dark:text-dark-muted hover:bg-zinc-100 dark:hover:bg-dark-border rounded-full relative transition-colors">