Files
ProjectE/apps/web/components/dashboard/widgets/quick-capture-widget.tsx
T
mbatchelder eba1d78fb9 feat: Phase 5 - Calendar + Dashboard + Search
Calendar:
- GET /api/domains/[domainId]/calendar/events?from=&to= — returns tasks, habits, projects, milestones
- PATCH /api/domains/[domainId]/tasks/[id]/schedule — drag-to-reschedule with activity feed
- Calendar UI with month/week/day views via react-big-calendar
- Drag-to-reschedule with SSE updates
- Filter by entity type and domain
- Keyboard shortcuts: t=today, m/w/d=view, ←/→=navigate
- Mobile: auto-switches to day view on small screens

Dashboard:
- GET/PUT /api/domains/[domainId]/dashboard — layout stored in domain custom_fields
- 8 per-widget data endpoints (today-tasks, habit-checklist, weekly-stats, project-progress, upcoming-calendar, recent-notes, activity-feed, quick-capture)
- react-grid-layout with responsive breakpoints (12/8/4 cols)
- Drag-to-reorder, resize, add/remove widgets
- Edit mode toggle, per-workspace layout persistence
- Widget error boundary

Search:
- tsvector columns + GIN indexes on tasks, notes, projects, habits, domains
- GET /api/search?q=&types=&domain= — ranked results with ts_headline snippets
- Dedicated search page with grouped results, filters, recent searches (localStorage)
- Empty state with hints

Schema:
- Added custom_fields jsonb column to domains table (migration 0002)
- Removed stale root app/ directory

Build: passes, typecheck: passes, tests: 18/18 wikilink-parser tests pass
2026-07-29 07:32:47 -04:00

90 lines
2.7 KiB
TypeScript

'use client';
import { useState } from 'react';
import { Plus, Send } from 'lucide-react';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
import { useRouter } from 'next/navigation';
export function QuickCaptureWidget() {
const [type, setType] = useState('task');
const [title, setTitle] = useState('');
const [submitting, setSubmitting] = useState(false);
const router = useRouter();
async function handleSubmit(e: React.FormEvent) {
e.preventDefault();
if (!title.trim()) return;
setSubmitting(true);
try {
const endpoint = type === 'task' ? '/api/tasks'
: type === 'habit' ? '/api/habits'
: '/api/notes';
const body: Record<string, unknown> = { title: title.trim() };
if (type === 'task') {
body.status = 'todo';
body.priority = 'medium';
}
if (type === 'habit') {
body.name = title.trim();
delete body.title;
body.frequency = 'daily';
body.difficulty = 'medium';
}
const res = await fetch(endpoint, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(body),
});
if (res.ok) {
setTitle('');
router.refresh();
}
} catch (err) {
console.error('Quick capture failed:', err);
} finally {
setSubmitting(false);
}
}
return (
<Card className="h-full border-0 shadow-none">
<CardHeader className="p-0 pb-3">
<CardTitle className="flex items-center gap-2 text-base">
<Plus className="h-4 w-4" aria-hidden="true" />
Quick Capture
</CardTitle>
</CardHeader>
<CardContent className="p-0">
<form onSubmit={handleSubmit} className="flex gap-2">
<Select value={type} onValueChange={setType}>
<SelectTrigger className="w-24">
<SelectValue />
</SelectTrigger>
<SelectContent>
<SelectItem value="task">Task</SelectItem>
<SelectItem value="habit">Habit</SelectItem>
<SelectItem value="note">Note</SelectItem>
</SelectContent>
</Select>
<Input
value={title}
onChange={(e) => setTitle(e.target.value)}
placeholder="Quick add..."
className="flex-1"
/>
<Button type="submit" size="icon" disabled={submitting || !title.trim()}>
<Send className="h-4 w-4" />
</Button>
</form>
</CardContent>
</Card>
);
}