feat: enhance global search UI and positioning
All checks were successful
Build and Deploy / build-and-push (push) Successful in 1m55s
All checks were successful
Build and Deploy / build-and-push (push) Successful in 1m55s
- 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.
This commit is contained in:
Cauê Faleiros
@@ -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">
|
||||
|
||||
Reference in New Issue
Block a user