feat(sidebar): enhance DocumentsSidebar with tooltip support for folder addition, improving user feedback on folder limits

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

@@ -1211,6 +1211,10 @@ function AuthenticatedDocumentsSidebar({
 						orientation="vertical"
 						className="data-[orientation=vertical]:h-3 self-center bg-border"
 					/>
+					{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"
@@ -1219,10 +1223,30 @@ function AuthenticatedDocumentsSidebar({
 										}}
 										disabled={!canAddMoreLocalRoots}
 										aria-label="Add folder"
-						title="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">

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 useCanHover() {
-
+	const [canHover, setCanHover] = useState(false);
-function useIsTouchDevice() {
-	const [isTouch, setIsTouch] = useState(false);
 
 	useEffect(() => {
-		const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
+		// Hover-capable pointers are a better cross-platform signal than viewport width.
-		const update = () => setIsTouch(mql.matches);
+		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}
+				open={canHover ? open : false}
-				onOpenChange={isMobile ? undefined : onOpenChange}
+				onOpenChange={canHover ? onOpenChange : undefined}
 				{...props}
 			/>
 		</TooltipProvider>