| |
| |
| |
| |
| |
|
|
| import type { ReactNode } from 'react'; |
|
|
| export type AppView = |
| | 'chat' |
| | 'search' |
| | 'models' |
| | 'services' |
| | 'workspace' |
| | 'suggest' |
| | 'bash' |
| | 'di'; |
|
|
| interface ViewDef { |
| readonly id: AppView; |
| readonly title: string; |
| readonly icon: ReactNode; |
| } |
|
|
| const iconProps = { |
| width: 18, |
| height: 18, |
| viewBox: '0 0 24 24', |
| fill: 'none', |
| stroke: 'currentColor', |
| strokeWidth: 2, |
| strokeLinecap: 'round', |
| strokeLinejoin: 'round', |
| } as const; |
|
|
| const VIEWS: readonly ViewDef[] = [ |
| { |
| id: 'chat', |
| title: 'Chat', |
| icon: ( |
| <svg {...iconProps}> |
| <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" /> |
| </svg> |
| ), |
| }, |
| { |
| id: 'search', |
| title: 'Search', |
| icon: ( |
| <svg {...iconProps}> |
| <circle cx="11" cy="11" r="8" /> |
| <path d="m21 21-4.3-4.3" /> |
| </svg> |
| ), |
| }, |
| { |
| id: 'models', |
| title: 'Model Catalog', |
| icon: ( |
| <svg {...iconProps}> |
| <path d="M12 2 2 7l10 5 10-5-10-5z" /> |
| <path d="m2 17 10 5 10-5" /> |
| <path d="m2 12 10 5 10-5" /> |
| </svg> |
| ), |
| }, |
| { |
| id: 'services', |
| title: 'App Services', |
| icon: ( |
| <svg {...iconProps}> |
| <rect x="2" y="2" width="20" height="8" rx="2" /> |
| <rect x="2" y="14" width="20" height="8" rx="2" /> |
| <line x1="6" y1="6" x2="6.01" y2="6" /> |
| <line x1="6" y1="18" x2="6.01" y2="18" /> |
| </svg> |
| ), |
| }, |
| { |
| id: 'workspace', |
| title: 'Workspace Runtime', |
| icon: ( |
| <svg {...iconProps}> |
| <path d="M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z" /> |
| </svg> |
| ), |
| }, |
| { |
| id: 'suggest', |
| title: 'Filesystem Suggest', |
| icon: ( |
| <svg {...iconProps}> |
| <path d="M4 4h6l2 2h8v14H4z" /> |
| <path d="m9 14 2 2 4-4" /> |
| </svg> |
| ), |
| }, |
| { |
| id: 'bash', |
| title: 'Bash Parser', |
| icon: ( |
| <svg {...iconProps}> |
| <polyline points="4 17 10 11 4 5" /> |
| <line x1="12" y1="19" x2="20" y2="19" /> |
| </svg> |
| ), |
| }, |
| { |
| id: 'di', |
| title: 'DI', |
| icon: ( |
| <svg {...iconProps}> |
| <circle cx="18" cy="5" r="3" /> |
| <circle cx="6" cy="12" r="3" /> |
| <circle cx="18" cy="19" r="3" /> |
| <line x1="8.6" y1="10.5" x2="15.4" y2="6.5" /> |
| <line x1="8.6" y1="13.5" x2="15.4" y2="17.5" /> |
| </svg> |
| ), |
| }, |
| ]; |
|
|
| export function NavRail({ |
| view, |
| onChange, |
| }: { |
| readonly view: AppView; |
| readonly onChange: (view: AppView) => void; |
| }) { |
| return ( |
| <nav className="flex w-11 shrink-0 flex-col items-center gap-1 border-r border-neutral-800 py-2"> |
| {VIEWS.map((v) => ( |
| <button |
| key={v.id} |
| type="button" |
| title={v.title} |
| aria-label={v.title} |
| onClick={() => { |
| onChange(v.id); |
| }} |
| className={`rounded-md p-2 transition-colors ${ |
| view === v.id |
| ? 'bg-neutral-800 text-sky-400' |
| : 'text-neutral-500 hover:bg-neutral-800/60 hover:text-neutral-300' |
| }`} |
| > |
| {v.icon} |
| </button> |
| ))} |
| </nav> |
| ); |
| } |
|
|
