feat: add live draw feature and clean up docs

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

apps/admin/src/pages/users/UserDetailPage.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect, useCallback } from 'react';
+import { useState, useEffect, useCallback, useRef } from 'react';
 import { useParams, Link } from 'react-router-dom';
 import { supabase, supabaseConfig } from '@/config';
 import { useRealtimeSubscription } from '@/hooks/useRealtimeSubscription';
@@ -37,7 +37,7 @@ import {
     SelectTrigger,
     SelectValue,
 } from '@/components/ui/select';
-import { Crown, Users, MessageCircle, ChevronRight, ThumbsUp, ThumbsDown, Minus, Gift, Image, Video as VideoIcon, Target, User, Eye, EyeOff, CheckCircle, Package, Sparkles, Flame, Trophy, Calendar, AlertCircle, Clock } from 'lucide-react';
+import { Crown, Users, MessageCircle, ChevronRight, ThumbsUp, ThumbsDown, Minus, Gift, Image, Video as VideoIcon, Target, User, Eye, EyeOff, CheckCircle, Package, Sparkles, Flame, Trophy, Calendar, AlertCircle, Clock, Pencil } from 'lucide-react';
 import { format } from 'date-fns';
 import { IconPreview } from '@/components/ui/icon-picker';
 
@@ -280,6 +280,146 @@ function AdminDecryptedVideo({ messageId }: { messageId: string }) {
     return <video src={url} controls className="w-full h-full object-cover" preload="metadata" />;
 }
 
