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

feat: add disableTooltip prop to sidebar components and streamline mobile sidebar button functionality

Browse source
This commit is contained in:
Anish Sarkar 2026-02-06 18:59:52 +05:30
parent 21eec210cc
commit 6857c1d7e8
5 changed files with 51 additions and 41 deletions
Download patch file Download diff file Expand all files Collapse all files

29
surfsense_web/components/layout/ui/sidebar/InboxSidebar.tsx
View file

@ -576,6 +576,18 @@ export function InboxSidebar({
<div className="shrink-0 p-4 pb-2 space-y-3">
<div className="flex items-center justify-between">
<div className="flex items-center gap-2">
{/* Back button - mobile only */}
{isMobile && (
<Button
variant="ghost"
size="icon"
className="h-8 w-8 rounded-full"
onClick={() => onOpenChange(false)}
>
<ChevronLeft className="h-4 w-4 text-muted-foreground" />
<span className="sr-only">{t("close") || "Close"}</span>
</Button>
)}
<h2 className="text-lg font-semibold">{t("inbox") || "Inbox"}</h2>
</div>
<div className="flex items-center gap-1">
@ -816,23 +828,6 @@ export function InboxSidebar({
{t("mark_all_read") || "Mark all as read"}
</TooltipContent>
</Tooltip>
{/* Close button - mobile only */}
{isMobile && (
<Tooltip>
<TooltipTrigger asChild>
<Button
variant="ghost"
size="icon"
className="h-8 w-8 rounded-full"
onClick={() => onOpenChange(false)}
>
<ChevronLeft className="h-4 w-4 text-muted-foreground" />
<span className="sr-only">{t("close") || "Close"}</span>
</Button>
</TooltipTrigger>
<TooltipContent className="z-80">{t("close") || "Close"}</TooltipContent>
</Tooltip>
)}
{/* Dock/Undock button - desktop only */}
{!isMobile && onDockedChange && (
<Tooltip>

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

@ -1,6 +1,6 @@
"use client";
import { Menu, Plus } from "lucide-react";
import { PanelRightClose, 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";
@ -44,7 +44,7 @@ interface MobileSidebarProps {
export function MobileSidebarTrigger({ onClick }: { onClick: () => void }) {
return (
<Button variant="ghost" size="icon" className="md:hidden h-8 w-8" onClick={onClick}>
<Menu className="h-5 w-5" />
<PanelRightClose className="h-5 w-5" />
<span className="sr-only">Open menu</span>
</Button>
);
@ -139,6 +139,7 @@ export function MobileSidebar({
<Sidebar
searchSpace={searchSpace}
isCollapsed={false}
onToggleCollapse={() => onOpenChange(false)}
navItems={navItems}
onNavItemClick={handleNavItemClick}
chats={chats}
@ -164,6 +165,7 @@ export function MobileSidebar({
setTheme={setTheme}
className="w-full border-none"
isLoadingChats={isLoadingChats}
disableTooltips
/>
</div>
</SheetContent>

28
surfsense_web/components/layout/ui/sidebar/Sidebar.tsx
View file

@ -50,6 +50,7 @@ interface SidebarProps {
setTheme?: (theme: "light" | "dark" | "system") => void;
className?: string;
isLoadingChats?: boolean;
disableTooltips?: boolean;
}
export function Sidebar({
@ -78,6 +79,7 @@ export function Sidebar({
setTheme,
className,
isLoadingChats = false,
disableTooltips = false,
}: SidebarProps) {
const t = useTranslations("sidebar");
@ -95,23 +97,25 @@ export function Sidebar({
<SidebarCollapseButton
isCollapsed={isCollapsed}
onToggle={onToggleCollapse ?? (() => {})}
disableTooltip={disableTooltips}
/>
</div>
) : (
<div className="flex h-14 shrink-0 items-center justify-between px-1 border-b">
<SidebarHeader
searchSpace={searchSpace}
<div className="flex h-14 shrink-0 items-center gap-0 px-1 border-b">
<SidebarHeader
searchSpace={searchSpace}
isCollapsed={isCollapsed}
onSettings={onSettings}
onManageMembers={onManageMembers}
/>
<div className="shrink-0">
<SidebarCollapseButton
isCollapsed={isCollapsed}
onSettings={onSettings}
onManageMembers={onManageMembers}
onToggle={onToggleCollapse ?? (() => {})}
disableTooltip={disableTooltips}
/>
<div className="">
<SidebarCollapseButton
isCollapsed={isCollapsed}
onToggle={onToggleCollapse ?? (() => {})}
/>
</div>
</div>
</div>
)}
{/* New chat button */}
@ -138,7 +142,7 @@ export function Sidebar({
{isCollapsed ? (
<div className="flex-1 w-[60px]" />
) : (
<div className="flex-1 flex flex-col gap-1 py-2 w-[240px] min-h-0 overflow-hidden">
<div className="flex-1 flex flex-col gap-1 py-2 w-full min-h-0 overflow-hidden">
{/* Shared Chats Section - takes only space needed, max 50% */}
<SidebarSection
title={t("shared_chats")}

23
surfsense_web/components/layout/ui/sidebar/SidebarCollapseButton.tsx
View file

@ -8,20 +8,29 @@ import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip
interface SidebarCollapseButtonProps {
isCollapsed: boolean;
onToggle: () => void;
disableTooltip?: boolean;
}
export function SidebarCollapseButton({ isCollapsed, onToggle }: SidebarCollapseButtonProps) {
export function SidebarCollapseButton({ isCollapsed, onToggle, disableTooltip = false }: SidebarCollapseButtonProps) {
const t = useTranslations("sidebar");
const button = (
<Button variant="ghost" size="icon" onClick={onToggle} className="h-8 w-8 shrink-0">
{isCollapsed ? <PanelLeft className="h-4 w-4" /> : <PanelLeftClose className="h-4 w-4" />}
<span className="sr-only">
{isCollapsed ? t("expand_sidebar") : t("collapse_sidebar")}
</span>
</Button>
);
if (disableTooltip) {
return button;
}
return (
<Tooltip>
<TooltipTrigger asChild>
<Button variant="ghost" size="icon" onClick={onToggle} className="h-8 w-8 shrink-0">
{isCollapsed ? <PanelLeft className="h-4 w-4" /> : <PanelLeftClose className="h-4 w-4" />}
<span className="sr-only">
{isCollapsed ? t("expand_sidebar") : t("collapse_sidebar")}
</span>
</Button>
{button}
</TooltipTrigger>
<TooltipContent side={isCollapsed ? "right" : "bottom"}>
{isCollapsed ? `${t("expand_sidebar")} (⌘B)` : `${t("collapse_sidebar")} (⌘B)`}

6
surfsense_web/components/layout/ui/sidebar/SidebarHeader.tsx
View file

@ -35,14 +35,14 @@ export function SidebarHeader({
const searchSpaceId = params.search_space_id as string;
return (
<div className={cn("flex shrink-0 items-center", className)}>
<div className={cn("flex min-w-0 flex-1 items-center", className)}>
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button
variant="ghost"
className={cn(
"flex h-auto items-center justify-between gap-2 overflow-hidden py-1.5 font-semibold",
isCollapsed ? "w-10" : "w-50"
"flex h-auto w-full items-center justify-between gap-1 overflow-hidden py-1.5 font-semibold",
isCollapsed && "w-10"
)}
>
<span className="truncate text-base">