Roman/ohm_streaming
1
0
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases Wiki Activity

chore: update watchlist features and fixes

Browse Source
This commit is contained in:
root
2026-02-28 09:22:57 +00:00
parent 4c96d0c1c5
commit 20bcc75b9b
64 changed files with 5193 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.sisyphus/plans/watchlist-harmonization.md
+423
View File
@@ -0,0 +1,423 @@
# Harmonize Watchlist Design - Align with Main Page
## TL;DR
> **Quick Summary**: Harmonize the visual design of watchlist page to match /web page while keeping watchlist as separate autonomous page.
> **Deliverables**:
> - Update watchlist.html to use same background gradient and styling as /web
> - Unify header design (colors, layout, icons)
> - Align button styles to match /web patterns
> - Maintain watchlist functionality (no breaking changes)
> **Estimated Effort**: Medium
> **Parallel Execution**: NO - single task
> **Critical Path**: CSS updates → styling verification → commit
---
## Context
### Original Request Summary
User identified that watchlist (/watchlist) page has a completely different design from the main page (/web), creating UX inconsistency:
- Watchlist has dark violet gradient background, /web has cleaner light gradient
- Watchlist has custom header "📋 Ma Watchlist", /web has unified navigation tabs
- Watchlist has its own navigation button, /web has tab-based navigation
- Different color schemes, layouts, and styling patterns
### User's Decision
User chose **Option 2: Harmonize watchlist design** - adapt watchlist visual design to match /web styling while keeping it as a separate page.
### Key Findings
- /web uses light gradient background (135deg, #1e1e2e 0%, #2d1b69 0%, #1e1e2e 100%)
- Watchlist currently uses dark violet gradient background
- /web has tab-based navigation (Accueil, Anime, Série, Fournisseurs, Watchlist)
- Watchlist has standalone page design
---
## Work Objectives
### Core Objective
Harmonize the visual design of templates/watchlist.html to match the styling and patterns of templates/index.html (/web), creating visual consistency across the application.
### Concrete Deliverables
- Updated `templates/watchlist.html` background to match /web
- Unified header design colors and layout
- Aligned button styles (btn-primary, btn-secondary)
- Consistent typography and spacing
- Maintained all watchlist functionality (scheduler, stats, search, add/remove items)
### Definition of Done
- [ ] Watchlist background gradient matches /web
- [ ] Header text color and styling matches /web
- [ ] Button styles (btn-primary, btn-secondary) match /web
- [ ] Overall visual appearance is consistent with /web
- [ ] All watchlist features still work (no breaking changes)
### Must Have
- Harmonize visual design with /web
- Match background gradient colors
- Align header styling (fonts, colors, icons)
- Unify button class styles
- Maintain all existing watchlist functionality
### Must NOT Have (Guardrails)
- **DO NOT remove watchlist functionality** - scheduler, stats, notifications must still work
- **DO NOT change /web design** - only adapt watchlist to match
- **DO NOT break existing URL routes** - /watchlist and /web must both work
- **DO NOT modify JavaScript files** - only HTML/CSS changes
- **DO NOT add new features** - this is visual harmonization only
---
## Verification Strategy
### Test Decision
- **Infrastructure exists**: YES (uvicorn server)
- **Automated tests**: NO (visual changes, manual QA)
- **Framework**: None - manual browser verification
- **Rationale**: This is visual CSS/template change, requires manual browser verification
### QA Policy
Visual verification required for design changes:
- Use dev-browser (playwright) to load both pages
- Compare visual appearance side-by-side
- Verify no functionality broken
- Evidence saved to `.sisyphus/evidence/`
---
## Execution Strategy
### Sequential Execution
```
Task 1: Update Watchlist Background Gradient
- Modify templates/watchlist.html
- Replace dark violet gradient with /web's light gradient
- Verify page loads and looks correct
Task 2: Harmonize Header Design
- Update header colors, fonts, layout
- Match /web navigation header styling
- Ensure text colors are consistent
- [ ] 2. Harmonize Header Design
Task 3: Align Button Styles
- Update button classes to use same styles as /web
- Verify hover states and interactions
- Ensure responsive behavior matches
- [ ] 4. Final Verification
- Load both /web and /watchlist in browser
- Take screenshots for comparison
- Verify all functionality works
```
### Agent Dispatch Summary
- **1**: **1** — T1 (visual-engineering)
- **2**: **1** — T2 (visual-engineering)
- **3**: **1** — T3 (visual-engineering)
- **4**: **1** — T4 (visual-engineering)
---
## TODOs
- [ ] 1. Update Watchlist Background Gradient
**What to do**:
- Read `templates/watchlist.html` to find current background styling
- Read `templates/index.html` to get the light gradient background
- Replace watchlist's dark violet gradient: `background: linear-gradient(135deg, #1e1e2e 0%, #2d1b69 0%, #1e1e2e 100%)`
- With /web's light gradient: Need to check index.html for exact colors
**Must NOT do**:
- Remove watchlist functionality (scheduler, stats, search)
- Change the structure of the page
- Modify JavaScript files
**Recommended Agent Profile**:
- **Category**: `visual-engineering`
- Reason: CSS styling update for visual consistency
- **Skills**: []
- No special skills needed - CSS gradient change
**Parallelization**:
- **Can Run In Parallel**: NO
- **Parallel Group**: Single task
- **Blocks**: Task 2
- **Blocked By**: None (can start immediately)
**References**:
**Pattern References**:
- `templates/index.html` - Reference for correct background gradient
- `templates/watchlist.html` - File to modify
**Acceptance Criteria**:
```bash
# Watchlist uses light gradient like /web
grep -c "linear-gradient(135deg" templates/watchlist.html
Expected: 1
```
**QA Scenarios (MANDATORY — task is INCOMPLETE without these):**
```
Scenario: Watchlist page uses light gradient background
Tool: dev-browser (playwright)
Preconditions: Server running on port 3000
Steps:
1. Navigate to http://localhost:3000/watchlist
2. Wait for page to load (timeout 10s)
3. Take screenshot of page background
4. Navigate to http://localhost:3000/web
5. Take screenshot for comparison
Expected Result: Watchlist background matches /web's light gradient
Failure Indicators: Background still dark violet, colors don't match
Evidence: .sisyphus/evidence/task-1-background-gradient.png
```
**Commit**: NO
- Groups with Task 2, 3
- [ ] 2. Harmonize Header Design
**What to do**:
- Read `templates/watchlist.html` to check current header styling
- Read `templates/index.html` to get header reference
- Update watchlist header colors to match /web's color scheme
- Update fonts to match /web typography
- Ensure header layout and spacing match /web
- Keep "📋 Ma Watchlist" title but update colors
**Must NOT do**:
- Remove header functionality
- Change header text/title
- Remove the "Retour à l'accueil" button added earlier
**Recommended Agent Profile**:
- **Category**: `visual-engineering`
- Reason: Header styling harmonization
- **Skills**: []
- CSS styling task
**Parallelization**:
- **Can Run In Parallel**: NO
- **Parallel Group**: Single task
- **Blocks**: Task 3
- **Blocked By**: Task 1 (background must be updated first)
**References**:
**Pattern References**:
- `templates/index.html` - Reference for header styling
- `templates/watchlist.html` - File to modify
**Acceptance Criteria**:
```bash
# Header uses same colors as /web
# Verify no dark violet colors remain
```
**QA Scenarios (MANDATORY):**
```
Scenario: Header design matches /web
Tool: dev-browser (playwright)
Preconditions: Tasks 1 complete, server running
Steps:
1. Navigate to http://localhost:3000/watchlist
2. Take screenshot of header section
3. Navigate to http://localhost:3000/web
4. Take screenshot of navigation header
5. Compare screenshots side-by-side
Expected Result: Watchlist header colors, fonts, layout match /web
Failure Indicators: Different colors, fonts mismatched, layout differences
Evidence: .sisyphus/evidence/task-2-header-harmonization.png
```
**Commit**: NO
- Groups with Task 3
- [ ] 3. Align Button Styles
**What to do**:
- Read `templates/watchlist.html` to identify all button elements
- Read `templates/index.html` to get button class references
- Ensure all buttons use consistent classes (btn-primary, btn-secondary)
- Verify hover states and interactions work correctly
- Make sure "Retour à l'accueil" button style is aligned
**Must NOT do**:
- Change button functionality or behavior
- Remove any buttons
- Modify JavaScript event handlers
**Recommended Agent Profile**:
- **Category**: `visual-engineering`
- Reason: Button styling alignment
- **Skills**: []
- CSS class updates
**Parallelization**:
- **Can Run In Parallel**: NO
- **Parallel Group**: Single task
- **Blocks**: Task 4
- **Blocked By**: Task 2 (header must be updated first)
**References**:
**Pattern References**:
- `templates/index.html` - Reference for button styles
- `templates/watchlist.html` - File to modify
- `static/css/style.css` - Button class definitions (if exists)
**Acceptance Criteria**:
```bash
# All buttons use btn-primary or btn-secondary classes
grep -o "class=\"btn-" templates/watchlist.html | sort | uniq
Expected: btn-primary, btn-secondary (or similar consistent classes)
```
**QA Scenarios (MANDATORY):**
```
Scenario: Button styles are consistent with /web
Tool: dev-browser (playwright)
Preconditions: Tasks 1, 2 complete
Steps:
1. Navigate to http://localhost:3000/watchlist
- [ ] 3. Align Button Styles
3. Click buttons, verify interactions work
4. Check no console errors
Expected Result: All buttons have consistent styling with /web, hover states work
Failure Indicators: Different button styles, broken interactions, console errors
Evidence: .sisyphus/evidence/task-3-button-alignment.png
```
**Commit**: YES
- Message: `style(ui): Harmonize watchlist design to match /web`
- Files: `templates/watchlist.html`
- [ ] 4. Final Verification
**What to do**:
- Start server if not running: `uvicorn main:app --host 0.0.0.0 --port 3000`
- Navigate to `/web` and verify page works
- Navigate to `/watchlist` and verify page works
- Take comparison screenshots
- Verify navigation works both ways
- Check browser console for errors
- Verify watchlist features (search, scheduler, stats, add/remove items) still work
**Must NOT do**:
- Make any code changes
- Modify functionality
**Recommended Agent Profile**:
- **Category**: `unspecified-high`
- Reason: Final integration verification
- **Skills**: [`dev-browser`]
- dev-browser: Use Playwright for browser automation and screenshots
**Parallelization**:
- **Can Run In Parallel**: NO
- **Parallel Group**: Final task
- **Blocks**: None
- **Blocked By**: Tasks 1, 2, 3 (all tasks must complete)
**References**:
**Pattern References**:
- `templates/index.html` - Reference for expected design
- `templates/watchlist.html` - File being modified
**Acceptance Criteria**:
```bash
# Both pages work
curl -s -o /dev/null -w "%{http_code}" http://localhost:3000/web
curl -s -o /dev/null -w "%{http_code}" http://localhost:3000/watchlist
Expected: 200 for both
```
**QA Scenarios (MANDATORY):**
```
Scenario: Visual design is harmonized between /web and /watchlist
Tool: dev-browser (playwright)
Preconditions: All styling tasks complete, server running
Steps:
1. Navigate to http://localhost:3000/web
2. Take full page screenshot
3. Navigate to http://localhost:3000/watchlist
4. Take full page screenshot
5. Compare side-by-side
6. Verify backgrounds match
7. Verify header styles match
8. Verify button styles match
Expected Result: Visual design is consistent between both pages
Failure Indicators: Color mismatch, style differences, broken features
Evidence: .sisyphus/evidence/task-4-verification-screenshot.png
```
**Commit**: NO
- This is verification only, no code changes
---
## Final Verification Wave (MANDATORY — after ALL implementation tasks)
> 3 review agents run in PARALLEL. ALL must APPROVE. Rejection → fix → re-run.
- [ ] F1. **Visual Design Review** — `visual-engineering`
Compare watchlist and /web designs side-by-side. Verify colors, gradients, typography, spacing, and layout are harmonized. Check for any visual inconsistencies.
Output: `Background [MATCH/MISMATCH] | Header [MATCH/MISMATCH] | Buttons [MATCH/MISMATCH] | VERDICT: APPROVE/REJECT`
- [ ] F2. **Functionality Verification** — `unspecified-high` (+ `dev-browser` skill)
Navigate to /watchlist and verify all features work: search, scheduler controls, stats display, add/remove items, navigation. Check browser console for errors.
Output: `Features [N/N working] | Console Errors [0/N] | VERDICT: APPROVE/REJECT`
- [ ] F3. **Code Quality Check** — `quick`
Check for CSS syntax errors, invalid colors, or broken HTML structure.
Output: `CSS [VALID/INVALID] | HTML [VALID/INVALID] | VERDICT: APPROVE/REJECT`
---
## Commit Strategy
- **1**: `style(ui): Harmonize watchlist design to match /web`
- Files: `templates/watchlist.html`
---
## Success Criteria
### Verification Commands
```bash
# Watchlist uses light gradient
grep -c "linear-gradient(135deg" templates/watchlist.html
# Expected: 1
# Both pages work
curl -s -o /dev/null -w "%{http_code}" http://localhost:3000/web
curl -s -o /dev/null -w "%{http_code}" http://localhost:3000/watchlist
# Expected: 200 for both
```
### Final Checklist
- [ ] Watchlist background matches /web
- [ ] Header design harmonized with /web
- [ ] Button styles aligned with /web
- [ ] All watchlist features still work
- [ ] Both pages load without errors
- [ ] Visual design is consistent