d8dfun/claudecodeui
1
0
Fork 0
mirror of https://github.com/siteboon/claudecodeui.git synced 2026-05-30 00:05:33 +08:00
Code Issues Packages Projects Releases Wiki Activity

Feat: Refine design language and use theme tokens across most pages.

Browse Source
This commit is contained in:
simosmik
2026-02-16 13:17:47 +00:00
parent 42f13e151c
commit afe1be7fca
21 changed files with 1209 additions and 880 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
src/components/sidebar/view/subcomponents/SidebarCollapsed.tsx
View File

@@ -1,4 +1,4 @@
import { Settings, Sparkles } from 'lucide-react';
import { Settings, Sparkles, PanelLeftOpen } from 'lucide-react';
import type { TFunction } from 'i18next';
type SidebarCollapsedProps = {
@@ -17,41 +17,39 @@ export default function SidebarCollapsed({
t,
}: SidebarCollapsedProps) {
return (
<div className="h-full flex flex-col items-center py-4 gap-4 bg-card">
<div className="h-full flex flex-col items-center py-3 gap-1 bg-background/80 backdrop-blur-sm w-12">
{/* Expand button with brand logo */}
<button
onClick={onExpand}
className="p-2 hover:bg-accent rounded-md transition-colors duration-200 group"
className="w-8 h-8 rounded-lg flex items-center justify-center hover:bg-accent/80 transition-colors group"
aria-label={t('common:versionUpdate.ariaLabels.showSidebar')}
title={t('common:versionUpdate.ariaLabels.showSidebar')}
>
<svg
className="w-5 h-5 text-foreground group-hover:scale-110 transition-transform"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 5l7 7-7 7M5 5l7 7-7 7" />
</svg>
<PanelLeftOpen className="w-4 h-4 text-muted-foreground group-hover:text-foreground transition-colors" />
</button>
<div className="nav-divider w-6 my-1" />
{/* Settings */}
<button
onClick={onShowSettings}
className="p-2 hover:bg-accent rounded-md transition-colors duration-200"
className="w-8 h-8 rounded-lg flex items-center justify-center hover:bg-accent/80 transition-colors group"
aria-label={t('actions.settings')}
title={t('actions.settings')}
>
<Settings className="w-5 h-5 text-muted-foreground hover:text-foreground transition-colors" />
<Settings className="w-4 h-4 text-muted-foreground group-hover:text-foreground transition-colors" />
</button>
{/* Update indicator */}
{updateAvailable && (
<button
onClick={onShowVersionModal}
className="relative p-2 hover:bg-accent rounded-md transition-colors duration-200"
className="relative w-8 h-8 rounded-lg flex items-center justify-center hover:bg-accent/80 transition-colors"
aria-label={t('common:versionUpdate.ariaLabels.updateAvailable')}
title={t('common:versionUpdate.ariaLabels.updateAvailable')}
>
<Sparkles className="w-5 h-5 text-blue-500" />
<span className="absolute top-1 right-1 w-2 h-2 bg-blue-500 rounded-full animate-pulse" />
<Sparkles className="w-4 h-4 text-blue-500" />
<span className="absolute top-1.5 right-1.5 w-1.5 h-1.5 bg-blue-500 rounded-full animate-pulse" />
</button>
)}
</div>