apunkt/SurfSense
1
0
Fork 0
mirror of https://github.com/MODSetter/SurfSense.git synced 2026-05-03 04:42:39 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

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

Browse source
This commit is contained in:
Anish Sarkar 2026-04-27 02:53:26 +05:30
parent a0f2851784
commit f7fa96ccd0
2 changed files with 45 additions and 22 deletions
Download patch file Download diff file Expand all files Collapse all files

48
surfsense_web/components/layout/ui/sidebar/DocumentsSidebar.tsx
View file

@ -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">

19
surfsense_web/components/ui/tooltip.tsx
View file

@ -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>