From d6fbbb97d486368fa0848543e685d7fb105396e5 Mon Sep 17 00:00:00 2001
From: Anish Sarkar <104695310+AnishSarkar22@users.noreply.github.com>
Date: Tue, 7 Jul 2026 22:48:23 +0530
Subject: [PATCH] feat(sidebar): introduce SidebarButtonBadge for improved
 badge display

- Added SidebarButtonBadge component to encapsulate badge styling and functionality.
- Updated Sidebar to utilize SidebarButtonBadge for displaying new item notifications, enhancing visual clarity.
- Adjusted SidebarUserProfile layout for better alignment in collapsed view.
---
 .../components/layout/ui/sidebar/Sidebar.tsx  | 11 ++--------
 .../layout/ui/sidebar/SidebarButton.tsx       | 21 +++++++++++++++++++
 .../layout/ui/sidebar/SidebarUserProfile.tsx  |  2 +-
 .../components/mcp/connect-agent-dialog.tsx   |  2 +-
 4 files changed, 25 insertions(+), 11 deletions(-)

diff --git a/surfsense_web/components/layout/ui/sidebar/Sidebar.tsx b/surfsense_web/components/layout/ui/sidebar/Sidebar.tsx
index f240ff3d7..bd6029d89 100644
--- a/surfsense_web/components/layout/ui/sidebar/Sidebar.tsx
+++ b/surfsense_web/components/layout/ui/sidebar/Sidebar.tsx
@@ -19,7 +19,7 @@ import { ChatListItem } from "./ChatListItem";
 import { CreditBalanceDisplay } from "./CreditBalanceDisplay";
 import { DocumentsSidebar } from "./DocumentsSidebar";
 import { NavSection } from "./NavSection";
-import { SidebarButton } from "./SidebarButton";
+import { SidebarButton, SidebarButtonBadge } from "./SidebarButton";
 import { SidebarCollapseButton } from "./SidebarCollapseButton";
 import { SidebarHeader } from "./SidebarHeader";
 import { SidebarSection } from "./SidebarSection";
@@ -246,14 +246,7 @@ export function Sidebar({
 							onClick={() => onNavItemClick?.(playgroundItem)}
 							isCollapsed={isCollapsed}
 							isActive={playgroundItem.isActive}
-							badge={
-								<Badge
-									variant="secondary"
-									className="h-5 shrink-0 rounded-sm border-0 bg-popover-foreground/10 px-1.5 text-[11px] text-popover-foreground hover:bg-popover-foreground/10"
-								>
-									New
-								</Badge>
-							}
+							badge={<SidebarButtonBadge>New</SidebarButtonBadge>}
 							tooltipContent={isCollapsed ? playgroundItem.title : undefined}
 						/>
 					)}
diff --git a/surfsense_web/components/layout/ui/sidebar/SidebarButton.tsx b/surfsense_web/components/layout/ui/sidebar/SidebarButton.tsx
index 5b98be560..1557253a9 100644
--- a/surfsense_web/components/layout/ui/sidebar/SidebarButton.tsx
+++ b/surfsense_web/components/layout/ui/sidebar/SidebarButton.tsx
@@ -2,6 +2,7 @@
 
 import type { LucideIcon } from "lucide-react";
 import type React from "react";
+import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
 import { cn } from "@/lib/utils";
@@ -28,6 +29,26 @@ const baseClassName = cn(
 	"focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
 );
 
+export function SidebarButtonBadge({
+	children,
+	className,
+}: {
+	children: React.ReactNode;
+	className?: string;
+}) {
+	return (
+		<Badge
+			variant="secondary"
+			className={cn(
+				"h-5 shrink-0 rounded-sm border-0 bg-popover-foreground/10 px-1.5 text-[11px] text-popover-foreground hover:bg-popover-foreground/10",
+				className
+			)}
+		>
+			{children}
+		</Badge>
+	);
+}
+
 export function SidebarButton({
 	icon: Icon,
 	label,
diff --git a/surfsense_web/components/layout/ui/sidebar/SidebarUserProfile.tsx b/surfsense_web/components/layout/ui/sidebar/SidebarUserProfile.tsx
index 09fb3f6d0..d5e72174e 100644
--- a/surfsense_web/components/layout/ui/sidebar/SidebarUserProfile.tsx
+++ b/surfsense_web/components/layout/ui/sidebar/SidebarUserProfile.tsx
@@ -414,7 +414,7 @@ export function SidebarUserProfile({
 	// Collapsed view - just show avatar with dropdown
 	if (isCollapsed) {
 		return (
-			<div className="relative w-full px-1.5 py-2 before:absolute before:inset-x-3 before:top-0 before:h-px before:bg-border">
+			<div className="relative w-full px-1.5 py-2 before:absolute before:inset-x-1.5 before:top-0 before:h-px before:bg-border">
 				<div className="flex flex-col items-center gap-2">
 					{topContent}
 					{showDownloadCta && (
diff --git a/surfsense_web/components/mcp/connect-agent-dialog.tsx b/surfsense_web/components/mcp/connect-agent-dialog.tsx
index b48b849c6..86edf6716 100644
--- a/surfsense_web/components/mcp/connect-agent-dialog.tsx
+++ b/surfsense_web/components/mcp/connect-agent-dialog.tsx
@@ -29,7 +29,7 @@ export function ConnectAgentDialog({ className }: { className?: string }) {
 				)}
 			>
 				<Cable className="h-3.5 w-3.5 shrink-0" />
-				<span className="min-w-0 flex-1 truncate">Connect your AI Agent</span>
+				<span className="min-w-0 flex-1 truncate">Connect your agent</span>
 			</DialogTrigger>
 			<DialogContent className="max-h-[85vh] overflow-y-auto sm:max-w-2xl">
 				<DialogHeader>