From 8720261febde43648400bbd4281135ccc06fcf2d Mon Sep 17 00:00:00 2001
From: Kiet Ho <hoakiet98@gmail.com>
Date: Thu, 5 Nov 2026 17:11:51 -0800
Subject: [PATCH 1/2] feat(desktop): restyle the release-notes sidebar card

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.
---
 .../SidebarCardSlot/SidebarCardSlot.tsx       | 10 +-
 .../useReleaseNotesCard.tsx                   |  2 +-
 .../ui/src/components/ui/sidebar-card.tsx     | 99 +++++++++++++++----
 3 files changed, 86 insertions(+), 25 deletions(-)

diff --git a/apps/desktop/src/renderer/components/SidebarCardSlot/SidebarCardSlot.tsx b/apps/desktop/src/renderer/components/SidebarCardSlot/SidebarCardSlot.tsx
index f58c04c021d..867f316127b 100644
--- a/apps/desktop/src/renderer/components/SidebarCardSlot/SidebarCardSlot.tsx
+++ b/apps/desktop/src/renderer/components/SidebarCardSlot/SidebarCardSlot.tsx
@@ -44,11 +44,11 @@ export function SidebarCardSlot({
 			{!isCollapsed && entry && (
 				<motion.div
 					key={entry.id}
-					initial={{ opacity: 0, y: 8 }}
-					animate={{ opacity: 1, y: 0 }}
-					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 }}
+					transition={{ duration: 0.3, ease: [0.22, 1, 0.36, 1] }}
+					className="px-4 pb-2"
 				>
 					<SidebarCard
 						badge={entry.badge}
diff --git a/apps/desktop/src/renderer/components/SidebarCardSlot/cards/useReleaseNotesCard/useReleaseNotesCard.tsx b/apps/desktop/src/renderer/components/SidebarCardSlot/cards/useReleaseNotesCard/useReleaseNotesCard.tsx
index 30a12199411..1baccaa42af 100644
--- a/apps/desktop/src/renderer/components/SidebarCardSlot/cards/useReleaseNotesCard/useReleaseNotesCard.tsx
+++ b/apps/desktop/src/renderer/components/SidebarCardSlot/cards/useReleaseNotesCard/useReleaseNotesCard.tsx
@@ -52,7 +52,7 @@ export function useReleaseNotesCard(): SidebarCardEntry | null {
 			<img
 				src={release.image}
 				alt=""
-				className="aspect-[16/9] w-full object-cover"
+				className="aspect-[5/4] w-full object-cover object-top"
 			/>
 		) : undefined,
 		onClick: () => {
diff --git a/packages/ui/src/components/ui/sidebar-card.tsx b/packages/ui/src/components/ui/sidebar-card.tsx
index 45b93bc1b23..ceda5eb3264 100644
--- a/packages/ui/src/components/ui/sidebar-card.tsx
+++ b/packages/ui/src/components/ui/sidebar-card.tsx
@@ -1,6 +1,6 @@
 import { msg } from "@lingui/core/macro";
 import type * as React from "react";
-import { LuX } from "react-icons/lu";
+import { LuMinus, LuX } from "react-icons/lu";
 import { i18n } from "../../lib/i18n";
 import { cn } from "../../lib/utils";
 import { Badge } from "./badge";
@@ -33,6 +33,82 @@ function SidebarCard({
 	className,
 	children,
 }: SidebarCardProps) {
+	const dismissLabel = i18n._(
+		msg({
+			message: "Dismiss",
+		}),
+	);
+
+	if (media) {
+		return (
+			<div
+				data-slot="sidebar-card"
+				className={cn(
+					"group relative isolate overflow-hidden rounded-xl border border-white/10 bg-black shadow-sm",
+					"transition-[transform,box-shadow] duration-300 ease-out hover:-translate-y-0.5 hover:shadow-lg",
+					className,
+				)}
+			>
+				<div className="relative px-3.5 pt-3.5">
+					<div className="overflow-hidden rounded-md border border-white/10">
+						<div className="transition-transform duration-500 ease-out group-hover:scale-[1.04]">
+							{media}
+						</div>
+					</div>
+					<div className="pointer-events-none absolute inset-0 bg-gradient-to-t from-black via-black/70 via-35% to-transparent to-70%" />
+					<div className="pointer-events-none absolute inset-x-0 bottom-0 p-3.5">
+						{badge && <Badge variant="box">{badge}</Badge>}
+						<p
+							className={cn("text-sm font-medium text-white", badge && "mt-2")}
+						>
+							{title}
+						</p>
+						{description && (
+							<p className="mt-0.5 text-sm text-white/55 leading-snug">
+								{description}
+							</p>
+						)}
+					</div>
+				</div>
+
+				{onClick && (
+					<button
+						type="button"
+						onClick={onClick}
+						aria-label={title}
+						className="absolute inset-0 z-10 rounded-xl focus-visible:outline-2 focus-visible:outline-ring"
+					/>
+				)}
+
+				{onDismiss && (
+					<button
+						type="button"
+						onClick={onDismiss}
+						aria-label={dismissLabel}
+						className="absolute top-1.5 right-1.5 z-20 flex size-6 items-center justify-center rounded-md text-white/70 opacity-0 transition-[opacity,color,background-color] duration-200 hover:bg-white/10 hover:text-white focus-visible:opacity-100 group-hover:opacity-100"
+					>
+						<LuMinus className="size-3.5" />
+					</button>
+				)}
+
+				{children}
+
+				{actionLabel && onAction && (
+					<div className="relative z-20 px-3 pb-3">
+						<Button
+							variant="outline"
+							size="sm"
+							className="w-full h-7 text-xs"
+							onClick={onAction}
+						>
+							{actionLabel}
+						</Button>
+					</div>
+				)}
+			</div>
+		);
+	}
+
 	return (
 		<div
 			data-slot="sidebar-card"
@@ -51,31 +127,16 @@ function SidebarCard({
 				/>
 			)}
 
-			{media && (
-				<div className="-mx-1 -mt-1 mb-2.5 overflow-hidden rounded-md">
-					{media}
-				</div>
-			)}
-
 			{badge && <Badge variant="box">{badge}</Badge>}
 
 			{onDismiss && (
 				<button
 					type="button"
 					onClick={onDismiss}
-					aria-label={i18n._(
-						msg({
-							message: "Dismiss",
-						}),
-					)}
-					className={cn(
-						"absolute z-10 text-muted-foreground hover:text-foreground transition-colors",
-						media
-							? "-top-2 -right-2 flex size-5 items-center justify-center rounded-full border border-border bg-card shadow-sm"
-							: "top-2.5 right-2.5",
-					)}
+					aria-label={dismissLabel}
+					className="absolute top-2.5 right-2.5 z-10 text-muted-foreground hover:text-foreground transition-colors"
 				>
-					<LuX className={media ? "size-3" : "size-3.5"} />
+					<LuX className="size-3.5" />
 				</button>
 			)}
 

From c0d0e050757dd8f2e96ad42bbf68538512157605 Mon Sep 17 00:00:00 2001
From: Kiet Ho <hoakiet98@gmail.com>
Date: Thu, 5 Nov 2026 17:13:33 -0800
Subject: [PATCH 2/2] fix(desktop): show the full release image edge to edge in
 the sidebar card

---
 .../cards/useReleaseNotesCard/useReleaseNotesCard.tsx     | 6 +-----
 packages/ui/src/components/ui/sidebar-card.tsx            | 8 +++-----
 2 files changed, 4 insertions(+), 10 deletions(-)

diff --git a/apps/desktop/src/renderer/components/SidebarCardSlot/cards/useReleaseNotesCard/useReleaseNotesCard.tsx b/apps/desktop/src/renderer/components/SidebarCardSlot/cards/useReleaseNotesCard/useReleaseNotesCard.tsx
index 1baccaa42af..68c1d2c15e6 100644
--- a/apps/desktop/src/renderer/components/SidebarCardSlot/cards/useReleaseNotesCard/useReleaseNotesCard.tsx
+++ b/apps/desktop/src/renderer/components/SidebarCardSlot/cards/useReleaseNotesCard/useReleaseNotesCard.tsx
@@ -49,11 +49,7 @@ export function useReleaseNotesCard(): SidebarCardEntry | null {
 		title: t({ message: `Paradev ${version}` }),
 		description: formatReleaseDate(release.date, { withYear: false }),
 		media: release.image ? (
-			<img
-				src={release.image}
-				alt=""
-				className="aspect-[5/4] w-full object-cover object-top"
-			/>
+			<img src={release.image} alt="" className="block h-auto w-full" />
 		) : undefined,
 		onClick: () => {
 			track("release_notes_card_clicked", { version });
diff --git a/packages/ui/src/components/ui/sidebar-card.tsx b/packages/ui/src/components/ui/sidebar-card.tsx
index ceda5eb3264..6bbc8a34fcb 100644
--- a/packages/ui/src/components/ui/sidebar-card.tsx
+++ b/packages/ui/src/components/ui/sidebar-card.tsx
@@ -49,11 +49,9 @@ function SidebarCard({
 					className,
 				)}
 			>
-				<div className="relative px-3.5 pt-3.5">
-					<div className="overflow-hidden rounded-md border border-white/10">
-						<div className="transition-transform duration-500 ease-out group-hover:scale-[1.04]">
-							{media}
-						</div>
+				<div className="relative">
+					<div className="transition-transform duration-500 ease-out group-hover:scale-[1.04]">
+						{media}
 					</div>
 					<div className="pointer-events-none absolute inset-0 bg-gradient-to-t from-black via-black/70 via-35% to-transparent to-70%" />
 					<div className="pointer-events-none absolute inset-x-0 bottom-0 p-3.5">