Files
tajniak81andClaude Opus 5.5 829b236efe
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
CI / Desktop client (ubuntu-24.04) (push) Canceled after 0s
CI / Desktop client (windows-latest) (push) Canceled after 0s
Desktop: notifications, tray, auto-update, installer; web: sliding sync, voice messages, notifications
Web client (also what the desktop app runs):

- Simplified Sliding Sync (MSC4186) when the homeserver advertises
  org.matrix.simplified_msc3575. src/matrix/sliding.ts answers the SDK's
  GET /sync with a sliding sync request and rewrites the response into
  the /sync shape, as the Android app does; the SDK's own sliding sync
  mode doesn't sort thread replies into threads. 20 rooms first, then
  every room (up to 1000); to_device, e2ee, account data, receipts and
  typing extensions; M_UNKNOWN_POS starts a new connection. The SDK's
  /members?at=<sync token> drops the token, which here is ours. Settings
  can switch back to /sync.
- Notifications for new messages and incoming calls while Warp isn't in
  front, by the account's push rules, evaluated after decryption. The
  browser's Notification API once turned on in Settings, or the desktop
  app's bridge (window.warpDesktop). One per room; a click opens it.
- Voice messages: record from the composer, sent as m.audio with
  MSC3245's voice marker and MSC1767's duration and waveform (encrypted
  in encrypted rooms); a waveform player in the timeline.
- @warp/ui: a slot for extra composer buttons; bell-off, play and pause
  icons.

Desktop app:

- System notifications through Wails' notifications service, fed by
  /_desktop/bridge.js (/_desktop/notify, JSON only); clicking one shows
  the window and opens the room.
- Tray icon with Open and Quit; closing the window hides it (a one-time
  notification says so), File > Quit ends it. The page title goes to
  the window and the tray tooltip, the unread count to the taskbar or
  Dock badge.
- Auto-update from a Wails update manifest at DESKTOP_UPDATE_URL: a quiet
  check a minute after start and every six hours, a notification when a
  newer version exists, Help > Check for updates opens the update window.
  Optional signature key (DESKTOP_UPDATE_KEY). Linux package installs
  leave updates to the package manager. build/manifest writes the
  manifest.
- Per-user NSIS installer (make desktop-windows-installer), the macOS
  bundle zipped for the updater, a desktop CI job, and a Desktop release
  workflow that builds all three platforms and the manifest.

Tested on Windows against a local homeserver: sliding sync with E2EE,
threads and a server restart; notifications (toast history), close to
tray, relaunch restoring the window; voice messages recorded, sent and
played, encrypted too; the update check finding a newer version. Not
tested: installing an update, the NSIS installer, CI, macOS and Linux.
Code signing needs certificates and isn't done.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
2026-10-19 14:01:02 +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.