Files
Warp/apps/ui
tajniak81andClaude Opus 5.5 8ff2730676
CI / Test (ubuntu-latest) (push) Canceled after 0s
CI / Test (windows-latest) (push) Canceled after 0s
CI / Storage tests on PostgreSQL (push) Canceled after 0s
CI / Complement (federation off) (push) Canceled after 0s
CI / golangci-lint (push) Canceled after 0s
CI / Smoke test the binary (push) Canceled after 0s
CI / Admin panel (push) Canceled after 0s
CI / Web client (push) Canceled after 0s
Web client: replies, reactions, threads and spaces
- 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>
2026-10-19 10:09:12 +02:00
..

@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, or data-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; no dark: variants. shadow-raised and shadow-float are the tokens' shadow-sm and shadow-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.