mbatchelder
8f55626e03
- 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
105 lines
2.8 KiB
TypeScript
105 lines
2.8 KiB
TypeScript
'use client';
|
|
|
|
import { useState, useCallback } from 'react';
|
|
import { CalendarDays, ChevronLeft, ChevronRight } from 'lucide-react';
|
|
import { Button } from '@/components/ui/button';
|
|
import { format, addDays, subDays } from 'date-fns';
|
|
|
|
interface DailyNoteButtonProps {
|
|
/** Called after the daily note is created/retrieved, with the raw PocketBase record. */
|
|
onNoteReady: (note: Record<string, unknown>) => void;
|
|
/** Optional: currently selected date (controls the displayed date). */
|
|
selectedDate?: Date;
|
|
/** Called when the user navigates to a different date. */
|
|
onDateChange?: (date: Date) => void;
|
|
}
|
|
|
|
/**
|
|
* Button row that creates / navigates daily notes.
|
|
*
|
|
* Layout: ◀ [CalendarDays · 2026-07-15] ▶
|
|
*
|
|
* Clicking the centre button POSTs to /api/notes/daily and opens the note.
|
|
* The arrow buttons shift the date by one day without fetching.
|
|
*/
|
|
export function DailyNoteButton({
|
|
onNoteReady,
|
|
selectedDate,
|
|
onDateChange,
|
|
}: DailyNoteButtonProps) {
|
|
const [loading, setLoading] = useState(false);
|
|
const [currentDate, setCurrentDate] = useState<Date>(
|
|
selectedDate ?? new Date()
|
|
);
|
|
|
|
const dateStr = format(currentDate, 'yyyy-MM-dd');
|
|
const displayDate = format(currentDate, 'MMM d, yyyy');
|
|
|
|
const navigate = useCallback(
|
|
(delta: number) => {
|
|
const next = delta > 0 ? addDays(currentDate, 1) : subDays(currentDate, 1);
|
|
setCurrentDate(next);
|
|
onDateChange?.(next);
|
|
},
|
|
[currentDate, onDateChange]
|
|
);
|
|
|
|
async function handleCreateDailyNote() {
|
|
setLoading(true);
|
|
try {
|
|
const res = await fetch('/api/notes/daily', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ date: dateStr }),
|
|
});
|
|
|
|
if (!res.ok) {
|
|
console.error('Failed to create daily note', await res.text());
|
|
return;
|
|
}
|
|
|
|
const note = await res.json();
|
|
onNoteReady(note);
|
|
} catch (err) {
|
|
console.error('Failed to create daily note:', err);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div className="flex items-center gap-1">
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
className="h-9 w-9"
|
|
onClick={() => navigate(-1)}
|
|
aria-label="Previous day"
|
|
>
|
|
<ChevronLeft className="h-4 w-4" />
|
|
</Button>
|
|
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
className="gap-2"
|
|
onClick={handleCreateDailyNote}
|
|
disabled={loading}
|
|
>
|
|
<CalendarDays className="h-4 w-4" />
|
|
{loading ? 'Creating…' : `Daily Note — ${displayDate}`}
|
|
</Button>
|
|
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
className="h-9 w-9"
|
|
onClick={() => navigate(1)}
|
|
aria-label="Next day"
|
|
>
|
|
<ChevronRight className="h-4 w-4" />
|
|
</Button>
|
|
</div>
|
|
);
|
|
}
|