Introduce a dynamic color scheme that adapts to user mood and time

Adds ThemePage with adaptive theme control and localization in i18n files.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: c5f0c281-8dd8-4846-b452-4a07bcd21062
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/9777c70b-fc38-4831-8d6b-78dfffe041b0/10c277b8-60f1-4b7d-855d-8ed2071cad3f.jpg

client/src/App.tsx

@@ -24,6 +24,7 @@ import AnalyticsPage from "@/pages/AnalyticsPage";
 import SystemMonitoringPage from "@/pages/SystemMonitoringPage";
 import SettingsPage from "@/pages/SettingsPage";
 import FocusPage from "@/pages/FocusPage";
+import ThemePage from "@/pages/ThemePage";
 import NotFound from "@/pages/not-found";
 
 function Router() {
@@ -41,6 +42,7 @@ function Router() {
       <Route path="/analytics" component={AnalyticsPage} />
       <Route path="/monitoring" component={SystemMonitoringPage} />
       <Route path="/focus" component={FocusPage} />
+      <Route path="/themes" component={ThemePage} />
       <Route path="/settings" component={SettingsPage} />
       <Route path="/professionals" component={ProfessionalDirectory} />
       <Route component={NotFound} />

client/src/components/layout/Sidebar.tsx

@@ -19,7 +19,8 @@ import {
   Zap,
   Monitor,
   UserCheck,
-  Focus
+  Focus,
+  Palette
 } from "lucide-react";
 
 interface SidebarProps {
@@ -63,6 +64,11 @@ const getNavigation = (t: any) => [
     href: "/focus",
     icon: Focus,
   },
+  {
+    name: t('navigation.themes'),
+    href: "/themes",
+    icon: Palette,
+  },
 ];
 
 const getManagementNavigation = (t: any) => [

client/src/i18n/locales/ar.json

@@ -30,6 +30,7 @@
     "professionals": "الدليل المهني",
     "ai": "المساعد الذكي",
     "focus": "وضع التركيز",
+    "themes": "الثيمات التكيفية",
     "voice": "الأوامر الصوتية",
     "analytics": "التحليلات",
     "monitoring": "مراقبة النظام",
@@ -177,6 +178,42 @@
       "whitenoise": "الضوضاء البيضاء"
     }
   },
+  "theme": {
+    "title": "نظام الثيمات التكيفي",
+    "description": "اختبر واجهة ديناميكية تتكيف مع حالتك المزاجية وأنماط نشاطك ووقت اليوم للحصول على الإنتاجية والراحة المثلى.",
+    "adaptiveTitle": "التحكم في الثيم التكيفي",
+    "adaptiveMode": "الوضع التكيفي",
+    "adaptiveModeDesc": "تعديل الألوان تلقائياً بناءً على حالتك المزاجية ووقت اليوم",
+    "enabled": "مفعل",
+    "disabled": "معطل",
+    "currentMood": "تحليل الحالة المزاجية الحالية",
+    "moodDesc": "محدد من أنماط نشاطك ووقت اليوم",
+    "energy": "الطاقة",
+    "focus": "التركيز",
+    "stress": "التوتر",
+    "creativity": "الإبداع",
+    "manualAdjustment": "التعديل اليدوي للمزاج",
+    "manualAdjustmentDesc": "تجاوز الكشف التلقائي بالإعدادات اليدوية",
+    "presets": "قوالب الثيمات",
+    "presetsDesc": "تجاوز الوضع التكيفي بثيمات محددة مسبقاً",
+    "clearOverride": "مسح التجاوز اليدوي",
+    "currentTheme": "الثيم الحالي",
+    "manualTheme": "يدوي",
+    "adaptiveTheme": "تكيفي بناءً على المزاج والوقت",
+    "primary": "أساسي",
+    "secondary": "ثانوي",
+    "accent": "مميز",
+    "background": "الخلفية",
+    "foreground": "المقدمة",
+    "features": {
+      "moodDetection": "كشف الحالة المزاجية",
+      "moodDetectionDesc": "يحلل أنماط نشاطك لتحديد مستويات الطاقة والتركيز والتوتر والإبداع",
+      "timeAdaptation": "التكيف مع الوقت",
+      "timeAdaptationDesc": "يعدل الألوان تلقائياً بناءً على وقت اليوم للراحة البصرية المثلى",
+      "smartColors": "الألوان الذكية",
+      "smartColorsDesc": "لوحات ألوان ديناميكية تعزز الإنتاجية وتقلل من إجهاد العين"
+    }
+  },
   "voice": {
     "title": "الأوامر الصوتية",
     "listening": "جاري الاستماع...",

client/src/i18n/locales/en.json

@@ -30,6 +30,7 @@
     "professionals": "Professional Directory",
     "ai": "AI Assistant",
     "focus": "Focus Mode",
+    "themes": "Adaptive Themes",
     "voice": "Voice Commands",
     "analytics": "Analytics",
     "monitoring": "System Monitor",
@@ -179,6 +180,42 @@
       "whitenoise": "White Noise"
     }
   },
