230419/my_closet
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

salva tudo na cloud

Browse Source
This commit is contained in:
Vitor Moreira
2026-04-22 09:03:18 +01:00
parent 12171ca3f2
commit 7a7a4ca511
1 changed files with 56 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

64
src/App.jsx
View File

@@ -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>