From ac41671467322ec947dbf90de07f5152bc3348a1 Mon Sep 17 00:00:00 2001
From: Anish Sarkar <104695310+AnishSarkar22@users.noreply.github.com>
Date: Tue, 7 Jul 2026 22:03:31 +0530
Subject: [PATCH] refactor(notifications): streamline NotificationsDropdown UI
 and remove unused components

- Simplified the styling of notification count indicators for better visual consistency.
- Enhanced the empty state layout for improved user experience.
- Removed the ConnectAgentDialog from PlaygroundSidebar to declutter the UI.
---
 .../layout/ui/sidebar/NotificationsDropdown.tsx       | 11 ++++-------
 .../layout/ui/sidebar/PlaygroundSidebar.tsx           |  4 ----
 2 files changed, 4 insertions(+), 11 deletions(-)

diff --git a/surfsense_web/components/layout/ui/sidebar/NotificationsDropdown.tsx b/surfsense_web/components/layout/ui/sidebar/NotificationsDropdown.tsx
index bf3ce4322..f9441d2c3 100644
--- a/surfsense_web/components/layout/ui/sidebar/NotificationsDropdown.tsx
+++ b/surfsense_web/components/layout/ui/sidebar/NotificationsDropdown.tsx
@@ -329,10 +329,7 @@ export function NotificationsDropdown({
 						>
 							<span>{tab.label}</span>
 							<span
-								className={cn(
-									"inline-flex h-5 min-w-5 items-center justify-center rounded-full px-1.5 text-[11px] font-semibold",
-									isActive ? "bg-primary text-primary-foreground" : "bg-muted text-muted-foreground"
-								)}
+								className="inline-flex h-5 min-w-5 items-center justify-center rounded-full bg-muted px-1.5 text-[11px] font-semibold text-muted-foreground"
 							>
 								{formatNotificationCount(tab.count)}
 							</span>
@@ -406,7 +403,7 @@ export function NotificationsDropdown({
 						) : null}
 					</div>
 				) : (
-					<div className="flex flex-col items-center justify-center px-6 py-10 text-center">
+					<div className="flex min-h-full flex-col items-center justify-center px-6 py-10 text-center">
 						<p className="text-sm font-medium">{emptyStateCopy.title}</p>
 						<p className="mt-1 text-xs text-muted-foreground">{emptyStateCopy.description}</p>
 						{hasMore ? (
@@ -438,7 +435,7 @@ export function NotificationsDropdown({
 				>
 					<DrawerHandle className="mt-3 h-1.5 w-10" />
 					<DrawerTitle className="sr-only">Notifications</DrawerTitle>
-					<div className="flex min-h-0 flex-1 flex-col">{panelContent}</div>
+					<div className="flex min-h-0 flex-1 select-none flex-col">{panelContent}</div>
 				</DrawerContent>
 			</Drawer>
 		);
@@ -458,7 +455,7 @@ export function NotificationsDropdown({
 				side="right"
 				align="end"
 				sideOffset={10}
-				className="z-80 flex max-h-[min(520px,calc(100vh-2rem))] w-[360px] flex-col overflow-hidden rounded-xl border bg-popover p-0 text-popover-foreground shadow-lg"
+				className="z-80 flex h-[min(420px,calc(100vh-2rem))] w-[360px] select-none flex-col overflow-hidden rounded-xl border bg-popover p-0 text-popover-foreground shadow-lg"
 			>
 				{panelContent}
 			</PopoverContent>
diff --git a/surfsense_web/components/layout/ui/sidebar/PlaygroundSidebar.tsx b/surfsense_web/components/layout/ui/sidebar/PlaygroundSidebar.tsx
index 1c2f96212..ffdab8004 100644
--- a/surfsense_web/components/layout/ui/sidebar/PlaygroundSidebar.tsx
+++ b/surfsense_web/components/layout/ui/sidebar/PlaygroundSidebar.tsx
@@ -3,7 +3,6 @@
 import { History, KeyRound } from "lucide-react";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
-import { ConnectAgentDialog } from "@/components/mcp/connect-agent-dialog";
 import { PLAYGROUND_PLATFORMS, type PlatformIcon } from "@/lib/playground/catalog";
 import { cn } from "@/lib/utils";
 
@@ -90,9 +89,6 @@ export function PlaygroundSidebar({ workspaceId }: PlaygroundSidebarProps) {
 				))}
 			</div>
 
-			<div className="shrink-0 py-1.5 before:mx-3 before:mb-1.5 before:block before:h-px before:bg-border">
-				<ConnectAgentDialog />
-			</div>
 		</div>
 	);
 }