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