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(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 = {
id: tabId,
type: "chat",
title: title || `Chat ${chatId}`,
title: title || "New Chat",
chatId,
chatUrl,
searchSpaceId,

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

@ -158,15 +158,25 @@ export function TabBar({
data-tab-id={tab.id}
onClick={() => handleTabClick(tab)}
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
? "bg-muted/60 text-foreground"
: "bg-transparent text-muted-foreground hover:bg-muted/30 hover:text-foreground"
? "bg-muted 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}
</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 */}
<span
role="button"
@ -178,15 +188,11 @@ export function TabBar({
handleTabClose(e as unknown as React.MouseEvent, tab.id);
}
}}
className={cn(
"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!"
)}
className="pointer-events-auto rounded-full p-0.5 transition-colors hover:bg-muted-foreground/15"
>
<X className="size-3" />
</span>
</div>
</button>
);
})}