feat: add comprehensive user settings system

Settings features:
**Quality Preferences:**
- Default quality preset (High Quality, Balanced, Small File, Web Optimized)

**Behavior Preferences:**
- Auto-start conversion when files are selected
- Show/hide conversion history
- Clear history on reset

**Default Output Formats:**
- Set default format for video conversions (MP4, WebM, AVI, MOV)
- Set default format for audio conversions (MP3, WAV, OGG, AAC)
- Set default format for image conversions (WebP, PNG, JPG, GIF)

Implementation:
- Created settings storage system with localStorage
- SettingsModal component with categorized settings
- Settings button in app header
- Real-time settings updates across components
- Custom event system for settings synchronization
- Reset to defaults functionality
- Professional UI with checkboxes and selects

User experience:
- Settings persist across sessions
- Changes apply immediately
- Clear categorization (Quality, Behavior, Formats)
- Easy reset to defaults with confirmation
- Conditional history display based on settings
- Clean modal interface

Technical features:
- Type-safe settings interface
- Event-driven updates
- Graceful fallback to defaults
- Error handling for localStorage
- Platform-aware functionality

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

app/page.tsx

@@ -1,24 +1,53 @@
 'use client';
 
+import * as React from 'react';
+import { Settings } from 'lucide-react';
 import { FileConverter } from '@/components/converter/FileConverter';
 import { ConversionHistory } from '@/components/converter/ConversionHistory';
 import { ThemeToggle } from '@/components/layout/ThemeToggle';
+import { Button } from '@/components/ui/Button';
+import { SettingsModal } from '@/components/ui/SettingsModal';
 import { ToastProvider } from '@/components/ui/Toast';
+import { getSettings } from '@/lib/storage/settings';
 
 export default function Home() {
+  const [showSettings, setShowSettings] = React.useState(false);
+  const [settings, setSettings] = React.useState(getSettings());
+
+  // Listen for settings updates
+  React.useEffect(() => {
+    const handleSettingsUpdate = (e: Event) => {
+      const customEvent = e as CustomEvent;
+      setSettings(customEvent.detail);
+    };
+
+    window.addEventListener('settingsUpdated', handleSettingsUpdate);
+    return () => window.removeEventListener('settingsUpdated', handleSettingsUpdate);
+  }, []);
+
   return (
     <ToastProvider>
       <div className="min-h-screen bg-background">
         {/* Header */}
         <header className="border-b border-border">
           <div className="container mx-auto px-3 sm:px-4 py-3 sm:py-4 flex items-center justify-between gap-2">
-            <div className="min-w-0">
+            <div className="min-w-0 flex-1">
               <h1 className="text-xl sm:text-2xl font-bold text-foreground">Convert UI</h1>
               <p className="text-xs sm:text-sm text-muted-foreground">
                 File conversion in your browser
               </p>
             </div>
-            <ThemeToggle />
+            <div className="flex items-center gap-2">
+              <Button
+                variant="ghost"
+                size="icon"
+                onClick={() => setShowSettings(true)}
+                title="Settings"
+              >
+                <Settings className="h-5 w-5" />
+              </Button>
+              <ThemeToggle />
+            </div>
           </div>
         </header>
 
@@ -26,10 +55,13 @@ export default function Home() {
         <main className="container mx-auto px-3 sm:px-4 py-6 sm:py-8 md:py-16">
           <div className="space-y-6 sm:space-y-8">
             <FileConverter />
-            <ConversionHistory />
+            {settings.showConversionHistory && <ConversionHistory />}
           </div>
         </main>
 
+        {/* Settings Modal */}
+        <SettingsModal isOpen={showSettings} onClose={() => setShowSettings(false)} />
+
         {/* Footer */}
         <footer className="border-t border-border mt-8 sm:mt-12 md:mt-16">
           <div className="container mx-auto px-3 sm:px-4 py-6 text-center text-xs sm:text-sm text-muted-foreground">