From 73cbe6356f5d502bfb64e6decf455450262082c2 Mon Sep 17 00:00:00 2001 From: Arthur Belleville Date: Sat, 19 Jul 2025 19:10:29 +0200 Subject: [PATCH] Add a good settings page --- xtablo-expo/app/(home)/(tabs)/_layout.tsx | 19 +- xtablo-expo/app/(home)/(tabs)/settings.tsx | 453 +++++++++++++++++++++ 2 files changed, 470 insertions(+), 2 deletions(-) create mode 100644 xtablo-expo/app/(home)/(tabs)/settings.tsx diff --git a/xtablo-expo/app/(home)/(tabs)/_layout.tsx b/xtablo-expo/app/(home)/(tabs)/_layout.tsx index a51d2ee..5fa0f1d 100644 --- a/xtablo-expo/app/(home)/(tabs)/_layout.tsx +++ b/xtablo-expo/app/(home)/(tabs)/_layout.tsx @@ -8,9 +8,8 @@ import { useColorScheme } from "@/hooks/useColorScheme"; import { MessageCircle, Calendar, - List, - Home, Grid3X3, + Settings, } from "lucide-react-native"; export default function TabLayout() { @@ -76,6 +75,7 @@ export default function TabLayout() { /> ), tabBarLabel: "Discussions", + // tabBarBadge: 10, TODO: Add badge for notifications }} /> + ( + + ), + tabBarLabel: "Paramètres", + tabBarBadge: undefined, + }} + /> ); } diff --git a/xtablo-expo/app/(home)/(tabs)/settings.tsx b/xtablo-expo/app/(home)/(tabs)/settings.tsx new file mode 100644 index 0000000..c1b422b --- /dev/null +++ b/xtablo-expo/app/(home)/(tabs)/settings.tsx @@ -0,0 +1,453 @@ +import React, { useState } from "react"; +import { + View, + Text, + StyleSheet, + TouchableOpacity, + StatusBar, + ScrollView, + Switch, + Alert, + Linking, +} from "react-native"; +import { LinearGradient } from "expo-linear-gradient"; +import { useAuth } from "@/stores/auth"; +import { useUser } from "@/providers/UserProvider"; +import { + User, + Bell, + Moon, + Shield, + HelpCircle, + Info, + MessageSquare, + LogOut, + ChevronRight, + Smartphone, + Globe, + Lock, + Heart, +} from "lucide-react-native"; +import { router } from "expo-router"; + +export default function SettingsScreen() { + const signOut = useAuth((state) => state.signOut); + const user = useUser(); + + // Settings state + const [pushNotifications, setPushNotifications] = useState(true); + const [emailNotifications, setEmailNotifications] = useState(true); + const [darkMode, setDarkMode] = useState(false); + const [biometricAuth, setBiometricAuth] = useState(false); + + const handleSignOut = () => { + Alert.alert("Déconnexion", "Êtes-vous sûr de vouloir vous déconnecter ?", [ + { + text: "Annuler", + style: "cancel", + }, + { + text: "Se déconnecter", + style: "destructive", + onPress: signOut, + }, + ]); + }; + + const handleContactSupport = () => { + Linking.openURL("mailto:support@xtablo.com?subject=Support XTablo"); + }; + + const handleRateApp = () => { + // Replace with your actual app store URL + Alert.alert( + "Évaluer l'application", + "Vous aimez XTablo ? Laissez-nous un avis sur l'App Store !", + [ + { text: "Plus tard", style: "cancel" }, + { text: "Évaluer", onPress: () => console.log("Rate app") }, + ] + ); + }; + + const renderSettingsSection = (title: string, children: React.ReactNode) => ( + + {title} + {children} + + ); + + const renderSettingsItem = ( + icon: React.ReactNode, + title: string, + subtitle?: string, + onPress?: () => void, + rightComponent?: React.ReactNode, + showArrow: boolean = true + ) => ( + + + {icon} + + {title} + {subtitle && ( + {subtitle} + )} + + + + {rightComponent} + {showArrow && onPress && ( + + )} + + + ); + + const renderSwitchItem = ( + icon: React.ReactNode, + title: string, + subtitle: string, + value: boolean, + onValueChange: (value: boolean) => void + ) => + renderSettingsItem( + icon, + title, + subtitle, + undefined, + , + false + ); + + return ( + + + + {/* Header */} + + + Paramètres + + Gérez vos préférences et votre compte + + + + {/* Decorative Elements */} + + + + + + {/* Account Section */} + {renderSettingsSection( + "Compte", + <> + {renderSettingsItem( + , + "Profil utilisateur", + `${user.name || "Non défini"} • ${user.email}`, + () => router.push("/user/profile"), + undefined, + true + )} + + )} + + {/* Notifications Section */} + {renderSettingsSection( + "Notifications", + <> + {renderSwitchItem( + , + "Notifications push", + "Recevoir des notifications sur votre appareil", + pushNotifications, + setPushNotifications + )} + {renderSwitchItem( + , + "Notifications par email", + "Recevoir des notifications par email", + emailNotifications, + setEmailNotifications + )} + + )} + + {/* Appearance Section */} + {renderSettingsSection( + "Apparence", + <> + {renderSwitchItem( + , + "Mode sombre", + "Utiliser le thème sombre", + darkMode, + setDarkMode + )} + + )} + + {/* Security Section */} + {renderSettingsSection( + "Sécurité et confidentialité", + <> + {renderSwitchItem( + , + "Authentification biométrique", + "Utiliser votre empreinte ou Face ID", + biometricAuth, + setBiometricAuth + )} + {renderSettingsItem( + , + "Politique de confidentialité", + "Consulter notre politique de confidentialité", + () => Linking.openURL("https://xtablo.com/privacy-policy"), + undefined, + true + )} + + )} + + {/* Help & Support Section */} + {renderSettingsSection( + "Aide et support", + <> + {renderSettingsItem( + , + "Centre d'aide", + "FAQ et guides d'utilisation", + () => Linking.openURL("https://xtablo.com/help"), + undefined, + true + )} + {renderSettingsItem( + , + "Contacter le support", + "Envoyez-nous un email", + handleContactSupport, + undefined, + true + )} + {renderSettingsItem( + , + "Évaluer l'application", + "Aidez-nous à améliorer XTablo", + handleRateApp, + undefined, + true + )} + + )} + + {/* About Section */} + {renderSettingsSection( + "À propos", + <> + {renderSettingsItem( + , + "Version de l'application", + "1.0.0 (Build 1)", + undefined, + undefined, + false + )} + {renderSettingsItem( + , + "Site web", + "Visitez notre site web", + () => Linking.openURL("https://xtablo.com"), + undefined, + true + )} + + )} + + {/* Sign Out Section */} + + + + + Se déconnecter + + + + + {/* Bottom Spacing */} + + + + ); +} + +const styles = StyleSheet.create({ + container: { + flex: 1, + backgroundColor: "#f8fafc", + }, + headerGradient: { + paddingTop: 50, + paddingBottom: 25, + paddingHorizontal: 20, + position: "relative", + overflow: "hidden", + }, + headerContent: { + zIndex: 10, + }, + headerTitle: { + fontSize: 28, + color: "white", + fontWeight: "bold", + marginBottom: 4, + }, + headerSubtitle: { + fontSize: 16, + color: "rgba(255, 255, 255, 0.8)", + fontWeight: "400", + }, + decorativeCircle1: { + position: "absolute", + top: -50, + right: -30, + width: 120, + height: 120, + borderRadius: 60, + backgroundColor: "rgba(255, 255, 255, 0.1)", + }, + decorativeCircle2: { + position: "absolute", + bottom: -20, + left: -20, + width: 80, + height: 80, + borderRadius: 40, + backgroundColor: "rgba(255, 255, 255, 0.08)", + }, + content: { + flex: 1, + backgroundColor: "#f8fafc", + marginTop: -10, + borderTopLeftRadius: 10, + borderTopRightRadius: 10, + paddingTop: 20, + }, + section: { + marginBottom: 24, + paddingHorizontal: 20, + }, + sectionTitle: { + fontSize: 18, + fontWeight: "600", + color: "#1f2937", + marginBottom: 12, + marginLeft: 4, + }, + sectionContent: { + backgroundColor: "white", + borderRadius: 16, + shadowColor: "#000", + shadowOffset: { width: 0, height: 2 }, + shadowOpacity: 0.1, + shadowRadius: 8, + elevation: 3, + overflow: "hidden", + }, + settingsItem: { + flexDirection: "row", + alignItems: "center", + justifyContent: "space-between", + paddingHorizontal: 20, + paddingVertical: 16, + borderBottomWidth: 1, + borderBottomColor: "#f3f4f6", + }, + settingsItemLeft: { + flexDirection: "row", + alignItems: "center", + flex: 1, + }, + iconContainer: { + width: 40, + height: 40, + borderRadius: 20, + backgroundColor: "#f3f4f6", + justifyContent: "center", + alignItems: "center", + marginRight: 12, + }, + settingsItemContent: { + flex: 1, + }, + settingsItemTitle: { + fontSize: 16, + fontWeight: "500", + color: "#1f2937", + marginBottom: 2, + }, + settingsItemSubtitle: { + fontSize: 14, + color: "#6b7280", + }, + settingsItemRight: { + flexDirection: "row", + alignItems: "center", + }, + signOutSection: { + paddingHorizontal: 20, + marginTop: 20, + marginBottom: 20, + }, + signOutButton: { + borderRadius: 16, + shadowColor: "#ef4444", + shadowOffset: { width: 0, height: 4 }, + shadowOpacity: 0.3, + shadowRadius: 8, + elevation: 6, + }, + signOutGradient: { + flexDirection: "row", + alignItems: "center", + justifyContent: "center", + paddingVertical: 16, + paddingHorizontal: 24, + borderRadius: 16, + }, + signOutText: { + color: "white", + fontSize: 16, + fontWeight: "600", + marginLeft: 8, + }, + bottomSpacing: { + height: 100, + }, +});