mirror of
https://github.com/mauriceboe/TREK.git
synced 2026-10-20 05:56:53 +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.
36 lines
1.7 KiB
TypeScript
36 lines
1.7 KiB
TypeScript
import { describe, it, expect } from 'vitest'
|
|
import { noteSurface } from './noteSurface'
|
|
|
|
describe('noteSurface', () => {
|
|
it('FE-NOTESURFACE-001: no colour keeps the neutral card the notes have always had', () => {
|
|
const s = noteSurface(null)
|
|
expect(s.background).toBe('var(--bg-hover)')
|
|
expect(s.iconColor).toBe('var(--text-muted)')
|
|
// Nothing colour-derived leaks in: the neutral card must survive a theme swap.
|
|
expect(Object.values(s).every(v => !v.includes('color-mix'))).toBe(true)
|
|
})
|
|
|
|
it('FE-NOTESURFACE-002: empty string and undefined are "no colour", not a broken mix', () => {
|
|
expect(noteSurface('')).toEqual(noteSurface(null))
|
|
expect(noteSurface(undefined)).toEqual(noteSurface(null))
|
|
})
|
|
|
|
it('FE-NOTESURFACE-003: a colour tints the card and fills the icon with the colour itself', () => {
|
|
const s = noteSurface('#dc2626')
|
|
expect(s.iconColor).toBe('#dc2626')
|
|
// Mixed against transparent, not against a fixed white or grey — the card
|
|
// has to sit on whatever surface it lands on, in either theme.
|
|
expect(s.background).toBe('color-mix(in srgb, #dc2626 11%, transparent)')
|
|
expect(s.border).toBe('color-mix(in srgb, #dc2626 38%, transparent)')
|
|
expect(s.iconBackground).toBe('color-mix(in srgb, #dc2626 22%, transparent)')
|
|
})
|
|
|
|
it('FE-NOTESURFACE-004: the card stays a wash while the icon carries the full colour', () => {
|
|
const s = noteSurface('#2563eb')
|
|
const pct = (v: string) => Number(/(\d+)%/.exec(v)![1])
|
|
// Text is read on top of the background, so it must be the lightest of the three.
|
|
expect(pct(s.background)).toBeLessThan(pct(s.iconBackground))
|
|
expect(pct(s.iconBackground)).toBeLessThan(pct(s.border))
|
|
})
|
|
})
|