# Changelog

## [Unreleased] - Branch: feature/PreloadImage

### 🚀 Slideshow Optimization (November 2025)

#### Features
- ✅ **Image Preloading**: Intelligent preloading of next 2-3 images
  - Custom hook `useImagePreloader.js` for background image loading
  - Eliminates visible loading delays during slideshow transitions
  - Cache management with LRU strategy (max 10 images)
  - 3-second timeout for slow connections with graceful fallback
  
- ✅ **Chronological Sorting**: Groups now display in chronological order
  - Primary sort: Year (ascending, oldest first)
  - Secondary sort: Upload date (ascending)
  - Sequential group transitions instead of random
  - Consistent viewing experience across sessions

#### Technical Details
- **Frontend Changes**:
  - New file: `frontend/src/hooks/useImagePreloader.js`
  - Modified: `frontend/src/Components/Pages/SlideshowPage.js`
  - Removed random shuffle algorithm
  - Added predictive image loading with Image() API
  - Debug logging in development mode

#### Bug Fixes
- 🐛 Fixed: Duplicate image display issue in slideshow (network latency)
- 🐛 Fixed: Flickering transitions between images
- 🐛 Fixed: Loading delays visible to users on slower connections

#### Performance
- ⚡ 0ms load time for pre-cached images (vs. 200-1500ms before)
- ⚡ Seamless transitions with no visual artifacts
- ⚡ Better UX on production servers with slower internet

---

## [Unreleased] - Branch: feature/DeleteUnprovedGroups

### ✨ Automatic Cleanup Feature (November 2025)

#### Backend
- ✅ **Database Schema**: New `deletion_log` table for audit trail
  - Columns: group_id, year, image_count, upload_date, deleted_at, deletion_reason, total_file_size
  - Performance indexes: idx_groups_cleanup, idx_groups_approved, idx_deletion_log_deleted_at
  - Automatic schema migration on server startup

- ✅ **Services**: New cleanup orchestration layer
  - `GroupCleanupService.js` - Core cleanup logic with 7-day threshold
  - `SchedulerService.js` - Cron job scheduler (daily at 10:00 AM Europe/Berlin)
  - Complete file deletion: originals + preview images
  - Comprehensive logging with statistics

- ✅ **Repositories**: Extended data access layer
  - `DeletionLogRepository.js` - CRUD operations for deletion history
  - `GroupRepository.js` - New methods:
    - `findUnapprovedGroupsOlderThan()` - Query old unapproved groups
    - `getGroupStatistics()` - Gather metadata before deletion
    - `deleteGroupCompletely()` - Transactional deletion with CASCADE

- ✅ **API Endpoints**: Admin API routes (`/api/admin/*`)
  - `GET /deletion-log?limit=N` - Recent deletions with pagination
  - `GET /deletion-log/all` - Complete deletion history
  - `GET /deletion-log/stats` - Statistics with formatted file sizes
  - `POST /cleanup/trigger` - Manual cleanup trigger (testing)
  - `GET /cleanup/preview` - Dry-run preview of deletions

- ✅ **Dependencies**: Added `node-cron@3.0.3` for scheduled tasks

#### Frontend
- ✅ **Components**: New deletion log display
  - `DeletionLogSection.js` - Statistics cards + history table
  - Statistics: Total groups/images deleted, storage freed
  - Table: Group ID, year, image count, timestamps, reason, file size
  - Toggle: "Last 10" / "All" entries with dynamic loading

- ✅ **Moderation Page**: Integrated cleanup features
  - **Countdown Widget**: Shows "⏰ X Tage bis Löschung" on pending groups
  - **Approval Feedback**: SweetAlert2 success/error notifications
  - **Deletion Log**: Integrated at bottom of moderation interface
  - Visual indicators for pending vs. approved status

- ✅ **Dependencies**: Added `sweetalert2` for user feedback

#### Infrastructure
- ✅ **Nginx Configuration**: Updated routes for admin API
  - Dev + Prod configs updated
  - `/api/admin` proxy to backend (no separate auth - protected by /moderation access)
  - Proper request forwarding with headers

#### Testing
- ✅ **Test Tools**: Comprehensive testing utilities
  - `tests/test-cleanup.sh` - Interactive bash test script
  - `backend/src/scripts/test-cleanup.js` - Node.js test alternative
  - Features: Backdate groups, preview cleanup, trigger manually, view logs
  - `tests/TESTING-CLEANUP.md` - Complete testing guide with 6 scenarios

#### Documentation
- ✅ **README.md**: Updated with automatic cleanup features
- ✅ **TESTING-CLEANUP.md**: Comprehensive testing guide
- ✅ **Code Comments**: Detailed inline documentation

---

## [Unreleased] - Branch: feature/ImageDescription

### ✨ Image Descriptions Feature (November 2025)

