refactor(ui): remove search, theme toggle, and notifications from header

This commit is contained in:
Haze
2026-02-06 04:18:42 +08:00
Unverified
parent 191948ce51
commit bdb734120f

View File

@@ -1,13 +1,8 @@
/**
* Header Component
* Top navigation bar with search and actions
* Top navigation bar with page title
*/
import { useState } from 'react';
import { useLocation } from 'react-router-dom';
import { Search, Bell, Moon, Sun, Monitor } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { useSettingsStore } from '@/stores/settings';
// Page titles mapping
const pageTitles: Record<string, string> = {
@@ -21,54 +16,13 @@ const pageTitles: Record<string, string> = {
export function Header() {
const location = useLocation();
const theme = useSettingsStore((state) => state.theme);
const setTheme = useSettingsStore((state) => state.setTheme);
const [searchQuery, setSearchQuery] = useState('');
// Get current page title
const currentTitle = pageTitles[location.pathname] || 'ClawX';
// Cycle through themes
const cycleTheme = () => {
const themes: Array<'light' | 'dark' | 'system'> = ['light', 'dark', 'system'];
const currentIndex = themes.indexOf(theme);
const nextIndex = (currentIndex + 1) % themes.length;
setTheme(themes[nextIndex]);
};
// Get theme icon
const ThemeIcon = theme === 'light' ? Sun : theme === 'dark' ? Moon : Monitor;
return (
<header className="flex h-14 items-center justify-between border-b bg-background px-6">
{/* Page Title */}
<header className="flex h-14 items-center border-b bg-background px-6">
<h2 className="text-lg font-semibold">{currentTitle}</h2>
{/* Actions */}
<div className="flex items-center gap-2">
{/* Search */}
<div className="relative">
<Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
<Input
type="search"
placeholder="Search..."
className="w-64 pl-9"
value={searchQuery}
onChange={(e) => setSearchQuery(e.target.value)}
/>
</div>
{/* Theme Toggle */}
<Button variant="ghost" size="icon" onClick={cycleTheme}>
<ThemeIcon className="h-5 w-5" />
</Button>
{/* Notifications */}
<Button variant="ghost" size="icon">
<Bell className="h-5 w-5" />
</Button>
</div>
</header>
);
}