feat: Phase 4 - Quick Study Mode view with timer, reference display, session history

src/components/views/StudyView.tsx

@@ -0,0 +1,189 @@
+import { motion } from 'motion/react';
+import { Play, Pause, Square, Clock, Image as ImageIcon, Trophy, RotateCw } from 'lucide-react';
+import { useState, useEffect, useRef } from 'react';
+import { invoke } from '@tauri-apps/api/core';
+import { cn, defaultTransition } from '../../lib/utils';
+
+interface StudySession { id: string; title: string; duration_sec: number; actual_sec: number; reference_url?: string; notes: string; created_at: number; }
+interface LibItem { id: string; data_url: string; title: string; }
+
+type StudyState = 'idle' | 'running' | 'paused' | 'complete';
+
+export default function StudyView() {
+  const [state, setState] = useState<StudyState>('idle');
+  const [duration, setDuration] = useState(300); // 5 min default
+  const [elapsed, setElapsed] = useState(0);
+  const [title, setTitle] = useState('Quick Study');
+  const [referenceUrl, setReferenceUrl] = useState('');
+  const [notes, setNotes] = useState('');
+  const [sessions, setSessions] = useState<StudySession[]>([]);
+  const [libItems, setLibItems] = useState<LibItem[]>([]);
+  const [selectedRef, setSelectedRef] = useState<LibItem | null>(null);
+  const [activeSessionId, setActiveSessionId] = useState<string | null>(null);
+  const intervalRef = useRef<ReturnType<typeof setInterval>>();
+
+  useEffect(() => { invoke<StudySession[]>('study_list').then(setSessions).catch(() => {}); invoke<LibItem[]>('library_items').then(setLibItems).catch(() => {}); }, []);
+
+  useEffect(() => {
+    if (state === 'running') {
+      intervalRef.current = setInterval(() => {
+        setElapsed(prev => {
+          if (prev + 1 >= duration) { clearInterval(intervalRef.current); setState('complete'); return duration; }
+          return prev + 1;
+        });
+      }, 1000);
+    } else { clearInterval(intervalRef.current); }
+    return () => clearInterval(intervalRef.current);
+  }, [state, duration]);
+
+  const startStudy = () => {
+    invoke<StudySession>('study_start', { title, durationSec: duration, referenceUrl: selectedRef?.data_url || referenceUrl || null })
+      .then(s => { setActiveSessionId(s.id); setState('running'); setElapsed(0); })
+      .catch(console.error);
+  };
+  const pauseStudy = () => setState(s => s === 'running' ? 'paused' : 'running');
+  const stopStudy = () => {
+    if (activeSessionId) {
+      invoke<StudySession>('study_complete', { id: activeSessionId, actualSec: elapsed, notes })
+        .then(() => { invoke<StudySession[]>('study_list').then(setSessions); })
+        .catch(console.error);
+    }
+    setState('idle'); setElapsed(0); setActiveSessionId(null); setNotes('');
+  };
+  const completeStudy = () => {
+    if (activeSessionId) {
+      invoke<StudySession>('study_complete', { id: activeSessionId, actualSec: elapsed, notes })
+        .then(() => { invoke<StudySession[]>('study_list').then(setSessions); })
+        .catch(console.error);
+    }
+    setState('idle'); setElapsed(0); setActiveSessionId(null); setNotes('');
+  };
+
+  const formatTime = (sec: number) => `${Math.floor(sec / 60).toString().padStart(2, '0')}:${(sec % 60).toString().padStart(2, '0')}`;
+  const progress = duration > 0 ? (elapsed / duration) * 100 : 0;
+  const presets = [60, 120, 300, 600, 900, 1800];
+
+  return (
+    <motion.div initial={{ opacity: 0, y: 10 }} animate={{ opacity: 1, y: 0 }} exit={{ opacity: 0, y: -10 }} transition={defaultTransition} className="w-full h-full bg-dusk-bg flex overflow-hidden">
+      {/* Main Study Area */}
+      <div className="flex-1 flex flex-col items-center justify-center p-8 relative">
+        {/* Reference Image */}
+        {selectedRef && state !== 'idle' && (
+          <div className="absolute inset-0 flex items-center justify-center p-16 opacity-20 pointer-events-none">
+            <img src={selectedRef.data_url} className="max-w-full max-h-full object-contain rounded-xl" />
+          </div>
+        )}
+
+        {state === 'idle' && (
+          <div className="flex flex-col items-center gap-8 max-w-md w-full">
+            <div className="text-center">
+              <h1 className="text-3xl font-medium text-dusk-text mb-2">Quick Study</h1>
+              <p className="text-sm text-dusk-text-muted">Timed drawing practice with reference focus. No distractions.</p>
+            </div>
+
+            {/* Title */}
+            <input value={title} onChange={e => setTitle(e.target.value)} placeholder="Study title..." className="w-full bg-dusk-surface border border-dusk-border rounded-xl px-4 py-3 text-sm text-dusk-text focus:outline-none focus:border-dusk-accent" />
+
+            {/* Duration Presets */}
+            <div className="w-full">
+              <label className="text-[11px] font-bold text-dusk-text-muted uppercase tracking-wider mb-2 block">Duration</label>
+              <div className="grid grid-cols-3 gap-2">
+                {presets.map(p => (
+                  <button key={p} onClick={() => setDuration(p)} className={cn('py-2.5 rounded-xl text-sm font-semibold border transition-colors', duration === p ? 'bg-dusk-accent/20 text-dusk-accent border-dusk-accent/30' : 'bg-dusk-surface text-dusk-text-muted border-dusk-border hover:border-dusk-accent/30')}>
+                    {p < 60 ? `${p}s` : `${p / 60}m`}
+                  </button>
+                ))}
+              </div>
+            </div>
+
+            {/* Reference Selection */}
+            <div className="w-full">
+              <label className="text-[11px] font-bold text-dusk-text-muted uppercase tracking-wider mb-2 block">Reference (optional)</label>
+              {libItems.length > 0 ? (
+                <div className="grid grid-cols-4 gap-2 max-h-32 overflow-auto">
+                  {libItems.slice(0, 12).map(it => (
+                    <button key={it.id} onClick={() => setSelectedRef(selectedRef?.id === it.id ? null : it)} className={cn('aspect-square rounded-lg overflow-hidden border-2 transition-colors', selectedRef?.id === it.id ? 'border-dusk-accent' : 'border-dusk-border/50 hover:border-dusk-border')}>
+                      <img src={it.data_url} className="w-full h-full object-cover" />
+                    </button>
+                  ))}
+                </div>
+              ) : <p className="text-xs text-dusk-text-muted">Add images to library first</p>}
+            </div>
+
+            {/* Start Button */}
+            <button onClick={startStudy} className="w-full py-4 rounded-2xl bg-dusk-accent text-dusk-bg font-bold text-base flex items-center justify-center gap-2 hover:bg-dusk-accent/90 transition-colors shadow-lg">
+              <Play className="w-5 h-5" /> Start Study Session
+            </button>
+          </div>
+        )}
+
+        {(state === 'running' || state === 'paused') && (
+          <div className="flex flex-col items-center gap-8">
+            {/* Timer Ring */}
+            <div className="relative w-48 h-48">
+              <svg className="w-full h-full -rotate-90" viewBox="0 0 100 100">
+                <circle cx="50" cy="50" r="45" stroke="var(--color-dusk-border)" strokeWidth="4" fill="none" />
+                <circle cx="50" cy="50" r="45" stroke="var(--color-dusk-accent)" strokeWidth="4" fill="none" strokeLinecap="round" strokeDasharray={`${progress * 2.83} 283`} className="transition-all duration-1000" />
+              </svg>
+              <div className="absolute inset-0 flex flex-col items-center justify-center">
+                <span className="text-4xl font-bold text-dusk-text font-mono">{formatTime(duration - elapsed)}</span>
+                <span className="text-xs text-dusk-text-muted mt-1">{state === 'paused' ? 'PAUSED' : 'remaining'}</span>
+              </div>
+            </div>
+
+            <h2 className="text-xl font-semibold text-dusk-text">{title}</h2>
+
+            {/* Controls */}
+            <div className="flex items-center gap-4">
+              <button onClick={pauseStudy} className="w-14 h-14 rounded-full bg-dusk-surface border border-dusk-border flex items-center justify-center text-dusk-text hover:bg-dusk-surface-hover">
+                {state === 'running' ? <Pause className="w-6 h-6" /> : <Play className="w-6 h-6" />}
+              </button>
+              <button onClick={stopStudy} className="w-14 h-14 rounded-full bg-red-500/10 border border-red-500/20 flex items-center justify-center text-red-400 hover:bg-red-500/20">
+                <Square className="w-5 h-5" />
+              </button>
+            </div>
+
+            {/* Notes */}
+            <textarea value={notes} onChange={e => setNotes(e.target.value)} placeholder="Quick notes during study..." className="w-80 h-24 bg-dusk-surface border border-dusk-border rounded-xl px-4 py-3 text-sm text-dusk-text resize-none focus:outline-none focus:border-dusk-accent" />
+          </div>
+        )}
+
+        {state === 'complete' && (
+          <div className="flex flex-col items-center gap-6">
+            <Trophy className="w-16 h-16 text-dusk-accent" />
+            <h2 className="text-2xl font-bold text-dusk-text">Session Complete!</h2>
+            <p className="text-dusk-text-muted">{formatTime(elapsed)} of focused study on "{title}"</p>
+            <textarea value={notes} onChange={e => setNotes(e.target.value)} placeholder="Session notes / observations..." className="w-80 h-24 bg-dusk-surface border border-dusk-border rounded-xl px-4 py-3 text-sm text-dusk-text resize-none focus:outline-none focus:border-dusk-accent" />
+            <div className="flex gap-3">
+              <button onClick={completeStudy} className="px-6 py-3 rounded-xl bg-dusk-accent text-dusk-bg font-semibold">Save & Done</button>
+              <button onClick={() => { completeStudy(); startStudy(); }} className="px-6 py-3 rounded-xl bg-dusk-surface border border-dusk-border text-dusk-text font-semibold flex items-center gap-2"><RotateCw className="w-4 h-4" /> Again</button>
+            </div>
+          </div>
+        )}
+      </div>
+
+      {/* History Sidebar */}
+      <div className="w-72 border-l border-dusk-border bg-dusk-surface flex flex-col shrink-0">
+        <div className="h-12 border-b border-dusk-border flex items-center px-4"><span className="text-[13px] font-semibold text-dusk-text">Study History</span></div>
+        <div className="flex-1 overflow-auto p-3 flex flex-col gap-2">
+          {sessions.length === 0 && <p className="text-xs text-dusk-text-muted text-center py-8">No sessions yet</p>}
+          {sessions.slice().reverse().map(s => (
+            <div key={s.id} className="p-3 bg-dusk-bg rounded-xl border border-dusk-border/50">
+              <div className="flex items-center justify-between mb-1">
+                <span className="text-[13px] font-semibold text-dusk-text truncate">{s.title}</span>
+                <span className="text-[11px] text-dusk-accent font-bold">{formatTime(s.actual_sec)}</span>
+              </div>
+              <div className="flex items-center gap-2 text-[11px] text-dusk-text-muted">
+                <Clock className="w-3 h-3" />
+                <span>Target: {formatTime(s.duration_sec)}</span>
+                <span>•</span>
+                <span>{new Date(s.created_at * 1000).toLocaleDateString()}</span>
+              </div>
+              {s.notes && <p className="text-[11px] text-dusk-text-muted mt-2 line-clamp-2">{s.notes}</p>}
+            </div>
+          ))}
+        </div>
+      </div>
+    </motion.div>
+  );
+}