refactor: update SidebarUserProfile and Composer components with improved styling and tooltip integration

surfsense_web/components/assistant-ui/thread.tsx

@@ -735,7 +735,7 @@ const Composer: FC = () => {
 					/>
 				</div>
 			)}
-			<div className="aui-composer-attachment-dropzone flex w-full flex-col overflow-hidden rounded-2xl border-input bg-muted pt-2 outline-none transition-shadow">
+			<div className="aui-composer-attachment-dropzone flex w-full flex-col overflow-hidden rounded-3xl border-input bg-muted pt-2 shadow-sm shadow-black/5 outline-none transition-shadow dark:shadow-black/10">
 				<PendingScreenImageStrip />
 				{clipboardInitialText && (
 					<ClipboardChip
@@ -900,7 +900,7 @@ const ComposerAction: FC<ComposerActionProps> = ({ isBlockedByOtherUser = false
 	const isSendDisabled = isComposerEmpty || !hasModelConfigured || isBlockedByOtherUser;
 
 	return (
-		<div className="aui-composer-action-wrapper relative mx-3 mb-2 flex items-center justify-between">
+		<div className="aui-composer-action-wrapper relative mx-3 mb-3 flex items-center justify-between">
 			<div className="flex items-center gap-1">
 				{!isDesktop ? (
 					<>

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

@@ -31,7 +31,9 @@ import {
 } from "@/components/ui/dropdown-menu";
 import { Button } from "@/components/ui/button";
 import { Spinner } from "@/components/ui/spinner";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
 import { useLocaleContext } from "@/contexts/LocaleContext";
+import { useMediaQuery } from "@/hooks/use-media-query";
 import { usePlatform } from "@/hooks/use-platform";
 import { GITHUB_RELEASES_URL, usePrimaryDownload } from "@/lib/desktop-download-utils";
 import { APP_VERSION } from "@/lib/env-config";
@@ -133,15 +135,15 @@ function UserAvatar({
 	bgColor: string;
 	size?: "sm" | "md";
 }) {
-	const sizeClass = size === "md" ? "h-9 w-9" : "h-8 w-8";
+	const sizeClass = size === "md" ? "h-10 w-10" : "h-8 w-8";
 
 	if (avatarUrl) {
 		return (
 			<Image
 				src={avatarUrl}
 				alt="User avatar"
-				width={size === "md" ? 36 : 32}
+				width={size === "md" ? 40 : 32}
-				height={size === "md" ? 36 : 32}
+				height={size === "md" ? 40 : 32}
 				className={cn(sizeClass, "shrink-0 rounded-full object-cover select-none")}
 				referrerPolicy="no-referrer"
 				unoptimized
@@ -175,6 +177,7 @@ export function SidebarUserProfile({
 	const t = useTranslations("sidebar");
 	const { locale, setLocale } = useLocaleContext();
 	const { isDesktop } = usePlatform();
+	const isDesktopViewport = useMediaQuery("(min-width: 768px)");
 	const { os, primary } = usePrimaryDownload();
 	const [isLoggingOut, setIsLoggingOut] = useState(false);
 	const bgColor = stringToColor(user.email);
@@ -182,6 +185,7 @@ export function SidebarUserProfile({
 	const displayName = user.name || user.email.split("@")[0];
 	const downloadUrl = primary?.url ?? GITHUB_RELEASES_URL;
 	const downloadLabel = t("download_for_os", { os });
+	const showDownloadCta = !isDesktop && isDesktopViewport;
 
 	const handleLanguageChange = (newLocale: "en" | "es" | "pt" | "hi" | "zh") => {
 		setLocale(newLocale);
@@ -204,12 +208,16 @@ export function SidebarUserProfile({
 	// Collapsed view - just show avatar with dropdown
 	if (isCollapsed) {
 		return (
-			<div className="border-t px-1.5 py-2">
+			<div className="w-full border-t px-1.5 py-2">
+				<div className="flex flex-col items-center gap-2">
+					{showDownloadCta && (
+						<Tooltip>
+							<TooltipTrigger asChild>
 								<Button
 									asChild
 									variant="ghost"
 									size="icon"
-					className="mx-auto mb-2 h-9 w-9 rounded-md bg-muted hover:bg-accent"
+									className="h-10 w-10 rounded-lg bg-muted hover:bg-accent"
 								>
 									<a
 										href={downloadUrl}
@@ -223,13 +231,19 @@ export function SidebarUserProfile({
 										<Download className="h-4 w-4" strokeWidth={2.5} />
 									</a>
 								</Button>
+							</TooltipTrigger>
+							<TooltipContent side="right" sideOffset={8}>
+								{downloadLabel}
+							</TooltipContent>
+						</Tooltip>
+					)}
 					<DropdownMenu>
 						<DropdownMenuTrigger asChild>
 							<Button
 								type="button"
 								variant="ghost"
 								className={cn(
-								"mx-auto h-9 w-9 rounded-full p-0",
+									"h-10 w-10 rounded-full p-0",
 									"transition-opacity hover:bg-transparent hover:opacity-90",
 									"focus:outline-none focus-visible:outline-none",
 									"data-[state=open]:opacity-90"
@@ -381,12 +395,14 @@ export function SidebarUserProfile({
 						</DropdownMenuContent>
 					</DropdownMenu>
 				</div>
+			</div>
 		);
 	}
 
 	// Expanded view
 	return (
 		<div className="border-t">
+			{showDownloadCta && (
 				<Button
 					asChild
 					variant="ghost"
@@ -402,6 +418,7 @@ export function SidebarUserProfile({
 						{downloadLabel}
 					</a>
 				</Button>
+			)}
 			<DropdownMenu>
 				<DropdownMenuTrigger asChild>
 					<Button

surfsense_web/components/ui/tooltip.tsx

@@ -71,7 +71,7 @@ function TooltipContent({
 				data-slot="tooltip-content"
 				sideOffset={sideOffset}
 				className={cn(
-					"bg-black text-white font-medium shadow-xl px-3 py-1.5 dark:bg-zinc-800 dark:text-zinc-50 border-none animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit rounded-md text-xs text-pretty pointer-events-none select-none",
+					"bg-neutral-800 text-white font-medium shadow-xl px-3 py-1.5 dark:bg-neutral-800 dark:text-white border-none animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit rounded-md text-xs text-pretty pointer-events-none select-none",
 					className
 				)}
 				{...props}