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

refactor(sidebar): adjust component dimensions and font sizes for improved visual consistency across sidebar elements

Browse source
This commit is contained in:
Anish Sarkar 2026-04-28 22:58:44 +05:30
parent 6231c08b8b
commit a869069a0d
7 changed files with 32 additions and 32 deletions
Download patch file Download diff file Expand all files Collapse all files

24
surfsense_web/components/documents/DocumentsFilters.tsx
View file

@ -84,13 +84,13 @@ export function DocumentsFilters({
<TooltipTrigger asChild> <TooltipTrigger asChild>
<ToggleGroupItem <ToggleGroupItem
value="folder" value="folder"
className="h-9 w-9 shrink-0 border bg-muted/50 text-muted-foreground transition-colors hover:bg-muted/80 hover:text-foreground" className="h-8 w-8 shrink-0 border bg-muted/50 text-muted-foreground transition-colors hover:bg-muted/80 hover:text-foreground"
onClick={(e) => { onClick={(e) => {
e.preventDefault(); e.preventDefault();
onCreateFolder(); onCreateFolder();
}} }}
> >
<FolderPlus size={14} /> <FolderPlus size={13} />
</ToggleGroupItem> </ToggleGroupItem>
</TooltipTrigger> </TooltipTrigger>
<TooltipContent>New folder</TooltipContent> <TooltipContent>New folder</TooltipContent>
@ -104,7 +104,7 @@ export function DocumentsFilters({
value="ai-sort" value="ai-sort"
disabled={aiSortBusy} disabled={aiSortBusy}
className={cn( className={cn(
"h-9 w-9 shrink-0 border bg-muted/50 transition-colors", "h-8 w-8 shrink-0 border bg-muted/50 transition-colors",
"disabled:pointer-events-none disabled:opacity-50", "disabled:pointer-events-none disabled:opacity-50",
aiSortEnabled aiSortEnabled
? "bg-accent text-accent-foreground hover:bg-accent" ? "bg-accent text-accent-foreground hover:bg-accent"
@ -120,9 +120,9 @@ export function DocumentsFilters({
{aiSortBusy ? ( {aiSortBusy ? (
<Spinner size="xs" /> <Spinner size="xs" />
) : aiSortEnabled ? ( ) : aiSortEnabled ? (
<IconBinaryTreeFilled size={16} /> <IconBinaryTreeFilled size={14} />
) : ( ) : (
<IconBinaryTree size={16} /> <IconBinaryTree size={14} />
)} )}
</ToggleGroupItem> </ToggleGroupItem>
</TooltipTrigger> </TooltipTrigger>
@ -142,9 +142,9 @@ export function DocumentsFilters({
<PopoverTrigger asChild> <PopoverTrigger asChild>
<ToggleGroupItem <ToggleGroupItem
value="filter" value="filter"
className="relative h-9 w-9 shrink-0 border bg-muted/50 text-muted-foreground transition-colors hover:bg-muted/80 hover:text-foreground overflow-visible" className="relative h-8 w-8 shrink-0 overflow-visible border bg-muted/50 text-muted-foreground transition-colors hover:bg-muted/80 hover:text-foreground"
> >
<ListFilter size={14} /> <ListFilter size={13} />
{activeTypes.length > 0 && ( {activeTypes.length > 0 && (
<span className="absolute -top-1 -right-1 flex h-4 w-4 items-center justify-center rounded-full bg-neutral-300 text-[9px] font-medium text-neutral-700 dark:bg-neutral-700 dark:text-neutral-200"> <span className="absolute -top-1 -right-1 flex h-4 w-4 items-center justify-center rounded-full bg-neutral-300 text-[9px] font-medium text-neutral-700 dark:bg-neutral-700 dark:text-neutral-200">
{activeTypes.length} {activeTypes.length}
@ -227,12 +227,12 @@ export function DocumentsFilters({
{/* Search Input */} {/* Search Input */}
<div className="relative flex-1 min-w-0"> <div className="relative flex-1 min-w-0">
<div className="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3"> <div className="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
<Search size={14} aria-hidden="true" /> <Search size={13} aria-hidden="true" />
</div> </div>
<Input <Input
id={`${id}-input`} id={`${id}-input`}
ref={inputRef} ref={inputRef}
className="h-9 w-full pl-9 pr-8 text-sm select-none focus:select-text" className="h-8 w-full select-none pl-8 pr-7 text-sm focus:select-text"
value={searchValue} value={searchValue}
onChange={(e) => onSearch(e.target.value)} onChange={(e) => onSearch(e.target.value)}
placeholder="Search docs" placeholder="Search docs"
@ -242,7 +242,7 @@ export function DocumentsFilters({
{Boolean(searchValue) && ( {Boolean(searchValue) && (
<button <button
type="button" type="button"
className="absolute right-1 top-1/2 -translate-y-1/2 inline-flex h-6 w-6 items-center justify-center rounded-sm text-muted-foreground hover:bg-accent hover:text-accent-foreground transition-colors" className="absolute right-1 top-1/2 inline-flex h-5 w-5 -translate-y-1/2 items-center justify-center rounded-sm text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground"
aria-label="Clear filter" aria-label="Clear filter"
onClick={() => { onClick={() => {
onSearch(""); onSearch("");
@ -260,9 +260,9 @@ export function DocumentsFilters({
onClick={handleUpload} onClick={handleUpload}
variant="outline" variant="outline"
size="sm" size="sm"
className="h-9 shrink-0 gap-1.5 border-0 shadow-none bg-white text-gray-700 hover:bg-gray-50 dark:bg-white dark:text-gray-800 dark:hover:bg-gray-100" className="h-8 shrink-0 gap-1.5 border-0 bg-white text-gray-700 shadow-none hover:bg-gray-50 dark:bg-white dark:text-gray-800 dark:hover:bg-gray-100"
> >
<Upload size={14} /> <Upload size={13} />
<span>Upload</span> <span>Upload</span>
</Button> </Button>
</div> </div>

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

@ -266,7 +266,7 @@ export function AllPrivateChatsSidebarContent({
</Button> </Button>
)} )}
<User className="h-4 w-4 text-primary" /> <User className="h-4 w-4 text-primary" />
<h2 className="text-md font-semibold">{t("chats") || "Private Chats"}</h2> <h2 className="text-lg font-semibold">{t("chats") || "Private Chats"}</h2>
</div> </div>
<div className="relative"> <div className="relative">
@ -363,7 +363,7 @@ export function AllPrivateChatsSidebarContent({
onTouchMove={longPressHandlers.onTouchMove} onTouchMove={longPressHandlers.onTouchMove}
disabled={isBusy} disabled={isBusy}
className={cn( className={cn(
"flex w-full items-center gap-2 overflow-hidden rounded-md px-2 py-1.5 text-xs text-left", "flex w-full items-center gap-2 overflow-hidden rounded-md px-2 py-1.5 text-sm text-left",
"group-hover/item:bg-accent group-hover/item:text-accent-foreground", "group-hover/item:bg-accent group-hover/item:text-accent-foreground",
"focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring", "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
isActive && "bg-accent text-accent-foreground", isActive && "bg-accent text-accent-foreground",
@ -380,7 +380,7 @@ export function AllPrivateChatsSidebarContent({
onClick={() => handleThreadClick(thread.id)} onClick={() => handleThreadClick(thread.id)}
disabled={isBusy} disabled={isBusy}
className={cn( className={cn(
"flex w-full items-center gap-2 overflow-hidden rounded-md px-2 py-1.5 text-xs text-left", "flex w-full items-center gap-2 overflow-hidden rounded-md px-2 py-1.5 text-sm text-left",
"group-hover/item:bg-accent group-hover/item:text-accent-foreground", "group-hover/item:bg-accent group-hover/item:text-accent-foreground",
"focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring", "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
isActive && "bg-accent text-accent-foreground", isActive && "bg-accent text-accent-foreground",

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

@ -265,7 +265,7 @@ export function AllSharedChatsSidebarContent({
</Button> </Button>
)} )}
<Users className="h-4 w-4 text-primary" /> <Users className="h-4 w-4 text-primary" />
<h2 className="text-md font-semibold">{t("shared_chats") || "Shared Chats"}</h2> <h2 className="text-lg font-semibold">{t("shared_chats") || "Shared Chats"}</h2>
</div> </div>
<div className="relative"> <div className="relative">
@ -362,7 +362,7 @@ export function AllSharedChatsSidebarContent({
onTouchMove={longPressHandlers.onTouchMove} onTouchMove={longPressHandlers.onTouchMove}
disabled={isBusy} disabled={isBusy}
className={cn( className={cn(
"flex w-full items-center gap-2 overflow-hidden rounded-md px-2 py-1.5 text-xs text-left", "flex w-full items-center gap-2 overflow-hidden rounded-md px-2 py-1.5 text-sm text-left",
"group-hover/item:bg-accent group-hover/item:text-accent-foreground", "group-hover/item:bg-accent group-hover/item:text-accent-foreground",
"focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring", "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
isActive && "bg-accent text-accent-foreground", isActive && "bg-accent text-accent-foreground",
@ -379,7 +379,7 @@ export function AllSharedChatsSidebarContent({
onClick={() => handleThreadClick(thread.id)} onClick={() => handleThreadClick(thread.id)}
disabled={isBusy} disabled={isBusy}
className={cn( className={cn(
"flex w-full items-center gap-2 overflow-hidden rounded-md px-2 py-1.5 text-xs text-left", "flex w-full items-center gap-2 overflow-hidden rounded-md px-2 py-1.5 text-sm text-left",
"group-hover/item:bg-accent group-hover/item:text-accent-foreground", "group-hover/item:bg-accent group-hover/item:text-accent-foreground",
"focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring", "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
isActive && "bg-accent text-accent-foreground", isActive && "bg-accent text-accent-foreground",

2
surfsense_web/components/layout/ui/sidebar/ChatListItem.tsx
View file

@ -61,7 +61,7 @@ export function ChatListItem({
onClick={handleClick} onClick={handleClick}
{...(isMobile ? longPressHandlers : {})} {...(isMobile ? longPressHandlers : {})}
className={cn( className={cn(
"flex w-full items-center gap-2 overflow-hidden rounded-md px-2 py-1.5 text-xs text-left", "flex w-full items-center gap-2 overflow-hidden rounded-md px-2 py-1.5 text-sm text-left",
"group-hover/item:bg-accent group-hover/item:text-accent-foreground", "group-hover/item:bg-accent group-hover/item:text-accent-foreground",
"focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring", "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
isActive && "bg-accent text-accent-foreground" isActive && "bg-accent text-accent-foreground"

20
surfsense_web/components/layout/ui/sidebar/DocumentsSidebar.tsx
View file

@ -1028,11 +1028,11 @@ function AuthenticatedDocumentsSidebarBase({
const cloudContent = ( const cloudContent = (
<> <>
{/* Connected tools strip */} {/* Connected tools strip */}
<div className="shrink-0 mx-4 mt-4 mb-4 flex select-none items-center gap-2 rounded-lg border bg-muted/50 transition-colors hover:bg-muted/80"> <div className="shrink-0 mx-4 mt-6 mb-2.5 flex select-none items-center gap-2 rounded-lg border bg-muted/50 transition-colors hover:bg-muted/80">
<button <button
type="button" type="button"
onClick={() => setConnectorDialogOpen(true)} onClick={() => setConnectorDialogOpen(true)}
className="flex items-center gap-2 min-w-0 flex-1 text-left px-3 py-2" className="flex min-w-0 flex-1 items-center gap-2 px-3 py-1.5 text-left"
> >
<Unplug className="size-4 shrink-0 text-muted-foreground" /> <Unplug className="size-4 shrink-0 text-muted-foreground" />
<span className="truncate text-xs text-muted-foreground"> <span className="truncate text-xs text-muted-foreground">
@ -1099,7 +1099,7 @@ function AuthenticatedDocumentsSidebarBase({
<button <button
type="button" type="button"
onClick={handleWatchLocalFolder} onClick={handleWatchLocalFolder}
className="shrink-0 mx-4 mb-4 flex select-none items-center gap-2 rounded-lg border bg-muted/50 px-3 py-2 transition-colors hover:bg-muted/80" className="shrink-0 mx-4 mb-2.5 flex select-none items-center gap-2 rounded-lg border bg-muted/50 px-3 py-1.5 transition-colors hover:bg-muted/80"
> >
<FolderClock className="size-4 shrink-0 text-muted-foreground" /> <FolderClock className="size-4 shrink-0 text-muted-foreground" />
<span className="truncate text-xs text-muted-foreground">Watch local folder</span> <span className="truncate text-xs text-muted-foreground">Watch local folder</span>
@ -1107,7 +1107,7 @@ function AuthenticatedDocumentsSidebarBase({
)} )}
<div className="flex-1 min-h-0 pt-0 flex flex-col"> <div className="flex-1 min-h-0 pt-0 flex flex-col">
<div className="px-4 pb-2"> <div className="px-4 pb-1.5">
<DocumentsFilters <DocumentsFilters
typeCounts={typeCounts} typeCounts={typeCounts}
onSearch={setSearch} onSearch={setSearch}
@ -1207,7 +1207,7 @@ function AuthenticatedDocumentsSidebarBase({
const documentsContent = ( const documentsContent = (
<> <>
<div className="shrink-0 flex h-14 items-center px-4"> <div className="shrink-0 flex h-12 items-center px-4">
<div className="flex w-full items-center justify-between"> <div className="flex w-full items-center justify-between">
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
{isMobile && ( {isMobile && (
@ -1692,10 +1692,10 @@ function AnonymousDocumentsSidebar({
/> />
{/* Header */} {/* Header */}
<div className="shrink-0 flex h-14 items-center px-4"> <div className="shrink-0 flex h-12 items-center px-4">
<div className="flex w-full items-center justify-between"> <div className="flex w-full items-center justify-between">
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<h2 className="select-none text-lg font-semibold">{t("title") || "Documents"}</h2> <h2 className="select-none text-base font-semibold">{t("title") || "Documents"}</h2>
</div> </div>
<div className="flex items-center gap-1"> <div className="flex items-center gap-1">
{isMobile && ( {isMobile && (
@ -1744,11 +1744,11 @@ function AnonymousDocumentsSidebar({
</div> </div>
{/* Connectors strip (gated) */} {/* Connectors strip (gated) */}
<div className="shrink-0 mx-4 mt-4 mb-4 flex select-none items-center gap-2 rounded-lg border bg-muted/50 transition-colors hover:bg-muted/80"> <div className="shrink-0 mx-4 mt-6 mb-2.5 flex select-none items-center gap-2 rounded-lg border bg-muted/50 transition-colors hover:bg-muted/80">
<button <button
type="button" type="button"
onClick={() => gate("connect your data sources")} onClick={() => gate("connect your data sources")}
className="flex items-center gap-2 min-w-0 flex-1 text-left px-3 py-2" className="flex min-w-0 flex-1 items-center gap-2 px-3 py-1.5 text-left"
> >
<Unplug className="size-4 shrink-0 text-muted-foreground" /> <Unplug className="size-4 shrink-0 text-muted-foreground" />
<span className="truncate text-xs text-muted-foreground">Connect your connectors</span> <span className="truncate text-xs text-muted-foreground">Connect your connectors</span>
@ -1783,7 +1783,7 @@ function AnonymousDocumentsSidebar({
{/* Filters & upload */} {/* Filters & upload */}
<div className="flex-1 min-h-0 pt-0 flex flex-col"> <div className="flex-1 min-h-0 pt-0 flex flex-col">
<div className="px-4 pb-2"> <div className="px-4 pb-1.5">
<DocumentsFilters <DocumentsFilters
typeCounts={hasDoc ? { FILE: 1 } : {}} typeCounts={hasDoc ? { FILE: 1 } : {}}
onSearch={setSearch} onSearch={setSearch}

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

@ -206,7 +206,7 @@ export function Sidebar({
)} )}
</div> </div>
) : ( ) : (
<p className="px-2 py-1 text-xs text-muted-foreground">{t("no_shared_chats")}</p> <p className="px-2 py-1 text-sm text-muted-foreground">{t("no_shared_chats")}</p>
)} )}
</SidebarSection> </SidebarSection>
@ -262,7 +262,7 @@ export function Sidebar({
)} )}
</div> </div>
) : ( ) : (
<p className="px-2 py-1 text-xs text-muted-foreground">{t("no_chats")}</p> <p className="px-2 py-1 text-sm text-muted-foreground">{t("no_chats")}</p>
)} )}
</SidebarSection> </SidebarSection>
</div> </div>

2
surfsense_web/components/layout/ui/sidebar/SidebarSection.tsx
View file

@ -40,7 +40,7 @@ export function SidebarSection({
)} )}
> >
<div className="flex items-center group/section shrink-0 px-2 py-1"> <div className="flex items-center group/section shrink-0 px-2 py-1">
<CollapsibleTrigger className="flex items-center gap-1 text-[11px] font-medium text-muted-foreground hover:text-foreground transition-colors min-w-0"> <CollapsibleTrigger className="flex items-center gap-1 text-xs font-medium text-muted-foreground hover:text-foreground transition-colors min-w-0">
<span className="truncate">{title}</span> <span className="truncate">{title}</span>
<ChevronRight <ChevronRight
className={cn( className={cn(