mirror of
https://github.com/calibrain/shelfmark.git
synced 2026-11-14 11:20:21 +00:00
splitsec2
f02f0d7365
This is the UI side of #1581. A non-admin looking at their own notification routes reads the same help text the admin does, including "or mailtos://...?to={Email} in the admin default". They can't set that default, a personal route can't use mailtos (personal routes are limited to ntfy, Gotify, Discord, Slack, Telegram, Pushover and PushBullet), and nothing on the page says whether an admin default exists. The default's URL is hidden from them on purpose since it can carry credentials, so the page just shows an empty All row, the same as when nothing is set up. What changes, on the user's own page only (the admin's view of a user keeps the full text): - The help text drops the admin default and mailtos part and lists the services a personal route can use. - The edit-context response now carries `adminDefaultRoutesSet`, a boolean that is true when an admin default route with a URL exists. The URL itself is still not sent, and the existing test that checks nothing from the admin's values leaks still passes. - When that is true, the help text adds a line saying a default applies until the user adds their own, and once they have, that theirs replace it. How routes are resolved is unchanged. A user's own routes still replace the default and don't merge with it. I didn't try to add mailtos for personal routes, since keeping SMTP credentials in a user's own URL is what the admin default avoids. Tests: two route tests (flag true with a URL in the admin default, false with an empty row), a vitest file for the description text, and the full frontend suite, oxlint, oxfmt, tsc, ruff and basedpyright are clean. I haven't looked at the page in a browser.
Source Code Documentation
This directory contains the frontend application for Calibre-Web Automated Book Downloader.
Structure
src/
└── frontend/ # React + TypeScript frontend application
├── public/ # Static assets (logo, favicon)
├── src/ # Source code
│ ├── components/ # React components
│ ├── App.tsx # Main application component
│ └── styles.css # Global styles
├── package.json # Dependencies and scripts
├── vite.config.ts # Vite configuration
└── tsconfig.json # TypeScript configuration
Frontend Development
Prerequisites
- Node.js (v16 or higher)
- npm or yarn
Quick Start
From the project root:
# Install dependencies
make install
# Start development server (http://localhost:5173)
make dev
# Build for production
make build
# Preview production build
make preview
# Run type checking
make frontend-typecheck
Alternatively, from src/frontend:
npm install
npm run dev
npm run build
Technology Stack
- Framework: React 18 with TypeScript
- Build Tool: Vite 5
- Styling: TailwindCSS 3
- Communication: WebSocket for real-time updates
Key Features
- Search Interface: Real-time book search with filtering
- Download Queue: Live status updates via WebSocket
- Details Modal: Rich book information display
- Responsive Design: Mobile-first approach
Development Tips
Hot Module Replacement (HMR)
The development server supports HMR for instant feedback during development.
API Integration
The frontend communicates with the Flask backend via:
- REST API endpoints (
/api/*) - WebSocket connection (
ws://localhost:8084/ws)
Building for Production
The production build is optimized and minified:
make build
Output is generated in src/frontend/dist/
Type Safety
Run TypeScript checks without building:
make frontend-typecheck
Debugging
Development Server Issues
- Ensure port 5173 is available
- Check that the backend is running on port 8084
- Verify WebSocket connection in browser console
Build Issues
- Clear
node_modulesand reinstall:make clean && make install - Check Node.js version compatibility
- Verify TypeScript configuration