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

client/src/App.tsx

@@ -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 />