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,126 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { Plus, Trash2 } from 'lucide-react';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+
+interface Domain {
+  id: string;
+  name: string;
+  color: string;
+  icon: string;
+  sort_order: number;
+}
+
+export function SettingsDomains() {
+  const [domains, setDomains] = useState<Domain[]>([]);
+  const [newDomainName, setNewDomainName] = useState('');
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    fetchDomains();
+  }, []);
+
+  async function fetchDomains() {
+    try {
+      const response = await fetch('/api/domains?sort=sort_order');
+      if (response.ok) {
+        const data = await response.json();
+        setDomains(data.items || []);
+      }
+    } catch (error) {
+      console.error('Failed to fetch domains:', error);
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  async function addDomain() {
+    if (!newDomainName.trim()) return;
+
+    try {
+      await fetch('/api/domains', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          name: newDomainName,
+          color: '#3b82f6',
+          icon: '📁',
+          sort_order: domains.length,
+        }),
+      });
+      setNewDomainName('');
+      fetchDomains();
+    } catch (error) {
+      console.error('Failed to add domain:', error);
+    }
+  }
+
+  async function deleteDomain(id: string) {
+    if (!confirm('Are you sure? This cannot be undone.')) return;
+
+    try {
+      await fetch(`/api/domains/${id}`, { method: 'DELETE' });
+      fetchDomains();
+    } catch (error) {
+      console.error('Failed to delete domain:', error);
+    }
+  }
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Domains</CardTitle>
+        <CardDescription>Manage your workspace domains (e.g., Personal, Work, OTS).</CardDescription>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        {/* Existing domains */}
+        <div className="space-y-2">
+          {loading ? (
+            <p className="text-sm text-muted-foreground">Loading domains...</p>
+          ) : (
+            domains.map((domain) => (
+              <div key={domain.id} className="flex items-center justify-between rounded-lg border p-3">
+                <div className="flex items-center gap-3">
+                  <div
+                    className="h-4 w-4 rounded"
+                    style={{ backgroundColor: domain.color }}
+                  />
+                  <span className="font-medium">{domain.name}</span>
+                </div>
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  onClick={() => deleteDomain(domain.id)}
+                  aria-label={`Delete domain: ${domain.name}`}
+                >
+                  <Trash2 className="h-4 w-4 text-destructive" aria-hidden="true" />
+                </Button>
+              </div>
+            ))
+          )}
+        </div>
+
+        {/* Add new domain */}
+        <div className="flex gap-2">
+          <label htmlFor="new-domain-name" className="sr-only">
+            New domain name
+          </label>
+          <Input
+            id="new-domain-name"
+            placeholder="New domain name"
+            value={newDomainName}
+            onChange={(e) => setNewDomainName(e.target.value)}
+            onKeyDown={(e) => e.key === 'Enter' && addDomain()}
+          />
+          <Button onClick={addDomain}>
+            <Plus className="mr-1 h-4 w-4" />
+            Add
+          </Button>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}