From 4083d33b5c00b8c7e97dc138f7fc740a3d60e4f8 Mon Sep 17 00:00:00 2001
From: Anish Sarkar <104695310+AnishSarkar22@users.noreply.github.com>
Date: Thu, 14 May 2026 22:53:41 +0530
Subject: [PATCH] refactor: enhance SidebarUserProfile component with download
 tracking and improved button styling

---
 .../layout/ui/sidebar/SidebarUserProfile.tsx  | 39 ++++++++++++++++++-
 surfsense_web/components/ui/fixed-toolbar.tsx |  2 +-
 .../components/ui/inline-combobox.tsx         |  2 +-
 surfsense_web/lib/posthog/events.ts           | 10 +++++
 4 files changed, 49 insertions(+), 4 deletions(-)

diff --git a/surfsense_web/components/layout/ui/sidebar/SidebarUserProfile.tsx b/surfsense_web/components/layout/ui/sidebar/SidebarUserProfile.tsx
index a8275829b..e5bb18054 100644
--- a/surfsense_web/components/layout/ui/sidebar/SidebarUserProfile.tsx
+++ b/surfsense_web/components/layout/ui/sidebar/SidebarUserProfile.tsx
@@ -35,6 +35,7 @@ import { useLocaleContext } from "@/contexts/LocaleContext";
 import { usePlatform } from "@/hooks/use-platform";
 import { GITHUB_RELEASES_URL, usePrimaryDownload } from "@/lib/desktop-download-utils";
 import { APP_VERSION } from "@/lib/env-config";
+import { trackDesktopDownloadClicked } from "@/lib/posthog/events";
 import { cn } from "@/lib/utils";
 import type { User } from "../../types/layout.types";
 
@@ -180,6 +181,7 @@ export function SidebarUserProfile({
 	const initials = getInitials(user.email);
 	const displayName = user.name || user.email.split("@")[0];
 	const downloadUrl = primary?.url ?? GITHUB_RELEASES_URL;
+	const downloadLabel = t("download_for_os", { os });
 
 	const handleLanguageChange = (newLocale: "en" | "es" | "pt" | "hi" | "zh") => {
 		setLocale(newLocale);
@@ -203,6 +205,24 @@ export function SidebarUserProfile({
 	if (isCollapsed) {
 		return (
 			<div className="border-t px-1.5 py-2">
+				<Button
+					asChild
+					variant="ghost"
+					size="icon"
+					className="mx-auto mb-2 h-9 w-9 rounded-md bg-muted hover:bg-accent"
+				>
+					<a
+						href={downloadUrl}
+						target="_blank"
+						rel="noopener noreferrer"
+						aria-label={downloadLabel}
+						onClick={() =>
+							trackDesktopDownloadClicked({ os, placement: "sidebar_collapsed" })
+						}
+					>
+						<Download className="h-4 w-4" strokeWidth={2.5} />
+					</a>
+				</Button>
 				<DropdownMenu>
 					<DropdownMenuTrigger asChild>
 						<Button
@@ -343,7 +363,7 @@ export function SidebarUserProfile({
 							<DropdownMenuItem asChild className="font-medium">
 								<a href={downloadUrl} target="_blank" rel="noopener noreferrer">
 									<Download className="h-4 w-4" strokeWidth={2.5} />
-									{t("download_for_os", { os })}
+									{downloadLabel}
 								</a>
 							</DropdownMenuItem>
 						)}
@@ -367,6 +387,21 @@ export function SidebarUserProfile({
 	// Expanded view
 	return (
 		<div className="border-t">
+			<Button
+				asChild
+				variant="ghost"
+				className="mx-2 mt-2 mb-1 h-10 w-[calc(100%-1rem)] justify-start gap-2 rounded-md bg-muted px-3 text-sm font-semibold hover:bg-accent"
+			>
+				<a
+					href={downloadUrl}
+					target="_blank"
+					rel="noopener noreferrer"
+					onClick={() => trackDesktopDownloadClicked({ os, placement: "sidebar_expanded" })}
+				>
+					<Download className="h-4 w-4" strokeWidth={2.5} />
+					{downloadLabel}
+				</a>
+			</Button>
 			<DropdownMenu>
 				<DropdownMenuTrigger asChild>
 					<Button
@@ -510,7 +545,7 @@ export function SidebarUserProfile({
 						<DropdownMenuItem asChild className="font-medium">
 							<a href={downloadUrl} target="_blank" rel="noopener noreferrer">
 								<Download className="h-4 w-4" strokeWidth={2.5} />
-								{t("download_for_os", { os })}
+								{downloadLabel}
 							</a>
 						</DropdownMenuItem>
 					)}
diff --git a/surfsense_web/components/ui/fixed-toolbar.tsx b/surfsense_web/components/ui/fixed-toolbar.tsx
index e11fae861..540088ea5 100644
--- a/surfsense_web/components/ui/fixed-toolbar.tsx
+++ b/surfsense_web/components/ui/fixed-toolbar.tsx
@@ -14,7 +14,7 @@ export function FixedToolbar({
 	return (
 		<Toolbar
 			className={cn(
-				"scrollbar-hide absolute top-0 left-0 z-[60] w-full justify-between overflow-x-auto border-b bg-background p-1",
+				"scrollbar-hide absolute top-0 left-0 z-40 w-full justify-between overflow-x-auto border-b bg-background p-1",
 				className
 			)}
 			{...props}
diff --git a/surfsense_web/components/ui/inline-combobox.tsx b/surfsense_web/components/ui/inline-combobox.tsx
index 1747dc469..2c45457b1 100644
--- a/surfsense_web/components/ui/inline-combobox.tsx
+++ b/surfsense_web/components/ui/inline-combobox.tsx
@@ -280,7 +280,7 @@ const InlineComboboxContent: typeof ComboboxPopover = ({ className, ...props })
 		<Portal>
 			<ComboboxPopover
 				className={cn(
-					"z-500 max-h-[288px] w-[300px] overflow-y-auto rounded-md bg-popover shadow-md",
+					"z-500 max-h-[288px] w-[300px] overflow-y-auto overscroll-none rounded-md bg-popover shadow-md",
 					className
 				)}
 				onKeyDownCapture={handleKeyDown}
diff --git a/surfsense_web/lib/posthog/events.ts b/surfsense_web/lib/posthog/events.ts
index f9eb6b312..127685fe8 100644
--- a/surfsense_web/lib/posthog/events.ts
+++ b/surfsense_web/lib/posthog/events.ts
@@ -401,6 +401,16 @@ export function trackSourcesTabViewed(searchSpaceId: number, tab: string) {
 	});
 }
 
+export function trackDesktopDownloadClicked(options: {
+	os: string;
+	placement: "sidebar_collapsed" | "sidebar_expanded";
+}) {
+	safeCapture("desktop_download_clicked", {
+		os: options.os,
+		placement: options.placement,
+	});
+}
+
 // ============================================
 // SEARCH SPACE INVITE EVENTS
 // ============================================