apunkt/SurfSense
1
0
Fork 0
mirror of https://github.com/MODSetter/SurfSense.git synced 2026-07-12 22:42:13 +02:00
Code Issues Projects Releases Packages Wiki Activity

feat(sidebar): highlight active chat items for improved user interaction

Browse source
This commit is contained in:
Anish Sarkar 2026-07-07 22:41:32 +05:30
parent cd4eb18981
commit 2670ad96c8
1 changed files with 4 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -47,6 +47,7 @@ export function ChatListItem({
const dropdownOpen = controlledOpen ?? internalOpen; const dropdownOpen = controlledOpen ?? internalOpen;
const setDropdownOpen = onDropdownOpenChange ?? setInternalOpen; const setDropdownOpen = onDropdownOpenChange ?? setInternalOpen;
const animatedName = useTypewriter(name); const animatedName = useTypewriter(name);
const isHighlighted = isActive || dropdownOpen;
const { handlers: longPressHandlers, wasLongPress } = useLongPress( const { handlers: longPressHandlers, wasLongPress } = useLongPress(
useCallback(() => setDropdownOpen(true), [setDropdownOpen]) useCallback(() => setDropdownOpen(true), [setDropdownOpen])
@ -67,9 +68,9 @@ export function ChatListItem({
onFocus={onPrefetch} onFocus={onPrefetch}
{...(isMobile ? longPressHandlers : {})} {...(isMobile ? longPressHandlers : {})}
className={sidebarListItemClassName({ className={sidebarListItemClassName({
active: isActive, active: isHighlighted,
className: className:
"justify-start gap-2 overflow-hidden px-2 py-1.5 font-normal focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring", "justify-start gap-2 overflow-hidden px-2 py-1.5 font-normal group-hover/item:bg-accent group-hover/item:text-accent-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
})} })}
> >
<span className="min-w-0 flex-1 truncate">{animatedName}</span> <span className="min-w-0 flex-1 truncate">{animatedName}</span>
@ -79,7 +80,7 @@ export function ChatListItem({
<div <div
className={cn( className={cn(
"pointer-events-none absolute right-0 top-0 bottom-0 flex items-center pr-1 pl-6 rounded-r-md", "pointer-events-none absolute right-0 top-0 bottom-0 flex items-center pr-1 pl-6 rounded-r-md",
isActive isHighlighted
? "bg-gradient-to-l from-accent from-60% to-transparent" ? "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", : "bg-gradient-to-l from-sidebar from-60% to-transparent group-hover/item:from-accent",
isMobile isMobile