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

refactor: update icons and improve sidebar styling for enhanced user experience

Browse source
This commit is contained in:
Anish Sarkar 2026-05-15 00:25:58 +05:30
parent c180417329
commit 3846056bc7
6 changed files with 32 additions and 14 deletions
Download patch file Download diff file Expand all files Collapse all files

4
surfsense_web/components/layout/providers/FreeLayoutDataProvider.tsx
View file

@ -1,6 +1,6 @@
"use client";
import { Inbox, SquareLibrary } from "lucide-react";
import { Inbox, LibraryBig } from "lucide-react";
import { useRouter } from "next/navigation";
import type { ReactNode } from "react";
import { Fragment, useCallback, useEffect, useMemo, useState } from "react";
@ -69,7 +69,7 @@ export function FreeLayoutDataProvider({ children }: FreeLayoutDataProviderProps
? {
title: "Documents",
url: "#documents",
icon: SquareLibrary,
icon: LibraryBig,
isActive: false,
}
: null,

4
surfsense_web/components/layout/providers/LayoutDataProvider.tsx
View file

@ -2,7 +2,7 @@
import { useQuery, useQueryClient } from "@tanstack/react-query";
import { useAtom, useAtomValue, useSetAtom } from "jotai";
import { AlertTriangle, Inbox, SquareLibrary } from "lucide-react";
import { AlertTriangle, Inbox, LibraryBig } from "lucide-react";
import { useParams, usePathname, useRouter } from "next/navigation";
import { useTranslations } from "next-intl";
import { useTheme } from "next-themes";
@ -361,7 +361,7 @@ export function LayoutDataProvider({ searchSpaceId, children }: LayoutDataProvid
? {
title: "Documents",
url: "#documents",
icon: SquareLibrary,
icon: LibraryBig,
isActive: isDocumentsSidebarOpen,
}
: null,

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

@ -128,9 +128,9 @@ export function SearchSpaceAvatar({
onClick={onClick}
className={cn(
"relative rounded-lg font-semibold text-white transition-all select-none",
"hover:opacity-90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
"hover:text-white hover:opacity-90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
sizeClasses,
isActive && "ring-2 ring-primary ring-offset-1 ring-offset-background"
isActive && "ring-2 ring-primary ring-offset-1 ring-offset-rail"
)}
style={{ backgroundColor: bgColor }}
>
@ -139,12 +139,12 @@ export function SearchSpaceAvatar({
{isShared && (
<span
className={cn(
"absolute -top-1 -right-1 flex items-center justify-center rounded-full bg-blue-500 text-white shadow-sm",
"absolute -top-1 -right-1 flex items-center justify-center rounded-full bg-gray-800 text-white shadow-sm",
size === "sm" ? "h-3.5 w-3.5" : "h-4 w-4"
)}
title={tCommon("shared")}
>
<Users className={cn(size === "sm" ? "h-2 w-2" : "h-2.5 w-2.5")} />
<Users className={cn(size === "sm" ? "size-2" : "size-2.5")} />
</span>
)}
</Button>

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

@ -561,7 +561,10 @@ export function InboxSidebarContent({
onOpenChange={setFilterDrawerOpen}
shouldScaleBackground={false}
>
<DrawerContent className="max-h-[70vh] z-80" overlayClassName="z-80">
<DrawerContent
className="max-h-[70vh] z-80 bg-popover text-popover-foreground"
overlayClassName="z-80"
>
<DrawerHandle />
<DrawerHeader className="px-4 pb-3 pt-2">
<DrawerTitle className="flex items-center gap-2 text-base font-semibold">

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

@ -108,11 +108,11 @@ export function MobileSidebar({
return (
<Sheet open={isOpen} onOpenChange={onOpenChange}>
<SheetContent side="left" className="w-[340px] p-0 flex flex-row gap-0 [&>button]:hidden">
<SheetContent side="left" className="w-[340px] p-0 flex flex-row gap-0 bg-panel [&>button]:hidden">
<SheetTitle className="sr-only">Navigation</SheetTitle>
{/* Vertical Search Spaces Rail - left side */}
<div className="flex h-full w-14 shrink-0 flex-col items-center bg-muted/40 border-r">
<div className="flex h-full w-14 shrink-0 flex-col items-center border-r bg-rail">
<ScrollArea className="w-full flex-1">
<div className="flex flex-col items-center gap-2 px-1.5 py-3">
{searchSpaces.map((space) => (

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

@ -134,11 +134,16 @@ export function Sidebar({
const t = useTranslations("sidebar");
const [openDropdownChatId, setOpenDropdownChatId] = useState<number | null>(null);
// Inbox is rendered explicitly right below New Chat. Pull it out of the
// nav items list so it doesn't also appear in the bottom NavSection.
// Inbox and Documents are rendered explicitly right below New Chat. Pull
// them out of the nav items list so they don't also appear in the bottom
// NavSection. Documents is only present in navItems on mobile.
const inboxItem = useMemo(() => navItems.find((item) => item.url === "#inbox"), [navItems]);
const documentsItem = useMemo(
() => navItems.find((item) => item.url === "#documents"),
[navItems]
);
const footerNavItems = useMemo(
() => navItems.filter((item) => item.url !== "#inbox"),
() => navItems.filter((item) => item.url !== "#inbox" && item.url !== "#documents"),
[navItems]
);
@ -202,6 +207,16 @@ export function Sidebar({
}
/>
)}
{documentsItem && (
<SidebarButton
icon={documentsItem.icon}
label={documentsItem.title}
onClick={() => onNavItemClick?.(documentsItem)}
isCollapsed={isCollapsed}
isActive={documentsItem.isActive}
tooltipContent={isCollapsed ? documentsItem.title : undefined}
/>
)}
</div>
{/* Chat sections - fills available space */}