mirror of
https://github.com/calibrain/shelfmark.git
synced 2026-04-20 05:51:21 -04:00
742da1c43a
This PR was coauthored by alexhb1 and davidemarcoli. It builds on the FE rework created by alex, but adds a myriad of additional tweaks and optimizations to make the frontend feel modern, fast, and responsive. The summary of the changes is as follows: ### Architecture Changes React/TypeScript Migration: Refactored frontend from template/JS structure to React/TypeScript application for better maintainability and scalability WebSocket Integration: Implemented real-time updates for download status and progress with automatic fallback to polling Gevent Worker: Configured production WebSocket support ### UI/UX Improvements <img width="1502" height="890" alt="Screenshot 2025-11-10 at 10 02 59 AM" src="https://github.com/user-attachments/assets/86bf8649-623f-413c-b8e5-656e687e55a8" /> Downloads Sidebar: Replaced bottom downloads section with sidebar interface for better organization <img width="201" height="450" alt="Screenshot 2025-11-10 at 10 07 52 AM" src="https://github.com/user-attachments/assets/92b98e7c-c3bc-4b7e-80f1-252c3a760e33" /> Status Badges: Color-coded download status indicators instead of plain text Pinned Header: Fixed header position for consistent navigation Enhanced Book Cards: Improved layout and hover states with info modal button <img width="1474" height="899" alt="Screenshot 2025-11-10 at 10 08 18 AM" src="https://github.com/user-attachments/assets/9216d8a3-f662-434d-80e6-2a69b96abc31" /> Download Progress: Circular progress indicator on download buttons Toast Notifications: Added user feedback for actions Spinner Feedback: Loading indicators on search and download buttons Animations: Smooth transitions and fluid progress updates ### Mobile & Responsive Design Mobile-friendly Layouts: Optimized book cards and search interface for mobile <img width="225" height="450" alt="Screenshot 2025-11-10 at 10 05 49 AM" src="https://github.com/user-attachments/assets/c8236c1c-5837-4309-9577-46db7292a54b" /> Keyboard Handling: Improved mobile keyboard behavior with proper input types PWA Improvements: Enhanced progressive web app functionality Responsive Search: Better search box width and positioning across devices ### Developer Experience Development Mode: Separate frontend dev server that works with existing backend container Makefile: Added build automation and development commands Documentation: Updated README with frontend architecture details ### Bug Fixes Fixed "Clear completed" functionality Fixed dark mode toggle text Fixed sticky header behavior Fixed mobile search box positioning Removed active downloads requirement for initial state view ### Additional Features ESC Key: Close downloads sidebar with ESC key Calibre-Web Button: Direct link to Calibre-Web instance <img width="282" height="83" alt="Screenshot 2025-11-11 at 9 38 05 AM" src="https://github.com/user-attachments/assets/273075be-9743-4e13-9e48-5bf498f6c067" /> Granular Status Tracking: More detailed download progress information obtained via websockets --------- Co-authored-by: Alex <alex.bilbie1@gmail.com> Co-authored-by: Zack Yancey <yanceyz@proton.me> Co-authored-by: davidemarcoli <davide@marcoli.ch>
79 lines
2.1 KiB
Makefile
79 lines
2.1 KiB
Makefile
.PHONY: help install dev build preview typecheck clean up down docker-build refresh
|
|
|
|
# Frontend directory
|
|
FRONTEND_DIR := src/frontend
|
|
|
|
# Docker compose file
|
|
COMPOSE_FILE := docker-compose.dev.yml
|
|
|
|
# Default target
|
|
help:
|
|
@echo "Available targets:"
|
|
@echo ""
|
|
@echo "Frontend:"
|
|
@echo " install - Install frontend dependencies"
|
|
@echo " dev - Start development server"
|
|
@echo " build - Build frontend for production"
|
|
@echo " preview - Preview production build"
|
|
@echo " typecheck - Run TypeScript type checking"
|
|
@echo " clean - Remove node_modules and build artifacts"
|
|
@echo ""
|
|
@echo "Backend (Docker):"
|
|
@echo " up - Start backend services"
|
|
@echo " down - Stop backend services"
|
|
@echo " docker-build - Build Docker image"
|
|
@echo " refresh - Rebuild and restart backend services"
|
|
|
|
# Install dependencies
|
|
install:
|
|
@echo "Installing frontend dependencies..."
|
|
cd $(FRONTEND_DIR) && npm install
|
|
|
|
# Start development server
|
|
dev:
|
|
@echo "Starting development server..."
|
|
cd $(FRONTEND_DIR) && npm run dev
|
|
|
|
# Build for production
|
|
build:
|
|
@echo "Building frontend for production..."
|
|
cd $(FRONTEND_DIR) && npm run build
|
|
|
|
# Preview production build
|
|
preview:
|
|
@echo "Previewing production build..."
|
|
cd $(FRONTEND_DIR) && npm run preview
|
|
|
|
# Type checking
|
|
typecheck:
|
|
@echo "Running TypeScript type checking..."
|
|
cd $(FRONTEND_DIR) && npm run typecheck
|
|
|
|
# Clean build artifacts and dependencies
|
|
clean:
|
|
@echo "Cleaning build artifacts and dependencies..."
|
|
rm -rf $(FRONTEND_DIR)/node_modules
|
|
rm -rf $(FRONTEND_DIR)/dist
|
|
|
|
# Start backend services
|
|
up:
|
|
@echo "Starting backend services..."
|
|
docker compose -f $(COMPOSE_FILE) up -d
|
|
|
|
# Stop backend services
|
|
down:
|
|
@echo "Stopping backend services..."
|
|
docker compose -f $(COMPOSE_FILE) down
|
|
|
|
# Build Docker image
|
|
docker-build:
|
|
@echo "Building Docker image..."
|
|
docker compose -f $(COMPOSE_FILE) build
|
|
|
|
# Rebuild and restart backend services
|
|
refresh:
|
|
@echo "Rebuilding and restarting backend services..."
|
|
docker compose -f $(COMPOSE_FILE) down
|
|
docker compose -f $(COMPOSE_FILE) build
|
|
docker compose -f $(COMPOSE_FILE) up -d
|