apunkt/SurfSense
1
0
Fork 0
mirror of https://github.com/MODSetter/SurfSense.git synced 2026-04-25 08:46:22 +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

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}