Repository navigation
feat(desktop): restyle the release-notes sidebar card - #9412
Conversation
The card with an image is now a full-bleed dark card: the screenshot sits inset in its own frame, the title and date overlay a bottom gradient, and hover lifts the card, zooms the image and reveals a quiet minus dismiss button. The slot is inset 16px to line up with the sidebar icon column.
|
Caution Review failedThe pull request is closed. Walkthrough
Merge Risk:
 |
![cubic-dev-ai[bot]](https://avatars.githubusercontent.com/in/1082092?s=60&v=4){kind=small}
There was a problem hiding this comment.
1 issue found and verified against the latest diff
Prompt for AI agents (unresolved issues)
Check if these issues are valid — if so, understand the root cause of each and fix them. When an issue isn't valid or won't be fixed in this PR, reply in its thread with the reason and then resolve the thread. If appropriate, use sub-agents to investigate and fix each issue separately.
<file name="apps/desktop/src/renderer/components/SidebarCardSlot/SidebarCardSlot.tsx">
<violation number="1" location="apps/desktop/src/renderer/components/SidebarCardSlot/SidebarCardSlot.tsx:47">
P2: The new scale transform runs unconditionally, so users with `prefers-reduced-motion` enabled still receive the newly introduced scale entry/exit animation. Use `useReducedMotion()` to disable the added scale and transition for this slot.</violation>
</file>
Tip: Get a Slack DM when cubic finishes reviewing your PRs. Connect Slack
View guided diff | Turn on auto-fix | Re-trigger cubic
| exit={{ opacity: 0, y: 8 }} | ||
| transition={{ duration: 0.2 }} | ||
| className="px-3 pb-2" | ||
| initial={{ opacity: 0, y: 8, scale: 0.98 }} |
There was a problem hiding this comment.
P2: The new scale transform runs unconditionally, so users with prefers-reduced-motion enabled still receive the newly introduced scale entry/exit animation. Use useReducedMotion() to disable the added scale and transition for this slot.
Prompt for AI agents
Check if this issue is valid — if so, understand the root cause and fix it. When an issue isn't valid or won't be fixed in this PR, reply in its thread with the reason and then resolve the thread. At apps/desktop/src/renderer/components/SidebarCardSlot/SidebarCardSlot.tsx, line 47:
<comment>The new scale transform runs unconditionally, so users with `prefers-reduced-motion` enabled still receive the newly introduced scale entry/exit animation. Use `useReducedMotion()` to disable the added scale and transition for this slot.</comment>
<file context>
@@ -44,11 +44,11 @@ export function SidebarCardSlot({
- exit={{ opacity: 0, y: 8 }}
- transition={{ duration: 0.2 }}
- className="px-3 pb-2"
+ initial={{ opacity: 0, y: 8, scale: 0.98 }}
+ animate={{ opacity: 1, y: 0, scale: 1 }}
+ exit={{ opacity: 0, y: 8, scale: 0.98 }}
</file context>
🚀 Preview Deployment🔗 Preview Links
Preview updates automatically with new commits |
Summary
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 whenmediais set. Cards without media (hiring, payment failed) render exactly as before, except they share the new 16px slot inset.z-10) covers the card. The dismiss button (z-20) sits above it, so dismissing never opens the dialog.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:Testing
bun run typecheckinapps/desktopandpackages/uibiome checkon the changed filesSummary 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.
Written for commit c0d0e05. Summary will update on new commits.
Summary by CodeRabbit