From f7fa96ccd01bcd2df89087c4e92151af5bdc5b25 Mon Sep 17 00:00:00 2001
From: Anish Sarkar <104695310+AnishSarkar22@users.noreply.github.com>
Date: Mon, 27 Apr 2026 02:53:26 +0530
Subject: [PATCH] feat(sidebar): enhance DocumentsSidebar with tooltip support
 for folder addition, improving user feedback on folder limits

---
 .../layout/ui/sidebar/DocumentsSidebar.tsx    | 48 ++++++++++++++-----
 surfsense_web/components/ui/tooltip.tsx       | 19 ++++----
 2 files changed, 45 insertions(+), 22 deletions(-)

diff --git a/surfsense_web/components/layout/ui/sidebar/DocumentsSidebar.tsx b/surfsense_web/components/layout/ui/sidebar/DocumentsSidebar.tsx
index 5819dcef4..ce9b80d49 100644
--- a/surfsense_web/components/layout/ui/sidebar/DocumentsSidebar.tsx
+++ b/surfsense_web/components/layout/ui/sidebar/DocumentsSidebar.tsx
@@ -1211,18 +1211,42 @@ function AuthenticatedDocumentsSidebar({
 						orientation="vertical"
 						className="data-[orientation=vertical]:h-3 self-center bg-border"
 					/>
-					<button
-						type="button"
-						className="flex w-8 items-center justify-center rounded-r-lg text-muted-foreground transition-colors hover:bg-muted/80 hover:text-foreground focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0 disabled:opacity-50"
-						onClick={() => {
-							void handlePickFilesystemRoot();
-						}}
-						disabled={!canAddMoreLocalRoots}
-						aria-label="Add folder"
-						title="Add folder"
-					>
-						<FolderPlus className="size-3.5" />
-					</button>
+					{electronAPI ? (
+						<Tooltip>
+							<TooltipTrigger asChild>
+								<span className="inline-flex">
+									<button
+										type="button"
+										className="flex w-8 items-center justify-center rounded-r-lg text-muted-foreground transition-colors hover:bg-muted/80 hover:text-foreground focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0 disabled:opacity-50"
+										onClick={() => {
+											void handlePickFilesystemRoot();
+										}}
+										disabled={!canAddMoreLocalRoots}
+										aria-label="Add folder"
+									>
+										<FolderPlus className="size-3.5" />
+									</button>
+								</span>
+							</TooltipTrigger>
+							<TooltipContent side="top" className="text-xs">
+								{canAddMoreLocalRoots
+									? "Add folder"
+									: `You can add up to ${MAX_LOCAL_FILESYSTEM_ROOTS} folders`}
+							</TooltipContent>
+						</Tooltip>
+					) : (
+						<button
+							type="button"
+							className="flex w-8 items-center justify-center rounded-r-lg text-muted-foreground transition-colors hover:bg-muted/80 hover:text-foreground focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0 disabled:opacity-50"
+							onClick={() => {
+								void handlePickFilesystemRoot();
+							}}
+							disabled={!canAddMoreLocalRoots}
+							aria-label="Add folder"
+						>
+							<FolderPlus className="size-3.5" />
+						</button>
+					)}
 				</div>
 			</div>
 			<div className="mx-4 mb-2">
diff --git a/surfsense_web/components/ui/tooltip.tsx b/surfsense_web/components/ui/tooltip.tsx
index bcf1c72f8..c1469156d 100644
--- a/surfsense_web/components/ui/tooltip.tsx
+++ b/surfsense_web/components/ui/tooltip.tsx
@@ -6,20 +6,19 @@ import { useEffect, useState } from "react";
 
 import { cn } from "@/lib/utils";
 
-const MOBILE_BREAKPOINT = 768;
-
-function useIsTouchDevice() {
-	const [isTouch, setIsTouch] = useState(false);
+function useCanHover() {
+	const [canHover, setCanHover] = useState(false);
 
 	useEffect(() => {
-		const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
-		const update = () => setIsTouch(mql.matches);
+		// Hover-capable pointers are a better cross-platform signal than viewport width.
+		const mql = window.matchMedia("(hover: hover) and (pointer: fine)");
+		const update = () => setCanHover(mql.matches);
 		update();
 		mql.addEventListener("change", update);
 		return () => mql.removeEventListener("change", update);
 	}, []);
 
-	return isTouch;
+	return canHover;
 }
 
 function TooltipProvider({
@@ -42,14 +41,14 @@ function Tooltip({
 	onOpenChange,
 	...props
 }: React.ComponentProps<typeof TooltipPrimitive.Root>) {
-	const isMobile = useIsTouchDevice();
+	const canHover = useCanHover();
 
 	return (
 		<TooltipProvider>
 			<TooltipPrimitive.Root
 				data-slot="tooltip"
-				open={isMobile ? false : open}
-				onOpenChange={isMobile ? undefined : onOpenChange}
+				open={canHover ? open : false}
+				onOpenChange={canHover ? onOpenChange : undefined}
 				{...props}
 			/>
 		</TooltipProvider>