T1/Phase 1: scaffold Vite SPA + Hono API + Bun worker

- apps/web: Vite + React 19 + TanStack Router/Query + shadcn/ui - apps/api: Hono + Bun on :3001 with /api/health, /api/auth/*, /mcp stubs - apps/worker: Bun worker stub, DB connection, graceful SIGTERM - apps/web-legacy/: old Next.js code moved aside (preserved for T2-T8 reference) - Dockerfiles: api (Bun), worker (Bun), spa (multi-stage Caddy) - Caddyfile: serves dist + reverse-proxies /api/* + /mcp to api - docker-compose.yml: 4-service target (api, spa, db, worker) - packages/db/src/client.ts: shared Drizzle client for api + worker - db/client.ts: root-level alias for convenience Parent: t_e1cbd87d -> t_24c9c3fd (T0)
2026-08-01 01:15:31 +00:00
parent 9203aee758
commit fca56ab77e
312 changed files with 3489 additions and 196 deletions
@@ -0,0 +1,98 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { Flame } from 'lucide-react';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Checkbox } from '@/components/ui/checkbox';
+
+interface Habit {
+  id: string;
+  name: string;
+  current_streak: number;
+  logged_today: boolean;
+}
+
+export function HabitChecklistWidget() {
+  const [habits, setHabits] = useState<Habit[]>([]);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    fetchHabits();
+  }, []);
+
+  async function fetchHabits() {
+    try {
+      const response = await fetch('/api/habits');
+      if (response.ok) {
+        const data = await response.json();
+        setHabits(data.items || []);
+      }
+    } catch (error) {
+      console.error('Failed to fetch habits:', error);
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  async function toggleHabit(id: string) {
+    try {
+      await fetch(`/api/habits/${id}/logs`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({}),
+      });
+      fetchHabits();
+    } catch (error) {
+      console.error('Failed to log habit:', error);
+    }
+  }
+
+  const completedCount = habits.filter((h) => h.logged_today).length;
+
+  return (
+    <Card className="h-full border-0 shadow-none">
+      <CardHeader className="p-0 pb-3">
+        <div className="flex items-center justify-between">
+          <CardTitle className="flex items-center gap-2 text-base">
+            <Flame className="h-4 w-4 text-orange-500" aria-hidden="true" />
+            Habits
+          </CardTitle>
+          <span className="text-xs text-muted-foreground">
+            {completedCount}/{habits.length} done
+          </span>
+        </div>
+      </CardHeader>
+      <CardContent className="p-0">
+        {loading ? (
+          <p className="text-sm text-muted-foreground">Loading...</p>
+        ) : habits.length === 0 ? (
+          <p className="text-sm text-muted-foreground">No habits tracked</p>
+        ) : (
+          <div className="space-y-2">
+            {habits.slice(0, 5).map((habit) => (
+              <div key={habit.id} className="flex items-center gap-2">
+                <Checkbox
+                  id={habit.id}
+                  checked={habit.logged_today}
+                  onCheckedChange={() => toggleHabit(habit.id)}
+                  aria-label={`Mark "${habit.name}" as ${habit.logged_today ? 'incomplete' : 'complete'}`}
+                />
+                <label
+                  htmlFor={habit.id}
+                  className="flex-1 text-sm cursor-pointer"
+                >
+                  {habit.name}
+                </label>
+                {habit.current_streak > 0 && (
+                  <span className="text-xs text-muted-foreground">
+                    🔥 {habit.current_streak}
+                  </span>
+                )}
+              </div>
+            ))}
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  );
+}