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
@@ -22,6 +22,10 @@ externalPort = 3002
 localPort = 39063
 externalPort = 3001

+[[ports]]
+localPort = 41155
+externalPort = 4200
+
 [[ports]]
 localPort = 41353
 externalPort = 3000
@@ -1,4 +1,5 @@
 import { useState, useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
 import { queryClient } from "./lib/queryClient";
 import { QueryClientProvider } from "@tanstack/react-query";
 import { Toaster } from "@/components/ui/toaster";
@@ -15,6 +16,7 @@ import CalendarView from './components/CalendarView';
 import KanbanBoard from './components/KanbanBoard';
 import ProjectTemplate from './components/ProjectTemplate';
 import ThemeToggle from './components/ThemeToggle';
+import Settings from './pages/settings';
 import { Task, Label } from '@shared/schema';
 import { addDays, subDays } from 'date-fns';
 import { useTimer } from './hooks/useTimer';
@@ -89,6 +91,7 @@ const initialTasks: Task[] = [
 ];

 function App() {
+  const { t } = useTranslation();
  const [currentTab, setCurrentTab] = useState('tasks');
  const [tasks, setTasks] = useState<Task[]>(initialTasks);
  const [labels, setLabels] = useState<Label[]>([]);
@@ -266,7 +269,7 @@ function App() {
          />
        );
      
-      case 'settings':
+      case 'templates':
        return (
          <ProjectTemplate 
            onCreateFromTemplate={handleCreateFromTemplate}
@@ -274,6 +277,9 @@ function App() {
          />
        );
      
+      case 'settings':
+        return <Settings />;
+      
      default:
        return (
          <div className="text-center py-8">
@@ -295,19 +301,19 @@ function App() {
                  <span className="text-primary-foreground font-bold text-sm">T</span>
                </div>
                <h1 className="text-lg font-semibold" data-testid="text-app-title">
-                  TaskFlow
+                  {t('app.title')}
                </h1>
              </div>
              
              <div className="flex items-center gap-2">
-                {currentTab === 'settings' && (
+                {(currentTab === 'settings' || currentTab === 'templates') && (
                  <Button 
                    variant="outline" 
                    size="sm"
                    onClick={() => setCurrentTab('tasks')}
                    data-testid="button-back-to-tasks"
                  >
-                    Back to Tasks
+                    {t('app.backToTasks')}
                  </Button>
                )}
                <ThemeToggle />
@@ -0,0 +1,26 @@
+import i18n from 'i18next';
+import { initReactI18next } from 'react-i18next';
+import en from './locales/en.json';
+import de from './locales/de.json';
+
+const savedLanguage = localStorage.getItem('taskflow-language') || 'en';
+
+i18n
+  .use(initReactI18next)
+  .init({
+    resources: {
+      en: {
+        translation: en
+      },
+      de: {
+        translation: de
+      }
+    },
+    lng: savedLanguage,
+    fallbackLng: 'en',
+    interpolation: {
+      escapeValue: false
+    }
+  });
+
+export default i18n;
@@ -0,0 +1,146 @@
+{
+  "app": {
+    "title": "TaskFlow",
+    "backToTasks": "Zurück zu Aufgaben"
+  },
+  "navigation": {
+    "tasks": "Aufgaben",
+    "calendar": "Kalender",
+    "kanban": "Kanban",
+    "settings": "Einstellungen"
+  },
+  "taskList": {
+    "title": "Meine Aufgaben",
+    "taskCount": "{{count}} Aufgaben",
+    "searchPlaceholder": "Aufgaben suchen...",
+    "noTasks": "Noch keine Aufgaben. Erstelle deine erste Aufgabe!",
+    "noMatchingTasks": "Keine Aufgaben entsprechen deinen Filtern",
+    "filter": {
+      "all": "Alle",
+      "todo": "Zu erledigen",
+      "inProgress": "In Bearbeitung",
+      "done": "Erledigt",
+      "overdue": "Überfällig"
+    },
+    "sort": {
+      "dueDate": "Fälligkeitsdatum",
+      "priority": "Priorität",
+      "title": "Titel",
+      "status": "Status"
+    }
+  },
+  "taskCreation": {
+    "title": "Neue Aufgabe",
+    "titlePlaceholder": "Was muss erledigt werden?",
+    "descriptionPlaceholder": "Beschreibung hinzufügen (optional)",
+    "priority": "Priorität",
+    "label": "Label",
+    "noLabel": "Kein Label",
+    "dueDate": "Fälligkeitsdatum",
+    "cancel": "Abbrechen",
+    "create": "Aufgabe erstellen"
+  },
+  "taskDetails": {
+    "title": "Aufgabendetails",
+    "description": "Beschreibung",
+    "descriptionPlaceholder": "Beschreibung hinzufügen...",
+    "priority": "Priorität",
+    "status": "Status",
+    "label": "Label",
+    "noLabel": "Kein Label",
+    "dueDate": "Fälligkeitsdatum",
+    "selectDate": "Datum wählen",
+    "notes": "Notizen",
+    "notesPlaceholder": "Notizen hinzufügen...",
+    "timeTracked": "Erfasste Zeit",
+    "delete": "Aufgabe löschen",
+    "cancel": "Abbrechen",
+    "save": "Änderungen speichern"
+  },
+  "taskCard": {
+    "play": "Timer starten",
+    "pause": "Timer pausieren",
+    "edit": "Aufgabe bearbeiten",
+    "overdue": "Überfällig",
+    "timeTracked": "{{hours}}Std {{minutes}}Min erfasst"
+  },
+  "calendar": {
+    "title": "Kalenderansicht",
+    "today": "Heute",
+    "tasksDue": "{{count}} Aufgabe fällig",
+    "tasksDue_plural": "{{count}} Aufgaben fällig"
+  },
+  "kanban": {
+    "title": "Kanban-Board",
+    "todo": "Zu erledigen",
+    "inProgress": "In Bearbeitung",
+    "done": "Erledigt",
+    "taskCount": "{{count}} Aufgabe",
+    "taskCount_plural": "{{count}} Aufgaben"
+  },
+  "settings": {
+    "title": "Einstellungen",
+    "language": {
+      "title": "Sprache",
+      "description": "Wähle deine bevorzugte Sprache",
+      "english": "Englisch (English)",
+      "german": "Deutsch"
+    },
+    "appearance": {
+      "title": "Erscheinungsbild",
+      "description": "Passe das Aussehen an"
+    },
+    "templates": {
+      "title": "Projektvorlagen",
+      "description": "Verwende Vorlagen zum schnellen Erstellen von Projekten"
+    }
+  },
+  "projectTemplate": {
+    "title": "Projektvorlagen",
+    "description": "Wähle eine Vorlage, um ein neues Projekt mit vorkonfigurierten Aufgaben zu erstellen",
+    "websiteRedesign": "Website-Redesign",
+    "websiteDescription": "Umfassendes Website-Redesign-Projekt mit Design-, Entwicklungs- und Testphasen",
+    "mobileApp": "Mobile App-Launch",
+    "mobileDescription": "End-to-End Mobile App-Entwicklung von der Planung bis zur Bereitstellung",
+    "marketingCampaign": "Marketingkampagne",
+    "marketingDescription": "Vollständiger Marketingkampagnen-Workflow von der Planung bis zur Analyse",
+    "projectName": "Projektname",
+    "projectNamePlaceholder": "Projektnamen eingeben",
+    "startDate": "Startdatum",
+    "selectStartDate": "Startdatum wählen",
+    "createProject": "Projekt erstellen",
+    "weeks": "{{count}} Wochen",
+    "tasks": "{{count}} Aufgaben"
+  },
+  "timeCompletion": {
+    "title": "Aufgabe abgeschlossen!",
+    "congratulations": "Großartige Arbeit! Du hast abgeschlossen",
+    "timeSpent": "Zeit für diese Aufgabe",
+    "addTime": "Zusätzliche Zeit hinzufügen (optional)",
+    "hours": "Stunden",
+    "minutes": "Minuten",
+    "notes": "Notizen",
+    "notesPlaceholder": "Abschlussnotizen hinzufügen...",
+    "finish": "Fertig"
+  },
+  "priority": {
+    "low": "Niedrig",
+    "medium": "Mittel",
+    "high": "Hoch"
+  },
+  "status": {
+    "todo": "Zu erledigen",
+    "inProgress": "In Bearbeitung",
+    "done": "Erledigt"
+  },
+  "common": {
+    "cancel": "Abbrechen",
+    "save": "Speichern",
+    "delete": "Löschen",
+    "edit": "Bearbeiten",
+    "create": "Erstellen",
+    "close": "Schließen",
+    "loading": "Laden...",
+    "error": "Ein Fehler ist aufgetreten"
+  }
+}
@@ -0,0 +1,146 @@
+{
+  "app": {
+    "title": "TaskFlow",
+    "backToTasks": "Back to Tasks"
+  },
+  "navigation": {
+    "tasks": "Tasks",
+    "calendar": "Calendar",
+    "kanban": "Kanban",
+    "settings": "Settings"
+  },
+  "taskList": {
+    "title": "My Tasks",
+    "taskCount": "{{count}} tasks",
+    "searchPlaceholder": "Search tasks...",
+    "noTasks": "No tasks yet. Create your first task!",
+    "noMatchingTasks": "No tasks match your filters",
+    "filter": {
+      "all": "All",
+      "todo": "To Do",
+      "inProgress": "In Progress",
+      "done": "Done",
+      "overdue": "Overdue"
+    },
+    "sort": {
+      "dueDate": "Due Date",
+      "priority": "Priority",
+      "title": "Title",
+      "status": "Status"
+    }
+  },
+  "taskCreation": {
+    "title": "New Task",
+    "titlePlaceholder": "What needs to be done?",
+    "descriptionPlaceholder": "Add a description (optional)",
+    "priority": "Priority",
+    "label": "Label",
+    "noLabel": "No Label",
+    "dueDate": "Due date",
+    "cancel": "Cancel",
+    "create": "Create Task"
+  },
+  "taskDetails": {
+    "title": "Task Details",
+    "description": "Description",
+    "descriptionPlaceholder": "Add a description...",
+    "priority": "Priority",
+    "status": "Status",
+    "label": "Label",
+    "noLabel": "No Label",
+    "dueDate": "Due Date",
+    "selectDate": "Select date",
+    "notes": "Notes",
+    "notesPlaceholder": "Add notes...",
+    "timeTracked": "Time Tracked",
+    "delete": "Delete Task",
+    "cancel": "Cancel",
+    "save": "Save Changes"
+  },
+  "taskCard": {
+    "play": "Start timer",
+    "pause": "Pause timer",
+    "edit": "Edit task",
+    "overdue": "Overdue",
+    "timeTracked": "{{hours}}h {{minutes}}m tracked"
+  },
+  "calendar": {
+    "title": "Calendar View",
+    "today": "Today",
+    "tasksDue": "{{count}} task due",
+    "tasksDue_plural": "{{count}} tasks due"
+  },
+  "kanban": {
+    "title": "Kanban Board",
+    "todo": "To Do",
+    "inProgress": "In Progress",
+    "done": "Done",
+    "taskCount": "{{count}} task",
+    "taskCount_plural": "{{count}} tasks"
+  },
+  "settings": {
+    "title": "Settings",
+    "language": {
+      "title": "Language",
+      "description": "Choose your preferred language",
+      "english": "English",
+      "german": "German (Deutsch)"
+    },
+    "appearance": {
+      "title": "Appearance",
+      "description": "Customize the look and feel"
+    },
+    "templates": {
+      "title": "Project Templates",
+      "description": "Use templates to quickly create projects"
+    }
+  },
+  "projectTemplate": {
+    "title": "Project Templates",
+    "description": "Select a template to create a new project with pre-configured tasks",
+    "websiteRedesign": "Website Redesign",
+    "websiteDescription": "Comprehensive website redesign project with design, development, and testing phases",
+    "mobileApp": "Mobile App Launch",
+    "mobileDescription": "End-to-end mobile app development from planning to deployment",
+    "marketingCampaign": "Marketing Campaign",
+    "marketingDescription": "Complete marketing campaign workflow from planning to analysis",
+    "projectName": "Project Name",
+    "projectNamePlaceholder": "Enter project name",
+    "startDate": "Start Date",
+    "selectStartDate": "Select start date",
+    "createProject": "Create Project",
+    "weeks": "{{count}} weeks",
+    "tasks": "{{count}} tasks"
+  },
+  "timeCompletion": {
+    "title": "Task Completed!",
+    "congratulations": "Great job! You've completed",
+    "timeSpent": "Time spent on this task",
+    "addTime": "Add additional time (optional)",
+    "hours": "Hours",
+    "minutes": "Minutes",
+    "notes": "Notes",
+    "notesPlaceholder": "Add completion notes...",
+    "finish": "Finish"
+  },
+  "priority": {
+    "low": "Low",
+    "medium": "Medium",
+    "high": "High"
+  },
+  "status": {
+    "todo": "To Do",
+    "inProgress": "In Progress",
+    "done": "Done"
+  },
+  "common": {
+    "cancel": "Cancel",
+    "save": "Save",
+    "delete": "Delete",
+    "edit": "Edit",
+    "create": "Create",
+    "close": "Close",
+    "loading": "Loading...",
+    "error": "An error occurred"
+  }
+}
@@ -1,5 +1,6 @@
 import { createRoot } from "react-dom/client";
 import App from "./App";
 import "./index.css";
+import "./i18n/config";

 createRoot(document.getElementById("root")!).render(<App />);
@@ -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>
+  );
+}
@@ -52,6 +52,7 @@
        "express": "^4.21.2",
        "express-session": "^1.18.1",
        "framer-motion": "^11.13.1",
+        "i18next": "^25.6.0",
        "input-otp": "^1.4.2",
        "lucide-react": "^0.453.0",
        "memorystore": "^1.6.7",
@@ -63,6 +64,7 @@
        "react-day-picker": "^8.10.1",
        "react-dom": "^18.3.1",
        "react-hook-form": "^7.55.0",
+        "react-i18next": "^16.1.6",
        "react-icons": "^5.4.0",
        "react-resizable-panels": "^2.1.7",
        "recharts": "^2.15.2",
@@ -352,12 +354,10 @@
      }
    },
    "node_modules/@babel/runtime": {
-      "version": "7.27.0",
-      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.27.0.tgz",
-      "integrity": "sha512-VtPOkrdPHZsKc/clNqyi9WUA8TINkZ4cGk63UUE3u4pmB2k+ZMQRDuIOagv8UVd6j7k0T3+RRIb7beKTebNbcw==",
-      "dependencies": {
-        "regenerator-runtime": "^0.14.0"
-      },
+      "version": "7.28.4",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.28.4.tgz",
+      "integrity": "sha512-Q/N6JNWvIvPnLDvjlE1OUBLPQHH6l3CltCEsHIujp45zQUSSh8K+gHnaEX45yAT1nyngnINhvWtzN+Nb9D8RAQ==",
+      "license": "MIT",
      "engines": {
        "node": ">=6.9.0"
      }
@@ -5621,6 +5621,15 @@
        "node": ">= 0.4"
      }
    },
+    "node_modules/html-parse-stringify": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/html-parse-stringify/-/html-parse-stringify-3.0.1.tgz",
+      "integrity": "sha512-KknJ50kTInJ7qIScF3jeaFRpMpE8/lfiTdzf/twXyPBLAGrLRTmkz3AdTnKeh40X8k9L2fdYwEp/42WGXIRGcg==",
+      "license": "MIT",
+      "dependencies": {
+        "void-elements": "3.1.0"
+      }
+    },
    "node_modules/http-errors": {
      "version": "2.0.0",
      "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-2.0.0.tgz",
@@ -5637,6 +5646,37 @@
        "node": ">= 0.8"
      }
    },
