doo-boilerplate 0.2.11 → 0.2.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "doo-boilerplate",
-  "version": "0.2.11",
+  "version": "0.2.12",
   "description": "CLI to scaffold Pila portal frontend projects",
   "type": "module",
   "bin": {

package/templates/template-vite/_package.json

@@ -56,6 +56,7 @@
     "@radix-ui/react-slot": "^1.1.2",
     "@radix-ui/react-switch": "^1.1.3",
     "@radix-ui/react-tabs": "^1.1.3",
+    "@radix-ui/react-radio-group": "^1.2.3",
     "@radix-ui/react-tooltip": "^1.1.8",
     "cmdk": "^1.1.1",
     "recharts": "^2.15.0",

package/templates/template-vite/src/components/layout/sidebar.tsx

@@ -1,6 +1,6 @@
 import { useState } from 'react'
 import { Link } from '@tanstack/react-router'
-import { Bell, LayoutDashboard, LayoutTemplate, Settings, Table2, User, Users, ChevronLeft, ChevronRight } from 'lucide-react'
+import { Bell, LayoutDashboard, LayoutTemplate, Settings, Table2, Users, ChevronLeft, ChevronRight } from 'lucide-react'
 
 import { cn } from '@/lib/utils'
 import { Button } from '@/components/ui/button'
@@ -11,7 +11,6 @@ import { siteConfig } from '@/config/site'
 const navItems = [
   { to: '/dashboard', label: 'Dashboard', icon: LayoutDashboard },
   { to: '/users', label: 'Users', icon: Users },
-  { to: '/profile', label: 'Profile', icon: User },
   { to: '/settings', label: 'Settings', icon: Settings },
 ] as const
 

package/templates/template-vite/src/components/ui/radio-group.tsx

@@ -0,0 +1,34 @@
+import * as React from 'react'
+import * as RadioGroupPrimitive from '@radix-ui/react-radio-group'
+import { Circle } from 'lucide-react'
+
+import { cn } from '@/lib/utils'
+
+const RadioGroup = React.forwardRef<
+  React.ElementRef<typeof RadioGroupPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <RadioGroupPrimitive.Root ref={ref} className={cn('grid gap-2', className)} {...props} />
+))
+RadioGroup.displayName = RadioGroupPrimitive.Root.displayName
+
+const RadioGroupItem = React.forwardRef<
+  React.ElementRef<typeof RadioGroupPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>
+>(({ className, ...props }, ref) => (
+  <RadioGroupPrimitive.Item
+    ref={ref}
+    className={cn(
+      'aspect-square h-4 w-4 rounded-full border border-primary text-primary ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+      className
+    )}
+    {...props}
+  >
+    <RadioGroupPrimitive.Indicator className='flex items-center justify-center'>
+      <Circle className='h-2.5 w-2.5 fill-current text-current' />
+    </RadioGroupPrimitive.Indicator>
+  </RadioGroupPrimitive.Item>
+))
+RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName
+
+export { RadioGroup, RadioGroupItem }

package/templates/template-vite/src/components/ui/textarea.tsx

@@ -0,0 +1,19 @@
+import * as React from 'react'
+
+import { cn } from '@/lib/utils'
+
+const Textarea = React.forwardRef<HTMLTextAreaElement, React.TextareaHTMLAttributes<HTMLTextAreaElement>>(
+  ({ className, ...props }, ref) => (
+    <textarea
+      ref={ref}
+      className={cn(
+        'flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+        className
+      )}
+      {...props}
+    />
+  )
+)
+Textarea.displayName = 'Textarea'
+
+export { Textarea }

package/templates/template-vite/src/features/settings/account/account-settings-form.tsx

