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(tabs): update default chat tab title for clarity; adjust TabBar styles for improved layout and hover effects

Browse source
This commit is contained in:
Anish Sarkar 2026-05-03 23:30:36 +05:30
parent 04f9f7dfc1
commit 331589275b
2 changed files with 27 additions and 21 deletions
Download patch file Download diff file Expand all files Collapse all files

2
surfsense_web/atoms/tabs/tabs.atom.ts
View file

@ -136,7 +136,7 @@ export const syncChatTabAtom = atom(
const newTab: Tab = { const newTab: Tab = {
id: tabId, id: tabId,
type: "chat", type: "chat",
title: title || `Chat ${chatId}`, title: title || "New Chat",
chatId, chatId,
chatUrl, chatUrl,
searchSpaceId, searchSpaceId,

26
surfsense_web/components/layout/ui/tabs/TabBar.tsx
View file

@ -158,15 +158,25 @@ export function TabBar({
data-tab-id={tab.id} data-tab-id={tab.id}
onClick={() => handleTabClick(tab)} onClick={() => handleTabClick(tab)}
className={cn( className={cn(
"group relative flex h-full items-center px-3 min-w-[120px] max-w-[240px] min-h-0 overflow-hidden text-[13px] font-medium rounded-md transition-all duration-150 shrink-0", "group relative flex h-full items-center px-3 w-[180px] min-h-0 overflow-hidden text-[13px] font-medium rounded-md transition-colors duration-150 shrink-0",
isActive isActive
? "bg-muted/60 text-foreground" ? "bg-muted text-foreground"
: "bg-transparent text-muted-foreground hover:bg-muted/30 hover:text-foreground" : "bg-transparent text-muted-foreground hover:bg-muted/50 hover:text-foreground"
)} )}
> >
<span className="block min-w-0 flex-1 truncate text-left group-hover:pr-5 group-focus-within:pr-5"> <span className="block min-w-0 flex-1 whitespace-nowrap overflow-hidden text-left">
{tab.title} {tab.title}
</span> </span>
{/* Hover-only gradient + close overlay (sidebar pattern) — keeps pill width fixed and avoids ellipsis shift. */}
<div
className={cn(
"pointer-events-none absolute right-0 top-0 bottom-0 flex items-center rounded-r-md pl-6 pr-2 opacity-0 transition-opacity duration-150",
"group-hover:opacity-100 group-focus-within:opacity-100",
isActive
? "bg-gradient-to-l from-muted from-60% to-transparent"
: "bg-gradient-to-l from-muted/50 from-60% to-transparent"
)}
>
{/* biome-ignore lint/a11y/useSemanticElements: cannot nest button inside button */} {/* biome-ignore lint/a11y/useSemanticElements: cannot nest button inside button */}
<span <span
role="button" role="button"
@ -178,15 +188,11 @@ export function TabBar({
handleTabClose(e as unknown as React.MouseEvent, tab.id); handleTabClose(e as unknown as React.MouseEvent, tab.id);
} }
}} }}
className={cn( className="pointer-events-auto rounded-full p-0.5 transition-colors hover:bg-muted-foreground/15"
"absolute right-2 top-1/2 -translate-y-1/2 shrink-0 rounded-full p-0.5 transition-all duration-150 hover:bg-muted-foreground/15",
isActive
? "opacity-0 group-hover:opacity-70 group-focus-within:opacity-70 hover:opacity-100"
: "opacity-0 group-hover:opacity-60 group-focus-within:opacity-60 hover:opacity-100!"
)}
> >
<X className="size-3" /> <X className="size-3" />
</span> </span>
</div>
</button> </button>
); );
})} })}