From 235bcab97f898c033dc2c4c8af41e3992454b91f Mon Sep 17 00:00:00 2001
From: Claude CLI Agent <cli@taskteam.hasdo.info>
Date: Sun, 29 Mar 2026 13:13:34 +0000
Subject: [PATCH] i18n: integrate translations into components

- StatusBadge, TaskForm, tasks page use i18n hook
- All 4 language files complete (cs, he, ru, ua)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 apps/tasks/app/tasks/page.tsx         | 26 ++++++------
 apps/tasks/components/StatusBadge.tsx | 15 ++++---
 apps/tasks/components/TaskForm.tsx    | 58 ++++++++++++++-------------
 apps/tasks/components/TaskModal.tsx   |  9 +++--
 4 files changed, 56 insertions(+), 52 deletions(-)

diff --git a/apps/tasks/app/tasks/page.tsx b/apps/tasks/app/tasks/page.tsx
index cd51e76..540ab68 100644
--- a/apps/tasks/app/tasks/page.tsx
+++ b/apps/tasks/app/tasks/page.tsx
@@ -4,6 +4,7 @@ import { useEffect, useState, useCallback, useMemo } from "react";
 import { useRouter } from "next/navigation";
 import { useAuth } from "@/lib/auth";
 import { getTasks, getGroups, createTask, updateTask, Task, Group } from "@/lib/api";
+import { useTranslation } from "@/lib/i18n";
 import TaskCard from "@/components/TaskCard";
 import GroupSelector from "@/components/GroupSelector";
 import TaskModal from "@/components/TaskModal";
@@ -13,6 +14,7 @@ type StatusFilter = "all" | "pending" | "in_progress" | "done" | "cancelled";
 
 export default function TasksPage() {
   const { token } = useAuth();
+  const { t } = useTranslation();
   const router = useRouter();
   const [tasks, setTasks] = useState<Task[]>([]);
   const [groups, setGroups] = useState<Group[]>([]);
@@ -47,7 +49,7 @@ export default function TasksPage() {
       setTasks(tasksRes.data || []);
       setGroups(groupsRes.data || []);
     } catch (err) {
-      console.error("Chyba pri nacitani:", err);
+      console.error("Load error:", err);
     } finally {
       setLoading(false);
     }
@@ -73,7 +75,7 @@ export default function TasksPage() {
 
       // Show overlay
       if (newGroupId === null) {
-        setSwipeOverlay({ name: "Vse", icon: null });
+        setSwipeOverlay({ name: t("tasks.all"), icon: null });
       } else {
         const group = groups.find((g) => g.id === newGroupId);
         setSwipeOverlay({ name: group?.name || "", icon: group?.icon || null });
@@ -87,7 +89,7 @@ export default function TasksPage() {
         setSwipeDirection(null);
       }, 600);
     },
-    [groupOrder, currentGroupIndex, groups]
+    [groupOrder, currentGroupIndex, groups, t]
   );
 
   // Swipe handlers for cycling groups
@@ -114,16 +116,16 @@ export default function TasksPage() {
       await updateTask(token, taskId, { status: "done" });
       loadData();
     } catch (err) {
-      console.error("Chyba pri dokoncovani:", err);
+      console.error("Complete error:", err);
     }
   }
 
   const statusOptions: { value: StatusFilter; label: string }[] = [
-    { value: "all", label: "Vse" },
-    { value: "pending", label: "Ceka" },
-    { value: "in_progress", label: "Probiha" },
-    { value: "done", label: "Hotovo" },
-    { value: "cancelled", label: "Zruseno" },
+    { value: "all", label: t("tasks.all") },
+    { value: "pending", label: t("tasks.status.pending") },
+    { value: "in_progress", label: t("tasks.status.in_progress") },
+    { value: "done", label: t("tasks.status.done") },
+    { value: "cancelled", label: t("tasks.status.cancelled") },
   ];
 
   if (!token) return null;
