From 4a6b5e54983a16db1b62388324d10ea189c2a625 Mon Sep 17 00:00:00 2001
From: Claude CLI Agent <cli@taskteam.hasdo.info>
Date: Sun, 29 Mar 2026 11:16:07 +0000
Subject: [PATCH] UI fixes: emoji icons, modal form, Czech labels, polish
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Fixed group emoji icons in DB (💼🛒📚🗺️🏃✨🏠🌿)
- Added TaskModal component for + button
- Czech status labels (Čeká, Probíhá, Hotovo, Zrušeno)
- Improved TaskCard, GroupSelector, Header, StatusBadge
- Better dark/light mode transitions

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 apps/tasks/.eslintrc.json               |   5 +-
 apps/tasks/app/globals.css              |  52 ++++++++++
 apps/tasks/app/layout.tsx               |   2 +-
 apps/tasks/app/tasks/[id]/page.tsx      | 126 +++++++++++++++++-------
 apps/tasks/app/tasks/page.tsx           |  80 ++++++++-------
 apps/tasks/components/GroupSelector.tsx |  25 +++--
 apps/tasks/components/Header.tsx        |  47 ++++++---
 apps/tasks/components/StatusBadge.tsx   |  41 ++++++--
 apps/tasks/components/TaskCard.tsx      | 106 +++++++++++++-------
 apps/tasks/components/TaskForm.tsx      |  80 +++++++++------
 apps/tasks/components/TaskModal.tsx     |  98 ++++++++++++++++++
 11 files changed, 499 insertions(+), 163 deletions(-)
 create mode 100644 apps/tasks/components/TaskModal.tsx

diff --git a/apps/tasks/.eslintrc.json b/apps/tasks/.eslintrc.json
index 13015d6..40be9a4 100644
--- a/apps/tasks/.eslintrc.json
+++ b/apps/tasks/.eslintrc.json
@@ -1,6 +1,9 @@
 {
   "extends": "next/core-web-vitals",
   "rules": {
-    "@typescript-eslint/no-explicit-any": "off"
+    "@typescript-eslint/no-explicit-any": "off",
+    "react-hooks/exhaustive-deps": "warn",
+    "@next/next/no-img-element": "off",
+    "react/no-unescaped-entities": "off"
   }
 }
