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 */}
|
{/* Main Content */}
|
||||||
<div className="flex-1 flex flex-col min-w-0">
|
<div className="flex-1 flex flex-col min-w-0">
|
||||||
{/* Header */}
|
{/* 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">
|
<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">
|
<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">
|
<button onClick={() => setIsMobileMenuOpen(true)} className="lg:hidden text-zinc-500 hover:text-zinc-900 dark:hover:text-white">
|
||||||
<Menu size={24} />
|
<Menu size={24} />
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</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 */}
|
{/* Dark Mode Toggle */}
|
||||||
<button
|
<button
|
||||||
onClick={toggleDarkMode}
|
onClick={toggleDarkMode}
|
||||||
@@ -211,121 +323,6 @@ export const Layout: React.FC<{ children: React.ReactNode }> = ({ children }) =>
|
|||||||
{isDark ? <Sun size={20} /> : <Moon size={20} />}
|
{isDark ? <Sun size={20} /> : <Moon size={20} />}
|
||||||
</button>
|
</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 */}
|
{/* Notifications */}
|
||||||
<div className="relative">
|
<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">
|
<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