feat(desktop): restyle the release-notes sidebar card

Merged
KI
9h ago
+84-29

Summary

  • The release-notes card in the sidebar (the one card that has an image) is now a full-bleed dark card. The whole release image fills the card edge to edge at its natural ratio, and the title and date sit over a bottom gradient.
  • On hover, the card lifts, the image zooms slowly, and a quiet "—" dismiss button fades in. This replaces the always-on floating ✕ circle.
  • The card slot is inset 16px instead of 12px, so cards line up with the sidebar icon column. The slot also enters with a slight scale and a smoother ease.

Why / Context

The old card read as a generic bordered box with a thumbnail. This brings it closer to the polished promo cards in other tools: the image carries the card, the chrome stays out of the way until you hover, and dismiss is there but quiet.

How It Works

  • SidebarCard (packages/ui) has a separate render branch when media is set. Cards without media (hiring, payment failed) render exactly as before, except they share the new 16px slot inset.
  • The click overlay (z-10) covers the card. The dismiss button (z-20) sits above it, so dismissing never opens the dialog.
  • The release-notes image keeps its natural ratio (no crop), so the whole hero shows.

Manual QA Checklist

Checked in the dev app over CDP, with the card forced on through the dev preview flag and fed the production changelog.json:

  • Card renders with the full image, title "Paradev 2.0.3" and date "Nov 1"
  • Hover: card lifts, image zooms, dismiss opacity goes from 0 to 1
  • Clicking the card opens the release-notes dialog, and Esc closes it and hides the card
  • Clicking "—" dismisses the card without opening the dialog
  • Card left edge sits at 16px, matching the nav icons
  • Light theme: the card is dark by design in both themes. Not checked in light mode.

Testing

  • bun run typecheck in apps/desktop and packages/ui
  • biome check on the changed files

Summary by cubic

Restyles the release-notes sidebar card so the screenshot carries the card instead of a generic bordered thumbnail; the card is now a full-bleed dark card, and hover interactions replace the always-on dismiss button.

  • The image sits inset in its own rounded frame on black, with the title and date over a bottom gradient; hovering lifts the card, zooms the image, and fades in a quiet "—" dismiss button instead of the always-on ✕ circle.
  • The card slot inset moves from 12px to 16px to line up with the sidebar icon column, and the slot entry animation now has a slight scale and smoother easing.
  • Cards without media (hiring, payment failed) render exactly as before, sharing only the new slot inset, and the release-notes image now renders full width, edge to edge.

Summary by CodeRabbit

  • New Features
    • Media cards now use a dark, edge-to-edge layout with an image overlay, title, optional badge and description, and media-specific controls.
  • Style
    • Sidebar cards now have a smoother entry and exit animation and slightly increased horizontal spacing.
    • The release-notes card image now fills the available width in a taller 5:4 layout.