#### Backend
- ✅ **Database Migration**: Added `image_description` column to `images` table (TEXT, nullable)
  - Automatic migration on server startup
  - Index created for performance optimization
  - Backward compatible with existing images

- ✅ **Repository Layer**: Extended `GroupRepository.js` with description methods
  - `updateImageDescription()` - Update single image description
  - `updateBatchImageDescriptions()` - Batch update multiple descriptions
  - Validation: Max 200 characters enforced
  - `createGroup()` now accepts `imageDescription` field

- ✅ **API Endpoints**: New REST endpoints for description management
  - `PATCH /groups/:groupId/images/:imageId` - Update single description
  - `PATCH /groups/:groupId/images/batch-description` - Batch update
  - Server-side validation (200 char limit)
  - Error handling and detailed responses

- ✅ **Upload Integration**: Batch upload now supports descriptions
  - `POST /api/upload/batch` accepts `descriptions` array
  - Descriptions matched to images by filename
  - Automatic truncation if exceeding limit

#### Frontend
- ✅ **Core Components**: Enhanced `ImageGalleryCard` and `ImageGallery`
  - **Edit Mode**: Toggle button to activate description editing
  - **Textarea**: Multi-line input with character counter (0/200)
  - **Validation**: Real-time character limit enforcement
  - **Placeholder**: Original filename shown as hint
  - **Display Mode**: Italicized description display when not editing

- ✅ **Upload Flow**: Extended `MultiUploadPage.js`
  - Edit mode for adding descriptions during upload
  - State management for descriptions per image
  - Descriptions sent to backend with upload
  - Clean up on form reset

- ✅ **Moderation**: Enhanced `ModerationGroupImagesPage.js`
  - Edit mode for existing group images
  - Load descriptions from server
  - Batch update API integration
  - Save button with success feedback
  - Optimistic UI updates

- ✅ **Slideshow**: Display descriptions during presentation
  - Centered overlay below image
  - Semi-transparent background with blur effect
  - Responsive sizing (80% max width)
  - Conditional rendering (only if description exists)

- ✅ **Public View**: Show descriptions in `PublicGroupImagesPage.js`
  - Display in single-image gallery mode
  - Italicized style for visual distinction
  - No edit functionality (read-only)

#### Styling
- ✅ **CSS Additions**: New styles for edit mode and descriptions
  - `.image-description-edit` - Edit textarea container
  - `.image-description-edit textarea` - Input field styles
  - `.char-counter` - Character counter with limit warning
  - `.image-description-display` - Read-only description display
  - Responsive design for mobile devices

#### Testing & Quality
- ✅ All phases implemented and committed
- ⏳ Integration testing pending
- ⏳ User acceptance testing pending

---

## [Unreleased] - Branch: upgrade/deps-react-node-20251028

### 🎯 Major Framework Upgrades (October 2025)

#### Backend
- ✅ **Node.js**: Upgraded from Node 14 → Node 24
  - Updated `backend/Dockerfile` to use `node:24` base image
  - Verified sqlite3 compatibility and DB initialization
  - Backend server runs successfully on port 5000

#### Frontend
- ✅ **React**: Upgraded from React 17 → React 18.3.1
  - Updated `react` and `react-dom` to `^18.3.1`
  - Migrated root rendering API from `ReactDOM.render()` to `createRoot()` in `src/index.js`
  - Updated `react-scripts` to `5.0.1`
  
- ✅ **React Router**: Migrated from v5 → v6.28.0 (installed v6.30.1 in dev)
  - Replaced `<Switch>` with `<Routes>`
  - Updated route definitions to use `element` prop instead of `component`
  - Migrated navigation hooks: `useHistory()` → `useNavigate()`
  - Updated all `<Route>` paths and nested routing logic
  
- ✅ **Material-UI (MUI)**: Migrated from v4 → v5.14.0
  - Installed `@mui/material`, `@mui/icons-material`, `@emotion/react`, `@emotion/styled`
  - Migrated component imports from `@material-ui/*` to `@mui/*`
  - **Removed** `@mui/styles` after completing component migration
  - Converted styling from `makeStyles` to `sx` prop for components:
    - `UploadProgress.js`
    - `DescriptionInput.js`
    - `MultiImageDropzone.js`
    - `MultiUploadPage.js`
    - `SlideshowPage.js`
    - `GroupsOverviewPage.js`
    - Other components using MUI v5 styled/sx patterns

#### Dependencies & Cleanup
- ✅ **Lottie Animation**: Replaced `react-lottie` with `lottie-react` (v2.4.0)
  - Removed peer dependency conflict with older React versions
  - Updated `Loading.js` component to use new API
  
- ✅ **Removed `--legacy-peer-deps`** from `frontend/Dockerfile`
  - Clean dependency resolution without legacy flag
  - All packages now have compatible peer dependencies

