Leivur Djurhuus 3520e3fc9b Fix video review bugs: playback, annotations, coordinates, timeline markers

- Fix video-only revisions not showing (activeRevisionId fallback)
- Fix SVG coordinate system with viewBox for native→screen mapping
- Fix annotations visible at all times (timestampSeconds dropped in mapping)
- Fix timeline markers missing (use browser duration when DB has 0)
- Fix setState-during-render in duration tracking (ref+interval pattern)
- Fix click propagation toggling play during annotation drawing
- Fix concurrent attachment update race condition (Prisma transaction)
- Fix file handle leaks in uploads streaming route
- Add click-to-seek from feedback sidebar timestamp badges
- Use annotation drawing color for timeline markers
- Add solution documentation for video review bugs
- Add docs/solutions/ discoverability to CLAUDE.md

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

2026-04-03 12:44:02 -05:00

2.8 KiB

Raw Permalink Blame History

HP CG Production Tracker

Design Context

Users

Production managers and CG artists use this tool equally. Managers track deliverables, deadlines, and team workload across projects. Artists check their tasks, update statuses, and log progress. Both need fast, glanceable information with minimal friction — the tool is open all day alongside creative applications.

Brand Personality

Bold, energetic, creative. This tracker reflects the creative CG work it manages. The "Oliver Agency palette" (forest green + coral) sets a distinctive, confident tone — not generic SaaS. The interface should feel alive and expressive while remaining a serious production tool.

Aesthetic Direction

Visual tone: Colorful and status-heavy like Monday.com, with the production-pipeline structure of Shotgrid/ftrack. Dense but not cluttered — every pixel earns its place.
Color usage: Lean into the status color system. Color is functional (communicating state) and expressive (reinforcing the creative brand). The forest green + coral palette is the signature — don't dilute it.
Typography: Montserrat headings with tight tracking give weight and personality. The label-upper pattern (uppercase + wide tracking) is an Oliver Agency signature — use it for navigation, section headers, and metadata labels.
Dark mode: First-class citizen, not an afterthought. The charcoal + bright green variant should feel equally polished.
Anti-references: Generic gray SaaS dashboards. Overly minimal/sterile interfaces that could belong to any product. Avoid looking like a default shadcn template.

Design Principles

Status at a glance: The most important information is where things stand. Use color, position, and density to make status immediately scannable without reading.
Creative energy, production discipline: Bold visual choices (color, type, layout) paired with rigorous information architecture. Expressive doesn't mean chaotic.
Density over simplicity: Users are power users with the tool open all day. Prefer information-dense layouts that reduce clicks over spacious layouts that look good in screenshots.
Consistent signatures: The Oliver Agency palette, label-upper typography, forest green + coral accents, and soft-radius corners are brand signatures. Apply them consistently across all new UI.
Accessible by default: WCAG AA compliance. Sufficient contrast ratios, keyboard navigation, focus-visible rings, and screen reader support on all interactive elements.

Documented Solutions

docs/solutions/ — documented solutions to past problems (bugs, best practices, workflow patterns), organized by category with YAML frontmatter (module, tags, problem_type). Relevant when implementing or debugging in documented areas.

2.8 KiB Raw Permalink Blame History