refactor: migrate to monorepo structure with Docker, PocketBase, and e2e tests

- Reorganize into apps/, packages/, docs/, e2e/, pocketbase/ directories - Add Dockerfiles for web, worker, and PocketBase services - Add docker-compose.yml for local orchestration - Add turbo.json for monorepo task management - Add Playwright e2e test infrastructure - Add PocketBase backend with migrations - Remove Vite/Next.js/ESLint/PostCSS config files - Update package.json with workspace dependencies - Add .env.example and .dockerignore
2026-07-16 06:19:58 -04:00
parent ec14645a4b
commit 8f55626e03
286 changed files with 31992 additions and 9245 deletions
@@ -0,0 +1,158 @@
+'use client';
+
+import { useEffect, useState, Suspense } from 'react';
+import { Flame, Plus } from 'lucide-react';
+import dynamic from 'next/dynamic';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { HabitCard } from '@/components/habits/habit-card';
+import { HabitCompletionDialog } from '@/components/habits/habit-completion-dialog';
+import type { Habit } from '@project-e/shared';
+
+// Lazy load react-calendar-heatmap (~15KB)
+const HabitHeatmap = dynamic(
+  () => import('@/components/habits/habit-heatmap').then((m) => m.HabitHeatmap),
+  {
+    ssr: false,
+    loading: () => (
+      <div className="h-[150px] animate-pulse rounded-lg bg-muted/30" />
+    ),
+  }
+);
+
+/** Extended habit with server-computed fields */
+interface HabitWithMeta extends Habit {
+  logged_today: boolean;
+}
+
+export default function HabitsPage() {
+  const [habits, setHabits] = useState<HabitWithMeta[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [selectedHabit, setSelectedHabit] = useState<HabitWithMeta | null>(null);
+  const [completionDialogOpen, setCompletionDialogOpen] = useState(false);
+
+  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);
+    }
+  }
+
+  function handleComplete(habit: HabitWithMeta) {
+    if (habit.completion_mode === 'quick') {
+      logHabitCompletion(habit.id, {});
+    } else {
+      setSelectedHabit(habit);
+      setCompletionDialogOpen(true);
+    }
+  }
+
+  async function logHabitCompletion(
+    habitId: string,
+    data: { mood?: number; value?: number; notes?: string }
+  ) {
+    try {
+      await fetch(`/api/habits/${habitId}/logs`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(data),
+      });
+      fetchHabits();
+      setCompletionDialogOpen(false);
+    } catch (error) {
+      console.error('Failed to log habit:', error);
+    }
+  }
+
+  const completedCount = habits.filter((h) => h.logged_today).length;
+  const completionRate =
+    habits.length > 0 ? Math.round((completedCount / habits.length) * 100) : 0;
+
+  if (loading) {
+    return <p className="text-muted-foreground">Loading habits...</p>;
+  }
+
+  return (
+    <div>
+      <div className="mb-6 flex items-center justify-between">
+        <div>
+          <h1 className="text-2xl font-bold">Habits</h1>
+          <p className="mt-1 text-muted-foreground">
+            Small actions, visible momentum.
+          </p>
+        </div>
+        <Button>
+          <Plus className="mr-2 h-4 w-4" />
+          New habit
+        </Button>
+      </div>
+
+      {/* Summary banner */}
+      <Card className="mb-6">
+        <CardContent className="flex items-center justify-between p-6">
+          <div>
+            <p className="text-sm text-muted-foreground">Today&apos;s progress</p>
+            <p className="text-2xl font-bold">
+              {completedCount} / {habits.length} habits
+            </p>
+          </div>
+          <div className="text-right">
+            <p className="text-sm text-muted-foreground">Completion rate</p>
+            <p className="text-2xl font-bold">{completionRate}%</p>
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* Habit cards grid */}
+      <div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
+        {habits.map((habit) => (
+          <HabitCard
+            key={habit.id}
+            habit={habit}
+            onComplete={() => handleComplete(habit)}
+          />
+        ))}
+      </div>
+
+      {/* Heatmap section */}
+      <Card className="mt-8">
+        <CardHeader>
+          <CardTitle className="flex items-center gap-2">
+            <Flame className="h-5 w-5 text-orange-500" aria-hidden="true" />
+            Consistency Overview
+          </CardTitle>
+        </CardHeader>
+        <CardContent>
+          <Suspense
+            fallback={
+              <div className="h-[150px] animate-pulse rounded-lg bg-muted/30" />
+            }
+          >
+            <HabitHeatmap habits={habits} />
+          </Suspense>
+        </CardContent>
+      </Card>
+
+      {/* Completion dialog */}
+      {selectedHabit && (
+        <HabitCompletionDialog
+          habit={selectedHabit}
+          open={completionDialogOpen}
+          onOpenChange={setCompletionDialogOpen}
+          onSubmit={(data) => logHabitCompletion(selectedHabit.id, data)}
+        />
+      )}
+    </div>
+  );
+}