✨ feat: move settings to profile page and add language preferences

apps/web/src/features/profile/athlete-profile-section.tsx

@@ -225,7 +225,7 @@ export function AthleteProfileSection() {
 
   if (isLoading) {
     return (
-      <Card className="w-full">
+      <Card className="w-full shadow-none">
         <CardHeader>
           <Skeleton className="h-6 w-48" />
           <Skeleton className="h-4 w-64" />
@@ -243,7 +243,7 @@ export function AthleteProfileSection() {
     return (
       <Card className="w-full">
         <CardHeader>
-          <CardTitle>{t('profile:athlete.title')}</CardTitle>
+          <CardTitle className="text-2xl shadow-none">{t('profile:athlete.title')}</CardTitle>
         </CardHeader>
         <CardContent className="space-y-4">
           <div className="text-center py-8">
@@ -264,9 +264,9 @@ export function AthleteProfileSection() {
 
   return (
     <>
-      <Card className="w-full">
+      <Card className="w-full shadow-none">
         <CardHeader>
-          <CardTitle>{t('profile:athlete.title')}</CardTitle>
+          <CardTitle className="text-2xl">{t('profile:athlete.title')}</CardTitle>
           {!isEditing && !isCreating && (
             <CardDescription>
               {athlete?.firstName} {athlete?.lastName}

apps/web/src/features/profile/settings-section.tsx

@@ -0,0 +1,86 @@
+import { useTranslation } from '@dropit/i18n';
+import { Label } from '@/shared/components/ui/label';
+import { Switch } from '@/shared/components/ui/switch';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/shared/components/ui/select';
+import { useState, useEffect } from 'react';
+
+export function SettingsSection() {
+  const { t, i18n: i18nInstance } = useTranslation(['profile']);
+  const [language, setLanguage] = useState(i18nInstance.language);
+  const [darkMode, setDarkMode] = useState(false);
+
+  // Load dark mode preference from localStorage
+  useEffect(() => {
+    const savedTheme = localStorage.getItem('theme');
+    setDarkMode(savedTheme === 'dark');
+  }, []);
+
+  const handleLanguageChange = (value: string) => {
+    setLanguage(value);
+    i18nInstance.changeLanguage(value);
+    // i18next-browser-languagedetector uses 'i18nextLng' as the key
+    localStorage.setItem('i18nextLng', value);
+  };
+
+  const handleDarkModeChange = (checked: boolean) => {
+    setDarkMode(checked);
+    localStorage.setItem('theme', checked ? 'dark' : 'light');
+    // TODO: Implement dark mode theme switching
+    // This will require adding theme provider and CSS variables
+  };
+
+  return (
+    <div>
+      <div className="mb-4">
+        <h2 className="text-2xl font-semibold">{t('profile:settings.title')}</h2>
+        <p className="text-sm text-gray-600 mt-1">{t('profile:settings.description')}</p>
+      </div>
+      <div className="space-y-6">
+        {/* Language Selection */}
+        <div className="flex items-center justify-between">
+          <div className="space-y-0.5">
+            <Label className="text-base">{t('profile:settings.language.label')}</Label>
+            <p className="text-sm text-gray-600">
+              {t('profile:settings.language.description')}
+            </p>
+          </div>
+          <Select value={language} onValueChange={handleLanguageChange}>
+            <SelectTrigger className="w-[180px]">
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="fr">Français</SelectItem>
+              <SelectItem value="en">English</SelectItem>
+            </SelectContent>
+          </Select>
+        </div>
+
+        {/* Dark Mode Toggle */}
+        <div className="flex items-center justify-between">
+          <div className="space-y-0.5">
+            <Label className="text-base">{t('profile:settings.dark_mode.label')}</Label>
+            <p className="text-sm text-gray-600">
+              {t('profile:settings.dark_mode.description')}
+            </p>
+          </div>
+          <Switch
+            checked={darkMode}
+            onCheckedChange={handleDarkModeChange}
+            disabled
+          />
+        </div>
+        {darkMode && (
+          <p className="text-xs text-gray-500 italic">
+            {t('profile:settings.dark_mode.coming_soon')}
+          </p>
+        )}
+      </div>
+    </div>
+  );
+}

apps/web/src/routeTree.gen.ts

@@ -18,7 +18,6 @@ import { Route as CreateOrganizationRouteImport } from './routes/create-organiza
 import { Route as _homeRouteImport } from './routes/__home'
 import { Route as _authRouteImport } from './routes/__auth'
 import { Route as IndexRouteImport } from './routes/index'
-import { Route as _homeSettingsRouteImport } from './routes/__home.settings'
 import { Route as _homeProfileRouteImport } from './routes/__home.profile'
 import { Route as _homePlanningRouteImport } from './routes/__home.planning'
 import { Route as _homeLibraryRouteImport } from './routes/__home.library'
@@ -99,11 +98,6 @@ const _authLoginLazyRoute = _authLoginLazyRouteImport
     getParentRoute: () => _authRoute,
   } as any)
   .lazy(() => import('./routes/__auth.login.lazy').then((d) => d.Route))
-const _homeSettingsRoute = _homeSettingsRouteImport.update({
-  id: '/settings',
-  path: '/settings',
-  getParentRoute: () => _homeRoute,
-} as any)
 const _homeProfileRoute = _homeProfileRouteImport.update({
   id: '/profile',
   path: '/profile',
@@ -183,7 +177,6 @@ export interface FileRoutesByFullPath {
   '/library': typeof _homeLibraryRouteWithChildren
   '/planning': typeof _homePlanningRoute
   '/profile': typeof _homeProfileRoute
-  '/settings': typeof _homeSettingsRoute
   '/login': typeof _authLoginLazyRoute
   '/privacy': typeof _authPrivacyLazyRoute
   '/signup': typeof _authSignupLazyRoute
@@ -208,7 +201,6 @@ export interface FileRoutesByTo {
   '/library': typeof _homeLibraryRouteWithChildren
   '/planning': typeof _homePlanningRoute
   '/profile': typeof _homeProfileRoute
-  '/settings': typeof _homeSettingsRoute
   '/login': typeof _authLoginLazyRoute
   '/privacy': typeof _authPrivacyLazyRoute
   '/signup': typeof _authSignupLazyRoute
@@ -236,7 +228,6 @@ export interface FileRoutesById {
   '/__home/library': typeof _homeLibraryRouteWithChildren
   '/__home/planning': typeof _homePlanningRoute
   '/__home/profile': typeof _homeProfileRoute
-  '/__home/settings': typeof _homeSettingsRoute
   '/__auth/login': typeof _authLoginLazyRoute
   '/__auth/privacy': typeof _authPrivacyLazyRoute
   '/__auth/signup': typeof _authSignupLazyRoute
@@ -263,7 +254,6 @@ export interface FileRouteTypes {
     | '/library'
     | '/planning'
     | '/profile'
-    | '/settings'
     | '/login'
     | '/privacy'
     | '/signup'
@@ -288,7 +278,6 @@ export interface FileRouteTypes {
     | '/library'
     | '/planning'
     | '/profile'
-    | '/settings'
     | '/login'
     | '/privacy'
     | '/signup'
@@ -315,7 +304,6 @@ export interface FileRouteTypes {
     | '/__home/library'
     | '/__home/planning'
     | '/__home/profile'
-    | '/__home/settings'
     | '/__auth/login'
     | '/__auth/privacy'
     | '/__auth/signup'
@@ -418,13 +406,6 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof _authLoginLazyRouteImport
       parentRoute: typeof _authRoute
     }
-    '/__home/settings': {
-      id: '/__home/settings'
-      path: '/settings'
-      fullPath: '/settings'
-      preLoaderRoute: typeof _homeSettingsRouteImport
-      parentRoute: typeof _homeRoute
-    }
     '/__home/profile': {
       id: '/__home/profile'
       path: '/profile'
@@ -573,7 +554,6 @@ interface _homeRouteChildren {
   _homeLibraryRoute: typeof _homeLibraryRouteWithChildren
   _homePlanningRoute: typeof _homePlanningRoute
   _homeProfileRoute: typeof _homeProfileRoute
-  _homeSettingsRoute: typeof _homeSettingsRoute
   _homeWorkoutsWorkoutIdRoute: typeof _homeWorkoutsWorkoutIdRoute
   _homeWorkoutsCreateRoute: typeof _homeWorkoutsCreateRoute
 }
@@ -585,7 +565,6 @@ const _homeRouteChildren: _homeRouteChildren = {
   _homeLibraryRoute: _homeLibraryRouteWithChildren,
   _homePlanningRoute: _homePlanningRoute,
   _homeProfileRoute: _homeProfileRoute,
-  _homeSettingsRoute: _homeSettingsRoute,
   _homeWorkoutsWorkoutIdRoute: _homeWorkoutsWorkoutIdRoute,
   _homeWorkoutsCreateRoute: _homeWorkoutsCreateRoute,
 }

apps/web/src/routes/__home.help.tsx

@@ -45,7 +45,7 @@ function RouteComponent() {
 
         <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
           {/* Contact Section */}
-          <Card className="w-full">
+          <Card className="w-full shadow-none">
             <CardHeader>
               <div className="flex items-center gap-2">
                 <Mail className="h-5 w-5 text-primary" />
@@ -72,7 +72,7 @@ function RouteComponent() {
           </Card>
 
           {/* Legal Documents Section */}
-          <Card className="w-full">
+          <Card className="w-full shadow-none">
             <CardHeader>
               <div className="flex items-center gap-2">
                 <FileText className="h-5 w-5 text-primary" />
@@ -125,7 +125,7 @@ function RouteComponent() {
         </div>
 
         {/* FAQ Section */}
-        <Card className="w-full">
+        <Card className="w-full shadow-none">
           <CardHeader>
             <div className="flex items-center gap-2">
               <HelpCircle className="h-5 w-5 text-primary" />

apps/web/src/routes/__home.profile.tsx

@@ -5,6 +5,7 @@ import { useEffect } from 'react';
 import { UserProfileSection } from '@/features/profile/user-profile-section';
 import { AthleteProfileSection } from '@/features/profile/athlete-profile-section';
 import { DangerZoneSection } from '@/features/profile/danger-zone-section';
+import { SettingsSection } from '@/features/profile/settings-section';
 import { Card, CardContent } from '@/shared/components/ui/card';
 
 export const Route = createFileRoute('/__home/profile')({
@@ -22,11 +23,14 @@ function RouteComponent() {
   return (
     <div className="container p-4 w-full">
       <div className="grid grid-cols-1 lg:grid-cols-2 gap-4 w-full">
-        {/* Left Column: User Profile + Danger Zone */}
+        {/* Left Column: User Profile + Settings + Danger Zone */}
         <div className="space-y-6 w-full">
-          <Card className="w-full">
+          <Card className="w-full shadow-none">
             <CardContent className="p-6 space-y-6">
               <UserProfileSection />
+              <div className="border-t pt-6">
+                <SettingsSection />
+              </div>
               <div className="border-t pt-6">
                 <DangerZoneSection />
               </div>

apps/web/src/shared/components/layout/app-sidebar.tsx

@@ -9,7 +9,6 @@ import {
   Home,
   BookOpen,
   CircleQuestionMark,
-  Settings,
   LogOut,
 } from 'lucide-react';
 
@@ -75,11 +74,6 @@ export function AppSidebar() {
       url: '/help',
       icon: CircleQuestionMark,
     },
-    {
-      title: t('sidebar.menu.settings'),
-      url: '/settings',
-      icon: Settings,
-    },
   ];
 
   // Function to check if an item is active