mirror of
https://github.com/bookorbit/bookorbit.git
synced 2026-11-03 08:21:39 -06:00
neon
04ac778645
Replace the three-tab dropdown with a single scrollable column ordered by how often each setting is used. The tabs gave no clue where anything lived, so finding hyphenation or the font picker meant hunting; one column makes the whole set discoverable in a single scan. Move continuous values onto sliders. Stepping page width across its range took thirty clicks, and the labels named the variable rather than the outcome, so page width now reads Narrow through Full while still storing pixels. Text size keeps discrete buttons because it is nudged constantly and steps are what that control wants. Render each theme as a miniature page in its own colors. Thirteen near-identical dots gave no way to tell Sepia from Ember without selecting one and looking at the result. Swap the desktop container from DropdownMenu to Popover, since menu semantics capture the arrow keys the new sliders need, and add a bottom sheet below the sm breakpoint so the page stays visible while it is being tuned and the controls sit within thumb reach. Both render the same panel component; only the wrapper changes. Wire up resetBookSettings, which already existed with no caller, and disable the control when the book carries no overrides. Trim the built-in fonts to Book default, Serif, Sans-serif and Monospace. The named serifs duplicated what the generic keyword already resolves to, and Palatino fell back unpredictably away from macOS. Saved selections keep rendering because the settings sanitizer accepts any font string; they simply no longer show a selected chip. Move the theme names and built-in font labels into the locale catalogs. Both were hardcoded English and so stayed untranslated in every language.
BookOrbit - Client
Vue 3 SPA built with Vite and Tailwind CSS v4.
Running
From the repo root: pnpm dev (starts both server and client).
Client only: pnpm dev (from this directory). Runs at http://localhost:5173.
The Vite dev server proxies /api and /socket.io requests to the backend at localhost:3000.
IDE setup
- VS Code: Install the Vue (Official) extension. Disable Vetur if installed.
- WebStorm / IntelliJ: Vue support is built in. Enable TypeScript service for
.vuefiles. - Browser: Install Vue.js devtools and enable Custom Object Formatters in DevTools settings.
Project layout
src/
├── features/ Feature modules (one folder per domain)
│ ├── auth/ Login, registration, password reset
│ ├── book/ Book detail, covers, metadata
│ ├── library/ Library management
│ ├── collection/ Book collections
│ ├── smart-scope/ Saved search views
│ ├── scanner/ Scan progress UI
│ ├── reader/ Book reader (epub, pdf, cbz)
│ ├── settings/ User settings
│ └── admin/ Admin panel (users, roles, settings)
├── components/ Shared components (header, sidebar, icons)
│ └── ui/ Reusable UI primitives (button, dialog, etc.)
├── composables/ Global composables
├── views/ Route-level page components
├── router/ Vue Router config and guards
├── lib/ Utilities (api client, helpers)
├── stores/ Pinia stores (theme only - prefer composables)
└── assets/ CSS, fonts, static assets
Testing
pnpm test:unit # run unit tests
pnpm test:cov # run unit tests with coverage
Key conventions
- All components use
<script setup lang="ts">(Composition API only). - Feature state lives in composables (
features/<name>/composables/use*.ts), not global stores. - HTTP calls use the native
fetchAPI viasrc/lib/api.ts. - Styling with Tailwind CSS v4 utility classes. Theme tokens are CSS variables in
src/assets/main.css. - Icons from
@lucide/vueonly. - Shared types imported from
@bookorbit/types.