Phase 10: organization & polish — cross-doc search, tags, touch, warm failures
Cross-document FTS5 search (trigram tokenizer for EN + space-free CJK, kept in sync by triggers, back-filled from existing docs). GET /api/search uses the FTS index for queries >=3 runes and a LIKE fallback for 1-2 (so 2-char Chinese words resolve); snippets are built in Go with rune-aware boundaries and sentinel highlights. Tags: user-scoped tags + document_tags join (both cascade), idempotent create/assign, per-tag doc counts. Doc list and search carry each doc's tags (one tagsByDoc query). Frontend: useTags, TagChip/TagPicker/SearchBox, rewritten DocList with chips + filter bar + search. Tablet/touch: responsive sidebar drawer (hamburger + scrim <768px), coarse- pointer tap targets, tap-to-open + outside-pointerdown-close for suggestion cards. Warm LLM-down state: useCheckpoint llmDown flag drives a gentle bilingual StatusBar note (writing still saves locally). Migration 0004 (tags + FTS). Tests: tags lifecycle, search EN/CJK/LIKE/update- reindex. go build/vet/test, tsc, vite all clean; verified live on deployment host. Claude-Session: https://claude.ai/code/session_016Yr6jELuRc7hyzYLccQKZd
This commit is contained in:
prosolis
@@ -1,8 +1,9 @@
|
||||
import { useCallback, useEffect, useRef, useState } from 'react'
|
||||
import { api, type DocSummary, type Document, type Suggestion } from './api/client'
|
||||
import { api, type DocSummary, type Document, type Suggestion, type Tag, type TagColor } from './api/client'
|
||||
import { useAutoSave } from './hooks/useAutoSave'
|
||||
import { useCheckpoint } from './hooks/useCheckpoint'
|
||||
import { useSpellChecker } from './hooks/useSpellChecker'
|
||||
import { useTags } from './hooks/useTags'
|
||||
import { DocList } from './components/DocList/DocList'
|
||||
import { EditorCore, type EditorChange } from './components/Editor/EditorCore'
|
||||
import { ToneSelect } from './components/Editor/ToneSelect'
|
||||
@@ -27,6 +28,9 @@ export default function App() {
|
||||
// Distraction-free mode: entered on editor focus, collapses the doc-list
|
||||
// sidebar. Escape or a click outside the editor canvas restores it.
|
||||
const [focusMode, setFocusMode] = useState(false)
|
||||
// Mobile drawer: below the tablet breakpoint the sidebar is an overlay toggled
|
||||
// by the header hamburger. Ignored on wide screens (sidebar is always in-flow).
|
||||
const [drawerOpen, setDrawerOpen] = useState(false)
|
||||
const canvasRef = useRef<HTMLDivElement>(null)
|
||||
// Monotonic counters the companion watches to react to writing + accepts.
|
||||
const [editTick, setEditTick] = useState(0)
|
||||
@@ -59,20 +63,67 @@ export default function App() {
|
||||
suggestions,
|
||||
checking,
|
||||
voicing,
|
||||
llmDown,
|
||||
schedule: scheduleCheckpoint,
|
||||
runVoice,
|
||||
removeSuggestion,
|
||||
} = useCheckpoint(currentDoc?.id ?? null)
|
||||
// Browser-side spell checker — loads the en-US dictionary once per session.
|
||||
const { checker: spellChecker, addWord } = useSpellChecker()
|
||||
// The tag roster (with counts). Assignments live on the doc summaries below.
|
||||
const { tags: tagRoster, refresh: refreshTags, createTag } = useTags()
|
||||
|
||||
// Patch a summary in the sidebar list (optimistic title / word-count updates).
|
||||
const patchSummary = useCallback((id: string, patch: Partial<DocSummary>) => {
|
||||
setDocs((prev) => prev.map((d) => (d.id === id ? { ...d, ...patch } : d)))
|
||||
}, [])
|
||||
|
||||
// Attach or detach a tag on a document, updating the sidebar optimistically and
|
||||
// refreshing the roster so its counts stay current. Tags are kept sorted by
|
||||
// name to match the server's ordering.
|
||||
const setDocTag = useCallback(
|
||||
async (docId: string, tag: Tag, attach: boolean) => {
|
||||
setDocs((prev) =>
|
||||
prev.map((d) => {
|
||||
if (d.id !== docId) return d
|
||||
const without = d.tags.filter((t) => t.id !== tag.id)
|
||||
const next = attach ? [...without, tag] : without
|
||||
next.sort((a, b) => a.name.localeCompare(b.name, undefined, { sensitivity: 'base' }))
|
||||
return { ...d, tags: next }
|
||||
}),
|
||||
)
|
||||
try {
|
||||
if (attach) await api.assignTag(docId, tag.id)
|
||||
else await api.unassignTag(docId, tag.id)
|
||||
void refreshTags()
|
||||
} catch (err) {
|
||||
console.error('tag assignment failed', err)
|
||||
void refreshTags()
|
||||
}
|
||||
},
|
||||
[refreshTags],
|
||||
)
|
||||
|
||||
const handleToggleTag = useCallback(
|
||||
(docId: string, tag: Tag) => {
|
||||
const doc = docs.find((d) => d.id === docId)
|
||||
const has = doc?.tags.some((t) => t.id === tag.id) ?? false
|
||||
void setDocTag(docId, tag, !has)
|
||||
},
|
||||
[docs, setDocTag],
|
||||
)
|
||||
|
||||
const handleCreateTag = useCallback(
|
||||
async (docId: string, name: string, color: TagColor) => {
|
||||
const tag = await createTag(name, color)
|
||||
if (tag) void setDocTag(docId, tag, true)
|
||||
},
|
||||
[createTag, setDocTag],
|
||||
)
|
||||
|
||||
const openDoc = useCallback(
|
||||
async (id: string) => {
|
||||
setDrawerOpen(false) // close the mobile drawer when a doc is chosen
|
||||
// Decide the leaving doc's fate before any await mutates state.
|
||||
const leaving = currentDocRef.current
|
||||
const leavingBlank = isBlankDraft()
|
||||
@@ -103,7 +154,7 @@ export default function App() {
|
||||
let list = await api.listDocs()
|
||||
if (list.length === 0) {
|
||||
const fresh = await api.createDoc()
|
||||
list = [{ id: fresh.id, title: fresh.title, word_count: 0, updated_at: fresh.updated_at }]
|
||||
list = [{ id: fresh.id, title: fresh.title, word_count: 0, updated_at: fresh.updated_at, tags: [] }]
|
||||
setDocs(list)
|
||||
setCurrentDoc(fresh)
|
||||
setTitle(fresh.title)
|
||||
@@ -129,7 +180,7 @@ export default function App() {
|
||||
await saveNow()
|
||||
const fresh = await api.createDoc()
|
||||
setDocs((prev) => [
|
||||
{ id: fresh.id, title: fresh.title, word_count: 0, updated_at: fresh.updated_at },
|
||||
{ id: fresh.id, title: fresh.title, word_count: 0, updated_at: fresh.updated_at, tags: [] },
|
||||
...prev,
|
||||
])
|
||||
setCurrentDoc(fresh)
|
||||
@@ -265,23 +316,44 @@ export default function App() {
|
||||
className="petal-no-print flex h-12 shrink-0 items-center gap-2 px-5"
|
||||
style={{ borderBottom: '1px solid var(--color-border)' }}
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
aria-label="Toggle document list"
|
||||
onClick={() => {
|
||||
setFocusMode(false)
|
||||
setDrawerOpen((v) => !v)
|
||||
}}
|
||||
className="petal-sidebar-toggle petal-tap-sm -ml-2 mr-1 items-center justify-center text-xl"
|
||||
style={{ borderRadius: 'var(--radius-pill)', width: 36, height: 36, color: 'var(--color-plum)' }}
|
||||
>
|
||||
☰
|
||||
</button>
|
||||
<span className="text-xl">🌸</span>
|
||||
<span className="text-lg font-extrabold text-plum">Petal</span>
|
||||
</header>
|
||||
|
||||
<div className="flex min-h-0 flex-1">
|
||||
<div className="relative flex min-h-0 flex-1">
|
||||
<div
|
||||
className={`petal-no-print petal-sidebar shrink-0${focusMode ? ' petal-sidebar-hidden' : ''}`}
|
||||
className={`petal-no-print petal-sidebar shrink-0${focusMode ? ' petal-sidebar-hidden' : ''}${drawerOpen ? ' petal-drawer-open' : ''}`}
|
||||
>
|
||||
<DocList
|
||||
docs={docs}
|
||||
roster={tagRoster}
|
||||
selectedId={currentDoc?.id ?? null}
|
||||
onSelect={openDoc}
|
||||
onCreate={handleCreate}
|
||||
onDelete={handleDelete}
|
||||
onToggleTag={handleToggleTag}
|
||||
onCreateTag={handleCreateTag}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div
|
||||
className={`petal-no-print petal-scrim${drawerOpen ? ' petal-scrim-show' : ''}`}
|
||||
onClick={() => setDrawerOpen(false)}
|
||||
aria-hidden
|
||||
/>
|
||||
|
||||
<main className="flex min-w-0 flex-1 flex-col">
|
||||
{currentDoc ? (
|
||||
<>
|
||||
@@ -346,6 +418,7 @@ export default function App() {
|
||||
saveStatus={status}
|
||||
checking={checking}
|
||||
voicing={voicing}
|
||||
llmDown={llmDown}
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
|
||||
Reference in New Issue
Block a user