mirror of
https://github.com/mauriceboe/TREK.git
synced 2026-10-19 13:36:48 +00:00
Maurice
ce37e8e97c
* Rich formatting and colours for notes Asked for in discussion #1629: notes should carry formatting, links and colour, so a warning reads differently from a recommendation. Notes have rendered Markdown for a long time. The problem was that the only way to write it was a bare textarea, so unless you already knew the syntax there was nothing to tell you it existed. Both note fields get a formatting bar - bold, italic, strikethrough, code, link, lists, quote - which edits Markdown rather than replacing it with a rich-text model, so the stored value stays plain text that the PDF, the plugin API and every existing note keep reading unchanged. Links now open in their own tab. A bare anchor navigates the planner away, which loses the open day and the map, and without rel=noopener the opened page can navigate this one - notes are content other trip members wrote. Day notes get a colour from a short shared palette. It tints the card, the border and the icon circle, and it reaches the PDF as the spine and rule rather than a fill. The dialog is two columns now, with a live preview of the card beside the picker, because a row of swatches says nothing about what a tinted note looks like next to a place. On the phone the thirty-two icon grid was most of the screen, so it is folded behind the chosen icon, which doubles as the colour preview. The detail field there got the same formatting bar and the same 2000 character ceiling as the desktop one - they write the same column. * Fix the tests that pinned the old note caps, and rework the note actions The e2e suite builds its own day_notes table by hand rather than going through schema.ts, so it never got the new column and every note insert came back 500. Three more tests wrote down the 250 character body cap and the old create() arity. While in there: the edit and delete buttons on a note card were a 10px icon in a 14px box, side by side, and they took width away from the text on every note whether you were hovering or not. They are stacked in a capsule now, 30px targets with their own hover states, floating over the right edge of the card only while the pointer is on it. The text keeps the full width the rest of the time. * Centre the day badge when there is no weather to stack under it The badge is pinned to the top of the row because with weather it is a tall stack that has to start there. Without a location there is no weather block, so all that is left is a 26px circle floating above the day title. * Render the place subtitle in the places list, and drop the form hint The row in the places sidebar printed the description raw while the same line in the day plan renders it, so a place written with the formatting bar read as _underscores_ in one list and italics in the other. Still clamped to one line - it is a list entry, not the inspector. The "Markdown supported" line under the notes field goes: the bar above it already says so.
84 lines
3.7 KiB
TypeScript
84 lines
3.7 KiB
TypeScript
import { useState, useRef } from 'react'
|
|
import { useTripStore } from '../store/tripStore'
|
|
import { useToast } from '../components/shared/Toast'
|
|
import { useTranslation } from '../i18n'
|
|
import type { MergedItem, DayNotesMap, DayNote } from '../types'
|
|
|
|
interface NoteUiState {
|
|
mode: 'add' | 'edit'
|
|
noteId?: number
|
|
text: string
|
|
time: string
|
|
icon: string
|
|
/** One of NOTE_COLORS, or null for the neutral card (#1629). Absent on a
|
|
* caller that predates colours, which then leaves the stored one alone. */
|
|
color?: string | null
|
|
sortOrder?: number
|
|
}
|
|
|
|
interface NoteUiMap {
|
|
[dayId: string]: NoteUiState
|
|
}
|
|
|
|
export function useDayNotes(tripId: number | string) {
|
|
const [noteUi, setNoteUi] = useState<NoteUiMap>({})
|
|
const noteInputRef = useRef<HTMLInputElement | null>(null)
|
|
const tripStore = useTripStore()
|
|
const toast = useToast()
|
|
const { t } = useTranslation()
|
|
const dayNotes: DayNotesMap = tripStore.dayNotes || {}
|
|
|
|
const openAddNote = (dayId: number, getMergedItems: (dayId: number) => MergedItem[], expandDay?: (dayId: number) => void) => {
|
|
const merged = getMergedItems(dayId)
|
|
const maxKey = merged.length > 0 ? Math.max(...merged.map((i) => i.sortKey)) : -1
|
|
setNoteUi((prev) => ({ ...prev, [dayId]: { mode: 'add', text: '', time: '', icon: 'FileText', color: null, sortOrder: maxKey + 1 } }))
|
|
expandDay?.(dayId)
|
|
setTimeout(() => noteInputRef.current?.focus(), 50)
|
|
}
|
|
|
|
const openEditNote = (dayId: number, note: DayNote) => {
|
|
setNoteUi((prev) => ({ ...prev, [dayId]: { mode: 'edit', noteId: note.id, text: note.text, time: note.time || '', icon: note.icon || 'FileText', color: note.color ?? null } }))
|
|
setTimeout(() => noteInputRef.current?.focus(), 50)
|
|
}
|
|
|
|
const cancelNote = (dayId: number) => {
|
|
setNoteUi((prev) => { const n = { ...prev }; delete n[dayId]; return n })
|
|
}
|
|
|
|
const saveNote = async (dayId: number) => {
|
|
const ui = noteUi[dayId]
|
|
if (!ui?.text?.trim()) return
|
|
try {
|
|
if (ui.mode === 'add') {
|
|
await tripStore.addDayNote(tripId, dayId, { text: ui.text.trim(), time: ui.time || null, icon: ui.icon || 'FileText', color: ui.color ?? null, sort_order: ui.sortOrder })
|
|
} else {
|
|
await tripStore.updateDayNote(tripId, dayId, ui.noteId!, { text: ui.text.trim(), time: ui.time || null, icon: ui.icon || 'FileText', color: ui.color })
|
|
}
|
|
cancelNote(dayId)
|
|
} catch (err: unknown) { toast.error(err instanceof Error ? err.message : t('common.unknownError')) }
|
|
}
|
|
|
|
const deleteNote = async (dayId: number, noteId: number) => {
|
|
try { await tripStore.deleteDayNote(tripId, dayId, noteId) }
|
|
catch (err: unknown) { toast.error(err instanceof Error ? err.message : t('common.unknownError')) }
|
|
}
|
|
|
|
const moveNote = async (dayId: number, noteId: number, direction: 'up' | 'down', getMergedItems: (dayId: number) => MergedItem[]) => {
|
|
const merged = getMergedItems(dayId)
|
|
const idx = merged.findIndex((i) => i.type === 'note' && (i.data as DayNote).id === noteId)
|
|
if (idx === -1) return
|
|
let newSortOrder: number
|
|
if (direction === 'up') {
|
|
if (idx === 0) return
|
|
newSortOrder = idx >= 2 ? (merged[idx - 2].sortKey + merged[idx - 1].sortKey) / 2 : merged[idx - 1].sortKey - 1
|
|
} else {
|
|
if (idx >= merged.length - 1) return
|
|
newSortOrder = idx < merged.length - 2 ? (merged[idx + 1].sortKey + merged[idx + 2].sortKey) / 2 : merged[idx + 1].sortKey + 1
|
|
}
|
|
try { await tripStore.updateDayNote(tripId, dayId, noteId, { sort_order: newSortOrder }) }
|
|
catch (err: unknown) { toast.error(err instanceof Error ? err.message : t('common.unknownError')) }
|
|
}
|
|
|
|
return { noteUi, setNoteUi, noteInputRef, dayNotes, openAddNote, openEditNote, cancelNote, saveNote, deleteNote, moveNote }
|
|
}
|