Show/hide lightbox controls with auto-hide

[Darkkal]

Parent Issue

Part of #74 — More controls for media in lightbox

Problem

As more controls are added (zoom, nav zones, fit selector, action buttons), the UI becomes cluttered. Users need a way to see just the media.

Proposed Design

Manual Toggle

• Add a controlsVisible state (default: true)
• Toggle mechanisms:
  • Persistent toggle button (e.g., eye icon) — this button itself is never hidden
  • Single-click on an image toggles controls (replaces current sidebar-only toggle behavior)
  • Keyboard shortcut: H key
• What gets hidden: Navigation zones, zoom/fit controls, action buttons (close, info, delete), sidebar
• What stays visible: Media, persistent toggle button, lightbox backdrop
• Videos: single-click does NOT toggle (would interfere with play/pause)

Auto-Hide

• When enabled (configurable in settings): controls automatically fade out after a configurable delay of inactivity
• Any mouse movement, keyboard press, or touch resets the timer and shows controls
• The persistent toggle button fades to a reduced opacity (not fully hidden) during auto-hide
• Auto-hide on/off and timer duration are configurable in /settings

Interaction with Sidebar State

• controlsVisible acts as a master toggle — hiding controls also hides the sidebar
• Showing controls restores the sidebar to its previous showInfo state
• On mobile, hiding controls also hides the bottom sheet

Escape Key Behavior

• Controls hidden + lightbox open → first Escape press shows controls
• Controls visible + lightbox open → Escape closes the lightbox

Acceptance Criteria

• Persistent toggle button always visible (reduced opacity during auto-hide)
• When controls hidden: nav zones, zoom controls, action buttons, and sidebar all hide
• Single-click on image toggles all controls (replaces sidebar-only toggle)
• Single-click on video does NOT toggle controls
• H key toggles controls visibility
• Auto-hide fades controls after configurable inactivity delay
• Mouse movement / keyboard / touch resets auto-hide timer and reveals controls
• Controls state persists while navigating between items
• Hiding/showing uses smooth CSS transitions (opacity + transform)
• Two-step Escape: show controls first, then close lightbox
• controlsVisible = false hides sidebar; restoring controls restores prior showInfo state
• Auto-hide on/off and delay are configurable in /settings

[Darkkal]

implemented and validated in #132