Kreeader UI

Role in the Kreeader ecosystem

This repository is the single Svelte UI source for the whole Kreeader ecosystem. It contains library browsing, reading, settings, admin and publisher surfaces, and the TV and remote-control interfaces. The application is a Svelte 5 and Vite 5 single-page application.

The repository is consumed as a Git submodule by both kreeader-server and kreeader-client.

• kreeader-server embeds the committed dist/ directly into the server binary with //go:embed all:kreeader-ui/dist in webui.go and serves it as the browser client. Its -web-dir flag overrides the embedded copy with a directory on disk, which supports UI development against a running server.
• kreeader-client is the Tauri desktop, mobile, and TV wrapper. Its tauri.conf.json points frontendDist at kreeader-ui/dist. The client also embeds dist/ in its Rust binary to serve the phone-remote routes.

The committed dist/ directory is deliberate. It is the integration artifact consumed by both superprojects, so consumers never need to run npm. CI rebuilds and commits it on every change to master.

Application entry points

Route selection is defined in src/lib/router.js.

• The default route mounts App.svelte, the full application.
• #/remote mounts PhoneRemote rather than App and provides the phone D-pad remote.
• #/tv mounts the full application directly in its TvHome.svelte 10-foot view. TvHome.svelte is the authoritative 10-foot UI specification for the ecosystem; the native kreeader-tvos app derives from it.
• #/cast mounts RemoteController.svelte, the mobile controller for the app's own Cast session or attached external display. It uses the same D-pad vocabulary as the phone remote.

There is also a separate Google Cast receiver bundle in src/cast/, including CastReceiver.svelte and receiver.html. It is built by vite.config.cast.js. The standard build command runs both the application and Cast receiver builds through build:app and build:cast.

Notable UI surfaces

The components under src/lib/components/ include:

• Library, Reader, Catalog, and SeriesExplorer browsing surfaces.
• The Layout Editor workbench under components/panes/, including PaneWorkbench, the PaneCanvas drawing and editing surface, NoteBar, PaneSidebar, PaneToolbar, DraftLayoutEditor, and detection-issue dialogs for layout detection review and correction.
• Admin and Publisher consoles.
• Authenticated creator collaboration surfaces: faceted talent discovery, creator profiles and portfolios, notifications, proposals, publisher-group agreements, work queues, and the informational ledger.
• An extensive Settings area under components/settings/ covering devices, data sources, the library manager, layout detection, distributed nodes, mail, billing and store configuration, publisher applications, release integrity, and more.
• PhoneRemote, RemoteController, and CastBar for remote and casting features.

Development

Install dependencies and start the standalone development server:

npm install
npm run dev

API calls require a running kreeader-server. Set the server URL in the application's Settings screen; the value is stored by src/lib/settings.js.

Create the production dist/, including both the application and Google Cast receiver bundles:

npm run build

Run the Node test suite over src/**/*.test.js:

npm test

To use a working production build against a live server, build the UI here and start kreeader-server with the output directory:

kreeader-server -web-dir path/to/kreeader-ui/dist

This serves the working copy instead of the snapshot embedded in the server binary.

Continuous integration

The workflows in .forgejo/workflows/ maintain the UI artifact and downstream submodule references.

• build.yml builds the UI on master pushes and pull requests.
• bump-downstream.yml runs on every master push. It opens or updates a pull request in both kreeader-server and kreeader-client, bumping their kreeader-ui submodule pointer to the current commit. This uses the AGit flow. Merging those pull requests is a human action and triggers the downstream platform builds.
• version-build.yml builds and tags every master commit with a {MAJOR}.{MINOR}-{REV} version computed by scripts/compute-version.sh.

The kreeader-client workflow check-ui-sync.yml enforces that the server and client point at the same kreeader-ui commit. This prevents the browser-served UI and the Tauri-wrapped UI from silently diverging.