hzhang
4892af55e8
- Restyle: ink 'blueprint' surfaces + IBM Plex Mono / Major Mono Display, hairline borders, restrained motion, 12px radii. Fabric purple accent kept. Layout unchanged. - Brand override (build-time VITE_ only): VITE_APP_NAME / VITE_LOGO_URL / VITE_FAVICON_URL via src/lib/brand.ts (applyBrand in main.tsx); login wordmark/logo + title + favicon. .env.example documented. - dm x-type: create modal participant becomes single-select (radio) for dm and forces private; member right-click menu gains 'Create new DM channel' (non-unique, fresh channel each time). - Channels sidebar grouped by x-type with group headers. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Fabric.Frontend
The Fabric web client — React 19 + TypeScript + Vite. This is the actual
UI; it is served on the web and bundled unchanged into Fabric.Desktop
(Electron) and Fabric.Android (Capacitor).
What it does
- Auth — login screen with a configurable Center API base
(default
http://localhost:7001/api); discovers the user's guilds and short-lived guild access tokens; refreshes on mount. - Discord-style dark UI — server rail / channel sidebar / messages /
members layout; per-
x_typechannel colors + badges. - Messaging — per-message Markdown render (HTML-escaped, XSS-safe, no
cross-message bleed),
<@id>mention chips (resolved to display names, backtick-aware), no message length cap. - Channels — create-channel modal (required Type, Public, members, triage on-duty, custom listeners, discuss/work bypass multi-select); join/leave; closed-channel read-only banner.
- Members — split "In channel" / "Guild" panels for non-public channels; discuss/work bypass tag + "→ bypass" action.
- Files — composer attach (multi-file) with chips; image previews /
download chips (via
?access_token). - Canvas — pinned per-channel document panel (Markdown / sandboxed HTML
iframe / plain text), live via
canvas.*sockets; sharer-only edit/remove. - Right-click menus — native menu overridden with resource-specific context menus (guild / channel / message / user / blank areas).
- Slash autocomplete — typing
/opens a command panel from the guild's synced OpenClaw catalog (GET /api/commands): filter, ↑↓/Enter/ Esc, pick inserts/<name>, arg stage shows args + clickable choices. - Dev mode — surfaces guild
/ackand per-messagewakeupmetadata (off by default; persisted inlocalStorage). - Routing is
BrowserRouteron the web andHashRouterunderfile://(the Electron bundle); Capacitor serves overhttp://localhostso it usesBrowserRouter.
Develop
npm install
npm run dev # Vite dev server (http://localhost:5173)
Build
npm run build # web build (absolute base) -> dist/
npm run build:desktop # relative-base build -> dist-desktop/ (Electron, file://)
Fabric.Desktop / Fabric.Android run their own scripts that invoke these
builds and copy the output into their shells — you normally don't build for
them by hand.
Notes
- ES modules, Vite. App icons / favicon use the Fabric mark
(
public/favicon.svgis a vectorized, deep-green version; PNG fallbacks +apple-touch-icon). Favicon hrefs are versioned (?v=) for cache-busting. - The Center API base is entered at login, so desktop/mobile builds (no web origin) just point at the right backend host.