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>

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>

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>

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>
   );

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>

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>

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>
+  );
+}