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/GroupSelector.tsx

@@ -0,0 +1,43 @@
+"use client";
+
+import { Group } from "@/lib/api";
+
+interface GroupSelectorProps {
+  groups: Group[];
+  selected: string | null;
+  onSelect: (id: string | null) => void;
+}
+
+export default function GroupSelector({ groups, selected, onSelect }: GroupSelectorProps) {
+  return (
+    <div className="flex gap-2 overflow-x-auto scrollbar-hide py-2 px-1">
+      <button
+        onClick={() => onSelect(null)}
+        className={`flex-shrink-0 px-4 py-2 rounded-full text-sm font-medium transition-all ${
+          selected === null
+            ? "bg-gray-800 text-white dark:bg-white dark:text-gray-900"
+            : "bg-gray-100 text-gray-600 dark:bg-gray-800 dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-gray-700"
+        }`}
+      >
+        Vse
+      </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 ${
+            selected === g.id
+              ? "text-white shadow-md"
+              : "text-gray-600 dark:text-gray-400 hover:opacity-80"
+          }`}
+          style={{
+            backgroundColor: selected === g.id ? g.color : undefined,
+            border: selected !== g.id ? `2px solid ${g.color}` : undefined,
+          }}
+        >
+          {g.icon ? `${g.icon} ` : ""}{g.name}
+        </button>
+      ))}
+    </div>
+  );
+}