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" orientation="vertical"
className="data-[orientation=vertical]:h-3 self-center bg-border" className="data-[orientation=vertical]:h-3 self-center bg-border"
/> />
<button {electronAPI ? (
type="button" <Tooltip>
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" <TooltipTrigger asChild>
onClick={() => { <span className="inline-flex">
void handlePickFilesystemRoot(); <button
}} type="button"
disabled={!canAddMoreLocalRoots} 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"
aria-label="Add folder" onClick={() => {
title="Add folder" void handlePickFilesystemRoot();
> }}
<FolderPlus className="size-3.5" /> disabled={!canAddMoreLocalRoots}
</button> 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> </div>
<div className="mx-4 mb-2"> <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"; import { cn } from "@/lib/utils";
const MOBILE_BREAKPOINT = 768; function useCanHover() {
const [canHover, setCanHover] = useState(false);
function useIsTouchDevice() {
const [isTouch, setIsTouch] = useState(false);
useEffect(() => { 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(); update();
mql.addEventListener("change", update); mql.addEventListener("change", update);
return () => mql.removeEventListener("change", update); return () => mql.removeEventListener("change", update);
}, []); }, []);
return isTouch; return canHover;
} }
function TooltipProvider({ function TooltipProvider({
@ -42,14 +41,14 @@ function Tooltip({
onOpenChange, onOpenChange,
...props ...props
}: React.ComponentProps<typeof TooltipPrimitive.Root>) { }: React.ComponentProps<typeof TooltipPrimitive.Root>) {
const isMobile = useIsTouchDevice(); const canHover = useCanHover();
return ( return (
<TooltipProvider> <TooltipProvider>
<TooltipPrimitive.Root <TooltipPrimitive.Root
data-slot="tooltip" data-slot="tooltip"
open={isMobile ? false : open} open={canHover ? open : false}
onOpenChange={isMobile ? undefined : onOpenChange} onOpenChange={canHover ? onOpenChange : undefined}
{...props} {...props}
/> />
</TooltipProvider> </TooltipProvider>