@@ -189,9 +191,9 @@ export default function TasksPage() {
           ) : tasks.length === 0 ? (
             <div className="text-center py-16">
               <div className="text-5xl mb-4 opacity-50">&#9744;</div>
-              <p className="text-muted text-lg font-medium">Zadne ukoly</p>
+              <p className="text-muted text-lg font-medium">{t("tasks.noTasks")}</p>
               <p className="text-muted text-sm mt-1">
-                Vytvorte prvni ukol pomoci tlacitka +
+                {t("tasks.createFirst")}
               </p>
             </div>
           ) : (
@@ -212,7 +214,7 @@ export default function TasksPage() {
       <button
         onClick={() => setShowForm(true)}
         className="fixed bottom-20 sm:bottom-6 right-4 sm:right-6 w-14 h-14 bg-blue-600 hover:bg-blue-700 active:bg-blue-800 text-white rounded-full shadow-lg hover:shadow-xl active:shadow-md transition-all duration-200 flex items-center justify-center z-40 hover:scale-105 active:scale-95"
-        aria-label="Pridat ukol"
+        aria-label={t("tasks.add")}
       >
         <svg
           className="w-7 h-7"
diff --git a/apps/tasks/components/StatusBadge.tsx b/apps/tasks/components/StatusBadge.tsx
index 96f2dc5..92c8bb9 100644
--- a/apps/tasks/components/StatusBadge.tsx
+++ b/apps/tasks/components/StatusBadge.tsx
@@ -1,37 +1,34 @@
 "use client";
 
+import { useTranslation } from "@/lib/i18n";
+
 interface StatusBadgeProps {
   status: string;
   size?: "sm" | "md";
 }
 
-const STATUS_MAP: Record<string, { label: string; bg: string; text: string; dot: string }> = {
+const STATUS_STYLES: Record<string, { bg: string; text: string; dot: string }> = {
   pending: {
-    label: "Čeká",
     bg: "bg-yellow-100 dark:bg-yellow-900/30",
     text: "text-yellow-800 dark:text-yellow-300",
     dot: "bg-yellow-500",
   },
   in_progress: {
-    label: "Probíhá",
     bg: "bg-blue-100 dark:bg-blue-900/30",
     text: "text-blue-800 dark:text-blue-300",
     dot: "bg-blue-500",
   },
   done: {
-    label: "Hotovo",
     bg: "bg-green-100 dark:bg-green-900/30",
     text: "text-green-800 dark:text-green-300",
     dot: "bg-green-500",
   },
   completed: {
-    label: "Hotovo",
     bg: "bg-green-100 dark:bg-green-900/30",
     text: "text-green-800 dark:text-green-300",
     dot: "bg-green-500",
   },
   cancelled: {
-    label: "Zrušeno",
     bg: "bg-gray-100 dark:bg-gray-800/30",
     text: "text-gray-600 dark:text-gray-400",
     dot: "bg-gray-400",
@@ -39,15 +36,17 @@ const STATUS_MAP: Record<string, { label: string; bg: string; text: string; dot:
 };
 
 export default function StatusBadge({ status, size = "sm" }: StatusBadgeProps) {
-  const s = STATUS_MAP[status] || STATUS_MAP.pending;
+  const { t } = useTranslation();
+  const s = STATUS_STYLES[status] || STATUS_STYLES.pending;
   const sizeClass = size === "sm" ? "px-2 py-0.5 text-xs" : "px-3 py-1 text-sm";
+  const label = t(`tasks.status.${status}`) || status;
 
   return (
     <span
       className={`inline-flex items-center gap-1.5 rounded-full font-medium ${s.bg} ${s.text} ${sizeClass}`}
     >
       <span className={`w-1.5 h-1.5 rounded-full ${s.dot}`} />
-      {s.label}
+      {label}
     </span>
   );
 }
diff --git a/apps/tasks/components/TaskForm.tsx b/apps/tasks/components/TaskForm.tsx
index e476ff5..ead76db 100644
--- a/apps/tasks/components/TaskForm.tsx
+++ b/apps/tasks/components/TaskForm.tsx
@@ -2,6 +2,7 @@
 
 import { useState } from "react";
 import { Group, Task } from "@/lib/api";
+import { useTranslation } from "@/lib/i18n";
 
 interface TaskFormProps {
   groups: Group[];
@@ -11,27 +12,14 @@ interface TaskFormProps {
   submitLabel?: string;
 }
 
-const STATUSES = [
-  { value: "pending", label: "Čeká" },
-  { value: "in_progress", label: "Probíhá" },
-  { value: "done", label: "Hotovo" },
-  { value: "cancelled", label: "Zrušeno" },
-];
-
-const PRIORITIES = [
-  { value: "low", label: "Nízká" },
-  { value: "medium", label: "Střední" },
-  { value: "high", label: "Vysoká" },
-  { value: "urgent", label: "Urgentní" },
-];
-
 export default function TaskForm({
   groups,
   initial,
   onSubmit,
   onCancel,
-  submitLabel = "Uložit",
+  submitLabel,
 }: TaskFormProps) {
+  const { t } = useTranslation();
   const [title, setTitle] = useState(initial?.title || "");
   const [description, setDescription] = useState(initial?.description || "");
   const [status, setStatus] = useState(initial?.status || "pending");
@@ -43,10 +31,24 @@ export default function TaskForm({
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState("");
 
+  const STATUSES = [
+    { value: "pending", label: t("tasks.status.pending") },
+    { value: "in_progress", label: t("tasks.status.in_progress") },
+    { value: "done", label: t("tasks.status.done") },
+    { value: "cancelled", label: t("tasks.status.cancelled") },
+  ];
+
+  const PRIORITIES = [
+    { value: "low", label: t("tasks.priority.low") },
+    { value: "medium", label: t("tasks.priority.medium") },
+    { value: "high", label: t("tasks.priority.high") },
+    { value: "urgent", label: t("tasks.priority.urgent") },
+  ];
+
   async function handleSubmit(e: React.FormEvent) {
     e.preventDefault();
     if (!title.trim()) {
-      setError("Název je povinný");
+      setError(t("tasks.form.titleRequired"));
       return;
     }
     setLoading(true);
@@ -62,7 +64,7 @@ export default function TaskForm({
       });
     } catch (err) {
       setError(
-        err instanceof Error ? err.message : "Chyba při ukládání"
+        err instanceof Error ? err.message : t("tasks.form.saveError")
       );
     } finally {
       setLoading(false);
@@ -78,31 +80,31 @@ export default function TaskForm({
       )}
 
       <div>
-        <label className="block text-sm font-medium mb-1">Název *</label>
+        <label className="block text-sm font-medium mb-1">{t("tasks.form.title")} *</label>
         <input
           type="text"
           value={title}
           onChange={(e) => setTitle(e.target.value)}
           className="w-full px-3 py-2.5 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 focus:ring-2 focus:ring-blue-500 focus:border-transparent outline-none transition-shadow"
-          placeholder="Co je třeba udělat..."
+          placeholder={t("tasks.form.placeholder")}
           autoFocus
         />
       </div>
 
       <div>
-        <label className="block text-sm font-medium mb-1">Popis</label>
+        <label className="block text-sm font-medium mb-1">{t("tasks.form.description")}</label>
         <textarea
           value={description}
           onChange={(e) => setDescription(e.target.value)}
           rows={3}
           className="w-full px-3 py-2.5 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 focus:ring-2 focus:ring-blue-500 focus:border-transparent outline-none resize-none transition-shadow"
-          placeholder="Podrobnosti..."
+          placeholder={t("tasks.form.descPlaceholder")}
         />
       </div>
 
       <div className="grid grid-cols-2 gap-4">
         <div>
-          <label className="block text-sm font-medium mb-1">Stav</label>
+          <label className="block text-sm font-medium mb-1">{t("tasks.form.status")}</label>
           <select
             value={status}
             onChange={(e) =>
@@ -125,7 +127,7 @@ export default function TaskForm({
         </div>
 
         <div>
-          <label className="block text-sm font-medium mb-1">Priorita</label>
+          <label className="block text-sm font-medium mb-1">{t("tasks.form.priority")}</label>
           <select
             value={priority}
             onChange={(e) => setPriority(e.target.value as any)}
@@ -142,13 +144,13 @@ export default function TaskForm({
 
       <div className="grid grid-cols-2 gap-4">
         <div>
-          <label className="block text-sm font-medium mb-1">Skupina</label>
+          <label className="block text-sm font-medium mb-1">{t("tasks.form.group")}</label>
           <select
             value={groupId}
             onChange={(e) => setGroupId(e.target.value as any)}
             className="w-full px-3 py-2.5 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 focus:ring-2 focus:ring-blue-500 outline-none min-h-[44px]"
           >
-            <option value="">-- Bez skupiny --</option>
+            <option value="">{t("tasks.form.noGroup")}</option>
             {groups.map((g) => (
               <option key={g.id} value={g.id}>
                 {g.icon ? `${g.icon} ` : ""}{g.name}
@@ -158,7 +160,7 @@ export default function TaskForm({
         </div>
 
         <div>
-          <label className="block text-sm font-medium mb-1">Termín</label>
+          <label className="block text-sm font-medium mb-1">{t("tasks.form.dueDate")}</label>
           <input
             type="datetime-local"
             value={dueAt}
@@ -174,14 +176,14 @@ export default function TaskForm({
           disabled={loading}
           className="flex-1 bg-blue-600 hover:bg-blue-700 text-white font-medium py-2.5 px-4 rounded-lg transition-colors disabled:opacity-50 min-h-[44px]"
         >
-          {loading ? "Ukládám..." : submitLabel}
+          {loading ? t("tasks.form.saving") : (submitLabel || t("tasks.form.save"))}
         </button>
         <button
           type="button"
           onClick={onCancel}
           className="px-4 py-2.5 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors min-h-[44px]"
         >
-          Zrušit
+          {t("tasks.form.cancel")}
         </button>
       </div>
     </form>
diff --git a/apps/tasks/components/TaskModal.tsx b/apps/tasks/components/TaskModal.tsx
index 069e47d..4e8dba5 100644
--- a/apps/tasks/components/TaskModal.tsx
+++ b/apps/tasks/components/TaskModal.tsx
@@ -2,6 +2,7 @@
 
 import { useEffect, useState, useCallback } from "react";
 import { Group, Task } from "@/lib/api";
+import { useTranslation } from "@/lib/i18n";
 import TaskForm from "@/components/TaskForm";
 
 interface TaskModalProps {
@@ -12,6 +13,7 @@ interface TaskModalProps {
 
 export default function TaskModal({ groups, onSubmit, onClose }: TaskModalProps) {
   const [visible, setVisible] = useState(false);
+  const { t } = useTranslation();
 
   const handleClose = useCallback(() => {
     setVisible(false);
@@ -41,7 +43,7 @@ export default function TaskModal({ groups, onSubmit, onClose }: TaskModalProps)
       className="fixed inset-0 z-50 flex items-end sm:items-center justify-center"
       role="dialog"
       aria-modal="true"
-      aria-label="Nový úkol"
+      aria-label={t("tasks.newTask")}
     >
       {/* Backdrop */}
       <div
@@ -65,11 +67,11 @@ export default function TaskModal({ groups, onSubmit, onClose }: TaskModalProps)
         </div>
 
         <div className="flex items-center justify-between mb-5">
-          <h2 className="text-lg font-semibold">Nový úkol</h2>
+          <h2 className="text-lg font-semibold">{t("tasks.newTask")}</h2>
           <button
             onClick={handleClose}
             className="p-2 rounded-lg text-gray-400 hover:text-gray-600 dark:hover:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors min-w-[44px] min-h-[44px] flex items-center justify-center"
-            aria-label="Zavřít"
+            aria-label={t("tasks.close")}
           >
             <svg
               xmlns="http://www.w3.org/2000/svg"
@@ -90,7 +92,6 @@ export default function TaskModal({ groups, onSubmit, onClose }: TaskModalProps)
           groups={groups}
           onSubmit={onSubmit}
           onCancel={handleClose}
-          submitLabel="Vytvořit"
         />
       </div>
     </div>