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