From da3372dded049557e33f1c3e384e8c2465dd725f Mon Sep 17 00:00:00 2001
From: BrunoQuaresma <bruno_nonato_quaresma@hotmail.com>
Date: Wed, 26 Mar 2025 19:56:30 +0000
Subject: [PATCH 1/2] refactor: add nice enter animation for notification badge

---
 .../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 d650ae18aa1b5..f4cafe7e4e6e7 100644
--- a/site/src/modules/notifications/NotificationsInbox/InboxButton.tsx
+++ b/site/src/modules/notifications/NotificationsInbox/InboxButton.tsx
@@ -2,6 +2,7 @@ import { Button, type ButtonProps } from "components/Button/Button";
 import { BellIcon } from "lucide-react";
 import { forwardRef } from "react";
 import { UnreadBadge } from "./UnreadBadge";
+import { cn } from "utils/cn";
 
 type InboxButtonProps = {
 	unreadCount: number;
@@ -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 940c81974d622..af6f5f1b13f67 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,
 			])}

From 6126db6d15235332bbbfece6e9536aef534d2979 Mon Sep 17 00:00:00 2001
From: BrunoQuaresma <bruno_nonato_quaresma@hotmail.com>
Date: Wed, 26 Mar 2025 20:00:07 +0000
Subject: [PATCH 2/2] FMT

---
 .../modules/notifications/NotificationsInbox/InboxButton.tsx    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/site/src/modules/notifications/NotificationsInbox/InboxButton.tsx b/site/src/modules/notifications/NotificationsInbox/InboxButton.tsx
index f4cafe7e4e6e7..0434c5ef1ece7 100644
--- a/site/src/modules/notifications/NotificationsInbox/InboxButton.tsx
+++ b/site/src/modules/notifications/NotificationsInbox/InboxButton.tsx
@@ -1,8 +1,8 @@
 import { Button, type ButtonProps } from "components/Button/Button";
 import { BellIcon } from "lucide-react";
 import { forwardRef } from "react";
-import { UnreadBadge } from "./UnreadBadge";
 import { cn } from "utils/cn";
+import { UnreadBadge } from "./UnreadBadge";
 
 type InboxButtonProps = {
 	unreadCount: number;