+    "node_modules/i18next": {
+      "version": "25.6.0",
+      "resolved": "https://registry.npmjs.org/i18next/-/i18next-25.6.0.tgz",
+      "integrity": "sha512-tTn8fLrwBYtnclpL5aPXK/tAYBLWVvoHM1zdfXoRNLcI+RvtMsoZRV98ePlaW3khHYKuNh/Q65W/+NVFUeIwVw==",
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://locize.com"
+        },
+        {
+          "type": "individual",
+          "url": "https://locize.com/i18next.html"
+        },
+        {
+          "type": "individual",
+          "url": "https://www.i18next.com/how-to/faq#i18next-is-awesome.-how-can-i-support-the-project"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.27.6"
+      },
+      "peerDependencies": {
+        "typescript": "^5"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
    "node_modules/iconv-lite": {
      "version": "0.4.24",
      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
@@ -7002,6 +7042,32 @@
        "react": "^16.8.0 || ^17 || ^18 || ^19"
      }
    },
+    "node_modules/react-i18next": {
+      "version": "16.1.6",
+      "resolved": "https://registry.npmjs.org/react-i18next/-/react-i18next-16.1.6.tgz",
+      "integrity": "sha512-62Iy0TO/2hJpTa80XaTIbHM4yjpile1YNieeg70vmdi91N2L3Q3MuxXBT0n6JpsryT88utpkqv0QbnIrDSxbAQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.27.6",
+        "html-parse-stringify": "^3.0.1"
+      },
+      "peerDependencies": {
+        "i18next": ">= 25.5.2",
+        "react": ">= 16.8.0",
+        "typescript": "^5"
+      },
+      "peerDependenciesMeta": {
+        "react-dom": {
+          "optional": true
+        },
+        "react-native": {
+          "optional": true
+        },
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
    "node_modules/react-icons": {
      "version": "5.4.0",
      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.4.0.tgz",
@@ -7183,11 +7249,6 @@
        "decimal.js-light": "^2.4.1"
      }
    },
