From 937d8d9547932d65a2d9055b63eb4df7ce211ffa Mon Sep 17 00:00:00 2001 From: bender Date: Tue, 17 Mar 2026 16:10:47 +0000 Subject: [PATCH] Add src/app/settings/page.tsx --- src/app/settings/page.tsx | 444 ++++++++++++++++++++++++++++++++++++++ 1 file changed, 444 insertions(+) create mode 100644 src/app/settings/page.tsx diff --git a/src/app/settings/page.tsx b/src/app/settings/page.tsx new file mode 100644 index 0000000..f270537 --- /dev/null +++ b/src/app/settings/page.tsx @@ -0,0 +1,444 @@ +"use client"; + +import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider"; +import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen'; +import ContactCenter from '@/components/sections/contact/ContactCenter'; +import FooterBase from '@/components/sections/footer/FooterBase'; +import { Palette, Volume2, Zap, RotateCw, Save } from 'lucide-react'; +import { useState, useEffect } from 'react'; + +interface AppearanceSettings { + colorTheme: string; + fontFamily: string; + layoutWidth: 'compact' | 'medium' | 'wide'; + darkMode: boolean; +} + +interface KokoSettings { + movementSpeed: 'slow' | 'normal' | 'fast'; + personality: 'cheerful' | 'calm' | 'professional'; + interactionStyle: 'minimal' | 'balanced' | 'interactive'; + soundEnabled: boolean; + voiceEnabled: boolean; +} + +interface VaultSettings { + encryptionEnabled: boolean; + autoBackup: boolean; + backupFrequency: 'daily' | 'weekly' | 'monthly'; + compressionEnabled: boolean; +} + +const DEFAULT_APPEARANCE: AppearanceSettings = { + colorTheme: 'grayPurpleAccent', + fontFamily: 'inter', + layoutWidth: 'compact', + darkMode: false, +}; + +const DEFAULT_KOKO: KokoSettings = { + movementSpeed: 'normal', + personality: 'cheerful', + interactionStyle: 'balanced', + soundEnabled: true, + voiceEnabled: true, +}; + +const DEFAULT_VAULT: VaultSettings = { + encryptionEnabled: true, + autoBackup: true, + backupFrequency: 'weekly', + compressionEnabled: true, +}; + +export default function SettingsPage() { + const [appearanceSettings, setAppearanceSettings] = useState(DEFAULT_APPEARANCE); + const [kokoSettings, setKokoSettings] = useState(DEFAULT_KOKO); + const [vaultSettings, setVaultSettings] = useState(DEFAULT_VAULT); + const [activeTab, setActiveTab] = useState<'appearance' | 'koko' | 'vault'>('appearance'); + const [saved, setSaved] = useState(false); + + // Load settings from localStorage on mount + useEffect(() => { + const savedAppearance = localStorage.getItem('appearanceSettings'); + const savedKoko = localStorage.getItem('kokoSettings'); + const savedVault = localStorage.getItem('vaultSettings'); + + if (savedAppearance) setAppearanceSettings(JSON.parse(savedAppearance)); + if (savedKoko) setKokoSettings(JSON.parse(savedKoko)); + if (savedVault) setVaultSettings(JSON.parse(savedVault)); + }, []); + + // Save all settings to localStorage + const handleSaveSettings = () => { + localStorage.setItem('appearanceSettings', JSON.stringify(appearanceSettings)); + localStorage.setItem('kokoSettings', JSON.stringify(kokoSettings)); + localStorage.setItem('vaultSettings', JSON.stringify(vaultSettings)); + setSaved(true); + setTimeout(() => setSaved(false), 3000); + }; + + // Reset to defaults + const handleResetSettings = () => { + setAppearanceSettings(DEFAULT_APPEARANCE); + setKokoSettings(DEFAULT_KOKO); + setVaultSettings(DEFAULT_VAULT); + localStorage.removeItem('appearanceSettings'); + localStorage.removeItem('kokoSettings'); + localStorage.removeItem('vaultSettings'); + }; + + return ( + + + +
+
+ {/* Header */} +
+

Settings & Customization

+

Personalize your Koko experience exactly how you want it

+
+ + {/* Tabs */} +
+ + + +
+ + {/* Tab Content */} +
+ {/* Appearance Settings */} + {activeTab === 'appearance' && ( +
+
+ + +
+ +
+ + +
+ +
+ +
+ {(['compact', 'medium', 'wide'] as const).map((width) => ( + + ))} +
+
+ +
+ +
+
+ )} + + {/* Koko Behavior Settings */} + {activeTab === 'koko' && ( +
+
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+
+ )} + + {/* Vault Security Settings */} + {activeTab === 'vault' && ( +
+
+ +

Encrypt your files with military-grade encryption

+
+ +
+ + {vaultSettings.autoBackup && ( +
+ + +
+ )} +
+ +
+ +

Automatically compress files to save storage space

+
+
+ )} +
+ + {/* Action Buttons */} +
+ + +
+ + {/* Success Message */} + {saved && ( +
+ ✓ Settings saved successfully! +
+ )} +
+
+ +
+ +
+ + + + ); +} \ No newline at end of file