feat: US-001 — scaffold NeuralDesk Electron + React app
- electron-forge 7 + Vite plugin (vite-typescript template) - React 19 + TypeScript 5 strict mode - TanStack Router with file-based routing (4 routes: /, /timeline, /tasks, /projects) - Tailwind CSS 3 + PostCSS with Figma design tokens (sidebar, primary, muted) - Framer Motion, Lucide React, shadcn/ui utilities (cn, CVA, clsx, twMerge) - AppShell layout: 240px sidebar with collapse toggle, active route highlighting - Vite configs use .mts extension to avoid ESM/CJS conflict with electron-forge - Full package build verified (linux x64) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
113
src/renderer/components/layout/AppShell.tsx
Normal file
113
src/renderer/components/layout/AppShell.tsx
Normal file
@@ -0,0 +1,113 @@
|
||||
import { useState } from 'react';
|
||||
import { Link, useRouterState } from '@tanstack/react-router';
|
||||
import {
|
||||
House,
|
||||
ChartGantt,
|
||||
ClipboardCheck,
|
||||
FolderKanban,
|
||||
PanelLeft,
|
||||
} from 'lucide-react';
|
||||
import { cn } from '@/lib/utils';
|
||||
|
||||
const NAV_ITEMS = [
|
||||
{ to: '/', icon: House, label: 'Home' },
|
||||
{ to: '/timeline', icon: ChartGantt, label: 'Timeline' },
|
||||
{ to: '/tasks', icon: ClipboardCheck, label: 'Tasks' },
|
||||
{ to: '/projects', icon: FolderKanban, label: 'Projects' },
|
||||
] as const;
|
||||
|
||||
interface AppShellProps {
|
||||
children: React.ReactNode;
|
||||
}
|
||||
|
||||
export function AppShell({ children }: AppShellProps) {
|
||||
const [collapsed, setCollapsed] = useState(false);
|
||||
const routerState = useRouterState();
|
||||
const currentPath = routerState.location.pathname;
|
||||
|
||||
return (
|
||||
<div className="flex h-screen w-screen overflow-hidden bg-background">
|
||||
{/* Sidebar */}
|
||||
<aside
|
||||
className={cn(
|
||||
'flex flex-col h-full bg-sidebar border-r border-sidebar-border transition-all duration-200 overflow-hidden shrink-0',
|
||||
collapsed ? 'w-16' : 'w-60',
|
||||
)}
|
||||
>
|
||||
{/* Logo */}
|
||||
<div
|
||||
className={cn(
|
||||
'flex items-center gap-3 px-3 py-3 shrink-0',
|
||||
collapsed && 'justify-center',
|
||||
)}
|
||||
>
|
||||
<div className="size-7 rounded-lg bg-primary flex items-center justify-center shrink-0">
|
||||
<svg
|
||||
width="16"
|
||||
height="16"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
className="text-primary-foreground"
|
||||
>
|
||||
<path
|
||||
d="M12 2L13.5 8.5L20 10L13.5 11.5L12 18L10.5 11.5L4 10L10.5 8.5L12 2Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
{!collapsed && (
|
||||
<span className="font-semibold text-sm text-foreground">
|
||||
NeuralDesk
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Nav */}
|
||||
<nav className="flex flex-col gap-0.5 px-2 flex-1 mt-2">
|
||||
{NAV_ITEMS.map(({ to, icon: Icon, label }) => {
|
||||
const isActive =
|
||||
to === '/'
|
||||
? currentPath === '/'
|
||||
: currentPath.startsWith(to);
|
||||
|
||||
return (
|
||||
<Link
|
||||
key={to}
|
||||
to={to}
|
||||
className={cn(
|
||||
'flex items-center gap-2 h-8 px-3 rounded-md text-sm text-sidebar-foreground transition-colors',
|
||||
'hover:bg-sidebar-accent',
|
||||
isActive && 'bg-sidebar-accent font-medium',
|
||||
)}
|
||||
>
|
||||
<Icon size={16} className="shrink-0" />
|
||||
{!collapsed && <span className="truncate">{label}</span>}
|
||||
</Link>
|
||||
);
|
||||
})}
|
||||
</nav>
|
||||
|
||||
{/* Collapse toggle */}
|
||||
<div className="px-2 pb-3 shrink-0">
|
||||
<button
|
||||
onClick={() => setCollapsed((c) => !c)}
|
||||
className={cn(
|
||||
'flex items-center gap-2 h-8 px-3 rounded-md text-sm text-sidebar-foreground w-full',
|
||||
'hover:bg-sidebar-accent transition-colors',
|
||||
collapsed && 'justify-center',
|
||||
)}
|
||||
title={collapsed ? 'Expand sidebar' : 'Collapse sidebar'}
|
||||
>
|
||||
<PanelLeft size={16} className="shrink-0" />
|
||||
{!collapsed && <span>Collapse</span>}
|
||||
</button>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
{/* Main content */}
|
||||
<main className="flex-1 min-w-0 overflow-hidden relative">
|
||||
{children}
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user