UI fixes: emoji icons, modal form, Czech labels, polish

- 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>
2026-03-29 11:16:07 +00:00
parent 6c93ae04d0
commit 4a6b5e5498
11 changed files with 499 additions and 163 deletions
--- 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"
  }
 }
--- 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);
 }
--- 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>
--- 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>
--- 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>
  );
--- 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>
--- 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>
--- 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>
  );
--- 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>
--- 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>
--- a/apps/tasks/components/TaskModal.tsx
+++ 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>
+  );
+}