@@ -0,0 +1,142 @@
+import { useState } from 'react'
+import { useForm } from 'react-hook-form'
+import { zodResolver } from '@hookform/resolvers/zod'
+import { z } from 'zod'
+import { Check, ChevronsUpDown } from 'lucide-react'
+import { toast } from 'sonner'
+
+import { cn } from '@/lib/utils'
+import { Button } from '@/components/ui/button'
+import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from '@/components/ui/command'
+import { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from '@/components/ui/form'
+import { Input } from '@/components/ui/input'
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
+
+const LANGUAGES = [
+  { label: 'English', value: 'en' },
+  { label: 'French', value: 'fr' },
+  { label: 'German', value: 'de' },
+  { label: 'Spanish', value: 'es' },
+  { label: 'Portuguese', value: 'pt' },
+  { label: 'Russian', value: 'ru' },
+  { label: 'Japanese', value: 'ja' },
+  { label: 'Korean', value: 'ko' },
+  { label: 'Chinese', value: 'zh' },
+] as const
+
+const accountSchema = z.object({
+  name: z.string().min(2, 'At least 2 characters').max(30, 'Max 30 characters'),
+  dob: z.string().optional(),
+  language: z.string({ required_error: 'Please select a language.' }),
+})
+
+type AccountValues = z.infer<typeof accountSchema>
+
+export function AccountSettingsForm() {
+  const [langOpen, setLangOpen] = useState(false)
+
+  const form = useForm<AccountValues>({
+    resolver: zodResolver(accountSchema),
+    defaultValues: { name: '', dob: '', language: 'en' },
+  })
+
+  function onSubmit(data: AccountValues) {
+    toast.success('Account updated successfully')
+    console.log(data)
+  }
+
+  return (
+    <Form {...form}>
+      <form onSubmit={form.handleSubmit(onSubmit)} className='space-y-6'>
+        <FormField
+          control={form.control}
+          name='name'
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Name</FormLabel>
+              <FormControl>
+                <Input placeholder='Your name' {...field} />
+              </FormControl>
+              <FormDescription>
+                This is the name that will be displayed on your profile and in emails.
+              </FormDescription>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
+        <FormField
+          control={form.control}
+          name='dob'
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Date of birth</FormLabel>
+              <FormControl>
+                <Input type='date' className='w-[240px]' {...field} />
+              </FormControl>
+              <FormDescription>
+                Your date of birth is used to calculate your age.
+              </FormDescription>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
+        <FormField
+          control={form.control}
+          name='language'
+          render={({ field }) => (
+            <FormItem className='flex flex-col'>
+              <FormLabel>Language</FormLabel>
+              <Popover open={langOpen} onOpenChange={setLangOpen}>
+                <PopoverTrigger asChild>
+                  <FormControl>
+                    <Button
+                      variant='outline'
+                      role='combobox'
+                      className={cn('w-[240px] justify-between', !field.value && 'text-muted-foreground')}
+                    >
+                      {field.value
+                        ? LANGUAGES.find((l) => l.value === field.value)?.label
+                        : 'Select language'}
+                      <ChevronsUpDown className='ml-2 h-4 w-4 shrink-0 opacity-50' />
+                    </Button>
+                  </FormControl>
+                </PopoverTrigger>
+                <PopoverContent className='w-[240px] p-0'>
+                  <Command>
+                    <CommandInput placeholder='Search language...' />
+                    <CommandList>
+                      <CommandEmpty>No language found.</CommandEmpty>
+                      <CommandGroup>
+                        {LANGUAGES.map((lang) => (
+                          <CommandItem
+                            key={lang.value}
+                            value={lang.value}
+                            onSelect={() => {
+                              form.setValue('language', lang.value)
+                              setLangOpen(false)
+                            }}
+                          >
+                            <Check className={cn('mr-2 h-4 w-4', field.value === lang.value ? 'opacity-100' : 'opacity-0')} />
+                            {lang.label}
+                          </CommandItem>
+                        ))}
+                      </CommandGroup>
+                    </CommandList>
+                  </Command>
+                </PopoverContent>
+              </Popover>
+              <FormDescription>
+                This is the language that will be used in the dashboard.
+              </FormDescription>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
+        <Button type='submit'>Update account</Button>
+      </form>
+    </Form>
+  )
+}

package/templates/template-vite/src/features/settings/appearance/appearance-settings-form.tsx

@@ -0,0 +1,129 @@
+import { useForm } from 'react-hook-form'
+import { zodResolver } from '@hookform/resolvers/zod'
+import { z } from 'zod'
+import { useTheme } from 'next-themes'
+import { toast } from 'sonner'
+
+import { cn } from '@/lib/utils'
+import { Button } from '@/components/ui/button'
+import { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from '@/components/ui/form'
+import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group'
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
+
+const FONTS = [
+  { label: 'Inter', value: 'inter' },
+  { label: 'Manrope', value: 'manrope' },
+  { label: 'System', value: 'system' },
+] as const
+
+const appearanceSchema = z.object({
+  theme: z.enum(['light', 'dark', 'system']),
+  font: z.enum(['inter', 'manrope', 'system']),
+})
+
+type AppearanceValues = z.infer<typeof appearanceSchema>
+
+/** Theme preview card for light/dark/system radio options */
+function ThemeCard({ mode, label }: { mode: string; label: string }) {
+  const isDark = mode === 'dark'
+  const bg = isDark ? 'bg-zinc-950' : 'bg-white'
+  const border = isDark ? 'border-zinc-700' : 'border-zinc-200'
+  const cardBg = isDark ? 'bg-zinc-900' : 'bg-zinc-50'
+  const lineBg = isDark ? 'bg-zinc-700' : 'bg-zinc-200'
+  const accentBg = isDark ? 'bg-zinc-700' : 'bg-zinc-300'
+  const textColor = isDark ? 'text-zinc-100' : 'text-zinc-900'
+
+  return (
+    <div className={cn('rounded-md border-2 p-2', border, bg, 'space-y-2')}>
+      <div className={cn('rounded-sm border p-2 shadow-sm space-y-2', cardBg, border)}>
+        <div className={cn('h-2 w-[80px] rounded-lg', accentBg)} />
+        <div className={cn('h-2 w-[100px] rounded-lg', lineBg)} />
+        <div className={cn('h-2 w-[60px] rounded-lg', lineBg)} />
+      </div>
+      <span className={cn('text-xs font-medium', textColor)}>{label}</span>
+    </div>
+  )
+}
+
+export function AppearanceSettingsForm() {
+  const { theme: currentTheme, setTheme } = useTheme()
+
+  const form = useForm<AppearanceValues>({
+    resolver: zodResolver(appearanceSchema),
+    defaultValues: {
+      theme: (currentTheme as AppearanceValues['theme']) ?? 'system',
+      font: 'inter',
+    },
+  })
+
+  function onSubmit(data: AppearanceValues) {
+    setTheme(data.theme)
+    toast.success('Appearance updated')
+  }
+
+  return (
+    <Form {...form}>
+      <form onSubmit={form.handleSubmit(onSubmit)} className='space-y-8'>
+        <FormField
+          control={form.control}
+          name='font'
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Font</FormLabel>
+              <FormDescription>Set the font you want to use in the dashboard.</FormDescription>
+              <FormControl>
+                <Select onValueChange={field.onChange} defaultValue={field.value}>
+                  <SelectTrigger className='w-[200px]'>
+                    <SelectValue placeholder='Select font' />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {FONTS.map((f) => (
+                      <SelectItem key={f.value} value={f.value}>
+                        {f.label}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
+        <FormField
+          control={form.control}
+          name='theme'
+          render={({ field }) => (
+            <FormItem className='space-y-1'>
+              <FormLabel>Theme</FormLabel>
+              <FormDescription>Select the theme for the dashboard.</FormDescription>
+              <FormMessage />
+              <RadioGroup
+                onValueChange={field.onChange}
+                defaultValue={field.value}
+                className='grid grid-cols-3 gap-4 pt-2 max-w-md'
+              >
+                {([
+                  { value: 'light', label: 'Light' },
+                  { value: 'dark', label: 'Dark' },
+                  { value: 'system', label: 'System' },
+                ] as const).map(({ value, label }) => (
+                  <FormItem key={value}>
+                    <FormLabel className='cursor-pointer [&:has([data-state=checked])>div]:border-primary'>
+                      <FormControl>
+                        <RadioGroupItem value={value} className='sr-only' />
+                      </FormControl>
+                      <ThemeCard mode={value === 'system' ? 'light' : value} label={label} />
+                    </FormLabel>
+                  </FormItem>
+                ))}
+              </RadioGroup>
+            </FormItem>
+          )}
+        />
+
+        <Button type='submit'>Update preferences</Button>
+      </form>
+    </Form>
+  )
+}

package/templates/template-vite/src/features/settings/components/settings-content-section.tsx

@@ -0,0 +1,22 @@
+import type { ReactNode } from 'react'
+
+import { Separator } from '@/components/ui/separator'
+
+interface SettingsContentSectionProps {
+  title: string
+  desc: string
+  children: ReactNode
+}
+
+export function SettingsContentSection({ title, desc, children }: SettingsContentSectionProps) {
+  return (
+    <div className='flex flex-1 flex-col'>
+      <div>
+        <h3 className='text-lg font-medium'>{title}</h3>
+        <p className='text-sm text-muted-foreground'>{desc}</p>
+      </div>
+      <Separator className='my-4' />
+      <div className='flex-1'>{children}</div>
+    </div>
+  )
+}

package/templates/template-vite/src/features/settings/components/settings-sidebar-nav.tsx

@@ -0,0 +1,62 @@
+import type { JSX } from 'react'
+import { Link, useLocation, useNavigate } from '@tanstack/react-router'
+
+import { cn } from '@/lib/utils'
+import { buttonVariants } from '@/components/ui/button'
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
+
+interface NavItem {
+  href: string
+  title: string
+  icon: JSX.Element
+}
+
+interface SettingsSidebarNavProps extends React.HTMLAttributes<HTMLElement> {
+  items: NavItem[]
+}
+
+export function SettingsSidebarNav({ className, items, ...props }: SettingsSidebarNavProps) {
+  const { pathname } = useLocation()
+  const navigate = useNavigate()
+
+  return (
+    <>
+      {/* Mobile: dropdown select */}
+      <div className='p-1 md:hidden'>
+        <Select value={pathname} onValueChange={(v) => navigate({ to: v })}>
+          <SelectTrigger className='h-12 sm:w-48'>
+            <SelectValue placeholder='Select section' />
+          </SelectTrigger>
+          <SelectContent>
+            {items.map((item) => (
+              <SelectItem key={item.href} value={item.href}>
+                <div className='flex gap-x-4 px-2 py-1'>
+                  <span className='scale-125'>{item.icon}</span>
+                  <span>{item.title}</span>
+                </div>
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+      </div>
+
+      {/* Desktop: vertical nav */}
+      <nav className={cn('hidden md:flex md:flex-col md:space-y-1', className)} {...props}>
+        {items.map((item) => (
+          <Link
+            key={item.href}
+            to={item.href}
+            className={cn(
+              buttonVariants({ variant: 'ghost' }),
+              pathname === item.href ? 'bg-muted hover:bg-muted' : 'hover:bg-muted/50',
+              'justify-start gap-2'
+            )}
+          >
+            {item.icon}
+            {item.title}
+          </Link>
+        ))}
+      </nav>
+    </>
+  )
+}

package/templates/template-vite/src/features/settings/profile/profile-settings-form.tsx

@@ -0,0 +1,139 @@
+import { useFieldArray, useForm } from 'react-hook-form'
+import { zodResolver } from '@hookform/resolvers/zod'
+import { z } from 'zod'
+import { toast } from 'sonner'
+
+import { useAuthStore } from '@/stores/auth-store'
+import { Button } from '@/components/ui/button'
+import { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from '@/components/ui/form'
+import { Input } from '@/components/ui/input'
+import { Textarea } from '@/components/ui/textarea'
+
+const profileSchema = z.object({
+  username: z.string().min(2, 'At least 2 characters').max(30, 'Max 30 characters'),
+  email: z.string().email('Invalid email'),
+  bio: z.string().min(4, 'At least 4 characters').max(160, 'Max 160 characters').optional().or(z.literal('')),
+  urls: z.array(z.object({ value: z.string().url('Invalid URL').optional().or(z.literal('')) })).max(5),
+})
+
+type ProfileValues = z.infer<typeof profileSchema>
+
+export function ProfileSettingsForm() {
+  const { user } = useAuthStore()
+
+  const form = useForm<ProfileValues>({
+    resolver: zodResolver(profileSchema),
+    defaultValues: {
+      username: user?.name ?? '',
+      email: user?.email ?? '',
+      bio: '',
+      urls: [{ value: '' }],
+    },
+    mode: 'onChange',
+  })
+
+  const { fields, append, remove } = useFieldArray({ name: 'urls', control: form.control })
+
+  function onSubmit(data: ProfileValues) {
+    toast.success('Profile updated successfully')
+    console.log(data)
+  }
+
+  return (
+    <Form {...form}>
+      <form onSubmit={form.handleSubmit(onSubmit)} className='space-y-6'>
+        <FormField
+          control={form.control}
+          name='username'
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Username</FormLabel>
+              <FormControl>
+                <Input placeholder='Your name' {...field} />
+              </FormControl>
+              <FormDescription>
+                This is your public display name. It can be your real name or a pseudonym.
+              </FormDescription>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
+        <FormField
+          control={form.control}
+          name='email'
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Email</FormLabel>
+              <FormControl>
+                <Input placeholder='email@example.com' type='email' {...field} />
+              </FormControl>
+              <FormDescription>
+                You can manage verified email addresses in your email settings.
+              </FormDescription>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
+        <FormField
+          control={form.control}
+          name='bio'
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Bio</FormLabel>
+              <FormControl>
+                <Textarea placeholder='Tell us a little bit about yourself' className='resize-none' {...field} />
+              </FormControl>
+              <FormDescription>
+                You can <span className='font-medium'>@mention</span> other users and organizations.
+              </FormDescription>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
+        <div className='space-y-2'>
+          {fields.map((field, index) => (
+            <FormField
+              key={field.id}
+              control={form.control}
+              name={`urls.${index}.value`}
+              render={({ field }) => (
+                <FormItem>
+                  {index === 0 && (
+                    <>
+                      <FormLabel>URLs</FormLabel>
+                      <FormDescription>
+                        Add links to your website, blog, or social media profiles.
+                      </FormDescription>
+                    </>
+                  )}
+                  <div className='flex gap-2'>
+                    <FormControl>
+                      <Input placeholder='https://example.com' {...field} />
+                    </FormControl>
+                    {fields.length > 1 && (
+                      <Button type='button' variant='outline' size='sm' onClick={() => remove(index)}>
+                        Remove
+                      </Button>
+                    )}
+                  </div>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+          ))}
+
+          {fields.length < 5 && (
+            <Button type='button' variant='outline' size='sm' onClick={() => append({ value: '' })}>
+              Add URL
+            </Button>
+          )}
+        </div>
+
+        <Button type='submit'>Update profile</Button>
+      </form>
+    </Form>
+  )
+}

package/templates/template-vite/src/routes/_authenticated/profile.tsx

@@ -1,47 +1,8 @@
-import { createFileRoute } from '@tanstack/react-router'
-
-import { PageLayout } from '@/components/layout/page-layout'
-import { useCurrentUser } from '@/features/auth/hooks/use-auth'
-import { Avatar, AvatarFallback } from '@/components/ui/avatar'
+import { createFileRoute, redirect } from '@tanstack/react-router'
 
 export const Route = createFileRoute('/_authenticated/profile')({
-  component: ProfilePage,
+  beforeLoad: () => {
+    throw redirect({ to: '/settings' })
+  },
+  component: () => null,
 })
-
-function ProfilePage() {
-  const { data: user } = useCurrentUser()
-
-  return (
-    <PageLayout title='Profile' description='Manage your personal information'>
-      <div className='max-w-lg rounded-lg border bg-card p-6'>
-        <div className='flex items-center gap-4'>
-          <Avatar className='h-16 w-16'>
-            <AvatarFallback className='text-xl'>
-              {user?.name?.charAt(0)?.toUpperCase() ?? '?'}
-            </AvatarFallback>
-          </Avatar>
-          <div>
-            <p className='font-semibold'>{user?.name ?? '—'}</p>
-            <p className='text-sm text-muted-foreground'>{user?.email ?? '—'}</p>
-          </div>
-        </div>
-
-        {user?.roles && user.roles.length > 0 && (
-          <div className='mt-4'>
-            <p className='text-sm font-medium'>Roles</p>
-            <div className='mt-1 flex flex-wrap gap-2'>
-              {user.roles.map((role) => (
-                <span
-                  key={role}
-                  className='rounded-full bg-secondary px-3 py-1 text-xs font-medium'
-                >
-                  {role}
-                </span>
-              ))}
-            </div>
-          </div>
-        )}
-      </div>
-    </PageLayout>
-  )
-}

package/templates/template-vite/src/routes/_authenticated/settings/account.tsx

@@ -0,0 +1,19 @@
+import { createFileRoute } from '@tanstack/react-router'
+
+import { SettingsContentSection } from '@/features/settings/components/settings-content-section'
+import { AccountSettingsForm } from '@/features/settings/account/account-settings-form'
+
+export const Route = createFileRoute('/_authenticated/settings/account')({
+  component: SettingsAccountPage,
+})
+
+function SettingsAccountPage() {
+  return (
+    <SettingsContentSection
+      title='Account'
+      desc='Update your account settings. Set your preferred language and timezone.'
+    >
+      <AccountSettingsForm />
+    </SettingsContentSection>
+  )
+}

package/templates/template-vite/src/routes/_authenticated/settings/appearance.tsx

@@ -0,0 +1,19 @@
+import { createFileRoute } from '@tanstack/react-router'
+
+import { SettingsContentSection } from '@/features/settings/components/settings-content-section'
+import { AppearanceSettingsForm } from '@/features/settings/appearance/appearance-settings-form'
+
+export const Route = createFileRoute('/_authenticated/settings/appearance')({
+  component: SettingsAppearancePage,
+})
+
+function SettingsAppearancePage() {
+  return (
+    <SettingsContentSection
+      title='Appearance'
+      desc='Customize the appearance of the app. Automatically switch between day and night themes.'
+    >
+      <AppearanceSettingsForm />
+    </SettingsContentSection>
+  )
+}

package/templates/template-vite/src/routes/_authenticated/settings/display.tsx

@@ -0,0 +1,18 @@
+import { createFileRoute } from '@tanstack/react-router'
+
+import { SettingsContentSection } from '@/features/settings/components/settings-content-section'
+
+export const Route = createFileRoute('/_authenticated/settings/display')({
+  component: SettingsDisplayPage,
+})
+
+function SettingsDisplayPage() {
+  return (
+    <SettingsContentSection
+      title='Display'
+      desc='Turn items on or off to control what is displayed in the app.'
+    >
+      <p className='text-sm text-muted-foreground'>Display settings coming soon.</p>
+    </SettingsContentSection>
+  )
+}

package/templates/template-vite/src/routes/_authenticated/settings/index.tsx

@@ -0,0 +1,19 @@
+import { createFileRoute } from '@tanstack/react-router'
+
+import { SettingsContentSection } from '@/features/settings/components/settings-content-section'
+import { ProfileSettingsForm } from '@/features/settings/profile/profile-settings-form'
+
+export const Route = createFileRoute('/_authenticated/settings/')({
+  component: SettingsProfilePage,
+})
+
+function SettingsProfilePage() {
+  return (
+    <SettingsContentSection
+      title='Profile'
+      desc='This is how others will see you on the site.'
+    >
+      <ProfileSettingsForm />
+    </SettingsContentSection>
+  )
+}

package/templates/template-vite/src/routes/_authenticated/settings/notifications.tsx

@@ -0,0 +1,18 @@
+import { createFileRoute } from '@tanstack/react-router'
+
+import { SettingsContentSection } from '@/features/settings/components/settings-content-section'
+
+export const Route = createFileRoute('/_authenticated/settings/notifications')({
+  component: SettingsNotificationsPage,
+})
+
+function SettingsNotificationsPage() {
+  return (
+    <SettingsContentSection
+      title='Notifications'
+      desc='Configure how you receive notifications.'
+    >
+      <p className='text-sm text-muted-foreground'>Notification settings coming soon.</p>
+    </SettingsContentSection>
+  )
+}

package/templates/template-vite/src/routes/_authenticated/settings.tsx

@@ -1,16 +1,31 @@
-import { createFileRoute } from '@tanstack/react-router'
+import { createFileRoute, Outlet } from '@tanstack/react-router'
+import { Bell, Monitor, Palette, UserCog, Wrench } from 'lucide-react'
 
 import { PageLayout } from '@/components/layout/page-layout'
+import { SettingsSidebarNav } from '@/features/settings/components/settings-sidebar-nav'
 
 export const Route = createFileRoute('/_authenticated/settings')({
-  component: SettingsPage,
+  component: SettingsLayout,
 })
 
-function SettingsPage() {
+const sidebarNavItems = [
+  { title: 'Profile', href: '/settings', icon: <UserCog size={16} /> },
+  { title: 'Account', href: '/settings/account', icon: <Wrench size={16} /> },
+  { title: 'Appearance', href: '/settings/appearance', icon: <Palette size={16} /> },
+  { title: 'Notifications', href: '/settings/notifications', icon: <Bell size={16} /> },
+  { title: 'Display', href: '/settings/display', icon: <Monitor size={16} /> },
+]
+
+function SettingsLayout() {
   return (
-    <PageLayout title='Settings' description='Manage your application settings'>
-      <div className='rounded-lg border bg-card p-6'>
-        <p className='text-sm text-muted-foreground'>Settings content coming soon.</p>
+    <PageLayout title='Settings' description='Manage your account settings and preferences.'>
+      <div className='flex flex-col gap-6 lg:flex-row lg:gap-12'>
+        <aside className='lg:w-48 shrink-0'>
+          <SettingsSidebarNav items={sidebarNavItems} />
+        </aside>
+        <div className='flex-1 min-w-0'>
+          <Outlet />
+        </div>
       </div>
     </PageLayout>
   )