From 7a7a4ca511899477a911e39822a5c44fd3e594c6 Mon Sep 17 00:00:00 2001
From: 230419 <230419@epvc.pt>
Date: Wed, 22 Apr 2026 09:03:18 +0100
Subject: [PATCH] salva tudo na cloud

---
 src/App.jsx | 64 ++++++++++++++++++++++++++++++++++++++++++++++-------
 1 file changed, 56 insertions(+), 8 deletions(-)

diff --git a/src/App.jsx b/src/App.jsx
index d37d5c6..1f766f1 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -59,6 +59,44 @@ export default function App() {
 
     const t = (key) => translations[language]?.[key] || translations['PT'][key] || key;
 
+    const saveUserSetting = async (key, value) => {
+        if (!user) return;
+        try {
+            const profileDoc = doc(db, 'artifacts', appId, 'users', user.uid, 'profile', 'data');
+            await setDoc(profileDoc, {
+                settings: { [key]: value }
+            }, { merge: true });
+        } catch (err) {
+            console.error('Error saving setting:', err);
+        }
+    };
+
+    const handleDarkModeToggle = (newVal) => {
+        setDarkMode(newVal);
+        saveUserSetting('darkMode', newVal);
+    };
+
+    const handleThemeChange = (newVal) => {
+        setTheme(newVal);
+        saveUserSetting('theme', newVal);
+    };
+
+    const handleLanguageChange = (newVal) => {
+        setLanguage(newVal);
+        saveUserSetting('language', newVal);
+        setShowLangModal(false);
+    };
+
+    const handleNotificationsToggle = (newVal) => {
+        setNotificationsEnabled(newVal);
+        saveUserSetting('notificationsEnabled', newVal);
+    };
+
+    const handleWeatherAlertsToggle = (newVal) => {
+        setWeatherAlerts(newVal);
+        saveUserSetting('weatherAlerts', newVal);
+    };
+
     useEffect(() => {
         document.documentElement.classList.remove('theme-indigo', 'theme-rose', 'theme-emerald', 'theme-amber', 'theme-slate');
         document.documentElement.classList.add(theme);
@@ -101,7 +139,17 @@ export default function App() {
         // Profile
         const profileDoc = doc(db, 'artifacts', appId, 'users', user.uid, 'profile', 'data');
         const unsubProfile = onSnapshot(profileDoc, (snap) => {
-            if (snap.exists()) setUserProfile(snap.data());
+            if (snap.exists()) {
+                const data = snap.data();
+                setUserProfile(data);
+                if (data.settings) {
+                    if (data.settings.language !== undefined) setLanguage(data.settings.language);
+                    if (data.settings.darkMode !== undefined) setDarkMode(data.settings.darkMode);
+                    if (data.settings.theme !== undefined) setTheme(data.settings.theme);
+                    if (data.settings.notificationsEnabled !== undefined) setNotificationsEnabled(data.settings.notificationsEnabled);
+                    if (data.settings.weatherAlerts !== undefined) setWeatherAlerts(data.settings.weatherAlerts);
+                }
+            }
             else setUserProfile({});
         }, (err) => console.error(err));
 
@@ -466,8 +514,8 @@ export default function App() {
 
                     <div className="flex items-center gap-4">
                         <div className="flex bg-gray-100 dark:bg-gray-800 p-1.5 rounded-2xl">
-                            <button onClick={() => setDarkMode(false)} className={`p-2 rounded-xl ${!darkMode ? 'bg-white shadow-md text-primary-600' : 'text-gray-500'}`}><Sun size={18} /></button>
-                            <button onClick={() => setDarkMode(true)} className={`p-2 rounded-xl ${darkMode ? 'bg-gray-900 shadow-md text-primary-400' : 'text-gray-500'}`}><Moon size={18} /></button>
+                            <button onClick={() => handleDarkModeToggle(false)} className={`p-2 rounded-xl ${!darkMode ? 'bg-white shadow-md text-primary-600' : 'text-gray-500'}`}><Sun size={18} /></button>
+                            <button onClick={() => handleDarkModeToggle(true)} className={`p-2 rounded-xl ${darkMode ? 'bg-gray-900 shadow-md text-primary-400' : 'text-gray-500'}`}><Moon size={18} /></button>
                         </div>
                         <button onClick={() => { setEditingItem(null); setImageUrlDraft(''); setView('add'); }} className="p-4 bg-primary-600 text-white rounded-2xl shadow-xl shadow-primary-600/30 hover:scale-105 active:scale-95 transition-all">
                             <Plus size={24} />
@@ -821,7 +869,7 @@ export default function App() {
                                                 <p className="font-bold text-inherit">{t('darkMode')}</p>
                                                 <p className="text-[10px] uppercase tracking-widest opacity-50 text-inherit">{t('interfaceAppearance')}</p>
                                             </div>
-                                            <button onClick={() => setDarkMode(!darkMode)} className={`w-14 h-8 rounded-full transition-colors relative ${darkMode ? 'bg-primary-600' : 'bg-gray-200'}`}>
+                                            <button onClick={() => handleDarkModeToggle(!darkMode)} className={`w-14 h-8 rounded-full transition-colors relative ${darkMode ? 'bg-primary-600' : 'bg-gray-200'}`}>
                                                 <div className={`w-6 h-6 rounded-full bg-white absolute top-1 transition-all ${darkMode ? 'left-7' : 'left-1'}`}></div>
                                             </button>
                                         </div>
@@ -840,7 +888,7 @@ export default function App() {
                                                 ].map(tObj => (
                                                     <button
                                                         key={tObj.id}
-                                                        onClick={() => setTheme(tObj.id)}
+                                                        onClick={() => handleThemeChange(tObj.id)}
                                                         className={`w-6 h-6 rounded-full transition-all flex items-center justify-center ${theme === tObj.id ? 'ring-2 ring-offset-2 ring-offset-white dark:ring-offset-gray-900 ring-primary-500 scale-110' : 'hover:scale-110'}`}
                                                         style={{ backgroundColor: tObj.color }}
                                                     >
@@ -854,7 +902,7 @@ export default function App() {
                                                 <p className="font-bold text-inherit flex items-center gap-2">{t('notifications')}</p>
                                                 <p className="text-[10px] uppercase tracking-widest opacity-50 text-inherit">{t('lookReminders')}</p>
                                             </div>
-                                            <button onClick={() => setNotificationsEnabled(!notificationsEnabled)} className={`w-14 h-8 rounded-full transition-colors relative ${notificationsEnabled ? 'bg-primary-600' : 'bg-gray-200'}`}>
+                                            <button onClick={() => handleNotificationsToggle(!notificationsEnabled)} className={`w-14 h-8 rounded-full transition-colors relative ${notificationsEnabled ? 'bg-primary-600' : 'bg-gray-200'}`}>
                                                 <div className={`w-6 h-6 rounded-full bg-white absolute top-1 transition-all ${notificationsEnabled ? 'left-7' : 'left-1'}`}></div>
                                             </button>
                                         </div>
@@ -863,7 +911,7 @@ export default function App() {
                                                 <p className="font-bold text-inherit flex items-center gap-2">{t('weatherAlerts')}</p>
                                                 <p className="text-[10px] uppercase tracking-widest opacity-50 text-inherit">{t('weatherSuggestions')}</p>
                                             </div>
-                                            <button onClick={() => setWeatherAlerts(!weatherAlerts)} className={`w-14 h-8 rounded-full transition-colors relative ${weatherAlerts ? 'bg-primary-600' : 'bg-gray-200'}`}>
+                                            <button onClick={() => handleWeatherAlertsToggle(!weatherAlerts)} className={`w-14 h-8 rounded-full transition-colors relative ${weatherAlerts ? 'bg-primary-600' : 'bg-gray-200'}`}>
                                                 <div className={`w-6 h-6 rounded-full bg-white absolute top-1 transition-all ${weatherAlerts ? 'left-7' : 'left-1'}`}></div>
                                             </button>
                                         </div>
@@ -1007,7 +1055,7 @@ export default function App() {
                             ].map(lang => (
                                 <button
                                     key={lang.id}
-                                    onClick={() => { setLanguage(lang.id); setShowLangModal(false); }}
+                                    onClick={() => handleLanguageChange(lang.id)}
                                     className={`p-6 rounded-2xl flex flex-col items-center justify-center gap-4 transition-all ${language === lang.id ? 'bg-primary-600 text-white shadow-xl shadow-primary-600/30 scale-105' : 'bg-gray-50 text-gray-600 hover:bg-gray-100 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700'}`}
                                 >
                                     <span className="text-4xl">{lang.flag}</span>