Phase 1 Implementation: - Set up Next.js 16 with React 19, TypeScript 5, and Turbopack - Configure Tailwind CSS 4 with OKLCH color system - Implement dark/light theme support - Create core UI components: Button, Card, Slider, Progress, Toast - Add ThemeToggle component for theme switching - Set up project directory structure for audio editor - Create storage utilities for settings management - Add Dockerfile with multi-stage build (Node + nginx) - Configure nginx for static file serving with caching - Add docker-compose.yml for easy deployment - Configure static export mode for production Tech Stack: - Next.js 16 with Turbopack - React 19 - TypeScript 5 - Tailwind CSS 4 - pnpm 9.0.0 - nginx 1.27 (for Docker deployment) Build verified and working ✓ 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
73 lines
1.8 KiB
TypeScript
73 lines
1.8 KiB
TypeScript
export interface AppSettings {
|
|
theme: 'light' | 'dark' | 'system';
|
|
audioBufferSize: number;
|
|
sampleRate: number;
|
|
autoSave: boolean;
|
|
autoSaveInterval: number; // in seconds
|
|
snapToGrid: boolean;
|
|
gridResolution: number; // in ms
|
|
waveformColor: string;
|
|
showSpectrogram: boolean;
|
|
maxHistorySize: number;
|
|
}
|
|
|
|
const DEFAULT_SETTINGS: AppSettings = {
|
|
theme: 'system',
|
|
audioBufferSize: 4096,
|
|
sampleRate: 44100,
|
|
autoSave: true,
|
|
autoSaveInterval: 60,
|
|
snapToGrid: false,
|
|
gridResolution: 100,
|
|
waveformColor: '#3b82f6',
|
|
showSpectrogram: false,
|
|
maxHistorySize: 50,
|
|
};
|
|
|
|
const SETTINGS_KEY = 'audio-ui-settings';
|
|
|
|
export function getSettings(): AppSettings {
|
|
if (typeof window === 'undefined') return DEFAULT_SETTINGS;
|
|
|
|
try {
|
|
const stored = localStorage.getItem(SETTINGS_KEY);
|
|
if (!stored) return DEFAULT_SETTINGS;
|
|
|
|
const parsed = JSON.parse(stored);
|
|
return { ...DEFAULT_SETTINGS, ...parsed };
|
|
} catch (error) {
|
|
console.error('Failed to load settings:', error);
|
|
return DEFAULT_SETTINGS;
|
|
}
|
|
}
|
|
|
|
export function saveSettings(settings: Partial<AppSettings>): void {
|
|
if (typeof window === 'undefined') return;
|
|
|
|
try {
|
|
const current = getSettings();
|
|
const updated = { ...current, ...settings };
|
|
localStorage.setItem(SETTINGS_KEY, JSON.stringify(updated));
|
|
|
|
// Dispatch custom event for settings updates
|
|
window.dispatchEvent(
|
|
new CustomEvent('settingsUpdated', { detail: updated })
|
|
);
|
|
} catch (error) {
|
|
console.error('Failed to save settings:', error);
|
|
}
|
|
}
|
|
|
|
export function resetSettings(): void {
|
|
if (typeof window === 'undefined') return;
|
|
|
|
try {
|
|
localStorage.removeItem(SETTINGS_KEY);
|
|
window.dispatchEvent(
|
|
new CustomEvent('settingsUpdated', { detail: DEFAULT_SETTINGS })
|
|
);
|
|
} catch (error) {
|
|
console.error('Failed to reset settings:', error);
|
|
}
|
|
}
|