admin/DeskClaw
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(ui): redesign settings page and update sidebar navigation (#383)

Browse Source
This commit is contained in:
DigHuang
2026-03-10 14:48:54 +08:00
committed by GitHub
Unverified
parent 19b5b2d540
commit d9ae0f3263
6 changed files with 618 additions and 906 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
src/components/layout/Sidebar.tsx
View File

@@ -17,7 +17,6 @@ import {
ExternalLink,
Trash2,
Cpu,
LayoutDashboard,
} from 'lucide-react';
import { cn } from '@/lib/utils';
import { useSettingsStore } from '@/stores/settings';
@@ -105,7 +104,6 @@ const INITIAL_NOW_MS = Date.now();
export function Sidebar() {
const sidebarCollapsed = useSettingsStore((state) => state.sidebarCollapsed);
const setSidebarCollapsed = useSettingsStore((state) => state.setSidebarCollapsed);
const devModeUnlocked = useSettingsStore((state) => state.devModeUnlocked);
const sessions = useChatStore((s) => s.sessions);
const currentSessionKey = useChatStore((s) => s.currentSessionKey);
@@ -173,7 +171,6 @@ export function Sidebar() {
{ to: '/channels', icon: <Network className="h-[18px] w-[18px]" strokeWidth={2} />, label: t('sidebar.channels') },
{ to: '/skills', icon: <Puzzle className="h-[18px] w-[18px]" strokeWidth={2} />, label: t('sidebar.skills') },
{ to: '/cron', icon: <Clock className="h-[18px] w-[18px]" strokeWidth={2} />, label: t('sidebar.cronTasks') },
{ to: '/dashboard', icon: <LayoutDashboard className="h-[18px] w-[18px]" strokeWidth={2} />, label: t('sidebar.dashboard') },
];
return (
@@ -286,21 +283,6 @@ export function Sidebar() {
{/* Footer */}
<div className="p-2 mt-auto">
{devModeUnlocked && !sidebarCollapsed && (
<Button
variant="ghost"
size="sm"
className="w-full justify-start mb-1 hover:bg-black/5 dark:hover:bg-white/5"
onClick={openDevConsole}
>
<div className="flex shrink-0 items-center justify-center text-muted-foreground">
<Terminal className="h-[18px] w-[18px] mr-2.5" strokeWidth={2} />
</div>
<span className="font-medium text-[14px] flex-1 text-left text-foreground/80 overflow-hidden text-ellipsis whitespace-nowrap">{t('sidebar.devConsole')}</span>
<ExternalLink className="h-3 w-3 shrink-0 ml-auto opacity-50 text-muted-foreground" />
</Button>
)}
<NavLink
to="/settings"
className={({ isActive }) =>
@@ -321,6 +303,26 @@ export function Sidebar() {
</>
)}
</NavLink>
<Button
variant="ghost"
className={cn(
'flex items-center gap-2.5 rounded-lg px-2.5 py-2 h-auto text-[14px] font-medium transition-colors w-full mt-1',
'hover:bg-black/5 dark:hover:bg-white/5 text-foreground/80',
sidebarCollapsed ? 'justify-center px-0' : 'justify-start'
)}
onClick={openDevConsole}
>
<div className="flex shrink-0 items-center justify-center text-muted-foreground">
<Terminal className="h-[18px] w-[18px]" strokeWidth={2} />
</div>
{!sidebarCollapsed && (
<>
<span className="flex-1 text-left overflow-hidden text-ellipsis whitespace-nowrap">OpenClaw Page</span>
<ExternalLink className="h-3 w-3 shrink-0 ml-auto opacity-50 text-muted-foreground" />
</>
)}
</Button>
</div>
<ConfirmDialog