+interface StrokePoint {
+    x: number;
+    y: number;
+}
+
+interface StrokeSegment {
+    id: string;
+    userId: string;
+    points: StrokePoint[];
+    color: string;
+    width: number;
+    timestamp: number;
+    isEraser: boolean;
+}
+
+const CANVAS_BACKGROUND = '#1a1a2e';
+
+function LiveDrawCanvas({ coupleId }: { coupleId: string }) {
+    const canvasRef = useRef<HTMLCanvasElement>(null);
+    const [strokes, setStrokes] = useState<StrokeSegment[]>([]);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState<string | null>(null);
+
+    useEffect(() => {
+        let cancelled = false;
+        const fetchStrokes = async () => {
+            setLoading(true);
+            setError(null);
+            const { data, error: err } = await supabase
+                .from('live_draw_sessions')
+                .select('strokes')
+                .eq('couple_id', coupleId)
+                .maybeSingle();
+            if (cancelled) return;
+            if (err) {
+                setError(err.message);
+                setLoading(false);
+                return;
+            }
+            setStrokes((data?.strokes as StrokeSegment[]) || []);
+            setLoading(false);
+        };
+        fetchStrokes();
+
+        // Subscribe to real-time updates
+        const channel = supabase
+            .channel(`admin-livedraw-${coupleId}`)
+            .on('postgres_changes', {
+                event: '*',
+                schema: 'public',
+                table: 'live_draw_sessions',
+                filter: `couple_id=eq.${coupleId}`,
+            }, (payload: any) => {
+                if (payload.new?.strokes) {
+                    setStrokes(payload.new.strokes as StrokeSegment[]);
+                }
+            })
+            .subscribe();
+
+        return () => {
+            cancelled = true;
+            supabase.removeChannel(channel);
+        };
+    }, [coupleId]);
+
+    // Render strokes to canvas
+    useEffect(() => {
+        const canvas = canvasRef.current;
+        if (!canvas) return;
+        const ctx = canvas.getContext('2d');
+        if (!ctx) return;
+
+        const dpr = window.devicePixelRatio || 1;
+        const w = canvas.clientWidth;
+        const h = canvas.clientHeight;
+        canvas.width = w * dpr;
+        canvas.height = h * dpr;
+        ctx.scale(dpr, dpr);
+
+        ctx.fillStyle = CANVAS_BACKGROUND;
+        ctx.fillRect(0, 0, w, h);
+
+        for (const stroke of strokes) {
+            if (stroke.points.length === 0) continue;
+            ctx.strokeStyle = stroke.isEraser ? CANVAS_BACKGROUND : stroke.color;
+            ctx.lineWidth = stroke.width;
+            ctx.lineCap = 'round';
+            ctx.lineJoin = 'round';
+            ctx.beginPath();
+
+            const first = stroke.points[0];
+            ctx.moveTo(first.x * w, first.y * h);
+
+            if (stroke.points.length === 1) {
+                ctx.lineTo(first.x * w + 0.1, first.y * h + 0.1);
+            } else {
+                for (let i = 1; i < stroke.points.length; i++) {
+                    const prev = stroke.points[i - 1];
+                    const curr = stroke.points[i];
+                    const midX = ((prev.x + curr.x) / 2) * w;
+                    const midY = ((prev.y + curr.y) / 2) * h;
+
+                    if (i === 1) {
+                        ctx.lineTo(midX, midY);
+                    } else {
+                        ctx.quadraticCurveTo(prev.x * w, prev.y * h, midX, midY);
+                    }
+                }
+                const last = stroke.points[stroke.points.length - 1];
+                ctx.lineTo(last.x * w, last.y * h);
+            }
+            ctx.stroke();
+        }
+    }, [strokes]);
+
+    if (loading) return <Skeleton className="h-64 w-full" />;
+    if (error) return <div className="text-sm text-red-500">Failed to load drawing: {error}</div>;
+
+    return (
+        <div className="space-y-3">
+            {strokes.length === 0 ? (
+                <Card className="flex flex-col items-center justify-center py-12">
+                    <Pencil className="h-12 w-12 text-muted-foreground mb-4" />
+                    <p className="text-muted-foreground">No drawing yet</p>
+                </Card>
+            ) : (
+                <>
+                    <div className="rounded-xl overflow-hidden border" style={{ background: CANVAS_BACKGROUND }}>
+                        <canvas
+                            ref={canvasRef}
+                            style={{ width: '100%', aspectRatio: '4/3', display: 'block' }}
+                        />
+                    </div>
+                    <p className="text-xs text-muted-foreground">{strokes.length} stroke{strokes.length !== 1 ? 's' : ''} — updates in real-time</p>
+                </>
+            )}
+        </div>
+    );
+}
+
 export function UserDetailPage() {
     const { userId } = useParams<{ userId: string }>();
     const { hasPermission } = useAuth();
@@ -755,6 +895,7 @@ export function UserDetailPage() {
                     {canViewMedia && <TabsTrigger value="media">Media ({mediaTotal})</TabsTrigger>}
                     {canViewResponses && <TabsTrigger value="outstanding" disabled={!profile.couple_id || !partner}>Outstanding ({outstandingTotal}){gapDisabled && <AlertCircle className="h-3 w-3 ml-1 text-destructive" />}</TabsTrigger>}
                     <TabsTrigger value="packs" disabled={!profile.couple_id}>Enabled Packs ({enabledPacks.length})</TabsTrigger>
+                    <TabsTrigger value="livedraw" disabled={!profile.couple_id}>Live Draw</TabsTrigger>
                 </TabsList>
                 {canViewResponses && <TabsContent value="responses" className="mt-4">{responses.length === 0 ? <Card className="flex flex-col items-center justify-center py-12"><p className="text-muted-foreground">No responses yet</p></Card> : <div className="space-y-4"><div className="rounded-md border"><Table><TableHeader><TableRow><TableHead>Question</TableHead><TableHead>Pack</TableHead><TableHead className="w-24">Answer</TableHead><TableHead className="w-32">Date</TableHead></TableRow></TableHeader><TableBody>{responses.map((r) => (<TableRow key={r.id}><TableCell className="max-w-md">{r.question.pack?.id ? (<Link to={`/packs/${r.question.pack.id}/questions`} className="line-clamp-2 text-primary hover:underline cursor-pointer">{r.question.text}</Link>) : (<span className="line-clamp-2">{r.question.text}</span>)}</TableCell><TableCell>{r.question.pack?.id ? (<Link to={`/packs/${r.question.pack.id}/questions`} className="text-primary hover:underline">{r.question.pack.name}</Link>) : (<span className="text-muted-foreground">{r.question.pack?.name || '—'}</span>)}</TableCell><TableCell><div className="flex items-center gap-2">{answerIcons[r.answer]}<span className="capitalize">{r.answer}</span></div></TableCell><TableCell className="text-muted-foreground text-sm">{r.created_at ? format(new Date(r.created_at), 'MMM d, yyyy') : '—'}</TableCell></TableRow>))}</TableBody></Table></div><PaginationControls page={responsesPage} pageSize={responsesPageSize} totalCount={responsesTotal} onPageChange={setResponsesPage} onPageSizeChange={(size) => { setResponsesPage(1); setResponsesPageSize(size); }} /></div>}</TabsContent>}
                 {canViewMatches && <TabsContent value="matches" className="mt-4">{matches.length === 0 ? <Card className="flex flex-col items-center justify-center py-12"><p className="text-muted-foreground">No matches yet</p></Card> : <div className="space-y-4"><div className="grid gap-4 md:grid-cols-2">{matches.map((match) => (<Card key={match.id} className="hover:shadow-md transition-shadow"><CardHeader className="pb-2"><div className="flex items-start justify-between"><Badge variant="secondary">{matchTypeLabels[match.match_type]}</Badge>{match.is_new && <Badge variant="default" className="text-xs">New</Badge>}</div><CardDescription className="line-clamp-2 mt-2">{match.question?.text || 'Unknown question'}</CardDescription></CardHeader><CardContent><div className="flex items-center justify-between"><div className="flex items-center gap-1 text-sm text-muted-foreground"><MessageCircle className="h-4 w-4" />{match.message_count} message{match.message_count !== 1 ? 's' : ''}</div>{canViewChats && <Link to={`/users/${userId}/matches/${match.id}`}><Button variant="ghost" size="sm">View Chat<ChevronRight className="ml-1 h-4 w-4" /></Button></Link>}</div></CardContent></Card>))}</div><PaginationControls page={matchesPage} pageSize={matchesPageSize} totalCount={matchesTotal} onPageChange={setMatchesPage} onPageSizeChange={(size) => { setMatchesPage(1); setMatchesPageSize(size); }} /></div>}</TabsContent>}
@@ -898,6 +1039,16 @@ export function UserDetailPage() {
                         </div>
                     )}
                 </TabsContent>
+                <TabsContent value="livedraw" className="mt-4">
+                    {profile.couple_id ? (
+                        <LiveDrawCanvas coupleId={profile.couple_id} />
+                    ) : (
+                        <Card className="flex flex-col items-center justify-center py-12">
+                            <Pencil className="h-12 w-12 text-muted-foreground mb-4" />
+                            <p className="text-muted-foreground">User is not in a couple</p>
+                        </Card>
+                    )}
+                </TabsContent>
             </Tabs>
         </div>
     );