Compare commits

...

1 Commits

Author SHA1 Message Date
8be68d4c87 docs: rewrite README to match current architecture
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-05-16 12:53:24 +01:00

113
README.md
View File

@@ -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) - **Auth** — login screen with a configurable Center API base
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) (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). ```bash
npm install
## Expanding the ESLint configuration npm run dev # Vite dev server (http://localhost:5173)
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...
},
},
])
``` ```
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 ```bash
// eslint.config.js npm run build # web build (absolute base) -> dist/
import reactX from 'eslint-plugin-react-x' npm run build:desktop # relative-base build -> dist-desktop/ (Electron, file://)
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...
},
},
])
``` ```
`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.