diff --git a/apps/tasks/app/globals.css b/apps/tasks/app/globals.css
index bb982a3..ec7a22a 100644
--- a/apps/tasks/app/globals.css
+++ b/apps/tasks/app/globals.css
@@ -24,6 +24,26 @@ body {
   background: var(--background);
   color: var(--foreground);
   font-family: system-ui, -apple-system, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  font-size: 16px; /* prevent auto-zoom on iOS */
+  max-width: 100vw;
+  overflow-x: hidden;
+}
+
+/* Mobile-first base */
+* {
+  box-sizing: border-box;
+  -webkit-tap-highlight-color: transparent;
+}
+
+input[type="text"],
+input[type="email"],
+input[type="password"],
+input[type="datetime-local"],
+textarea,
+select {
+  font-size: 16px; /* Prevent zoom on iOS */
 }
 
 @layer utilities {
@@ -34,4 +54,36 @@ body {
   .scrollbar-hide::-webkit-scrollbar {
     display: none;
   }
+
+  .text-muted {
+    color: var(--muted);
+  }
+}
+
+/* Smooth page transitions */
+main {
+  animation: fadeIn 0.15s ease-out;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(4px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* Mobile overscroll behavior */
+@media (max-width: 640px) {
+  html {
+    overscroll-behavior-y: contain;
+  }
+}
+
+/* Selection color */
+::selection {
+  background: rgba(59, 130, 246, 0.3);
 }
diff --git a/apps/tasks/app/layout.tsx b/apps/tasks/app/layout.tsx
index 120d1ce..c1e2365 100644
--- a/apps/tasks/app/layout.tsx
+++ b/apps/tasks/app/layout.tsx
@@ -37,7 +37,7 @@ export default function RootLayout({
         <ThemeProvider>
           <AuthProvider>
             <Header />
-            <main className="max-w-4xl mx-auto px-4 py-6">
+            <main className="max-w-4xl mx-auto py-4">
               {children}
             </main>
           </AuthProvider>
diff --git a/apps/tasks/app/tasks/[id]/page.tsx b/apps/tasks/app/tasks/[id]/page.tsx
index 2009531..9df4f8f 100644
--- a/apps/tasks/app/tasks/[id]/page.tsx
+++ b/apps/tasks/app/tasks/[id]/page.tsx
@@ -3,10 +3,21 @@
 import { useEffect, useState, useCallback } from "react";
 import { useRouter, useParams } from "next/navigation";
 import { useAuth } from "@/lib/auth";
-import { getTask, getGroups, updateTask, deleteTask, Task, Group } from "@/lib/api";
+import {
+  getTask,
+  getGroups,
+  updateTask,
+  deleteTask,
+  Task,
+  Group,
+} from "@/lib/api";
 import TaskForm from "@/components/TaskForm";
 import StatusBadge from "@/components/StatusBadge";
 
+function isDone(status: string): boolean {
+  return status === "done" || status === "completed";
+}
+
 export default function TaskDetailPage() {
   const { token } = useAuth();
   const router = useRouter();
@@ -30,7 +41,9 @@ export default function TaskDetailPage() {
       setTask(taskData);
       setGroups(groupsData.data || []);
     } catch (err) {
-      setError(err instanceof Error ? err.message : "Chyba pri nacitani ukolu");
+      setError(
+        err instanceof Error ? err.message : "Chyba p\u0159i na\u010d\u00edt\u00e1n\u00ed \u00fakolu"
+      );
     } finally {
       setLoading(false);
     }
@@ -53,13 +66,15 @@ export default function TaskDetailPage() {
 
   async function handleDelete() {
     if (!token || !id) return;
-    if (!confirm("Opravdu smazat tento ukol?")) return;
+    if (!confirm("Opravdu smazat tento \u00fakol?")) return;
     setDeleting(true);
     try {
       await deleteTask(token, id);
       router.push("/tasks");
     } catch (err) {
-      setError(err instanceof Error ? err.message : "Chyba pri mazani");
+      setError(
+        err instanceof Error ? err.message : "Chyba p\u0159i maz\u00e1n\u00ed"
+      );
       setDeleting(false);
     }
   }
@@ -70,7 +85,9 @@ export default function TaskDetailPage() {
       await updateTask(token, id, { status: newStatus });
       loadTask();
     } catch (err) {
-      setError(err instanceof Error ? err.message : "Chyba pri zmene stavu");
+      setError(
+        err instanceof Error ? err.message : "Chyba p\u0159i zm\u011bn\u011b stavu"
+      );
     }
   }
 
@@ -79,7 +96,7 @@ export default function TaskDetailPage() {
   if (loading) {
     return (
       <div className="flex justify-center py-12">
-        <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600"></div>
+        <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600" />
       </div>
     );
   }
@@ -87,12 +104,12 @@ export default function TaskDetailPage() {
   if (error || !task) {
     return (
       <div className="text-center py-12">
-        <p className="text-red-500">{error || "Ukol nenalezen"}</p>
+        <p className="text-red-500">{error || "\u00dakol nenalezen"}</p>
         <button
           onClick={() => router.push("/tasks")}
           className="mt-4 text-blue-600 hover:underline"
         >
-          Zpet na ukoly
+          Zp\u011bt na \u00fakoly
         </button>
       </div>
     );
@@ -101,25 +118,28 @@ export default function TaskDetailPage() {
   if (editing) {
     return (
       <div className="max-w-lg mx-auto">
-        <h1 className="text-xl font-bold mb-4">Upravit ukol</h1>
+        <h1 className="text-xl font-bold mb-4">Upravit \u00fakol</h1>
         <TaskForm
           groups={groups}
           initial={task}
           onSubmit={handleUpdate}
           onCancel={() => setEditing(false)}
-          submitLabel="Ulozit zmeny"
+          submitLabel="Ulo\u017eit zm\u011bny"
         />
       </div>
     );
   }
 
-  const PRIORITY_LABELS: Record<string, string> = {
-    low: "Nizka",
-    medium: "Stredni",
-    high: "Vysoka",
-    urgent: "Urgentni",
+  const PRIORITY_LABELS: Record<string, { label: string; dot: string }> = {
+    low: { label: "N\u00edzk\u00e1", dot: "\ud83d\udfe2" },
+    medium: { label: "St\u0159edn\u00ed", dot: "\ud83d\udfe1" },
+    high: { label: "Vysok\u00e1", dot: "\ud83d\udfe0" },
+    urgent: { label: "Urgentn\u00ed", dot: "\ud83d\udd34" },
   };
 
+  const pri = PRIORITY_LABELS[task.priority] || PRIORITY_LABELS.medium;
+  const taskDone = isDone(task.status);
+
   return (
     <div className="max-w-lg mx-auto space-y-6">
       {/* Back button */}
@@ -127,55 +147,89 @@ export default function TaskDetailPage() {
         onClick={() => router.push("/tasks")}
         className="text-sm text-muted hover:text-foreground flex items-center gap-1"
       >
-        <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
+        <svg
+          className="w-4 h-4"
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke="currentColor"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth={2}
+            d="M15 19l-7-7 7-7"
+          />
         </svg>
-        Zpet
+        Zp\u011bt
       </button>
 
       {/* Task detail card */}
       <div className="bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-2xl p-6">
         <div className="flex items-start justify-between gap-4 mb-4">
-          <h1 className={`text-xl font-bold ${task.status === "done" ? "line-through text-muted" : ""}`}>
-            {task.title}
-          </h1>
+          <div className="flex items-start gap-3">
+            {task.group_icon && (
+              <span className="text-2xl">{task.group_icon}</span>
+            )}
+            <h1
+              className={`text-xl font-bold ${
+                taskDone ? "line-through text-muted" : ""
+              }`}
+            >
+              {task.title}
+            </h1>
+          </div>
           <StatusBadge status={task.status} size="md" />
         </div>
 
         {task.description && (
-          <p className="text-muted mb-4 whitespace-pre-wrap">{task.description}</p>
+          <p className="text-muted mb-4 whitespace-pre-wrap leading-relaxed">
+            {task.description}
+          </p>
         )}
 
         <div className="grid grid-cols-2 gap-3 text-sm">
           <div>
             <span className="text-muted">Priorita:</span>
-            <span className="ml-2 font-medium">{PRIORITY_LABELS[task.priority]}</span>
+            <span className="ml-2 font-medium">
+              {pri.dot} {pri.label}
+            </span>
           </div>
           {task.group_name && (
             <div>
               <span className="text-muted">Skupina:</span>
               <span
                 className="ml-2 inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium text-white"
-                style={{ backgroundColor: task.group_color || "#6b7280" }}
+                style={{
+                  backgroundColor: task.group_color || "#6b7280",
+                }}
               >
+                {task.group_icon && (
+                  <span className="mr-1">{task.group_icon}</span>
+                )}
                 {task.group_name}
               </span>
             </div>
           )}
           {task.due_at && (
             <div>
-              <span className="text-muted">Termin:</span>
-              <span className="ml-2">{new Date(task.due_at).toLocaleString("cs-CZ")}</span>
+              <span className="text-muted">Term\u00edn:</span>
+              <span className="ml-2">
+                {new Date(task.due_at).toLocaleString("cs-CZ")}
+              </span>
             </div>
           )}
           <div>
-            <span className="text-muted">Vytvoreno:</span>
-            <span className="ml-2">{new Date(task.created_at).toLocaleString("cs-CZ")}</span>
+            <span className="text-muted">Vytvo\u0159eno:</span>
+            <span className="ml-2">
+              {new Date(task.created_at).toLocaleString("cs-CZ")}
+            </span>
           </div>
           {task.completed_at && (
             <div>
-              <span className="text-muted">Dokonceno:</span>
-              <span className="ml-2">{new Date(task.completed_at).toLocaleString("cs-CZ")}</span>
+              <span className="text-muted">Dokon\u010deno:</span>
+              <span className="ml-2">
+                {new Date(task.completed_at).toLocaleString("cs-CZ")}
+              </span>
             </div>
           )}
         </div>
@@ -183,12 +237,12 @@ export default function TaskDetailPage() {
 
       {/* Quick status buttons */}
       <div className="flex gap-2 flex-wrap">
-        {task.status !== "done" && (
+        {!taskDone && (
           <button
             onClick={() => handleQuickStatus("done")}
             className="px-4 py-2 bg-green-600 hover:bg-green-700 text-white rounded-lg text-sm font-medium transition-colors"
           >
-            Oznacit jako hotove
+            Ozna\u010dit jako hotov\u00e9
           </button>
         )}
         {task.status === "pending" && (
@@ -196,15 +250,15 @@ export default function TaskDetailPage() {
             onClick={() => handleQuickStatus("in_progress")}
             className="px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg text-sm font-medium transition-colors"
           >
-            Zahajit
+            Zah\u00e1jit
           </button>
         )}
-        {task.status === "done" && (
+        {taskDone && (
           <button
             onClick={() => handleQuickStatus("pending")}
             className="px-4 py-2 bg-yellow-600 hover:bg-yellow-700 text-white rounded-lg text-sm font-medium transition-colors"
           >
-            Znovu otevrit
+            Znovu otev\u0159\u00edt
           </button>
         )}
       </div>
@@ -222,7 +276,7 @@ export default function TaskDetailPage() {
           disabled={deleting}
           className="px-6 py-2.5 border border-red-300 dark:border-red-800 text-red-600 dark:text-red-400 rounded-lg hover:bg-red-50 dark:hover:bg-red-900/20 transition-colors font-medium disabled:opacity-50"
         >
-          {deleting ? "Mazu..." : "Smazat"}
+          {deleting ? "Ma\u017eu..." : "Smazat"}
         </button>
       </div>
     </div>
diff --git a/apps/tasks/app/tasks/page.tsx b/apps/tasks/app/tasks/page.tsx
index bbf04ce..9a023c3 100644
--- a/apps/tasks/app/tasks/page.tsx
+++ b/apps/tasks/app/tasks/page.tsx
@@ -6,7 +6,7 @@ import { useAuth } from "@/lib/auth";
 import { getTasks, getGroups, createTask, Task, Group } from "@/lib/api";
 import TaskCard from "@/components/TaskCard";
 import GroupSelector from "@/components/GroupSelector";
-import TaskForm from "@/components/TaskForm";
+import TaskModal from "@/components/TaskModal";
 
 type StatusFilter = "all" | "pending" | "in_progress" | "done" | "cancelled";
 
@@ -35,7 +35,7 @@ export default function TasksPage() {
       setTasks(tasksRes.data || []);
       setGroups(groupsRes.data || []);
     } catch (err) {
-      console.error("Chyba pri nacitani:", err);
+      console.error("Chyba p\u0159i na\u010d\u00edt\u00e1n\u00ed:", err);
     } finally {
       setLoading(false);
     }
@@ -57,19 +57,23 @@ export default function TasksPage() {
   }
 
   const statusOptions: { value: StatusFilter; label: string }[] = [
-    { value: "all", label: "Vse" },
-    { value: "pending", label: "Ceka" },
-    { value: "in_progress", label: "Probiha" },
+    { value: "all", label: "V\u0161e" },
+    { value: "pending", label: "\u010Cek\u00e1" },
+    { value: "in_progress", label: "Prob\u00edh\u00e1" },
     { value: "done", label: "Hotovo" },
-    { value: "cancelled", label: "Zruseno" },
+    { value: "cancelled", label: "Zru\u0161eno" },
   ];
 
   if (!token) return null;
 
   return (
-    <div className="space-y-4">
+    <div className="space-y-4 pb-24">
       {/* Group tabs */}
-      <GroupSelector groups={groups} selected={selectedGroup} onSelect={setSelectedGroup} />
+      <GroupSelector
+        groups={groups}
+        selected={selectedGroup}
+        onSelect={setSelectedGroup}
+      />
 
       {/* Status filter */}
       <div className="flex gap-1.5 overflow-x-auto scrollbar-hide pb-1">
@@ -77,7 +81,7 @@ export default function TasksPage() {
           <button
             key={opt.value}
             onClick={() => setStatusFilter(opt.value)}
-            className={`flex-shrink-0 px-3 py-1.5 rounded-lg text-xs font-medium transition-all ${
+            className={`flex-shrink-0 px-3 py-1.5 rounded-lg text-xs font-medium transition-all min-h-[36px] ${
               statusFilter === opt.value
                 ? "bg-gray-800 text-white dark:bg-white dark:text-gray-900"
                 : "bg-gray-100 dark:bg-gray-800 text-gray-500 dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-gray-700"
@@ -88,29 +92,18 @@ export default function TasksPage() {
         ))}
       </div>
 
-      {/* Task creation form */}
-      {showForm && (
-        <div className="bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-2xl p-5">
-          <h2 className="text-lg font-semibold mb-4">Novy ukol</h2>
-          <TaskForm
-            groups={groups}
-            onSubmit={handleCreateTask}
-            onCancel={() => setShowForm(false)}
-            submitLabel="Vytvorit"
-          />
-        </div>
-      )}
-
       {/* Task list */}
       {loading ? (
         <div className="flex justify-center py-12">
-          <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600"></div>
+          <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600" />
         </div>
       ) : tasks.length === 0 ? (
         <div className="text-center py-16">
-          <div className="text-4xl mb-3">&#9744;</div>
-          <p className="text-muted text-lg">Zadne ukoly</p>
-          <p className="text-muted text-sm mt-1">Vytvorte prvni ukol pomoci tlacitka +</p>
+          <div className="text-5xl mb-4 opacity-50">&#9744;</div>
+          <p className="text-muted text-lg font-medium">\u017d\u00e1dn\u00e9 \u00fakoly</p>
+          <p className="text-muted text-sm mt-1">
+            Vytvo\u0159te prvn\u00ed \u00fakol pomoc\u00ed tla\u010d\u00edtka +
+          </p>
         </div>
       ) : (
         <div className="space-y-2">
@@ -120,15 +113,34 @@ export default function TasksPage() {
         </div>
       )}
 
-      {/* Floating add button */}
-      {!showForm && (
-        <button
-          onClick={() => setShowForm(true)}
-          className="fixed bottom-6 right-6 w-14 h-14 bg-blue-600 hover:bg-blue-700 text-white rounded-full shadow-lg hover:shadow-xl transition-all flex items-center justify-center text-2xl font-light"
-          aria-label="Pridat ukol"
+      {/* Floating action button */}
+      <button
+        onClick={() => setShowForm(true)}
+        className="fixed bottom-6 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="P\u0159idat \u00fakol"
+      >
+        <svg
+          className="w-7 h-7"
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke="currentColor"
+          strokeWidth={2.5}
         >
-          +
-        </button>
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            d="M12 4v16m8-8H4"
+          />
+        </svg>
+      </button>
+
+      {/* Add task modal */}
+      {showForm && (
+        <TaskModal
+          groups={groups}
+          onSubmit={handleCreateTask}
+          onClose={() => setShowForm(false)}
+        />
       )}
     </div>
   );
diff --git a/apps/tasks/components/GroupSelector.tsx b/apps/tasks/components/GroupSelector.tsx
index f49e8a2..94255ae 100644
--- a/apps/tasks/components/GroupSelector.tsx
+++ b/apps/tasks/components/GroupSelector.tsx
@@ -8,34 +8,43 @@ interface GroupSelectorProps {
   onSelect: (id: string | null) => void;
 }
 
-export default function GroupSelector({ groups, selected, onSelect }: GroupSelectorProps) {
+export default function GroupSelector({
+  groups,
+  selected,
+  onSelect,
+}: GroupSelectorProps) {
   return (
-    <div className="flex gap-2 overflow-x-auto scrollbar-hide py-2 px-1">
+    <div
+      className="flex gap-2 overflow-x-auto scrollbar-hide px-4 py-3"
+      style={{ WebkitOverflowScrolling: "touch" } as React.CSSProperties}
+    >
       <button
         onClick={() => onSelect(null)}
-        className={`flex-shrink-0 px-4 py-2 rounded-full text-sm font-medium transition-all ${
+        className={`flex-shrink-0 px-4 py-2 rounded-full text-sm font-medium transition-all min-h-[36px] whitespace-nowrap ${
           selected === null
-            ? "bg-gray-800 text-white dark:bg-white dark:text-gray-900"
+            ? "bg-gray-800 text-white dark:bg-white dark:text-gray-900 shadow-md"
             : "bg-gray-100 text-gray-600 dark:bg-gray-800 dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-gray-700"
         }`}
       >
-        Vse
+        V\u0161e
       </button>
       {groups.map((g) => (
         <button
           key={g.id}
           onClick={() => onSelect(g.id)}
-          className={`flex-shrink-0 px-4 py-2 rounded-full text-sm font-medium transition-all ${
+          className={`flex-shrink-0 px-4 py-2 rounded-full text-sm font-medium transition-all min-h-[36px] flex items-center gap-1.5 whitespace-nowrap ${
             selected === g.id
               ? "text-white shadow-md"
-              : "text-gray-600 dark:text-gray-400 hover:opacity-80"
+              : "hover:opacity-80"
           }`}
           style={{
             backgroundColor: selected === g.id ? g.color : undefined,
             border: selected !== g.id ? `2px solid ${g.color}` : undefined,
+            color: selected !== g.id ? g.color : undefined,
           }}
         >
-          {g.icon ? `${g.icon} ` : ""}{g.name}
+          {g.icon && <span className="text-base">{g.icon}</span>}
+          <span>{g.name}</span>
         </button>
       ))}
     </div>
diff --git a/apps/tasks/components/Header.tsx b/apps/tasks/components/Header.tsx
index 7cd3ebe..ce7f38f 100644
--- a/apps/tasks/components/Header.tsx
+++ b/apps/tasks/components/Header.tsx
@@ -18,43 +18,66 @@ export default function Header() {
   return (
     <header className="sticky top-0 z-50 bg-white/80 dark:bg-gray-950/80 backdrop-blur-md border-b border-gray-200 dark:border-gray-800">
       <div className="max-w-4xl mx-auto px-4 h-14 flex items-center justify-between">
-        <Link href="/tasks" className="text-lg font-bold tracking-tight">
-          Task Team
+        <Link href="/tasks" className="flex items-center gap-2">
+          <div className="w-8 h-8 bg-blue-600 rounded-lg flex items-center justify-center">
+            <svg className="w-4 h-4 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2.5}>
+              <path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7" />
+            </svg>
+          </div>
+          <span className="text-lg font-bold tracking-tight">Task Team</span>
         </Link>
 
-        <div className="flex items-center gap-3">
+        <div className="flex items-center gap-2">
+          {/* Theme toggle */}
           <button
             onClick={toggleTheme}
-            className="p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
-            aria-label="Prepnout tema"
+            className="p-2.5 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors min-w-[44px] min-h-[44px] flex items-center justify-center"
+            aria-label="P\u0159epnout t\u00e9ma"
           >
             {theme === "dark" ? (
               <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" />
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={2}
+                  d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"
+                />
               </svg>
             ) : (
               <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={2}
+                  d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"
+                />
               </svg>
             )}
           </button>
 
           {token && user ? (
             <div className="flex items-center gap-2">
-              <span className="text-sm text-muted hidden sm:inline">{user.name || user.email}</span>
+              <div className="hidden sm:flex items-center gap-2">
+                <div className="w-7 h-7 bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300 rounded-full flex items-center justify-center text-xs font-bold">
+                  {(user.name || user.email || "?").charAt(0).toUpperCase()}
+                </div>
+                <span className="text-sm text-muted max-w-[120px] truncate">
+                  {user.name || user.email}
+                </span>
+              </div>
               <button
                 onClick={handleLogout}
-                className="text-sm px-3 py-1.5 rounded-lg border border-gray-300 dark:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors"
+                className="text-sm px-3 py-1.5 rounded-lg border border-gray-300 dark:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors min-h-[44px] flex items-center"
               >
-                Odhlasit
+                Odhl\u00e1sit
               </button>
             </div>
           ) : (
             <Link
               href="/login"
-              className="text-sm px-3 py-1.5 rounded-lg bg-blue-600 text-white hover:bg-blue-700 transition-colors"
+              className="text-sm px-4 py-2 rounded-lg bg-blue-600 text-white hover:bg-blue-700 transition-colors min-h-[44px] flex items-center"
             >
-              Prihlasit
+              P\u0159ihl\u00e1sit
             </Link>
           )}
         </div>
diff --git a/apps/tasks/components/StatusBadge.tsx b/apps/tasks/components/StatusBadge.tsx
index a78061b..93f08a0 100644
--- a/apps/tasks/components/StatusBadge.tsx
+++ b/apps/tasks/components/StatusBadge.tsx
@@ -5,11 +5,37 @@ interface StatusBadgeProps {
   size?: "sm" | "md";
 }
 
-const STATUS_MAP: Record<string, { label: string; bg: string; text: string }> = {
-  pending: { label: "Ceka", bg: "bg-yellow-100 dark:bg-yellow-900/30", text: "text-yellow-800 dark:text-yellow-300" },
-  in_progress: { label: "Probiha", bg: "bg-blue-100 dark:bg-blue-900/30", text: "text-blue-800 dark:text-blue-300" },
-  done: { label: "Hotovo", bg: "bg-green-100 dark:bg-green-900/30", text: "text-green-800 dark:text-green-300" },
-  cancelled: { label: "Zruseno", bg: "bg-gray-100 dark:bg-gray-800/30", text: "text-gray-600 dark:text-gray-400" },
+const STATUS_MAP: Record<string, { label: string; bg: string; text: string; dot: string }> = {
+  pending: {
+    label: "\u010Cek\u00e1",
+    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\u00edh\u00e1",
+    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\u0161eno",
+    bg: "bg-gray-100 dark:bg-gray-800/30",
+    text: "text-gray-600 dark:text-gray-400",
+    dot: "bg-gray-400",
+  },
 };
 
 export default function StatusBadge({ status, size = "sm" }: StatusBadgeProps) {
@@ -17,7 +43,10 @@ export default function StatusBadge({ status, size = "sm" }: StatusBadgeProps) {
   const sizeClass = size === "sm" ? "px-2 py-0.5 text-xs" : "px-3 py-1 text-sm";
 
   return (
-    <span className={`inline-flex items-center rounded-full font-medium ${s.bg} ${s.text} ${sizeClass}`}>
+    <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}
     </span>
   );
diff --git a/apps/tasks/components/TaskCard.tsx b/apps/tasks/components/TaskCard.tsx
index 7d47836..8a5e341 100644
--- a/apps/tasks/components/TaskCard.tsx
+++ b/apps/tasks/components/TaskCard.tsx
@@ -8,54 +8,86 @@ interface TaskCardProps {
   task: Task;
 }
 
-const PRIORITY_INDICATOR: Record<string, string> = {
-  urgent: "border-l-red-500",
-  high: "border-l-orange-500",
-  medium: "border-l-yellow-500",
-  low: "border-l-green-500",
+const PRIORITY_DOT: Record<string, string> = {
+  urgent: "\ud83d\udd34",
+  high: "\ud83d\udfe0",
+  medium: "\ud83d\udfe1",
+  low: "\ud83d\udfe2",
 };
 
+function isDone(status: string): boolean {
+  return status === "done" || status === "completed";
+}
+
 export default function TaskCard({ task }: TaskCardProps) {
-  const priorityClass = PRIORITY_INDICATOR[task.priority] || PRIORITY_INDICATOR.medium;
+  const dot = PRIORITY_DOT[task.priority] || PRIORITY_DOT.medium;
+  const groupColor = task.group_color || "#6b7280";
+  const taskDone = isDone(task.status);
 
   return (
-    <Link href={`/tasks/${task.id}`}>
-      <div
-        className={`bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 border-l-4 ${priorityClass} rounded-lg p-4 hover:shadow-md transition-shadow cursor-pointer`}
-      >
-        <div className="flex items-start justify-between gap-3">
-          <div className="flex-1 min-w-0">
-            <h3
-              className={`font-medium truncate ${
-                task.status === "done" ? "line-through text-muted" : ""
-              }`}
-            >
-              {task.title}
-            </h3>
-            {task.description && (
-              <p className="text-sm text-muted mt-1 line-clamp-2">{task.description}</p>
+    <Link href={`/tasks/${task.id}`} className="block group">
+      <div className="relative bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-xl overflow-hidden hover:shadow-lg transition-all duration-200 active:scale-[0.98]">
+        {/* Color bar on left */}
+        <div
+          className="absolute left-0 top-0 bottom-0 w-1 rounded-l-xl"
+          style={{ backgroundColor: groupColor }}
+        />
+
+        <div className="pl-4 pr-4 py-3.5">
+          <div className="flex items-start gap-3">
+            {/* Group icon */}
+            {task.group_icon && (
+              <span className="text-xl flex-shrink-0 mt-0.5">{task.group_icon}</span>
             )}
-            <div className="flex items-center gap-2 mt-2 flex-wrap">
-              <StatusBadge status={task.status} />
-              {task.group_name && (
-                <span
-                  className="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium text-white"
-                  style={{ backgroundColor: task.group_color || "#6b7280" }}
+
+            {/* Content */}
+            <div className="flex-1 min-w-0">
+              <div className="flex items-start justify-between gap-2">
+                <h3
+                  className={`font-semibold text-[15px] leading-snug ${
+                    taskDone ? "line-through text-muted" : ""
+                  }`}
                 >
-                  {task.group_name}
-                </span>
-              )}
-              {task.due_at && (
-                <span className="text-xs text-muted">
-                  {new Date(task.due_at).toLocaleDateString("cs-CZ")}
+                  {task.title}
+                </h3>
+                <span className="flex-shrink-0 text-sm" title={task.priority}>
+                  {dot}
                 </span>
+              </div>
+
+              {task.description && (
+                <p className="text-sm text-muted mt-1 line-clamp-2 leading-relaxed">
+                  {task.description}
+                </p>
               )}
+
+              <div className="flex items-center gap-2 mt-2.5 flex-wrap">
+                <StatusBadge status={task.status} />
+                {task.group_name && (
+                  <span
+                    className="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium text-white"
+                    style={{ backgroundColor: groupColor }}
+                  >
+                    {task.group_name}
+                  </span>
+                )}
+                {task.due_at && (
+                  <span className="text-xs text-muted flex items-center gap-1">
+                    <svg className="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
+                    </svg>
+                    {new Date(task.due_at).toLocaleDateString("cs-CZ")}
+                  </span>
+                )}
+              </div>
             </div>
           </div>
-          <div className="flex-shrink-0">
-            <span className="text-xs text-muted">
-              {task.priority === "urgent" ? "!!!" : task.priority === "high" ? "!!" : task.priority === "medium" ? "!" : ""}
-            </span>
+
+          {/* Swipe hint on mobile */}
+          <div className="absolute right-2 top-1/2 -translate-y-1/2 opacity-0 group-hover:opacity-30 transition-opacity sm:hidden">
+            <svg className="w-4 h-4 text-muted" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
+            </svg>
           </div>
         </div>
       </div>
diff --git a/apps/tasks/components/TaskForm.tsx b/apps/tasks/components/TaskForm.tsx
index 82f79d6..dfd300c 100644
--- a/apps/tasks/components/TaskForm.tsx
+++ b/apps/tasks/components/TaskForm.tsx
@@ -12,33 +12,41 @@ interface TaskFormProps {
 }
 
 const STATUSES = [
-  { value: "pending", label: "Ceka" },
-  { value: "in_progress", label: "Probiha" },
+  { value: "pending", label: "\u010Cek\u00e1" },
+  { value: "in_progress", label: "Prob\u00edh\u00e1" },
   { value: "done", label: "Hotovo" },
-  { value: "cancelled", label: "Zruseno" },
+  { value: "cancelled", label: "Zru\u0161eno" },
 ];
 
 const PRIORITIES = [
-  { value: "low", label: "Nizka" },
-  { value: "medium", label: "Stredni" },
-  { value: "high", label: "Vysoka" },
-  { value: "urgent", label: "Urgentni" },
+  { value: "low", label: "N\u00edzk\u00e1" },
+  { value: "medium", label: "St\u0159edn\u00ed" },
+  { value: "high", label: "Vysok\u00e1" },
+  { value: "urgent", label: "Urgentn\u00ed" },
 ];
 
-export default function TaskForm({ groups, initial, onSubmit, onCancel, submitLabel = "Ulozit" }: TaskFormProps) {
+export default function TaskForm({
+  groups,
+  initial,
+  onSubmit,
+  onCancel,
+  submitLabel = "Ulo\u017eit",
+}: TaskFormProps) {
   const [title, setTitle] = useState(initial?.title || "");
   const [description, setDescription] = useState(initial?.description || "");
   const [status, setStatus] = useState(initial?.status || "pending");
   const [priority, setPriority] = useState(initial?.priority || "medium");
   const [groupId, setGroupId] = useState(initial?.group_id || "");
-  const [dueAt, setDueAt] = useState(initial?.due_at ? initial.due_at.slice(0, 16) : "");
+  const [dueAt, setDueAt] = useState(
+    initial?.due_at ? initial.due_at.slice(0, 16) : ""
+  );
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState("");
 
   async function handleSubmit(e: React.FormEvent) {
     e.preventDefault();
     if (!title.trim()) {
-      setError("Nazev je povinny");
+      setError("N\u00e1zev je povinn\u00fd");
       return;
     }
     setLoading(true);
@@ -53,7 +61,9 @@ export default function TaskForm({ groups, initial, onSubmit, onCancel, submitLa
         due_at: dueAt ? new Date(dueAt).toISOString() : null,
       });
     } catch (err) {
-      setError(err instanceof Error ? err.message : "Chyba pri ukladani");
+      setError(
+        err instanceof Error ? err.message : "Chyba p\u0159i ukl\u00e1d\u00e1n\u00ed"
+      );
     } finally {
       setLoading(false);
     }
@@ -68,13 +78,13 @@ export default function TaskForm({ groups, initial, onSubmit, onCancel, submitLa
       )}
 
       <div>
-        <label className="block text-sm font-medium mb-1">Nazev *</label>
+        <label className="block text-sm font-medium mb-1">N\u00e1zev *</label>
         <input
           type="text"
           value={title}
           onChange={(e) => setTitle(e.target.value)}
-          className="w-full px-3 py-2 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"
-          placeholder="Co je treba udelat..."
+          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\u0159eba ud\u011blat..."
           autoFocus
         />
       </div>
@@ -85,7 +95,7 @@ export default function TaskForm({ groups, initial, onSubmit, onCancel, submitLa
           value={description}
           onChange={(e) => setDescription(e.target.value)}
           rows={3}
-          className="w-full px-3 py-2 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"
+          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..."
         />
       </div>
@@ -95,11 +105,21 @@ export default function TaskForm({ groups, initial, onSubmit, onCancel, submitLa
           <label className="block text-sm font-medium mb-1">Stav</label>
           <select
             value={status}
-            onChange={(e) => setStatus(e.target.value as "pending" | "in_progress" | "done" | "cancelled")}
-            className="w-full px-3 py-2 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"
+            onChange={(e) =>
+              setStatus(
+                e.target.value as
+                  | "pending"
+                  | "in_progress"
+                  | "done"
+                  | "cancelled"
+              )
+            }
+            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]"
           >
             {STATUSES.map((s) => (
-              <option key={s.value} value={s.value}>{s.label}</option>
+              <option key={s.value} value={s.value}>
+                {s.label}
+              </option>
             ))}
           </select>
         </div>
@@ -109,10 +129,12 @@ export default function TaskForm({ groups, initial, onSubmit, onCancel, submitLa
           <select
             value={priority}
             onChange={(e) => setPriority(e.target.value as any)}
-            className="w-full px-3 py-2 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"
+            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]"
           >
             {PRIORITIES.map((p) => (
-              <option key={p.value} value={p.value}>{p.label}</option>
+              <option key={p.value} value={p.value}>
+                {p.label}
+              </option>
             ))}
           </select>
         </div>
@@ -124,22 +146,24 @@ export default function TaskForm({ groups, initial, onSubmit, onCancel, submitLa
           <select
             value={groupId}
             onChange={(e) => setGroupId(e.target.value as any)}
-            className="w-full px-3 py-2 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"
+            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>
             {groups.map((g) => (
-              <option key={g.id} value={g.id}>{g.name}</option>
+              <option key={g.id} value={g.id}>
+                {g.icon ? `${g.icon} ` : ""}{g.name}
+              </option>
             ))}
           </select>
         </div>
 
         <div>
-          <label className="block text-sm font-medium mb-1">Termin</label>
+          <label className="block text-sm font-medium mb-1">Term\u00edn</label>
           <input
             type="datetime-local"
             value={dueAt}
             onChange={(e) => setDueAt(e.target.value)}
-            className="w-full px-3 py-2 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"
+            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]"
           />
         </div>
       </div>
@@ -148,16 +172,16 @@ export default function TaskForm({ groups, initial, onSubmit, onCancel, submitLa
         <button
           type="submit"
           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"
+          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 ? "Ukladam..." : submitLabel}
+          {loading ? "Ukl\u00e1d\u00e1m..." : submitLabel}
         </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"
+          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]"
         >
-          Zrusit
+          Zru\u0161it
         </button>
       </div>
     </form>
diff --git a/apps/tasks/components/TaskModal.tsx b/apps/tasks/components/TaskModal.tsx
new file mode 100644
index 0000000..67be9de
--- /dev/null
+++ b/apps/tasks/components/TaskModal.tsx
@@ -0,0 +1,98 @@
+"use client";
+
+import { useEffect, useState, useCallback } from "react";
+import { Group, Task } from "@/lib/api";
+import TaskForm from "@/components/TaskForm";
+
+interface TaskModalProps {
+  groups: Group[];
+  onSubmit: (data: Partial<Task>) => Promise<void>;
+  onClose: () => void;
+}
+
+export default function TaskModal({ groups, onSubmit, onClose }: TaskModalProps) {
+  const [visible, setVisible] = useState(false);
+
+  const handleClose = useCallback(() => {
+    setVisible(false);
+    setTimeout(onClose, 200);
+  }, [onClose]);
+
+  useEffect(() => {
+    // Trigger enter animation on next frame
+    requestAnimationFrame(() => setVisible(true));
+  }, []);
+
+  useEffect(() => {
+    function handleKeyDown(e: KeyboardEvent) {
+      if (e.key === "Escape") handleClose();
+    }
+    document.addEventListener("keydown", handleKeyDown);
+    // Prevent body scroll
+    document.body.style.overflow = "hidden";
+    return () => {
+      document.removeEventListener("keydown", handleKeyDown);
+      document.body.style.overflow = "";
+    };
+  }, [handleClose]);
+
+  return (
+    <div
+      className="fixed inset-0 z-50 flex items-end sm:items-center justify-center"
+      role="dialog"
+      aria-modal="true"
+      aria-label="Nov\u00fd \u00fakol"
+    >
+      {/* Backdrop */}
+      <div
+        className={`absolute inset-0 bg-black/50 backdrop-blur-sm transition-opacity duration-200 ${
+          visible ? "opacity-100" : "opacity-0"
+        }`}
+        onClick={handleClose}
+      />
+
+      {/* Modal panel with slide-up animation */}
+      <div
+        className={`relative w-full sm:max-w-lg bg-white dark:bg-gray-900 rounded-t-2xl sm:rounded-2xl shadow-2xl p-6 transition-all duration-200 ease-out ${
+          visible
+            ? "translate-y-0 opacity-100"
+            : "translate-y-8 opacity-0"
+        }`}
+      >
+        {/* Drag handle for mobile */}
+        <div className="flex justify-center mb-3 sm:hidden">
+          <div className="w-10 h-1 bg-gray-300 dark:bg-gray-600 rounded-full" />
+        </div>
+
+        <div className="flex items-center justify-between mb-5">
+          <h2 className="text-lg font-semibold">Nov\u00fd \u00fakol</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\u0159\u00edt"
+          >
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              className="h-5 w-5"
+              viewBox="0 0 20 20"
+              fill="currentColor"
+            >
+              <path
+                fillRule="evenodd"
+                d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
+                clipRule="evenodd"
+              />
+            </svg>
+          </button>
+        </div>
+
+        <TaskForm
+          groups={groups}
+          onSubmit={onSubmit}
+          onCancel={handleClose}
+          submitLabel="Vytvo\u0159it"
+        />
+      </div>
+    </div>
+  );
+}