Gabriel Brown
2cd03b6a83
- New Settings → Dotfiles section: a mini-workspace rooted at home/{firstName}
reusing FileTree + the Monaco CodeEditor
- Drag-and-drop files/folders (FileSystem entries API) or upload a folder
(webkitdirectory) / files; edit in-place; new file; delete
- Files stored relative to HOME via the encrypted userDotfiles API
- Repo & setup panel (public repo URL + ref + setup script path) writing
userEnvironment; secrets nudge toward the Secrets feature
57 lines
2.0 KiB
TypeScript
57 lines
2.0 KiB
TypeScript
'use client';
|
|
|
|
import type { ReactNode } from 'react';
|
|
import Link from 'next/link';
|
|
import { usePathname } from 'next/navigation';
|
|
import { Brain, FileCog, Github, ServerCog, Shield, User } from 'lucide-react';
|
|
|
|
import { cn } from '@spoon/ui';
|
|
|
|
const settingsItems = [
|
|
{ href: '/settings/profile', label: 'Profile', icon: User },
|
|
{ href: '/settings/integrations', label: 'Integrations', icon: Github },
|
|
{ href: '/settings/ai-providers', label: 'AI providers', icon: Brain },
|
|
{ href: '/settings/dotfiles', label: 'Dotfiles', icon: FileCog },
|
|
{ href: '/settings/worker', label: 'Worker', icon: ServerCog },
|
|
{ href: '/settings/security', label: 'Security', icon: Shield },
|
|
];
|
|
|
|
const SettingsLayout = ({ children }: { children: ReactNode }) => {
|
|
const pathname = usePathname();
|
|
return (
|
|
<main className='space-y-6'>
|
|
<div className='flex flex-col justify-between gap-4 border-b pb-5 lg:flex-row lg:items-end'>
|
|
<div>
|
|
<h1 className='text-3xl font-semibold tracking-normal'>Settings</h1>
|
|
<p className='text-muted-foreground mt-2'>
|
|
Account, provider, AI, and security controls for this Spoon
|
|
workspace.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div className='grid gap-6 xl:grid-cols-[13rem_1fr]'>
|
|
<nav className='border-border bg-card flex gap-1 overflow-x-auto border p-2 xl:flex-col xl:self-start'>
|
|
{settingsItems.map(({ href, label, icon: Icon }) => (
|
|
<Link
|
|
key={href}
|
|
href={href}
|
|
className={cn(
|
|
'hover:bg-muted flex min-w-fit items-center gap-2 rounded-md px-3 py-2 text-sm font-medium transition-colors',
|
|
pathname === href
|
|
? 'bg-primary/10 text-primary'
|
|
: 'text-muted-foreground hover:text-foreground',
|
|
)}
|
|
>
|
|
<Icon className='size-4' />
|
|
{label}
|
|
</Link>
|
|
))}
|
|
</nav>
|
|
<div className='min-w-0'>{children}</div>
|
|
</div>
|
|
</main>
|
|
);
|
|
};
|
|
|
|
export default SettingsLayout;
|