d8dfun/claudecodeui
1
0
Fork 0
mirror of https://github.com/siteboon/claudecodeui.git synced 2026-06-03 02:55:39 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor: setup sidebar header

Browse Source
This commit is contained in:
Haileyesus
2026-03-27 16:44:56 +03:00
parent 186dbcde63
commit b57fec9d66
7 changed files with 183 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
src/components/refactored/sidebar/view/SidebarHeader.tsx
View File

@@ -9,18 +9,21 @@ import { IS_PLATFORM } from '@/constants/config';
type SidebarHeaderProps = {
isCollapsed: boolean;
onToggleCollapse: () => void;
isRefreshing: boolean;
onRefresh: () => void;
onNewProject: () => void;
};
export default function SidebarHeader({ isCollapsed, onToggleCollapse }: SidebarHeaderProps) {
// UI States declared here to avoid prop drilling as per instructions
export default function SidebarHeader({
isCollapsed,
onToggleCollapse,
isRefreshing,
onRefresh,
onNewProject
}: SidebarHeaderProps) {
// UI States for search
const [searchMode, setSearchMode] = useState<SearchMode>('projects');
const [searchFilter, setSearchFilter] = useState('');
const [isRefreshing, setIsRefreshing] = useState(false);
const handleRefresh = () => {
setIsRefreshing(true);
setTimeout(() => setIsRefreshing(false), 1000);
};
const LogoBlock = () => (
<div className="flex min-w-0 items-center gap-2.5">
@@ -61,16 +64,17 @@ export default function SidebarHeader({ isCollapsed, onToggleCollapse }: Sidebar
variant="ghost"
size="sm"
className="h-7 w-7 rounded-lg p-0 text-muted-foreground hover:bg-accent/80 hover:text-foreground"
onClick={handleRefresh}
onClick={onRefresh}
disabled={isRefreshing}
title="Refresh"
>
<RefreshCw className={cn("h-3.5 w-3.5", isRefreshing && "animate-spin")} />
<RefreshCw className={cn("h-3.5 w-3.5 transition-opacity", isRefreshing && "animate-spin opacity-50")} />
</Button>
<Button
variant="ghost"
size="sm"
className="h-7 w-7 rounded-lg p-0 text-muted-foreground hover:bg-accent/80 hover:text-foreground"
onClick={onNewProject}
title="New Project"
>
<Plus className="h-3.5 w-3.5" />
@@ -104,14 +108,15 @@ export default function SidebarHeader({ isCollapsed, onToggleCollapse }: Sidebar
<LogoWithLink />
<div className="flex flex-shrink-0 gap-1.5">
<button
className="flex h-8 w-8 items-center justify-center rounded-lg bg-muted/50 transition-all active:scale-95"
onClick={handleRefresh}
className="flex h-8 w-8 items-center justify-center rounded-lg bg-muted/50 transition-all active:scale-95 disabled:opacity-70"
onClick={onRefresh}
disabled={isRefreshing}
>
<RefreshCw className={cn("h-4 w-4 text-muted-foreground", isRefreshing && "animate-spin")} />
<RefreshCw className={cn("h-4 w-4 text-muted-foreground transition-opacity", isRefreshing && "animate-spin opacity-50")} />
</button>
<button
className="flex h-8 w-8 items-center justify-center rounded-lg bg-primary/90 text-primary-foreground transition-all active:scale-95"
onClick={onNewProject}
>
<FolderPlus className="h-4 w-4" />
</button>
@@ -130,4 +135,4 @@ export default function SidebarHeader({ isCollapsed, onToggleCollapse }: Sidebar
<div className="nav-divider md:hidden" />
</div>
);
}
}