Activity redesign part 2: render writing-system codes as monospace chips

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}
       <span>
         {#each sense.glossesAndDefs as glossAndDef (glossAndDef.wsId)}
-          <sub class="-mr-0.5">{glossAndDef.wsAbbr}</sub>
+          <WsCode plain abbreviation={glossAndDef.wsAbbr} class="-mr-0.5 align-sub" />
           {#if glossAndDef.gloss}
             <span class={glossAndDef.color}>{glossAndDef.gloss}</span>{#if glossAndDef.definition};{/if}
           {/if}

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})`}
     >
-      <Label id={labelId} for={inputId}>{ws.abbreviation}</Label>
+      <WsCode id={labelId} for={inputId} abbreviation={ws.abbreviation} class="justify-self-start" />
       {#if !ws.isAudio}
         <StompSafeInput
           bind:value={value[ws.wsId]}

frontend/viewer/src/lib/components/field-editors/rich-multi-ws-input.svelte

@@ -3,7 +3,7 @@
   import type {ReadonlyDeep} from 'type-fest';
   import type {IRichString} from '$lib/dotnet-types/generated-types/MiniLcm/Models/IRichString';
   import {tryUseFieldBody} from '../editor/field/field-root.svelte';
-  import {Label} from '../ui/label';
+  import WsCode from '../writing-system/WsCode.svelte';
   import StompSafeLcmRichTextEditor from '../stomp/stomp-safe-lcm-rich-text-editor.svelte';
   import AudioInput from '$lib/components/field-editors/audio-input.svelte';
   import {useProjectContext} from '$project/project-context.svelte';
@@ -58,7 +58,7 @@
       class="grid gap-y-2 @lg/editor:grid-cols-subgrid col-span-full items-baseline"
       title={`${ws.name} (${ws.wsId})`}
     >
-      <Label id={labelId} for={inputId}>{ws.abbreviation}</Label>
+      <WsCode id={labelId} for={inputId} abbreviation={ws.abbreviation} class="justify-self-start" />
       {#if !ws.isAudio}
         <StompSafeLcmRichTextEditor
           bind:value={value[ws.wsId]}

frontend/viewer/src/lib/components/writing-system/WsCode.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+  import {cn} from '$lib/utils';
+  import type {HTMLAttributes} from 'svelte/elements';
+
+  let {
+    abbreviation,
+    id,
+    for: forId,
+    plain = false,
+    class: className,
+    ...restProps
+  }: HTMLAttributes<HTMLElement> & {
+    abbreviation: string;
+    id?: string;
+    for?: string;
+    /** Drop the chip chrome (border/background) for print-like contexts, e.g. the dictionary preview. */
+    plain?: boolean;
+  } = $props();
+</script>
+
+<svelte:element
+  this={forId ? 'label' : 'span'}
+  for={forId}
+  {id}
+  class={cn(
+    'font-mono',
+    // Monospace renders ~one step smaller than the app's sans, so the chip uses text-sm to match the
+    // text-xs-sans label floor it replaced; the plain form stays text-xs to recede inline beside the gloss.
+    plain ? 'text-xs' : 'text-sm',
+    !plain && 'rounded border border-border bg-muted/50 px-1',
+    // 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}</svelte:element
+>