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(sidebar): standardize padding, font sizes, and icon dimensions across sidebar components for improved consistency

Browse source
This commit is contained in:
Anish Sarkar 2026-04-28 20:21:18 +05:30
parent e60c5399af
commit 6231c08b8b
11 changed files with 234 additions and 212 deletions
Download patch file Download diff file Expand all files Collapse all files

10
surfsense_web/components/announcements/AnnouncementsEmptyState.tsx
View file

@ -2,12 +2,12 @@ import { BellOff } from "lucide-react";
export function AnnouncementsEmptyState() { export function AnnouncementsEmptyState() {
return ( return (
<div className="flex flex-col items-center justify-center py-16 text-center"> <div className="flex flex-col items-center justify-center py-12 text-center">
<div className="flex h-16 w-16 items-center justify-center rounded-full bg-muted mb-4"> <div className="mb-3 flex h-12 w-12 items-center justify-center rounded-full bg-muted">
<BellOff className="h-7 w-7 text-muted-foreground" /> <BellOff className="h-5 w-5 text-muted-foreground" />
</div> </div>
<h3 className="text-lg font-semibold">No announcements</h3> <h3 className="text-sm font-semibold">No announcements</h3>
<p className="mt-1 text-sm text-muted-foreground max-w-sm"> <p className="mt-1 max-w-xs text-xs text-muted-foreground">
You're all caught up! New announcements will appear here. You're all caught up! New announcements will appear here.
</p> </p>
</div> </div>

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

@ -252,7 +252,7 @@ export function AllPrivateChatsSidebarContent({
return ( return (
<> <>
<div className="shrink-0 p-4 pb-2 space-y-3"> <div className="shrink-0 p-3 pb-1.5 space-y-2">
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
{isMobile && ( {isMobile && (
<Button <Button
@ -265,24 +265,24 @@ export function AllPrivateChatsSidebarContent({
<span className="sr-only">{t("close") || "Close"}</span> <span className="sr-only">{t("close") || "Close"}</span>
</Button> </Button>
)} )}
<User className="h-5 w-5 text-primary" /> <User className="h-4 w-4 text-primary" />
<h2 className="text-lg font-semibold">{t("chats") || "Private Chats"}</h2> <h2 className="text-md font-semibold">{t("chats") || "Private Chats"}</h2>
</div> </div>
<div className="relative"> <div className="relative">
<Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" /> <Search className="absolute left-2.5 top-1/2 -translate-y-1/2 h-3.5 w-3.5 text-muted-foreground" />
<Input <Input
type="text" type="text"
placeholder={t("search_chats") || "Search chats..."} placeholder={t("search_chats") || "Search chats..."}
value={searchQuery} value={searchQuery}
onChange={(e) => setSearchQuery(e.target.value)} onChange={(e) => setSearchQuery(e.target.value)}
className="pl-9 pr-8 h-9" className="h-8 pl-8 pr-7 text-sm"
/> />
{searchQuery && ( {searchQuery && (
<Button <Button
variant="ghost" variant="ghost"
size="icon" size="icon"
className="absolute right-1 top-1/2 -translate-y-1/2 h-6 w-6" className="absolute right-1 top-1/2 h-5 w-5 -translate-y-1/2"
onClick={handleClearSearch} onClick={handleClearSearch}
> >
<X className="h-3.5 w-3.5" /> <X className="h-3.5 w-3.5" />
@ -296,23 +296,23 @@ export function AllPrivateChatsSidebarContent({
<Tabs <Tabs
value={showArchived ? "archived" : "active"} value={showArchived ? "archived" : "active"}
onValueChange={(value) => setShowArchived(value === "archived")} onValueChange={(value) => setShowArchived(value === "archived")}
className="shrink-0 mx-4 mt-2" className="shrink-0 mx-3 mt-1.5"
> >
<TabsList stretch showBottomBorder size="sm"> <TabsList stretch showBottomBorder size="sm">
<TabsTrigger value="active"> <TabsTrigger value="active">
<span className="inline-flex items-center gap-1.5"> <span className="inline-flex items-center gap-1.5">
<MessageCircleMore className="h-4 w-4" /> <MessageCircleMore className="h-3.5 w-3.5" />
<span>Active</span> <span>Active</span>
<span className="inline-flex items-center justify-center min-w-5 h-5 px-1.5 rounded-full bg-primary/20 text-muted-foreground text-xs font-medium"> <span className="inline-flex h-4.5 min-w-4.5 items-center justify-center rounded-full bg-primary/20 px-1 text-[10px] font-medium text-muted-foreground">
{activeCount} {activeCount}
</span> </span>
</span> </span>
</TabsTrigger> </TabsTrigger>
<TabsTrigger value="archived"> <TabsTrigger value="archived">
<span className="inline-flex items-center gap-1.5"> <span className="inline-flex items-center gap-1.5">
<ArchiveIcon className="h-4 w-4" /> <ArchiveIcon className="h-3.5 w-3.5" />
<span>Archived</span> <span>Archived</span>
<span className="inline-flex items-center justify-center min-w-5 h-5 px-1.5 rounded-full bg-primary/20 text-muted-foreground text-xs font-medium"> <span className="inline-flex h-4.5 min-w-4.5 items-center justify-center rounded-full bg-primary/20 px-1 text-[10px] font-medium text-muted-foreground">
{archivedCount} {archivedCount}
</span> </span>
</span> </span>
@ -321,7 +321,7 @@ export function AllPrivateChatsSidebarContent({
</Tabs> </Tabs>
)} )}
<div className="flex-1 overflow-y-auto overflow-x-hidden p-2"> <div className="flex-1 overflow-y-auto overflow-x-hidden p-1.5">
{isLoading ? ( {isLoading ? (
<div className="space-y-1"> <div className="space-y-1">
{[75, 90, 55, 80, 65, 85].map((titleWidth) => ( {[75, 90, 55, 80, 65, 85].map((titleWidth) => (
@ -347,16 +347,7 @@ export function AllPrivateChatsSidebarContent({
const isActive = currentChatId === thread.id; const isActive = currentChatId === thread.id;
return ( return (
<div <div key={thread.id} className="group/item relative w-full">
key={thread.id}
className={cn(
"sidebar-item-lazy group flex items-center gap-2 rounded-md px-2 py-1.5 text-sm",
"hover:bg-accent hover:text-accent-foreground",
"transition-colors cursor-pointer",
isActive && "bg-accent text-accent-foreground",
isBusy && "opacity-50 pointer-events-none"
)}
>
{isMobile ? ( {isMobile ? (
<button <button
type="button" type="button"
@ -371,7 +362,13 @@ export function AllPrivateChatsSidebarContent({
onTouchEnd={longPressHandlers.onTouchEnd} onTouchEnd={longPressHandlers.onTouchEnd}
onTouchMove={longPressHandlers.onTouchMove} onTouchMove={longPressHandlers.onTouchMove}
disabled={isBusy} disabled={isBusy}
className="flex items-center gap-2 flex-1 min-w-0 text-left overflow-hidden" className={cn(
"flex w-full items-center gap-2 overflow-hidden rounded-md px-2 py-1.5 text-xs text-left",
"group-hover/item:bg-accent group-hover/item:text-accent-foreground",
"focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
isActive && "bg-accent text-accent-foreground",
isBusy && "opacity-50 pointer-events-none"
)}
> >
<span className="truncate">{thread.title || "New Chat"}</span> <span className="truncate">{thread.title || "New Chat"}</span>
</button> </button>
@ -382,7 +379,13 @@ export function AllPrivateChatsSidebarContent({
type="button" type="button"
onClick={() => handleThreadClick(thread.id)} onClick={() => handleThreadClick(thread.id)}
disabled={isBusy} disabled={isBusy}
className="flex items-center gap-2 flex-1 min-w-0 text-left overflow-hidden" className={cn(
"flex w-full items-center gap-2 overflow-hidden rounded-md px-2 py-1.5 text-xs text-left",
"group-hover/item:bg-accent group-hover/item:text-accent-foreground",
"focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
isActive && "bg-accent text-accent-foreground",
isBusy && "opacity-50 pointer-events-none"
)}
> >
<span className="truncate">{thread.title || "New Chat"}</span> <span className="truncate">{thread.title || "New Chat"}</span>
</button> </button>
@ -396,6 +399,19 @@ export function AllPrivateChatsSidebarContent({
</Tooltip> </Tooltip>
)} )}
<div
className={cn(
"pointer-events-none absolute right-0 top-0 bottom-0 flex items-center rounded-r-md pl-6 pr-1",
isActive
? "bg-gradient-to-l from-accent from-60% to-transparent"
: "bg-gradient-to-l from-sidebar from-60% to-transparent group-hover/item:from-accent",
isMobile
? "opacity-0"
: openDropdownId === thread.id
? "opacity-100"
: "opacity-0 group-hover/item:opacity-100"
)}
>
<DropdownMenu <DropdownMenu
open={openDropdownId === thread.id} open={openDropdownId === thread.id}
onOpenChange={(isOpen) => setOpenDropdownId(isOpen ? thread.id : null)} onOpenChange={(isOpen) => setOpenDropdownId(isOpen ? thread.id : null)}
@ -405,14 +421,8 @@ export function AllPrivateChatsSidebarContent({
variant="ghost" variant="ghost"
size="icon" size="icon"
className={cn( className={cn(
"h-6 w-6 shrink-0 hover:bg-transparent", "pointer-events-auto h-6 w-6 hover:bg-transparent",
isMobile openDropdownId === thread.id && "bg-accent hover:bg-accent"
? "opacity-0 pointer-events-none absolute"
: openDropdownId === thread.id
? "opacity-100"
: "md:opacity-0 md:group-hover:opacity-100 md:focus:opacity-100",
openDropdownId === thread.id && "bg-accent hover:bg-accent",
"transition-opacity"
)} )}
disabled={isBusy} disabled={isBusy}
> >
@ -456,29 +466,30 @@ export function AllPrivateChatsSidebarContent({
</DropdownMenuContent> </DropdownMenuContent>
</DropdownMenu> </DropdownMenu>
</div> </div>
</div>
); );
})} })}
</div> </div>
) : isSearchMode ? ( ) : isSearchMode ? (
<div className="text-center py-8"> <div className="text-center py-8">
<Search className="h-12 w-12 mx-auto text-muted-foreground mb-3" /> <Search className="mx-auto mb-2.5 h-10 w-10 text-muted-foreground" />
<p className="text-sm text-muted-foreground"> <p className="text-xs text-muted-foreground">
{t("no_chats_found") || "No chats found"} {t("no_chats_found") || "No chats found"}
</p> </p>
<p className="text-xs text-muted-foreground/70 mt-1"> <p className="mt-1 text-[11px] text-muted-foreground/70">
{t("try_different_search") || "Try a different search term"} {t("try_different_search") || "Try a different search term"}
</p> </p>
</div> </div>
) : ( ) : (
<div className="text-center py-8"> <div className="text-center py-8">
<User className="h-12 w-12 mx-auto text-muted-foreground mb-3" /> <User className="mx-auto mb-2.5 h-10 w-10 text-muted-foreground" />
<p className="text-sm text-muted-foreground"> <p className="text-xs text-muted-foreground">
{showArchived {showArchived
? t("no_archived_chats") || "No archived chats" ? t("no_archived_chats") || "No archived chats"
: t("no_chats") || "No private chats"} : t("no_chats") || "No private chats"}
</p> </p>
{!showArchived && ( {!showArchived && (
<p className="text-xs text-muted-foreground/70 mt-1"> <p className="mt-1 text-[11px] text-muted-foreground/70">
{t("start_new_chat_hint") || "Start a new chat from the chat page"} {t("start_new_chat_hint") || "Start a new chat from the chat page"}
</p> </p>
)} )}

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

@ -251,7 +251,7 @@ export function AllSharedChatsSidebarContent({
return ( return (
<> <>
<div className="shrink-0 p-4 pb-2 space-y-3"> <div className="shrink-0 p-3 pb-1.5 space-y-2">
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
{isMobile && ( {isMobile && (
<Button <Button
@ -264,24 +264,24 @@ export function AllSharedChatsSidebarContent({
<span className="sr-only">{t("close") || "Close"}</span> <span className="sr-only">{t("close") || "Close"}</span>
</Button> </Button>
)} )}
<Users className="h-5 w-5 text-primary" /> <Users className="h-4 w-4 text-primary" />
<h2 className="text-lg font-semibold">{t("shared_chats") || "Shared Chats"}</h2> <h2 className="text-md font-semibold">{t("shared_chats") || "Shared Chats"}</h2>
</div> </div>
<div className="relative"> <div className="relative">
<Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" /> <Search className="absolute left-2.5 top-1/2 -translate-y-1/2 h-3.5 w-3.5 text-muted-foreground" />
<Input <Input
type="text" type="text"
placeholder={t("search_chats") || "Search chats..."} placeholder={t("search_chats") || "Search chats..."}
value={searchQuery} value={searchQuery}
onChange={(e) => setSearchQuery(e.target.value)} onChange={(e) => setSearchQuery(e.target.value)}
className="pl-9 pr-8 h-9" className="h-8 pl-8 pr-7 text-sm"
/> />
{searchQuery && ( {searchQuery && (
<Button <Button
variant="ghost" variant="ghost"
size="icon" size="icon"
className="absolute right-1 top-1/2 -translate-y-1/2 h-6 w-6" className="absolute right-1 top-1/2 h-5 w-5 -translate-y-1/2"
onClick={handleClearSearch} onClick={handleClearSearch}
> >
<X className="h-3.5 w-3.5" /> <X className="h-3.5 w-3.5" />
@ -295,23 +295,23 @@ export function AllSharedChatsSidebarContent({
<Tabs <Tabs
value={showArchived ? "archived" : "active"} value={showArchived ? "archived" : "active"}
onValueChange={(value) => setShowArchived(value === "archived")} onValueChange={(value) => setShowArchived(value === "archived")}
className="shrink-0 mx-4 mt-2" className="shrink-0 mx-3 mt-1.5"
> >
<TabsList stretch showBottomBorder size="sm"> <TabsList stretch showBottomBorder size="sm">
<TabsTrigger value="active"> <TabsTrigger value="active">
<span className="inline-flex items-center gap-1.5"> <span className="inline-flex items-center gap-1.5">
<MessageCircleMore className="h-4 w-4" /> <MessageCircleMore className="h-3.5 w-3.5" />
<span>Active</span> <span>Active</span>
<span className="inline-flex items-center justify-center min-w-5 h-5 px-1.5 rounded-full bg-primary/20 text-muted-foreground text-xs font-medium"> <span className="inline-flex h-4.5 min-w-4.5 items-center justify-center rounded-full bg-primary/20 px-1 text-[10px] font-medium text-muted-foreground">
{activeCount} {activeCount}
</span> </span>
</span> </span>
</TabsTrigger> </TabsTrigger>
<TabsTrigger value="archived"> <TabsTrigger value="archived">
<span className="inline-flex items-center gap-1.5"> <span className="inline-flex items-center gap-1.5">
<ArchiveIcon className="h-4 w-4" /> <ArchiveIcon className="h-3.5 w-3.5" />
<span>Archived</span> <span>Archived</span>
<span className="inline-flex items-center justify-center min-w-5 h-5 px-1.5 rounded-full bg-primary/20 text-muted-foreground text-xs font-medium"> <span className="inline-flex h-4.5 min-w-4.5 items-center justify-center rounded-full bg-primary/20 px-1 text-[10px] font-medium text-muted-foreground">
{archivedCount} {archivedCount}
</span> </span>
</span> </span>
@ -320,7 +320,7 @@ export function AllSharedChatsSidebarContent({
</Tabs> </Tabs>
)} )}
<div className="flex-1 overflow-y-auto overflow-x-hidden p-2"> <div className="flex-1 overflow-y-auto overflow-x-hidden p-1.5">
{isLoading ? ( {isLoading ? (
<div className="space-y-1"> <div className="space-y-1">
{[75, 90, 55, 80, 65, 85].map((titleWidth) => ( {[75, 90, 55, 80, 65, 85].map((titleWidth) => (
@ -346,16 +346,7 @@ export function AllSharedChatsSidebarContent({
const isActive = currentChatId === thread.id; const isActive = currentChatId === thread.id;
return ( return (
<div <div key={thread.id} className="group/item relative w-full">
key={thread.id}
className={cn(
"sidebar-item-lazy group flex items-center gap-2 rounded-md px-2 py-1.5 text-sm",
"hover:bg-accent hover:text-accent-foreground",
"transition-colors cursor-pointer",
isActive && "bg-accent text-accent-foreground",
isBusy && "opacity-50 pointer-events-none"
)}
>
{isMobile ? ( {isMobile ? (
<button <button
type="button" type="button"
@ -370,7 +361,13 @@ export function AllSharedChatsSidebarContent({
onTouchEnd={longPressHandlers.onTouchEnd} onTouchEnd={longPressHandlers.onTouchEnd}
onTouchMove={longPressHandlers.onTouchMove} onTouchMove={longPressHandlers.onTouchMove}
disabled={isBusy} disabled={isBusy}
className="flex items-center gap-2 flex-1 min-w-0 text-left overflow-hidden" className={cn(
"flex w-full items-center gap-2 overflow-hidden rounded-md px-2 py-1.5 text-xs text-left",
"group-hover/item:bg-accent group-hover/item:text-accent-foreground",
"focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
isActive && "bg-accent text-accent-foreground",
isBusy && "opacity-50 pointer-events-none"
)}
> >
<span className="truncate">{thread.title || "New Chat"}</span> <span className="truncate">{thread.title || "New Chat"}</span>
</button> </button>
@ -381,7 +378,13 @@ export function AllSharedChatsSidebarContent({
type="button" type="button"
onClick={() => handleThreadClick(thread.id)} onClick={() => handleThreadClick(thread.id)}
disabled={isBusy} disabled={isBusy}
className="flex items-center gap-2 flex-1 min-w-0 text-left overflow-hidden" className={cn(
"flex w-full items-center gap-2 overflow-hidden rounded-md px-2 py-1.5 text-xs text-left",
"group-hover/item:bg-accent group-hover/item:text-accent-foreground",
"focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
isActive && "bg-accent text-accent-foreground",
isBusy && "opacity-50 pointer-events-none"
)}
> >
<span className="truncate">{thread.title || "New Chat"}</span> <span className="truncate">{thread.title || "New Chat"}</span>
</button> </button>
@ -395,6 +398,19 @@ export function AllSharedChatsSidebarContent({
</Tooltip> </Tooltip>
)} )}
<div
className={cn(
"pointer-events-none absolute right-0 top-0 bottom-0 flex items-center rounded-r-md pl-6 pr-1",
isActive
? "bg-gradient-to-l from-accent from-60% to-transparent"
: "bg-gradient-to-l from-sidebar from-60% to-transparent group-hover/item:from-accent",
isMobile
? "opacity-0"
: openDropdownId === thread.id
? "opacity-100"
: "opacity-0 group-hover/item:opacity-100"
)}
>
<DropdownMenu <DropdownMenu
open={openDropdownId === thread.id} open={openDropdownId === thread.id}
onOpenChange={(isOpen) => setOpenDropdownId(isOpen ? thread.id : null)} onOpenChange={(isOpen) => setOpenDropdownId(isOpen ? thread.id : null)}
@ -404,14 +420,8 @@ export function AllSharedChatsSidebarContent({
variant="ghost" variant="ghost"
size="icon" size="icon"
className={cn( className={cn(
"h-6 w-6 shrink-0 hover:bg-transparent", "pointer-events-auto h-6 w-6 hover:bg-transparent",
isMobile openDropdownId === thread.id && "bg-accent hover:bg-accent"
? "opacity-0 pointer-events-none absolute"
: openDropdownId === thread.id
? "opacity-100"
: "md:opacity-0 md:group-hover:opacity-100 md:focus:opacity-100",
openDropdownId === thread.id && "bg-accent hover:bg-accent",
"transition-opacity"
)} )}
disabled={isBusy} disabled={isBusy}
> >
@ -455,29 +465,30 @@ export function AllSharedChatsSidebarContent({
</DropdownMenuContent> </DropdownMenuContent>
</DropdownMenu> </DropdownMenu>
</div> </div>
</div>
); );
})} })}
</div> </div>
) : isSearchMode ? ( ) : isSearchMode ? (
<div className="text-center py-8"> <div className="text-center py-8">
<Search className="h-12 w-12 mx-auto text-muted-foreground mb-3" /> <Search className="mx-auto mb-2.5 h-10 w-10 text-muted-foreground" />
<p className="text-sm text-muted-foreground"> <p className="text-xs text-muted-foreground">
{t("no_chats_found") || "No chats found"} {t("no_chats_found") || "No chats found"}
</p> </p>
<p className="text-xs text-muted-foreground/70 mt-1"> <p className="mt-1 text-[11px] text-muted-foreground/70">
{t("try_different_search") || "Try a different search term"} {t("try_different_search") || "Try a different search term"}
</p> </p>
</div> </div>
) : ( ) : (
<div className="text-center py-8"> <div className="text-center py-8">
<Users className="h-12 w-12 mx-auto text-muted-foreground mb-3" /> <Users className="mx-auto mb-2.5 h-10 w-10 text-muted-foreground" />
<p className="text-sm text-muted-foreground"> <p className="text-xs text-muted-foreground">
{showArchived {showArchived
? t("no_archived_chats") || "No archived chats" ? t("no_archived_chats") || "No archived chats"
: t("no_shared_chats") || "No shared chats"} : t("no_shared_chats") || "No shared chats"}
</p> </p>
{!showArchived && ( {!showArchived && (
<p className="text-xs text-muted-foreground/70 mt-1"> <p className="mt-1 text-[11px] text-muted-foreground/70">
Share a chat to collaborate with your team Share a chat to collaborate with your team
</p> </p>
)} )}

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

@ -31,7 +31,7 @@ export function AnnouncementsSidebarContent({
return ( return (
<div className="h-full flex flex-col"> <div className="h-full flex flex-col">
<div className="shrink-0 p-4 pb-2 space-y-3"> <div className="shrink-0 p-3 pb-1.5 space-y-2">
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
{isMobile && ( {isMobile && (
@ -48,12 +48,12 @@ export function AnnouncementsSidebarContent({
<span className="sr-only">Close</span> <span className="sr-only">Close</span>
</Button> </Button>
)} )}
<h2 className="text-lg font-semibold">Announcements</h2> <h2 className="text-md font-semibold">Announcements</h2>
</div> </div>
</div> </div>
</div> </div>
<div className="flex-1 overflow-y-auto p-4"> <div className="flex-1 overflow-y-auto p-3">
{announcements.length === 0 ? ( {announcements.length === 0 ? (
<AnnouncementsEmptyState /> <AnnouncementsEmptyState />
) : ( ) : (

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 p-2 text-sm text-left", "flex w-full items-center gap-2 overflow-hidden rounded-md px-2 py-1.5 text-xs 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"

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

@ -178,7 +178,7 @@ export function InboxSidebarContent({
const [mounted, setMounted] = useState(false); const [mounted, setMounted] = useState(false);
const [openDropdown, setOpenDropdown] = useState<"filter" | null>(null); const [openDropdown, setOpenDropdown] = useState<"filter" | null>(null);
const [connectorScrollPos, setConnectorScrollPos] = useState<"top" | "middle" | "bottom">("top"); const [connectorScrollPos, setConnectorScrollPos] = useState<"top" | "middle" | "bottom">("top");
const connectorRafRef = useRef<number>(); const connectorRafRef = useRef<number | null>(null);
const handleConnectorScroll = useCallback((e: React.UIEvent<HTMLDivElement>) => { const handleConnectorScroll = useCallback((e: React.UIEvent<HTMLDivElement>) => {
const el = e.currentTarget; const el = e.currentTarget;
if (connectorRafRef.current) return; if (connectorRafRef.current) return;
@ -186,7 +186,7 @@ export function InboxSidebarContent({
const atTop = el.scrollTop <= 2; const atTop = el.scrollTop <= 2;
const atBottom = el.scrollHeight - el.scrollTop - el.clientHeight <= 2; const atBottom = el.scrollHeight - el.scrollTop - el.clientHeight <= 2;
setConnectorScrollPos(atTop ? "top" : atBottom ? "bottom" : "middle"); setConnectorScrollPos(atTop ? "top" : atBottom ? "bottom" : "middle");
connectorRafRef.current = undefined; connectorRafRef.current = null;
}); });
}, []); }, []);
useEffect( useEffect(
@ -528,7 +528,7 @@ export function InboxSidebarContent({
return ( return (
<> <>
<div className="shrink-0 p-4 pb-2 space-y-3"> <div className="shrink-0 p-3 pb-1.5 space-y-2">
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
{isMobile && ( {isMobile && (
@ -542,7 +542,7 @@ export function InboxSidebarContent({
<span className="sr-only">{t("close") || "Close"}</span> <span className="sr-only">{t("close") || "Close"}</span>
</Button> </Button>
)} )}
<h2 className="text-lg font-semibold">{t("inbox") || "Inbox"}</h2> <h2 className="text-md font-semibold">{t("inbox") || "Inbox"}</h2>
</div> </div>
<div className="flex items-center gap-1"> <div className="flex items-center gap-1">
{isMobile ? ( {isMobile ? (
@ -811,19 +811,19 @@ export function InboxSidebarContent({
</div> </div>
<div className="relative"> <div className="relative">
<Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" /> <Search className="absolute left-2.5 top-1/2 -translate-y-1/2 h-3.5 w-3.5 text-muted-foreground" />
<Input <Input
type="text" type="text"
placeholder={t("search_inbox") || "Search inbox"} placeholder={t("search_inbox") || "Search inbox"}
value={searchQuery} value={searchQuery}
onChange={(e) => setSearchQuery(e.target.value)} onChange={(e) => setSearchQuery(e.target.value)}
className="pl-9 pr-8 h-9" className="h-8 pl-8 pr-7 text-sm"
/> />
{searchQuery && ( {searchQuery && (
<Button <Button
variant="ghost" variant="ghost"
size="icon" size="icon"
className="absolute right-1 top-1/2 -translate-y-1/2 h-6 w-6" className="absolute right-1 top-1/2 h-5 w-5 -translate-y-1/2"
onClick={handleClearSearch} onClick={handleClearSearch}
> >
<X className="h-3.5 w-3.5" /> <X className="h-3.5 w-3.5" />
@ -842,23 +842,23 @@ export function InboxSidebarContent({
setActiveFilter("all"); setActiveFilter("all");
} }
}} }}
className="shrink-0 mx-4 mt-2" className="shrink-0 mx-3 mt-1.5"
> >
<TabsList stretch showBottomBorder size="sm"> <TabsList stretch showBottomBorder size="sm">
<TabsTrigger value="comments"> <TabsTrigger value="comments">
<span className="inline-flex items-center gap-1.5"> <span className="inline-flex items-center gap-1.5">
<MessageCircleReply className="h-4 w-4" /> <MessageCircleReply className="h-3.5 w-3.5" />
<span>{t("comments") || "Comments"}</span> <span>{t("comments") || "Comments"}</span>
<span className="inline-flex items-center justify-center min-w-5 h-5 px-1.5 rounded-full bg-primary/20 text-muted-foreground text-xs font-medium"> <span className="inline-flex h-4.5 min-w-4.5 items-center justify-center rounded-full bg-primary/20 px-1 text-[10px] font-medium text-muted-foreground">
{formatInboxCount(comments.unreadCount)} {formatInboxCount(comments.unreadCount)}
</span> </span>
</span> </span>
</TabsTrigger> </TabsTrigger>
<TabsTrigger value="status"> <TabsTrigger value="status">
<span className="inline-flex items-center gap-1.5"> <span className="inline-flex items-center gap-1.5">
<History className="h-4 w-4" /> <History className="h-3.5 w-3.5" />
<span>{t("status") || "Status"}</span> <span>{t("status") || "Status"}</span>
<span className="inline-flex items-center justify-center min-w-5 h-5 px-1.5 rounded-full bg-primary/20 text-muted-foreground text-xs font-medium"> <span className="inline-flex h-4.5 min-w-4.5 items-center justify-center rounded-full bg-primary/20 px-1 text-[10px] font-medium text-muted-foreground">
{formatInboxCount(status.unreadCount)} {formatInboxCount(status.unreadCount)}
</span> </span>
</span> </span>
@ -1021,23 +1021,23 @@ export function InboxSidebarContent({
</div> </div>
) : isSearchMode ? ( ) : isSearchMode ? (
<div className="text-center py-8"> <div className="text-center py-8">
<Search className="h-12 w-12 mx-auto text-muted-foreground mb-3" /> <Search className="mx-auto mb-2.5 h-10 w-10 text-muted-foreground" />
<p className="text-sm text-muted-foreground"> <p className="text-xs text-muted-foreground">
{t("no_results_found") || "No results found"} {t("no_results_found") || "No results found"}
</p> </p>
<p className="text-xs text-muted-foreground/70 mt-1"> <p className="mt-1 text-[11px] text-muted-foreground/70">
{t("try_different_search") || "Try a different search term"} {t("try_different_search") || "Try a different search term"}
</p> </p>
</div> </div>
) : ( ) : (
<div className="text-center py-8"> <div className="text-center py-8">
{activeTab === "comments" ? ( {activeTab === "comments" ? (
<MessageCircleReply className="h-12 w-12 mx-auto text-muted-foreground mb-3" /> <MessageCircleReply className="mx-auto mb-2.5 h-10 w-10 text-muted-foreground" />
) : ( ) : (
<History className="h-12 w-12 mx-auto text-muted-foreground mb-3" /> <History className="mx-auto mb-2.5 h-10 w-10 text-muted-foreground" />
)} )}
<p className="text-sm text-muted-foreground">{getEmptyStateMessage().title}</p> <p className="text-xs text-muted-foreground">{getEmptyStateMessage().title}</p>
<p className="text-xs text-muted-foreground/70 mt-1">{getEmptyStateMessage().hint}</p> <p className="mt-1 text-[11px] text-muted-foreground/70">{getEmptyStateMessage().hint}</p>
</div> </div>
)} )}
</div> </div>

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

@ -159,7 +159,7 @@ export function NavSection({ items, onItemClick, isCollapsed = false }: NavSecti
<StatusIcon <StatusIcon
status={item.statusIndicator} status={item.statusIndicator}
FallbackIcon={item.icon} FallbackIcon={item.icon}
className="h-4 w-4" className="h-3.5 w-3.5"
/> />
} }
trailingContent={<StatusPill status={item.statusIndicator} />} trailingContent={<StatusPill status={item.statusIndicator} />}

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

@ -113,7 +113,7 @@ export function Sidebar({
> >
{/* Header - search space name or collapse button when collapsed */} {/* Header - search space name or collapse button when collapsed */}
{isCollapsed ? ( {isCollapsed ? (
<div className="flex h-14 shrink-0 items-center justify-center border-b"> <div className="flex h-12 shrink-0 items-center justify-center border-b">
<SidebarCollapseButton <SidebarCollapseButton
isCollapsed={isCollapsed} isCollapsed={isCollapsed}
onToggle={onToggleCollapse ?? (() => {})} onToggle={onToggleCollapse ?? (() => {})}
@ -121,7 +121,7 @@ export function Sidebar({
/> />
</div> </div>
) : ( ) : (
<div className="flex h-14 shrink-0 items-center gap-0 px-1 border-b"> <div className="flex h-12 shrink-0 items-center gap-0 px-1 border-b">
<SidebarHeader <SidebarHeader
searchSpace={searchSpace} searchSpace={searchSpace}
isCollapsed={isCollapsed} isCollapsed={isCollapsed}
@ -139,7 +139,7 @@ export function Sidebar({
)} )}
{/* New chat button */} {/* New chat button */}
<div className={cn("flex flex-col gap-0.5 py-2", isCollapsed && "items-center")}> <div className={cn("flex flex-col gap-0.5 py-1.5", isCollapsed && "items-center")}>
<SidebarButton <SidebarButton
icon={SquarePen} icon={SquarePen}
label={t("new_chat")} label={t("new_chat")}

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

@ -26,7 +26,7 @@ interface SidebarButtonProps {
} }
const expandedClassName = cn( const expandedClassName = cn(
"flex items-center gap-2 rounded-md mx-2 px-2 py-1.5 text-sm transition-colors text-left", "flex items-center gap-1.5 rounded-md mx-2 px-2 py-1 text-sm transition-colors text-left",
"hover:bg-accent hover:text-accent-foreground", "hover:bg-accent hover: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"
); );
@ -63,7 +63,7 @@ export function SidebarButton({
className={cn(collapsedClassName, isActive && activeClassName, className)} className={cn(collapsedClassName, isActive && activeClassName, className)}
{...buttonProps} {...buttonProps}
> >
<Icon className="h-4 w-4" /> <Icon className="h-3.5 w-3.5" />
{collapsedOverlay} {collapsedOverlay}
<span className="sr-only">{label}</span> <span className="sr-only">{label}</span>
</button> </button>
@ -87,7 +87,7 @@ export function SidebarButton({
className={cn(expandedClassName, isActive && activeClassName, className)} className={cn(expandedClassName, isActive && activeClassName, className)}
{...buttonProps} {...buttonProps}
> >
{expandedIconNode ?? <Icon className="h-4 w-4 shrink-0" />} {expandedIconNode ?? <Icon className="h-3.5 w-3.5 shrink-0" />}
<span className="flex-1 truncate">{label}</span> <span className="flex-1 truncate">{label}</span>
{trailingContent} {trailingContent}
{badge && typeof badge !== "string" ? badge : null} {badge && typeof badge !== "string" ? badge : null}

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

@ -36,14 +36,14 @@ export function SidebarHeader({
<Button <Button
variant="ghost" variant="ghost"
className={cn( className={cn(
"flex h-auto w-full items-center justify-between gap-1 overflow-hidden py-1.5 font-semibold", "flex h-8 w-full items-center justify-between gap-1 overflow-hidden px-2 py-0.5 font-semibold",
isCollapsed && "w-10" isCollapsed && "w-10"
)} )}
> >
<span className="truncate text-base"> <span className="truncate text-sm">
{searchSpace?.name ?? t("select_search_space")} {searchSpace?.name ?? t("select_search_space")}
</span> </span>
<ChevronsUpDown className="h-4 w-4 shrink-0 text-muted-foreground" /> <ChevronsUpDown className="h-3.5 w-3.5 shrink-0 text-muted-foreground" />
</Button> </Button>
</DropdownMenuTrigger> </DropdownMenuTrigger>
<DropdownMenuContent align="start" className="w-48"> <DropdownMenuContent align="start" className="w-48">

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

@ -39,8 +39,8 @@ export function SidebarSection({
className className
)} )}
> >
<div className="flex items-center group/section shrink-0 px-2 py-1.5"> <div className="flex items-center group/section shrink-0 px-2 py-1">
<CollapsibleTrigger className="flex items-center gap-1.5 text-xs font-medium text-muted-foreground hover:text-foreground transition-colors min-w-0"> <CollapsibleTrigger className="flex items-center gap-1 text-[11px] 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(