From 2b59cfa7c53b75fca0ccf1f8d2a858fa4abc0e3d Mon Sep 17 00:00:00 2001
From: Bruno Quaresma <bruno@coder.com>
Date: Thu, 27 Mar 2025 11:43:44 -0300
Subject: [PATCH] refactor: add nice enter animation for notification badge
 (#17119)

---
 .../notifications/NotificationsInbox/InboxButton.tsx       | 7 ++++++-
 .../notifications/NotificationsInbox/UnreadBadge.tsx       | 3 ++-
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/site/src/modules/notifications/NotificationsInbox/InboxButton.tsx b/site/src/modules/notifications/NotificationsInbox/InboxButton.tsx
index d650ae18aa..0434c5ef1e 100644
--- a/site/src/modules/notifications/NotificationsInbox/InboxButton.tsx
+++ b/site/src/modules/notifications/NotificationsInbox/InboxButton.tsx
@@ -1,6 +1,7 @@
 import { Button, type ButtonProps } from "components/Button/Button";
 import { BellIcon } from "lucide-react";
 import { forwardRef } from "react";
+import { cn } from "utils/cn";
 import { UnreadBadge } from "./UnreadBadge";
 
 type InboxButtonProps = {
@@ -21,7 +22,11 @@ export const InboxButton = forwardRef<HTMLButtonElement, InboxButtonProps>(
 				{unreadCount > 0 && (
 					<UnreadBadge
 						count={unreadCount}
-						className="absolute top-0 right-0 -translate-y-1/2 translate-x-1/2"
+						className={cn([
+							"[--offset:calc(var(--unread-badge-size)/2)]",
+							"absolute top-0 right-0 -mr-[--offset] -mt-[--offset]",
+							"animate-in fade-in zoom-in duration-200",
+						])}
 					/>
 				)}
 			</Button>
diff --git a/site/src/modules/notifications/NotificationsInbox/UnreadBadge.tsx b/site/src/modules/notifications/NotificationsInbox/UnreadBadge.tsx
index 940c81974d..af6f5f1b13 100644
--- a/site/src/modules/notifications/NotificationsInbox/UnreadBadge.tsx
+++ b/site/src/modules/notifications/NotificationsInbox/UnreadBadge.tsx
@@ -13,7 +13,8 @@ export const UnreadBadge: FC<UnreadBadgeProps> = ({
 	return (
 		<span
 			className={cn([
-				"flex min-w-[18px] h-[18px] w-fit px-1 rounded text-2xs items-center justify-center",
+				"[--unread-badge-size:18px] min-w-[--unread-badge-size] h-[--unread-badge-size]",
+				"flex w-fit px-1 rounded text-2xs items-center justify-center",
 				"bg-surface-sky text-highlight-sky",
 				className,
 			])}