Fabric.Frontend/README.md

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_type channel 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).
• Dev mode — surfaces guild /ack and per-message wakeup metadata (off by default; persisted in localStorage).
• Routing is BrowserRouter on the web and HashRouter under file:// (the Electron bundle); Capacitor serves over http://localhost so it uses BrowserRouter.

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.svg is 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.