cfbd81587c
- Add brand assets (favicon, icons, logos) to public/icons and src/assets/brand - Update index.html with new favicon, title, meta, Google Fonts (Plus Jakarta Sans, Inter, Outfit) - Add brand colors, font families, and gradient utilities to Tailwind config - Replace CSS variables with purple-tinted theme for both light and dark modes - Create reusable BrandLogo and BrandWordmark components - Update AppLayout header with logo and wordmark - Update LoginPage and RegisterPage with branded logo, wordmark, and gradient buttons - Replace all remaining "Patherly" references in SettingsPage Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
94 lines
3.5 KiB
TypeScript
94 lines
3.5 KiB
TypeScript
import { Settings } from 'lucide-react'
|
|
import { useUserPreferencesStore } from '@/store/userPreferencesStore'
|
|
import { useThemeStore } from '@/store/themeStore'
|
|
import { cn } from '@/lib/utils'
|
|
import { ThemeToggle } from '@/components/common/ThemeToggle'
|
|
|
|
export function SettingsPage() {
|
|
const { defaultExportFormat, setDefaultExportFormat } = useUserPreferencesStore()
|
|
const { theme } = useThemeStore()
|
|
|
|
return (
|
|
<div className="container mx-auto px-4 py-8">
|
|
<div className="mb-8">
|
|
<div className="flex items-center gap-3">
|
|
<Settings className="h-8 w-8 text-primary" />
|
|
<h1 className="text-3xl font-bold text-foreground">Settings</h1>
|
|
</div>
|
|
<p className="mt-2 text-muted-foreground">
|
|
Manage your application preferences
|
|
</p>
|
|
</div>
|
|
|
|
<div className="max-w-2xl space-y-6">
|
|
{/* Appearance Section */}
|
|
<div className="rounded-lg border border-border bg-card p-6 shadow-sm">
|
|
<h2 className="text-lg font-semibold text-card-foreground">Appearance</h2>
|
|
<p className="mt-1 text-sm text-muted-foreground">
|
|
Customize how ResolutionFlow looks on your device
|
|
</p>
|
|
|
|
<div className="mt-4">
|
|
<label className="block text-sm font-medium text-card-foreground">
|
|
Theme
|
|
</label>
|
|
<p className="text-sm text-muted-foreground">
|
|
Current: {theme.charAt(0).toUpperCase() + theme.slice(1)}
|
|
</p>
|
|
<div className="mt-2">
|
|
<ThemeToggle />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Export Preferences Section */}
|
|
<div className="rounded-lg border border-border bg-card p-6 shadow-sm">
|
|
<h2 className="text-lg font-semibold text-card-foreground">Export Preferences</h2>
|
|
<p className="mt-1 text-sm text-muted-foreground">
|
|
Configure default settings for session exports
|
|
</p>
|
|
|
|
<div className="mt-4">
|
|
<label
|
|
htmlFor="export-format"
|
|
className="block text-sm font-medium text-card-foreground"
|
|
>
|
|
Default Export Format
|
|
</label>
|
|
<p className="text-sm text-muted-foreground">
|
|
This format will be pre-selected when exporting sessions
|
|
</p>
|
|
<select
|
|
id="export-format"
|
|
value={defaultExportFormat}
|
|
onChange={(e) => setDefaultExportFormat(e.target.value as 'markdown' | 'text' | 'html')}
|
|
className={cn(
|
|
'mt-2 block w-full rounded-md border border-input bg-background px-3 py-2',
|
|
'text-sm text-foreground',
|
|
'focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary'
|
|
)}
|
|
>
|
|
<option value="markdown">Markdown (.md)</option>
|
|
<option value="text">Plain Text (.txt)</option>
|
|
<option value="html">HTML (.html)</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
{/* About Section */}
|
|
<div className="rounded-lg border border-border bg-card p-6 shadow-sm">
|
|
<h2 className="text-lg font-semibold text-card-foreground">About</h2>
|
|
<p className="mt-1 text-sm text-muted-foreground">
|
|
ResolutionFlow - Decision Tree Platform
|
|
</p>
|
|
<p className="mt-2 text-sm text-muted-foreground">
|
|
Transform troubleshooting into guided workflows
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default SettingsPage
|