tajniak81andClaude Opus 5.5
b6f3be6ac4
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
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>
68 lines
2.8 KiB
Markdown
68 lines
2.8 KiB
Markdown
# @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
|
|
|
|
```css
|
|
/* the app's main stylesheet */
|
|
@import "tailwindcss";
|
|
@import "@warp/ui/styles.css";
|
|
```
|
|
|
|
```ts
|
|
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.
|