feat: add URL-driven workspace state and streamed Codex research
This commit is contained in:
@@ -1,43 +1,46 @@
|
||||
import { useId, useState } from 'react'
|
||||
import { Dialog } from '#/components/dialog'
|
||||
import { Button } from '#/components/ui/button'
|
||||
import { Checkbox } from '#/components/ui/checkbox'
|
||||
import { Input } from '#/components/ui/input'
|
||||
import { SidebarInset, SidebarProvider } from '#/components/ui/sidebar'
|
||||
import { Textarea } from '#/components/ui/textarea'
|
||||
import { TooltipProvider } from '#/components/ui/tooltip'
|
||||
import { WorkspaceNavigation } from '#/components/workspace-navigation'
|
||||
import { useId, useState } from "react";
|
||||
import { Dialog } from "#/components/dialog";
|
||||
import { Button } from "#/components/ui/button";
|
||||
import { Checkbox } from "#/components/ui/checkbox";
|
||||
import { Input } from "#/components/ui/input";
|
||||
import { SidebarInset, SidebarProvider } from "#/components/ui/sidebar";
|
||||
import { Textarea } from "#/components/ui/textarea";
|
||||
import { TooltipProvider } from "#/components/ui/tooltip";
|
||||
import { WorkspaceNavigation } from "#/components/workspace-navigation";
|
||||
import { useUrlState } from "#/features/navigation/use-url-state";
|
||||
import {
|
||||
type JournalEntry as Entry,
|
||||
type EntryKind,
|
||||
entryKindLabels,
|
||||
useWorkspaceState,
|
||||
} from '#/features/workspace/workspace-state'
|
||||
import './journal.css'
|
||||
} from "#/features/workspace/workspace-state";
|
||||
|
||||
type Draft = Pick<Entry, 'kind' | 'text' | 'source' | 'occurredAt'>
|
||||
const emptyDraft: Draft = { kind: 'メモ', text: '', source: '', occurredAt: '' }
|
||||
const kinds: EntryKind[] = ['メモ', '再開地点', '服薬', '体重']
|
||||
type Draft = Pick<Entry, "kind" | "text" | "source" | "occurredAt">;
|
||||
const emptyDraft: Draft = { kind: "メモ", text: "", source: "", occurredAt: "" };
|
||||
const kinds: EntryKind[] = ["メモ", "再開地点", "服薬", "体重"];
|
||||
|
||||
function formatTime(value: string | undefined) {
|
||||
if (!value) return 'Unknown'
|
||||
return new Date(value).toLocaleString('en-US', {
|
||||
year: 'numeric',
|
||||
month: 'numeric',
|
||||
day: 'numeric',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit',
|
||||
})
|
||||
if (!value) return "Unknown";
|
||||
return new Date(value).toLocaleString("en-US", {
|
||||
year: "numeric",
|
||||
month: "numeric",
|
||||
day: "numeric",
|
||||
hour: "2-digit",
|
||||
minute: "2-digit",
|
||||
});
|
||||
}
|
||||
|
||||
export function JournalPage() {
|
||||
const { entries, setEntries } = useWorkspaceState()
|
||||
const [draft, setDraft] = useState<Draft>(emptyDraft)
|
||||
const [correcting, setCorrecting] = useState<Entry | null>(null)
|
||||
const [reviewing, setReviewing] = useState(false)
|
||||
const [selected, setSelected] = useState<Set<string>>(new Set())
|
||||
const superseded = new Set(entries.map((entry) => entry.correctionOf))
|
||||
const current = entries.filter((entry) => !superseded.has(entry.id))
|
||||
const { entries, setEntries } = useWorkspaceState();
|
||||
const [draft, setDraft] = useState<Draft>(emptyDraft);
|
||||
const [search, updateSearch] = useUrlState();
|
||||
const correcting = entries.find((entry) => entry.id === search.entry);
|
||||
const reviewing = search.review;
|
||||
const setCorrecting = (entry: Entry | null) => updateSearch({ entry: entry?.id });
|
||||
const setReviewing = (open: boolean) => updateSearch({ review: open || undefined });
|
||||
const [selected, setSelected] = useState<Set<string>>(new Set());
|
||||
const superseded = new Set(entries.map((entry) => entry.correctionOf));
|
||||
const current = entries.filter((entry) => !superseded.has(entry.id));
|
||||
|
||||
function append(value: Draft, correctionOf?: string) {
|
||||
setEntries((previous) => [
|
||||
@@ -50,7 +53,7 @@ export function JournalPage() {
|
||||
correctionOf,
|
||||
},
|
||||
...previous,
|
||||
])
|
||||
]);
|
||||
}
|
||||
|
||||
return (
|
||||
@@ -64,8 +67,8 @@ export function JournalPage() {
|
||||
variant="outline"
|
||||
disabled={current.length === 0}
|
||||
onClick={() => {
|
||||
setSelected(new Set(current.map((entry) => entry.id)))
|
||||
setReviewing(true)
|
||||
setSelected(new Set(current.map((entry) => entry.id)));
|
||||
setReviewing(true);
|
||||
}}
|
||||
>
|
||||
Summarize entries
|
||||
@@ -77,15 +80,13 @@ export function JournalPage() {
|
||||
draft={draft}
|
||||
onChange={setDraft}
|
||||
onSubmit={() => {
|
||||
append(draft)
|
||||
setDraft(emptyDraft)
|
||||
append(draft);
|
||||
setDraft(emptyDraft);
|
||||
}}
|
||||
submitLabel="Save entry"
|
||||
/>
|
||||
<section className="journal-entries" aria-label="Journal entries">
|
||||
{entries.length === 0 && (
|
||||
<p className="journal-empty">No entries yet</p>
|
||||
)}
|
||||
{entries.length === 0 && <p className="journal-empty">No entries yet</p>}
|
||||
{entries.map((entry) => (
|
||||
<article
|
||||
key={entry.id}
|
||||
@@ -93,18 +94,12 @@ export function JournalPage() {
|
||||
aria-label={`${entryKindLabels[entry.kind]} entry`}
|
||||
>
|
||||
<div className="journal-entry-heading">
|
||||
<span className="text-sm font-medium">
|
||||
{entryKindLabels[entry.kind]}
|
||||
</span>
|
||||
<span className="text-sm font-medium">{entryKindLabels[entry.kind]}</span>
|
||||
{superseded.has(entry.id) && (
|
||||
<span className="text-xs text-muted-foreground">
|
||||
Original
|
||||
</span>
|
||||
<span className="text-xs text-muted-foreground">Original</span>
|
||||
)}
|
||||
{entry.correctionOf && (
|
||||
<span className="text-xs text-muted-foreground">
|
||||
Correction
|
||||
</span>
|
||||
<span className="text-xs text-muted-foreground">Correction</span>
|
||||
)}
|
||||
{!superseded.has(entry.id) && (
|
||||
<Button
|
||||
@@ -119,15 +114,15 @@ export function JournalPage() {
|
||||
</div>
|
||||
<p className="journal-entry-text">
|
||||
{entry.text}
|
||||
{entry.kind === '体重' ? ' kg' : ''}
|
||||
{entry.kind === "体重" ? " kg" : ""}
|
||||
</p>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
Occurred: {formatTime(entry.occurredAt)} · Recorded:{' '}
|
||||
Occurred: {formatTime(entry.occurredAt)} · Recorded:{" "}
|
||||
{formatTime(entry.recordedAt)}
|
||||
</p>
|
||||
{(entry.kind === '体重' || entry.source) && (
|
||||
{(entry.kind === "体重" || entry.source) && (
|
||||
<p className="mt-2 text-xs text-muted-foreground">
|
||||
Source: {entry.source || 'Unknown'}
|
||||
Source: {entry.source || "Unknown"}
|
||||
</p>
|
||||
)}
|
||||
</article>
|
||||
@@ -142,8 +137,8 @@ export function JournalPage() {
|
||||
entry={correcting}
|
||||
onClose={() => setCorrecting(null)}
|
||||
onSave={(value) => {
|
||||
append(value, correcting.id)
|
||||
setCorrecting(null)
|
||||
append(value, correcting.id);
|
||||
setCorrecting(null);
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
@@ -158,31 +153,26 @@ export function JournalPage() {
|
||||
</p>
|
||||
<div className="journal-review-list">
|
||||
{current.map((entry) => (
|
||||
<label
|
||||
key={entry.id}
|
||||
className="journal-review-row"
|
||||
htmlFor={`review-${entry.id}`}
|
||||
>
|
||||
<label key={entry.id} className="journal-review-row" htmlFor={`review-${entry.id}`}>
|
||||
<Checkbox
|
||||
id={`review-${entry.id}`}
|
||||
checked={selected.has(entry.id)}
|
||||
onCheckedChange={(checked) =>
|
||||
setSelected((previous) => {
|
||||
const next = new Set(previous)
|
||||
if (checked) next.add(entry.id)
|
||||
else next.delete(entry.id)
|
||||
return next
|
||||
const next = new Set(previous);
|
||||
if (checked) next.add(entry.id);
|
||||
else next.delete(entry.id);
|
||||
return next;
|
||||
})
|
||||
}
|
||||
/>
|
||||
<span>
|
||||
<span className="text-xs text-muted-foreground">
|
||||
{entryKindLabels[entry.kind]} ·{' '}
|
||||
{formatTime(entry.occurredAt)}
|
||||
{entryKindLabels[entry.kind]} · {formatTime(entry.occurredAt)}
|
||||
</span>
|
||||
<span className="block text-sm">
|
||||
{entry.text}
|
||||
{entry.kind === '体重' ? ' kg' : ''}
|
||||
{entry.kind === "体重" ? " kg" : ""}
|
||||
</span>
|
||||
</span>
|
||||
</label>
|
||||
@@ -192,14 +182,12 @@ export function JournalPage() {
|
||||
aria-label="Entry summary"
|
||||
className="journal-summary"
|
||||
readOnly
|
||||
value={buildSummary(
|
||||
current.filter((entry) => selected.has(entry.id)),
|
||||
)}
|
||||
value={buildSummary(current.filter((entry) => selected.has(entry.id)))}
|
||||
/>
|
||||
</Dialog>
|
||||
)}
|
||||
</TooltipProvider>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
function EntryEditor({
|
||||
@@ -208,22 +196,21 @@ function EntryEditor({
|
||||
onSubmit,
|
||||
submitLabel,
|
||||
}: {
|
||||
draft: Draft
|
||||
onChange: (draft: Draft) => void
|
||||
onSubmit: () => void
|
||||
submitLabel: string
|
||||
draft: Draft;
|
||||
onChange: (draft: Draft) => void;
|
||||
onSubmit: () => void;
|
||||
submitLabel: string;
|
||||
}) {
|
||||
const dateId = useId()
|
||||
const dateId = useId();
|
||||
const valid =
|
||||
draft.text.trim().length > 0 &&
|
||||
(draft.kind !== '体重' ||
|
||||
(Number.isFinite(Number(draft.text)) && Number(draft.text) > 0))
|
||||
(draft.kind !== "体重" || (Number.isFinite(Number(draft.text)) && Number(draft.text) > 0));
|
||||
return (
|
||||
<form
|
||||
className="journal-editor"
|
||||
onSubmit={(event) => {
|
||||
event.preventDefault()
|
||||
if (valid) onSubmit()
|
||||
event.preventDefault();
|
||||
if (valid) onSubmit();
|
||||
}}
|
||||
>
|
||||
<fieldset className="journal-kind-switch" aria-label="Entry type">
|
||||
@@ -231,7 +218,7 @@ function EntryEditor({
|
||||
<Button
|
||||
key={kind}
|
||||
type="button"
|
||||
variant={draft.kind === kind ? 'secondary' : 'ghost'}
|
||||
variant={draft.kind === kind ? "secondary" : "ghost"}
|
||||
size="sm"
|
||||
aria-pressed={draft.kind === kind}
|
||||
onClick={() => onChange({ ...draft, kind })}
|
||||
@@ -240,7 +227,7 @@ function EntryEditor({
|
||||
</Button>
|
||||
))}
|
||||
</fieldset>
|
||||
{draft.kind === '体重' ? (
|
||||
{draft.kind === "体重" ? (
|
||||
<div className="flex items-center gap-2">
|
||||
<Input
|
||||
type="number"
|
||||
@@ -249,9 +236,7 @@ function EntryEditor({
|
||||
aria-label="Weight"
|
||||
placeholder="Weight"
|
||||
value={draft.text}
|
||||
onChange={(event) =>
|
||||
onChange({ ...draft, text: event.target.value })
|
||||
}
|
||||
onChange={(event) => onChange({ ...draft, text: event.target.value })}
|
||||
/>
|
||||
<span className="text-sm text-muted-foreground">kg</span>
|
||||
</div>
|
||||
@@ -259,24 +244,22 @@ function EntryEditor({
|
||||
<Textarea
|
||||
aria-label="Entry text"
|
||||
placeholder={
|
||||
draft.kind === '服薬'
|
||||
? 'Name of the medication taken'
|
||||
: draft.kind === '再開地点'
|
||||
? 'What to do next and where to pick up'
|
||||
: 'A thought or your next step'
|
||||
draft.kind === "服薬"
|
||||
? "Name of the medication taken"
|
||||
: draft.kind === "再開地点"
|
||||
? "What to do next and where to pick up"
|
||||
: "A thought or your next step"
|
||||
}
|
||||
value={draft.text}
|
||||
onChange={(event) => onChange({ ...draft, text: event.target.value })}
|
||||
/>
|
||||
)}
|
||||
{draft.kind === '体重' && (
|
||||
{draft.kind === "体重" && (
|
||||
<Input
|
||||
aria-label="Source"
|
||||
placeholder="Source (e.g. scale, optional)"
|
||||
value={draft.source}
|
||||
onChange={(event) =>
|
||||
onChange({ ...draft, source: event.target.value })
|
||||
}
|
||||
onChange={(event) => onChange({ ...draft, source: event.target.value })}
|
||||
/>
|
||||
)}
|
||||
<div className="journal-editor-footer">
|
||||
@@ -287,9 +270,7 @@ function EntryEditor({
|
||||
type="datetime-local"
|
||||
aria-label="When it happened"
|
||||
value={draft.occurredAt}
|
||||
onChange={(event) =>
|
||||
onChange({ ...draft, occurredAt: event.target.value })
|
||||
}
|
||||
onChange={(event) => onChange({ ...draft, occurredAt: event.target.value })}
|
||||
/>
|
||||
</label>
|
||||
<Button type="submit" disabled={!valid}>
|
||||
@@ -297,7 +278,7 @@ function EntryEditor({
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
function CorrectionDialog({
|
||||
@@ -305,11 +286,11 @@ function CorrectionDialog({
|
||||
onClose,
|
||||
onSave,
|
||||
}: {
|
||||
entry: Entry
|
||||
onClose: () => void
|
||||
onSave: (draft: Draft) => void
|
||||
entry: Entry;
|
||||
onClose: () => void;
|
||||
onSave: (draft: Draft) => void;
|
||||
}) {
|
||||
const [draft, setDraft] = useState<Draft>(entry)
|
||||
const [draft, setDraft] = useState<Draft>(entry);
|
||||
return (
|
||||
<Dialog title="Correct entry" onClose={onClose} className="sm:max-w-xl">
|
||||
<p className="text-sm text-muted-foreground">
|
||||
@@ -322,27 +303,27 @@ function CorrectionDialog({
|
||||
submitLabel="Add correction"
|
||||
/>
|
||||
</Dialog>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
function buildSummary(entries: Entry[]) {
|
||||
if (!entries.length) return 'Select an entry.'
|
||||
if (!entries.length) return "Select an entry.";
|
||||
const dates = entries
|
||||
.map((entry) => entry.occurredAt)
|
||||
.filter(Boolean)
|
||||
.sort()
|
||||
.sort();
|
||||
const period = dates.length
|
||||
? `${formatTime(dates[0])} 〜 ${formatTime(dates[dates.length - 1])}`
|
||||
: 'Unknown'
|
||||
: "Unknown";
|
||||
return [
|
||||
`Period covered: ${period}`,
|
||||
`Entries with an unknown event time: ${entries.filter((entry) => !entry.occurredAt).length} entries`,
|
||||
'',
|
||||
"",
|
||||
...entries.map(
|
||||
(entry) =>
|
||||
`[${entryKindLabels[entry.kind]}] ${entry.text}${entry.kind === '体重' ? ' kg' : ''}\nOccurred: ${formatTime(entry.occurredAt)} / Recorded: ${formatTime(entry.recordedAt)}${entry.kind === '体重' ? ` / Source: ${entry.source || 'Unknown'}` : ''}`,
|
||||
`[${entryKindLabels[entry.kind]}] ${entry.text}${entry.kind === "体重" ? " kg" : ""}\nOccurred: ${formatTime(entry.occurredAt)} / Recorded: ${formatTime(entry.recordedAt)}${entry.kind === "体重" ? ` / Source: ${entry.source || "Unknown"}` : ""}`,
|
||||
),
|
||||
'',
|
||||
'Medication and weight are unknown for periods without entries.',
|
||||
].join('\n')
|
||||
"",
|
||||
"Medication and weight are unknown for periods without entries.",
|
||||
].join("\n");
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user