Add full language translation support and settings option

Integrates i18next and react-i18next for internationalization, adds German language support, and implements a language selection feature in the settings page. Replit-Commit-Author: Agent Replit-Commit-Session-Id: ceced2fc-aa46-458d-ba87-ddd4b7bb1518 Replit-Commit-Checkpoint-Type: intermediate_checkpoint Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/659922a9-0087-461c-90dd-6d9a58b81d4d/ceced2fc-aa46-458d-ba87-ddd4b7bb1518/un1X8jl
2025-10-23 20:54:00 +00:00
parent 237c97dcd5
commit 571245e2d9
9 changed files with 499 additions and 16 deletions
@@ -0,0 +1,82 @@
+import { useTranslation } from 'react-i18next';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+import { Globe } from 'lucide-react';
+
+export default function Settings() {
+  const { t, i18n } = useTranslation();
+
+  const changeLanguage = (lng: string) => {
+    i18n.changeLanguage(lng);
+    localStorage.setItem('taskflow-language', lng);
+    console.log('Language changed to:', lng);
+  };
+
+  return (
+    <div className="space-y-6">
+      <div>
+        <h1 className="text-2xl font-bold" data-testid="text-settings-title">
+          {t('settings.title')}
+        </h1>
+      </div>
+
+      {/* Language Settings */}
+      <Card data-testid="card-language-settings">
+        <CardHeader>
+          <CardTitle className="flex items-center gap-2">
+            <Globe className="w-5 h-5" />
+            {t('settings.language.title')}
+          </CardTitle>
+          <CardDescription>
+            {t('settings.language.description')}
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <Select value={i18n.language} onValueChange={changeLanguage}>
+            <SelectTrigger className="w-full sm:w-64" data-testid="select-language">
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="en" data-testid="option-language-en">
+                {t('settings.language.english')}
+              </SelectItem>
+              <SelectItem value="de" data-testid="option-language-de">
+                {t('settings.language.german')}
+              </SelectItem>
+            </SelectContent>
+          </Select>
+        </CardContent>
+      </Card>
+
+      {/* Appearance Settings */}
+      <Card>
+        <CardHeader>
+          <CardTitle>{t('settings.appearance.title')}</CardTitle>
+          <CardDescription>
+            {t('settings.appearance.description')}
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <p className="text-sm text-muted-foreground">
+            Theme toggle available in the header
+          </p>
+        </CardContent>
+      </Card>
+
+      {/* Project Templates */}
+      <Card>
+        <CardHeader>
+          <CardTitle>{t('settings.templates.title')}</CardTitle>
+          <CardDescription>
+            {t('settings.templates.description')}
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <p className="text-sm text-muted-foreground">
+            Access templates from the navigation menu
+          </p>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}