From b00da5513bca54e3a69faa44532232a6880250ff Mon Sep 17 00:00:00 2001 From: Claude Date: Sun, 12 Jul 2026 12:47:27 +0000 Subject: [PATCH 1/4] Render writing-system codes as monospace chips across the app Extracts a WsCode component and uses it in the editor's multi-writing-system field labels and the dictionary preview (which opts out of the chip chrome via plain). Chip text uses foreground/60 to clear WCAG AA on the muted fill. This gives live editor fields visual parity with the read-only diff views that later parts of the activity redesign introduce (part 2/6, assembled result reviewed in #2434). Co-Authored-By: Claude Fable 5 Claude-Session: https://claude.ai/code/session_01Vm9mEUzcfgX4oUPAbhcfsj --- .../dictionary/DictionaryEntry.svelte | 3 +- .../field-editors/multi-ws-input.svelte | 4 +-- .../field-editors/rich-multi-ws-input.svelte | 4 +-- .../components/writing-system/WsCode.svelte | 35 +++++++++++++++++++ 4 files changed, 41 insertions(+), 5 deletions(-) create mode 100644 frontend/viewer/src/lib/components/writing-system/WsCode.svelte diff --git a/frontend/viewer/src/lib/components/dictionary/DictionaryEntry.svelte b/frontend/viewer/src/lib/components/dictionary/DictionaryEntry.svelte index ed35db80fc..f06f68232e 100644 --- a/frontend/viewer/src/lib/components/dictionary/DictionaryEntry.svelte +++ b/frontend/viewer/src/lib/components/dictionary/DictionaryEntry.svelte @@ -3,6 +3,7 @@ import {usePartsOfSpeech, asString, useWritingSystemService} from '$project/data'; import type {HTMLAttributes} from 'svelte/elements'; import {Icon} from '$lib/components/ui/icon'; + import WsCode from '$lib/components/writing-system/WsCode.svelte'; import {cn} from '$lib/utils'; import type {Snippet} from 'svelte'; import Headwords from './Headwords.svelte'; @@ -115,7 +116,7 @@ {/if} {#each sense.glossesAndDefs as glossAndDef (glossAndDef.wsId)} - {glossAndDef.wsAbbr} + {#if glossAndDef.gloss} {glossAndDef.gloss}{#if glossAndDef.definition};{/if} {/if} diff --git a/frontend/viewer/src/lib/components/field-editors/multi-ws-input.svelte b/frontend/viewer/src/lib/components/field-editors/multi-ws-input.svelte index 9cd44bba1e..4b1e2fd93f 100644 --- a/frontend/viewer/src/lib/components/field-editors/multi-ws-input.svelte +++ b/frontend/viewer/src/lib/components/field-editors/multi-ws-input.svelte @@ -2,7 +2,7 @@ import {type IMultiString, type IWritingSystem} from '$lib/dotnet-types'; import type {ReadonlyDeep} from 'type-fest'; import {tryUseFieldBody} from '../editor/field/field-root.svelte'; - import {Label} from '../ui/label'; + import WsCode from '../writing-system/WsCode.svelte'; import StompSafeInput from '../stomp/stomp-safe-input.svelte'; import AudioInput from './audio-input.svelte'; import {useProjectContext} from '$project/project-context.svelte'; @@ -37,7 +37,7 @@ class="grid gap-y-2 @lg/editor:grid-cols-subgrid col-span-full items-baseline" title={`${ws.name} (${ws.wsId})`} > - + {#if !ws.isAudio} - + {#if !ws.isAudio} + import {cn} from '$lib/utils'; + import type {HTMLAttributes} from 'svelte/elements'; + + let { + abbreviation, + id, + for: forId, + plain = false, + class: className, + ...restProps + }: HTMLAttributes & { + abbreviation: string; + id?: string; + for?: string; + /** Drop the chip chrome (border/background) for print-like contexts, e.g. the dictionary preview. */ + plain?: boolean; + } = $props(); + + +{abbreviation} From 012ff09cb12ae8afd6bc385c119f523b94135d30 Mon Sep 17 00:00:00 2001 From: Tim Haasdyk Date: Thu, 23 Jul 2026 12:33:09 +0200 Subject: [PATCH 2/4] Give the editor writing-system chip full contrast The editor chip is a field's writing-system label, where a misread means data entered under the wrong writing system. foreground/60 (kept for the read-only dictionary/activity preview, where the code is a passive annotation) was too faint for that; the chip now runs full contrast in both themes. Co-Authored-By: Claude Opus 4.8 --- .../src/lib/components/writing-system/WsCode.svelte | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/frontend/viewer/src/lib/components/writing-system/WsCode.svelte b/frontend/viewer/src/lib/components/writing-system/WsCode.svelte index 209fa07492..b94d0b1c40 100644 --- a/frontend/viewer/src/lib/components/writing-system/WsCode.svelte +++ b/frontend/viewer/src/lib/components/writing-system/WsCode.svelte @@ -25,10 +25,11 @@ class={cn( 'font-mono text-xs', !plain && 'rounded border border-border bg-muted/50 px-1', - // Not text-muted-foreground: on the muted chip fill (and muted preview surfaces) that lands at ~4.4:1, - // under the 4.5:1 WCAG AA floor for this 12px text. foreground/60 keeps the same light-grey look while - // clearing AA on every surface in both themes (verified: worst case ~5.1:1 on the light muted fill). - 'text-foreground/60', + // The plain form is a passive annotation in the read-only dictionary/activity views, so it recedes at + // foreground/60 — chosen over text-muted-foreground, which lands ~4.4:1 on the muted surface, under the + // 4.5:1 AA floor for this 12px text. The chip is a field's writing-system label in the editor, where a + // misread means data entered under the wrong writing system, so it runs full contrast (both themes). + plain ? 'text-foreground/60' : 'text-foreground', className, )} {...restProps}>{abbreviation} Date: Thu, 23 Jul 2026 14:59:10 +0200 Subject: [PATCH 3/4] Bump the read-only ws-code contrast from /60 to /75 foreground/60 was the lightest grey that merely cleared AA (~5:1); the reader still parses these codes to tell which writing system each gloss is, so /75 (~9:1) reads comfortably while staying clearly subordinate to the value text. Editor chip is unaffected (full contrast). Co-Authored-By: Claude Opus 4.8 --- .../src/lib/components/writing-system/WsCode.svelte | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/frontend/viewer/src/lib/components/writing-system/WsCode.svelte b/frontend/viewer/src/lib/components/writing-system/WsCode.svelte index b94d0b1c40..05027eed06 100644 --- a/frontend/viewer/src/lib/components/writing-system/WsCode.svelte +++ b/frontend/viewer/src/lib/components/writing-system/WsCode.svelte @@ -25,11 +25,12 @@ class={cn( 'font-mono text-xs', !plain && 'rounded border border-border bg-muted/50 px-1', - // The plain form is a passive annotation in the read-only dictionary/activity views, so it recedes at - // foreground/60 — chosen over text-muted-foreground, which lands ~4.4:1 on the muted surface, under the - // 4.5:1 AA floor for this 12px text. The chip is a field's writing-system label in the editor, where a - // misread means data entered under the wrong writing system, so it runs full contrast (both themes). - plain ? 'text-foreground/60' : 'text-foreground', + // The plain form is a subordinate annotation in the read-only dictionary/activity views, so it reads + // lighter than the value text — but at foreground/75 (~9:1 on white and muted), not the AA-floor grey, + // since the reader still parses it to tell which writing system each gloss is. The chip is a field's + // writing-system label in the editor, where a misread writes data under the wrong writing system, so it + // runs full contrast (both themes). + plain ? 'text-foreground/75' : 'text-foreground', className, )} {...restProps}>{abbreviation} Date: Thu, 23 Jul 2026 15:16:26 +0200 Subject: [PATCH 4/4] Bump the editor ws-code chip to text-sm Monospace renders ~one size step smaller than the app's sans, so font-mono text-xs sat ~23% below the text-xs-sans label floor the chip replaced. text-sm mono matches that floor (and the old