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

[myieye]

[Claude, autonomous]

Render writing-system codes as monospace chips via a new WsCode component: a bordered chip for the editor's multi-writing-system field labels (multi-ws-input, rich-multi-ws-input) and a chrome-less plain variant in the dictionary preview. Part 2/8 of the activity redesign; follows #2435.

Groundwork for rendering writing-system codes in the activity-item summaries later in the series. The monospace treatment came from a UX reviewer's suggestion that the codes should read more like codes.

Chip text uses text-foreground/60 (not text-muted-foreground) to clear WCAG AA on the muted fill at 12px.

Screenshots

All-writing-systems demo entry (!nyumba); click to enlarge.

Context	Before	After · light	After · dark
Editor field labels
Dictionary preview

[coderabbitai]

📝 Walkthrough

Walkthrough

Adds a reusable WsCode component for rendering writing-system abbreviations and replaces existing abbreviation and label markup in dictionary and multi-writing-system input components.

Changes

Writing-system code rendering

Layer / File(s)	Summary
WsCode component contract and rendering frontend/viewer/src/lib/components/writing-system/WsCode.svelte	Adds typed props, conditional span/label rendering, attribute forwarding, plain-mode styling, and abbreviation output.
Writing-system code integrations frontend/viewer/src/lib/components/dictionary/DictionaryEntry.svelte, frontend/viewer/src/lib/components/field-editors/*.svelte	Uses WsCode for dictionary abbreviations and writing-system input labels while preserving input associations.

Estimated code review effort: 2 (Simple) | ~10 minutes

Poem

A rabbit hops through labels bright,
With code chips trimmed and neat,
WsCode bounds each language sign,
In fields and entries sweet.
Ears perk—shared markup wins the night!

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Title check	✅ Passed	The title clearly matches the main change: adding monospace chip rendering for writing-system codes.
Description check	✅ Passed	The description accurately describes the new WsCode component and its use in the editor and dictionary preview.

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch claude/activity-2-ws-code-chips

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[argos-ci]

The latest updates on your projects. Learn more about Argos notifications ↗︎

Build	Status	Details	Updated (UTC)
default (Inspect)	⚠️ Changes detected (Review)	4 changed	Jul 23, 2026, 1:21 PM
e2e (Inspect)	⚠️ Changes detected (Review)	4 changed	Jul 23, 2026, 1:29 PM

[myieye]

@hahn-kev This could be a self review, but changing the ws-code labels feels significant, so please see if you like them.

[hahn-kev]

Yeah, I almost want to get input from Sara on this one actually.

[myieye]

I think I'm just going to forget about this actually. I'm just gonna focus on making the activity view look the way we want it.
It's not obvious to me that this adds value. I convinced myself, because Alex M. said our codes should maybe look more like codes, but...these aren't actually even the WS codes - their abbreviations 🙃. So, I'm not sure what to think of this and don't want it to slow me down.