apunkt/SurfSense
1
0
Fork 0
mirror of https://github.com/MODSetter/SurfSense.git synced 2026-05-09 15:52:40 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: disable mobile sidebar tooltip & make searchspace list vertical on mobile view

Browse source
This commit is contained in:
Anish Sarkar 2026-02-06 18:35:29 +05:30
parent 76e7ddee2f
commit 21eec210cc
2 changed files with 45 additions and 30 deletions
Download patch file Download diff file Expand all files Collapse all files

32
surfsense_web/components/layout/ui/icon-rail/SearchSpaceAvatar.tsx
View file

@ -21,6 +21,7 @@ interface SearchSpaceAvatarProps {
onDelete?: () => void;
onSettings?: () => void;
size?: "sm" | "md";
disableTooltip?: boolean;
}
/**
@ -64,6 +65,7 @@ export function SearchSpaceAvatar({
onDelete,
onSettings,
size = "md",
disableTooltip = false,
}: SearchSpaceAvatarProps) {
const t = useTranslations("searchSpace");
const tCommon = useTranslations("common");
@ -114,16 +116,22 @@ export function SearchSpaceAvatar({
if (onDelete || onSettings) {
return (
<ContextMenu>
<Tooltip>
<TooltipTrigger asChild>
<ContextMenuTrigger asChild>
<div className="inline-block">{avatarButton}</div>
</ContextMenuTrigger>
</TooltipTrigger>
<TooltipContent side="right" sideOffset={8}>
{tooltipContent}
</TooltipContent>
</Tooltip>
{disableTooltip ? (
<ContextMenuTrigger asChild>
<div className="inline-block">{avatarButton}</div>
</ContextMenuTrigger>
) : (
<Tooltip>
<TooltipTrigger asChild>
<ContextMenuTrigger asChild>
<div className="inline-block">{avatarButton}</div>
</ContextMenuTrigger>
</TooltipTrigger>
<TooltipContent side="right" sideOffset={8}>
{tooltipContent}
</TooltipContent>
</Tooltip>
)}
<ContextMenuContent className="w-48">
{onSettings && (
<ContextMenuItem onClick={onSettings}>
@ -150,6 +158,10 @@ export function SearchSpaceAvatar({
}
// No context menu needed
if (disableTooltip) {
return avatarButton;
}
return (
<Tooltip>
<TooltipTrigger asChild>{avatarButton}</TooltipTrigger>

43
surfsense_web/components/layout/ui/sidebar/MobileSidebar.tsx
View file

@ -2,6 +2,7 @@
import { Menu, Plus } from "lucide-react";
import { Button } from "@/components/ui/button";
import { ScrollArea } from "@/components/ui/scroll-area";
import { Sheet, SheetContent, SheetTitle } from "@/components/ui/sheet";
import type { ChatItem, NavItem, PageUsage, SearchSpace, User } from "../../types/layout.types";
import { SearchSpaceAvatar } from "../icon-rail/SearchSpaceAvatar";
@ -97,15 +98,16 @@ export function MobileSidebar({
return (
<Sheet open={isOpen} onOpenChange={onOpenChange}>
<SheetContent side="left" className="w-[300px] p-0 flex flex-col">
<SheetContent side="left" className="w-[340px] p-0 flex flex-row gap-0 [&>button]:hidden">
<SheetTitle className="sr-only">Navigation</SheetTitle>
{/* Horizontal Search Spaces Rail */}
<div className="shrink-0 border-b bg-muted/40 px-2 py-2 overflow-hidden">
<div className="flex items-center gap-2 px-1 py-1 overflow-x-auto scrollbar-thin scrollbar-thumb-muted-foreground/20">
{searchSpaces.map((space) => (
<div key={space.id} className="shrink-0">
{/* Vertical Search Spaces Rail - left side */}
<div className="flex h-full w-14 shrink-0 flex-col items-center bg-muted/40 border-r">
<ScrollArea className="w-full flex-1">
<div className="flex flex-col items-center gap-2 px-1.5 py-3">
{searchSpaces.map((space) => (
<SearchSpaceAvatar
key={space.id}
name={space.name}
isActive={space.id === activeSearchSpaceId}
isShared={space.memberCount > 1}
@ -116,23 +118,24 @@ export function MobileSidebar({
onSearchSpaceSettings ? () => onSearchSpaceSettings(space) : undefined
}
size="md"
disableTooltip
/>
</div>
))}
<Button
variant="ghost"
size="icon"
onClick={onAddSearchSpace}
className="h-10 w-10 shrink-0 rounded-lg border-2 border-dashed border-muted-foreground/30 hover:border-muted-foreground/50"
>
<Plus className="h-5 w-5 text-muted-foreground" />
<span className="sr-only">Add search space</span>
</Button>
</div>
))}
<Button
variant="ghost"
size="icon"
onClick={onAddSearchSpace}
className="h-10 w-10 shrink-0 rounded-lg border-2 border-dashed border-muted-foreground/30 hover:border-muted-foreground/50"
>
<Plus className="h-5 w-5 text-muted-foreground" />
<span className="sr-only">Add search space</span>
</Button>
</div>
</ScrollArea>
</div>
{/* Sidebar Content */}
<div className="flex-1 overflow-hidden">
{/* Sidebar Content - right side */}
<div className="flex-1 overflow-hidden flex flex-col">
<Sidebar
searchSpace={searchSpace}
isCollapsed={false}