- Replies: Reply on a message puts it above the composer; the reply quotes it (sender and first line), and the quote goes to the message. Sent without the quoted fallback (Matrix 1.13); the fallback in older replies is not shown. - Reactions: the six quick ones of the Android app or any other emoji, chips under the message with counts, yours highlighted; a chip adds yours or takes it back. - Threads: matrix-js-sdk's thread support is on. Reply in thread opens the thread beside the room with its own composer; the root shows "N replies" and the last reply; Threads in the header lists them. Receipts are per thread (MSC3771): the room is marked read with its read marker and a separate receipt for "main", since /read_markers' receipt has no thread_id and would read every thread. Unread counts per thread (MSC3773) and a dot on unread threads. Two SDK quirks worked around: the thread view creates the thread object when a thread starts here (else the first reply's remote echo is dropped until reload), and the reply count is re-read from the root's bundled count after replies arrive (the SDK can count one twice). - Spaces: kept out of the room list; a picker narrows the list to a space's rooms and its subspaces'. A space's page (/hierarchy) lists its rooms with Open or Join; admins add existing rooms, create new ones in it and take rooms out. New space in the + menu and picker. - The room composer moved into RoomComposer.vue, shared by the room and the thread pane. New thread and space icons in apps/ui. - Dev server: the Rust crypto's .wasm was lost to vite's pre-bundling, so E2EE never started under `pnpm web:dev`; the package is now served as it is in dev. Server: /versions lists v1.1 to v1.14. matrix-js-sdk checks for the exact version a feature came in, and with only v1.13 and v1.14 it kept threads, per-thread unread counts, recursive relations and intentional mentions off. Tested in the browser against a local server: replies, reactions, threads (new and existing, in plain and encrypted rooms, receipts checked on the server) and spaces. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@warp/ui
Warp's design system for Vue 3 and Tailwind CSS v4: the brand tokens, fonts, icons and logo, and the components built on them. Every Warp app in the browser uses it, so a colour or a radius is changed here once.
The package ships source, not a build: apps import the .vue and .ts
files and their own Vite compiles them.
Use
/* the app's main stylesheet */
@import "tailwindcss";
@import "@warp/ui/styles.css";
import { WButton, WTextField, WBanner, useTheme } from '@warp/ui'
The stylesheet brings in:
tokens.css: the colour, type, space, radius and shadow tokens as CSS variables, the three font faces and the type classes (title,heading,body,small,caption,mxid,code, ...). Dark follows the OS, ordata-theme="dark"on<html>(useTheme()sets it).- A Tailwind theme on those tokens. The default palette is cleared, so the
colour utilities are the token names:
bg-surface-sunken,text-ink-muted,border-line,text-teal-text. They switch with the theme on their own; nodark:variants.shadow-raisedandshadow-floatare the tokens'shadow-smandshadow-lg. - The component styles (
wp-*classes) from the brand package, plus the ones drawn here for the apps: card, switch, checkbox, select, textarea, dialog, table, nav item, segmented control, spinner.
Components
| Component | What |
|---|---|
WLogo |
horizontal lockup or symbol, never redrawn |
WIcon |
the stroke icons, in currentColor |
WButton, WIconButton |
actions; one primary per view |
WTextField, WTextArea, WSelect, WCheckbox, WSwitch |
forms |
WAvatar, WBadge |
identity and status |
WBanner |
feedback; always icon and words, never colour alone |
WDialog |
modal on the native <dialog> |
WSpinner |
progress |
WRoomItem |
a row of the room list: avatar, name, preview, time, unread counter |
WMessageBubble |
a message with sender, time and delivery status (sending, sent, read, failed) |
WComposer |
the message field: attach, Enter sends, Shift+Enter adds a line |
Where things come from
src/styles/tokens.css, tokens.json, fonts/, the 20 brand icons in
src/icons/ and the logo paths in src/logos/ are copies from the brand
package (warp-brand/design-system). Change them there and copy them over.
The other icons (home, globe, key, trash, ...) were drawn for the
apps on the same grid: 24px, 1.75 stroke, round caps and joins.
The fonts are Outfit, Figtree and JetBrains Mono under the SIL Open Font License.
The three chat components are the brand package's RoomItem,
MessageBubble and Composer. The Matrix state itself is not here: it
lives with the web client (apps/web/src/stores, apps/web/src/matrix),
which the desktop app will reuse as a whole.