Roman/ohm_streaming

Fork 0

Files

T

root 20bcc75b9b chore: update watchlist features and fixes

2026-02-28 09:22:57 +00:00

14 KiB

Raw Permalink Blame History

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:
```
# 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:
```
# 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:
```
# 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:
```
# 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

# 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

14 KiB Raw Permalink Blame History