Add Next.js frontend PWA

- Pages: login, register, tasks list, task detail
- Components: TaskCard, TaskForm, GroupSelector, StatusBadge, Header
- Tailwind CSS, dark/light mode, PWA manifest
- Running on :3001 via systemd

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

apps/tasks/components/TaskCard.tsx

@@ -0,0 +1,64 @@
+"use client";
+
+import { Task } from "@/lib/api";
+import StatusBadge from "./StatusBadge";
+import Link from "next/link";
+
+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",
+};
+
+export default function TaskCard({ task }: TaskCardProps) {
+  const priorityClass = PRIORITY_INDICATOR[task.priority] || PRIORITY_INDICATOR.medium;
+
+  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>
+            )}
+            <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" }}
+                >
+                  {task.group_name}
+                </span>
+              )}
+              {task.due_at && (
+                <span className="text-xs text-muted">
+                  {new Date(task.due_at).toLocaleDateString("cs-CZ")}
+                </span>
+              )}
+            </div>
+          </div>
+          <div className="flex-shrink-0">
+            <span className="text-xs text-muted">
+              {task.priority === "urgent" ? "!!!" : task.priority === "high" ? "!!" : task.priority === "medium" ? "!" : ""}
+            </span>
+          </div>
+        </div>
+      </div>
+    </Link>
+  );
+}