-    "node_modules/regenerator-runtime": {
-      "version": "0.14.1",
-      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz",
-      "integrity": "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw=="
-    },
    "node_modules/regexparam": {
      "version": "3.0.0",
      "resolved": "https://registry.npmjs.org/regexparam/-/regexparam-3.0.0.tgz",
@@ -8270,7 +8331,7 @@
      "version": "5.6.3",
      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.6.3.tgz",
      "integrity": "sha512-hjcS1mhfuyi4WW8IWtjP7brDrG2cuDZukyrYrSauoXGNgx0S7zceP07adYkJycEr56BOUTNPzbInooiN3fn1qw==",
-      "dev": true,
+      "devOptional": true,
      "license": "Apache-2.0",
      "bin": {
        "tsc": "bin/tsc",
@@ -8936,6 +8997,15 @@
        "@esbuild/win32-x64": "0.21.5"
      }
    },
+    "node_modules/void-elements": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/void-elements/-/void-elements-3.1.0.tgz",
+      "integrity": "sha512-Dhxzh5HZuiHQhbvTW9AMetFfBHDMYpo23Uo9btPXgdYP+3T5S+p+jgNy7spra+veYhBP2dCSgxR/i2Y02h5/6w==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
    "node_modules/which": {
      "version": "2.0.2",
      "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
@@ -54,6 +54,7 @@
    "express": "^4.21.2",
    "express-session": "^1.18.1",
    "framer-motion": "^11.13.1",
+    "i18next": "^25.6.0",
    "input-otp": "^1.4.2",
    "lucide-react": "^0.453.0",
    "memorystore": "^1.6.7",
@@ -65,6 +66,7 @@
    "react-day-picker": "^8.10.1",
    "react-dom": "^18.3.1",
    "react-hook-form": "^7.55.0",
+    "react-i18next": "^16.1.6",
    "react-icons": "^5.4.0",
    "react-resizable-panels": "^2.1.7",
    "recharts": "^2.15.2",