mirror of
https://github.com/calibrain/shelfmark.git
synced 2026-11-15 09:38:33 +00:00
splitsec2
4c3ce3355a
Fixes #1662, thanks @mietu111 for the report and the screenshot. The source tabs share a row with up to five icons, which take 240px on a phone. On a 393px screen that leaves 113px for the tabs, so Prowlarr fits and Direct Download is down to a sliver. On a 360px screen not even Prowlarr fits. The scrollbar is hidden, so there is also nothing to tell you there is more to scroll to. With more than one source, the tabs now get their own row below the sm breakpoint and the icons sit on a row beneath them. Picking a tab also scrolls it into view, for when there are too many sources to fit. This does make the sticky header 36px taller on phones. One source and anything sm or wider stay on a single row, with the same tab positions and row height as before. I checked this with screenshots of the dialog using mocked search results, at 360 and 393px with two sources, 360px with five, 393px with one, and at 640 and 1280px with two. The filter menu and manual query panel still open correctly from the new row at 393px. There are no layout tests for this dialog, so I did not add one. Before, with Direct Download selected. The tab has 113px of space and its label is cut off. <img width="786" height="1704" alt="download" src="https://github.com/user-attachments/assets/7fc46034-4faf-438b-aed3-7d9adbd41ac9" /> After, with Direct Download selected. Both tabs fit and the icons sit on the row beneath. <img width="786" height="1704" alt="download" src="https://github.com/user-attachments/assets/e9e961e8-5f04-4b24-9483-89482891252a" /> <!-- This is an auto-generated comment: release notes by coderabbit.ai --> <!-- coderabbit-ai-generated:v1 --> ## Summary by CodeRabbit * **Improvements** * The active source tab is centered in the tab strip when selected. * On narrow screens, multiple source tabs wrap onto their own row, and the result count is hidden. <!-- end of auto-generated comment: release notes by coderabbit.ai -->
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