+  "theme": {
+    "title": "Adaptive Theme System",
+    "description": "Experience a dynamic interface that adapts to your mood, activity patterns, and time of day for optimal productivity and comfort.",
+    "adaptiveTitle": "Adaptive Theme Control",
+    "adaptiveMode": "Adaptive Mode",
+    "adaptiveModeDesc": "Automatically adjust colors based on your mood and time of day",
+    "enabled": "Enabled",
+    "disabled": "Disabled",
+    "currentMood": "Current Mood Analysis",
+    "moodDesc": "Detected from your activity patterns and time of day",
+    "energy": "Energy",
+    "focus": "Focus",
+    "stress": "Stress",
+    "creativity": "Creativity",
+    "manualAdjustment": "Manual Mood Adjustment",
+    "manualAdjustmentDesc": "Override automatic detection with manual settings",
+    "presets": "Theme Presets",
+    "presetsDesc": "Override adaptive mode with predefined themes",
+    "clearOverride": "Clear Manual Override",
+    "currentTheme": "Current Theme",
+    "manualTheme": "Manual",
+    "adaptiveTheme": "Adaptive based on mood and time",
+    "primary": "Primary",
+    "secondary": "Secondary",
+    "accent": "Accent",
+    "background": "Background",
+    "foreground": "Foreground",
+    "features": {
+      "moodDetection": "Mood Detection",
+      "moodDetectionDesc": "Analyzes your activity patterns to determine energy, focus, stress, and creativity levels",
+      "timeAdaptation": "Time Adaptation",
+      "timeAdaptationDesc": "Automatically adjusts colors based on time of day for optimal visual comfort",
+      "smartColors": "Smart Colors",
+      "smartColorsDesc": "Dynamic color palettes that enhance productivity and reduce eye strain"
+    }
+  },
   "voice": {
     "title": "Voice Commands",
     "listening": "Listening...",

client/src/pages/ThemePage.tsx

@@ -0,0 +1,61 @@
+import { ThemeControlPanel } from "@/components/ThemeControlPanel";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { useTranslation } from "react-i18next";
+import { Palette, Sparkles, Clock, Brain } from "lucide-react";
+
+export default function ThemePage() {
+  const { t } = useTranslation();
+
+  return (
+    <div className="container mx-auto py-8 space-y-8">
+      <div className="text-center space-y-4">
+        <h1 className="text-4xl font-bold bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent">
+          {t('theme.title', 'Adaptive Theme System')}
+        </h1>
+        <p className="text-xl text-muted-foreground max-w-3xl mx-auto">
+          {t('theme.description', 'Experience a dynamic interface that adapts to your mood, activity patterns, and time of day for optimal productivity and comfort.')}
+        </p>
+      </div>
+
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-8">
+        <Card>
+          <CardHeader className="text-center">
+            <Brain className="w-8 h-8 mx-auto mb-2 text-primary" />
+            <CardTitle className="text-lg">{t('theme.features.moodDetection', 'Mood Detection')}</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <CardDescription className="text-center">
+              {t('theme.features.moodDetectionDesc', 'Analyzes your activity patterns to determine energy, focus, stress, and creativity levels')}
+            </CardDescription>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader className="text-center">
+            <Clock className="w-8 h-8 mx-auto mb-2 text-primary" />
+            <CardTitle className="text-lg">{t('theme.features.timeAdaptation', 'Time Adaptation')}</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <CardDescription className="text-center">
+              {t('theme.features.timeAdaptationDesc', 'Automatically adjusts colors based on time of day for optimal visual comfort')}
+            </CardDescription>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader className="text-center">
+            <Sparkles className="w-8 h-8 mx-auto mb-2 text-primary" />
+            <CardTitle className="text-lg">{t('theme.features.smartColors', 'Smart Colors')}</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <CardDescription className="text-center">
+              {t('theme.features.smartColorsDesc', 'Dynamic color palettes that enhance productivity and reduce eye strain')}
+            </CardDescription>
+          </CardContent>
+        </Card>
+      </div>
+
+      <ThemeControlPanel />
+    </div>
+  );
+}