diff --git a/README.md b/README.md index 7dbf7eb..ab75962 100644 --- a/README.md +++ b/README.md @@ -1,73 +1,58 @@ -# React + TypeScript + Vite +# Fabric.Frontend -This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules. +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). -Currently, two official plugins are available: +## What it does -- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Oxc](https://oxc.rs) -- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) +- **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`. -## React Compiler +## Develop -The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation). - -## Expanding the ESLint configuration - -If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules: - -```js -export default defineConfig([ - globalIgnores(['dist']), - { - files: ['**/*.{ts,tsx}'], - extends: [ - // Other configs... - - // Remove tseslint.configs.recommended and replace with this - tseslint.configs.recommendedTypeChecked, - // Alternatively, use this for stricter rules - tseslint.configs.strictTypeChecked, - // Optionally, add this for stylistic rules - tseslint.configs.stylisticTypeChecked, - - // Other configs... - ], - languageOptions: { - parserOptions: { - project: ['./tsconfig.node.json', './tsconfig.app.json'], - tsconfigRootDir: import.meta.dirname, - }, - // other options... - }, - }, -]) +```bash +npm install +npm run dev # Vite dev server (http://localhost:5173) ``` -You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules: +## Build -```js -// eslint.config.js -import reactX from 'eslint-plugin-react-x' -import reactDom from 'eslint-plugin-react-dom' - -export default defineConfig([ - globalIgnores(['dist']), - { - files: ['**/*.{ts,tsx}'], - extends: [ - // Other configs... - // Enable lint rules for React - reactX.configs['recommended-typescript'], - // Enable lint rules for React DOM - reactDom.configs.recommended, - ], - languageOptions: { - parserOptions: { - project: ['./tsconfig.node.json', './tsconfig.app.json'], - tsconfigRootDir: import.meta.dirname, - }, - // other options... - }, - }, -]) +```bash +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.