90ff25003d
- Add mobile hamburger menu with slide-out nav drawer (AppLayout) - Make modals responsive: full-width on mobile, slide-up animation - Scratchpad becomes full-screen overlay on mobile with backdrop - Folder sidebar hidden on mobile, opens as slide-over drawer - Tree editor shows "Desktop Required" gate on mobile - Stack action buttons vertically on mobile (sessions, detail pages) - Increase touch targets throughout (buttons, close icons) - Add CSS animations: fade-in, slide-in-left, scale-in, btn-press - Add card hover lift effect and consistent border highlights - Standardize page padding (px-4 py-6 sm:px-6 sm:py-8) - Responsive headings (text-2xl sm:text-3xl) - CustomStepModal goes full-screen on mobile - Tighten auth page spacing on mobile Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
94 lines
3.6 KiB
TypeScript
94 lines
3.6 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-6 sm:px-6 sm:py-8">
|
|
<div className="mb-8">
|
|
<div className="flex items-center gap-3">
|
|
<Settings className="h-8 w-8 text-primary" />
|
|
<h1 className="text-2xl font-bold text-foreground sm:text-3xl">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-4 shadow-sm sm:p-6">
|
|
<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 font-label 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-4 shadow-sm sm:p-6">
|
|
<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 font-label 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-4 shadow-sm sm:p-6">
|
|
<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
|