tajniak81andClaude Opus 5.5
b6f3be6ac4
apps/web: a Matrix client for the browser on Vue 3, Tailwind and matrix-js-sdk, built on @warp/ui. Like the admin panel it is an optional, separate service: warp-web embeds the built app, serves /config.json and proxies only /_matrix/client and /_matrix/media to the homeserver (or, with -public-homeserver, lets the browser call it directly). Sign-in and sign-up with registration tokens, room list, timeline with back-pagination, text, images, video and files over authenticated media, local echo with sent/read/failed states, receipts, typing, invites, creating, joining and leaving rooms, room info, settings, phone layout. End-to-end encryption through the Rust crypto: encrypted messages and files, emoji verification, key backup setup and restore. apps/ui: WRoomItem, WMessageBubble and WComposer from the brand package, and the icons the client needs. syncapi fixes found with the client: - A room joined inside the sync window was sent as the join alone with limited: false, so clients thought they had the whole room. It is now read like an initial sync; a profile change is not mistaken for a join. - A live typing notification was reported on every sync, so every long poll returned at once while anybody typed. Typing now has a position in the sync token and is reported when it changes, including the empty list when the last person stops. Also: Dockerfile, a `web` compose profile, Makefile targets, a CI job with a proxy smoke test, docs. PLAN.md moves out of the repository. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
2.8 KiB
@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.