82e2bcc777
Surface every outstanding suggestion as a card in the right-hand
whitespace, vertically aligned to the text it flags — so the writer sees
the whole queue at once instead of hovering each highlight. Cards stack
with collision avoidance, link both ways with their highlight (hover/click
↔ soft text wash, driven through the decoration plugin so it survives
edit repaints), and carry the same Accept / Dismiss / Ask Petal actions.
The rail is a progressive enhancement: it mounts only when there's room
beside the editor, otherwise the existing inline hover card is unchanged.
Stacked cards that reach the bottom-right corner tuck behind the
companion mascot (z-order).
When a card is expanded, the Ask Petal bubble now opens with the
Simplified-Chinese translation of the explanation (the English stays in
the card body) instead of repeating the same text twice — a new
POST /api/suggestions/{id}/translate one-shot LLM endpoint, loaded
lazily on open with an English fallback.
Verified live against the local LLM via the uitest harness: rail
stacking, hover↔text wash, expand/Ask Petal, accept-from-rail, narrow
fallback, and the Mandarin bubble.
Claude-Session: https://claude.ai/code/session_016Yr6jELuRc7hyzYLccQKZd
13 lines
669 B
TypeScript
13 lines
669 B
TypeScript
import type { SuggestionType } from '../../api/client'
|
|
|
|
// Per-type accent color + human label, mirroring the design tokens. Shared by the
|
|
// inline hover SuggestionCard and the margin SuggestionRail so a given suggestion
|
|
// type reads the same color/name wherever it surfaces.
|
|
export const TYPE_META: Record<SuggestionType, { color: string; label: string }> = {
|
|
grammar: { color: 'var(--color-mint)', label: 'Grammar' },
|
|
phrasing: { color: 'var(--color-peach)', label: 'Phrasing' },
|
|
idiom: { color: 'var(--color-lavender)', label: 'Idiom' },
|
|
clarity: { color: 'var(--color-sky)', label: 'Clarity' },
|
|
voice: { color: 'var(--color-honey)', label: 'Voice' },
|
|
}
|