- ✅ **ESLint Fixes**: Cleaned up lint warnings across migrated files
  - Removed unused imports and handlers
  - Production build compiles successfully without warnings

#### Development Environment
- ✅ **Dev Overlay**: Created `docker-compose.override.yml` and `frontend/Dockerfile.dev`
  - Development setup with live reload (HMR) for frontend
  - CRA dev server proxied through nginx on port 3000
  - Backend runs with nodemon for auto-reload
  - Bind mounts for source code (`./frontend` and `./backend`)
  - Separate `node_modules` volumes to avoid host/container conflicts
  
- ✅ **Dev Container**: Fixed compilation issues
  - Node 18.20.8 in frontend-dev container
  - react-router-dom@6.30.1 installed correctly
  - CRA dev server compiles successfully

#### Maintenance
- ✅ **Browserslist DB**: Updated to version 1.0.30001751
  - Resolved "caniuse-lite is outdated" warning
  
- ✅ **PostCSS Deprecation Warning**: Documented as known/harmless
  - Warning originates from `react-scripts` 5.0.1 transitive dependencies (postcss@8.5.6)
  - No action required - will be resolved in future react-scripts updates

### � Security Audit Results

**Frontend Dependencies** (as of 29. Oktober 2025):
- **21 vulnerabilities** detected: 9 moderate, 11 high, 1 critical
- **Critical/High severity issues:**
  - `axios` (<=0.30.1): CSRF, SSRF, DoS vulnerabilities
  - `follow-redirects`: Information exposure, improper URL handling
  - `ansi-regex`, `decode-uri-component`: ReDoS vulnerabilities
- **Moderate severity:**
  - `@babel/runtime-corejs3`: Inefficient RegExp complexity
  - `webpack-dev-server`: Source code exposure (dev-only)
  - `highlight.js`: Various security issues
- **Resolution:** Most issues can be addressed with `npm audit fix`. Critical packages (axios, follow-redirects) should be updated in a separate security PR.

**Backend Dependencies** (as of 29. Oktober 2025):
- **27 vulnerabilities** detected: 4 low, 9 moderate, 13 high, 1 critical
- **Critical/High severity issues:**
  - `send`/`serve-static`: Template injection leading to XSS
  - Various transitive dependencies with known vulnerabilities
- **Resolution:** Run `npm audit fix` to address most issues. Critical packages should be updated manually in a follow-up security PR.

**Recommendation:** Create a separate PR for security updates after this upgrade is merged to avoid mixing framework upgrades with dependency patches.

### �📝 Documentation
- Created `docs/UPGRADE_PLAN-upgrade-deps-react-node-20251028.md` with phase-by-phase plan
- Created `.github/ISSUES/upgrade-deps-react-node-20251028.md` (issue/PR template)
- This CHANGELOG documents all completed work

### 🔧 Configuration Changes
- `backend/Dockerfile`: Node 14 → Node 24
- `frontend/Dockerfile`: Removed `--legacy-peer-deps`, uses clean npm install
- `frontend/Dockerfile.dev`: New dev image with Node 18, nginx + CRA dev server
- `docker-compose.override.yml`: Dev environment configuration
- `frontend/package.json`: Updated all major framework versions
- `frontend/src/index.js`: React 18 createRoot API
- Multiple component files: MUI v5 migration (sx/styled)

### ⚠️ Known Issues / Notes
- PostCSS deprecation warning from react-scripts 5.0.1 is harmless (no fix available)
- Git push to remote blocked by SSH permission (local commits ready)

### 🚀 Next Steps (Pending)
- [ ] Integration smoke tests (upload, download, slideshow)
- [ ] Push branch to remote and open PR
- [ ] Security audit (`npm audit`, CVE validation)
- [ ] Verify production builds in CI
- [ ] Merge PR after QA approval

---

## Development Commands

### Production Build & Run
```bash
# Build and run production containers
docker compose -f docker-compose.yml up --build -d

# Or use prod.sh script
./prod.sh
```

### Development Mode (with live reload)
```bash
# Start dev environment with HMR
docker compose -f docker-compose.yml -f docker-compose.override.yml up --build -d

# Frontend available at: http://localhost:3000
# Backend available at: http://localhost:5000

# Tail logs
docker logs -f image-uploader-frontend-dev
docker logs -f image-uploader-backend-dev

# Stop dev environment
docker compose -f docker-compose.yml -f docker-compose.override.yml down
```

### Update Dependencies
```bash
# Update browserslist database
docker exec image-uploader-frontend-dev npx update-browserslist-db@latest

# Install new packages (in dev container)
docker exec image-uploader-frontend-dev npm install <package-name>

# Rebuild containers after package.json changes
docker compose -f docker-compose.yml -f docker-compose.override.yml up --build -d
```
