fix(sidebar): adjust button sizes and layout for improved UI consistency

- Reduced button sizes in EmbeddedDocumentsMenu and EmbeddedImportMenu for better alignment.
- Updated layout spacing in SidebarButton to enhance visual clarity and consistency.
- Added a new badge to the Sidebar component to indicate new items, improving user awareness.

surfsense_web/components/assistant-ui/thread.tsx

@@ -1014,13 +1014,13 @@ const ConnectedScraperIcons: FC<{ workspaceId: number }> = ({ workspaceId }) =>
 	return (
 		<div className="hidden items-center gap-1 sm:flex">
 			<div aria-hidden className="h-5 w-px shrink-0 bg-border" />
-			<div className="flex items-center gap-0.5" aria-label="Connected data sources">
+			<ul className="m-0 flex list-none items-center gap-0.5 p-0" aria-label="Connected data sources">
 				{platforms.map((platform, i) => {
 					const Icon = platform.icon;
 					return (
 						<Tooltip key={platform.id}>
 							<TooltipTrigger asChild>
-								<motion.span
+								<motion.li
 									initial={{ opacity: 0, y: reduceMotion ? 0 : 4 }}
 									animate={{ opacity: 1, y: 0 }}
 									transition={{
@@ -1031,13 +1031,13 @@ const ConnectedScraperIcons: FC<{ workspaceId: number }> = ({ workspaceId }) =>
 									className="flex size-5 items-center justify-center"
 								>
 									<Icon className="size-3.5" />
-								</motion.span>
+								</motion.li>
 							</TooltipTrigger>
 							<TooltipContent side="bottom">{platform.label} · Connected</TooltipContent>
 						</Tooltip>
 					);
 				})}
-			</div>
+			</ul>
 		</div>
 	);
 };

surfsense_web/components/layout/ui/sidebar/DocumentsSidebar.tsx

@@ -145,10 +145,10 @@ export function EmbeddedDocumentsMenu({
 						type="button"
 						variant="ghost"
 						size="icon"
-						className="relative h-7 w-7 text-muted-foreground hover:bg-accent hover:text-accent-foreground"
+						className="relative h-6 w-6 text-muted-foreground hover:bg-accent hover:text-accent-foreground"
 						aria-label="Document actions"
 					>
-						<SlidersVertical className="h-3.5 w-3.5" />
+						<SlidersVertical className="size-3.5" />
 						{activeTypes.length > 0 ? (
 							<span className="absolute right-0.5 top-0.5 h-1.5 w-1.5 rounded-full bg-primary" />
 						) : null}
@@ -284,10 +284,10 @@ export function EmbeddedImportMenu({
 					type="button"
 					variant="ghost"
 					size="icon"
-					className="h-7 w-7 text-muted-foreground hover:bg-accent hover:text-accent-foreground"
+					className="h-6 w-6 text-muted-foreground hover:bg-accent hover:text-accent-foreground"
 					aria-label="Import documents"
 				>
-					<FolderInput className="h-3.5 w-3.5" />
+					<FolderInput className="size-3.5" />
 				</Button>
 			</DropdownMenuTrigger>
 			<DropdownMenuContent align="end" className="w-56">
@@ -1267,7 +1267,7 @@ function AuthenticatedDocumentsSidebarBase({
 					defaultOpen={true}
 					contentClassName="px-0"
 					persistentAction={
-						<div className="flex items-center gap-0.5">
+						<div className="flex items-center gap-1.5">
 							<EmbeddedImportMenu onFolderWatched={refreshWatchedIds} />
 							<EmbeddedDocumentsMenu
 								typeCounts={typeCounts}
@@ -1443,7 +1443,7 @@ function AnonymousDocumentsSidebar({ embedded = false }: DocumentsSidebarProps)
 				defaultOpen={true}
 				contentClassName="px-0"
 				persistentAction={
-					<div className="flex items-center gap-0.5">
+					<div className="flex items-center gap-1.5">
 						<EmbeddedImportMenu gate={gate} />
 						<EmbeddedDocumentsMenu
 							typeCounts={hasDoc ? { FILE: 1 } : {}}

surfsense_web/components/layout/ui/sidebar/Sidebar.tsx

@@ -246,6 +246,14 @@ 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>
+							}
 							tooltipContent={isCollapsed ? playgroundItem.title : undefined}
 						/>
 					)}

surfsense_web/components/layout/ui/sidebar/SidebarButton.tsx

@@ -73,17 +73,19 @@ export function SidebarButton({
 						isCollapsed ? "max-w-0 opacity-0 ml-0" : "max-w-[260px] flex-1 opacity-100 ml-2"
 					)}
 				>
-					<span className="block truncate">{label}</span>
+					<span className="flex min-w-0 items-center gap-1.5">
+						<span className="truncate">{label}</span>
+						{!isCollapsed && badge && typeof badge !== "string" ? badge : null}
+						{!isCollapsed && badge && typeof badge === "string" ? (
+							<span className="inline-flex h-4 min-w-4 items-center justify-center rounded-full bg-red-500 px-1 text-[10px] font-medium text-white">
+								{badge}
+							</span>
+						) : null}
+					</span>
 				</span>
 			</span>
 
 			{!isCollapsed && trailingContent}
-			{!isCollapsed && badge && typeof badge !== "string" ? badge : null}
-			{!isCollapsed && badge && typeof badge === "string" ? (
-				<span className="ml-1 inline-flex items-center justify-center min-w-4 h-4 px-1 rounded-full bg-red-500 text-white text-[10px] font-medium">
-					{badge}
-				</span>
-			) : null}
 
 			{collapsedOverlay && (
 				<span