From 71b8860d206fa4c3b2b687aa5071b9a287b3824e Mon Sep 17 00:00:00 2001 From: Anish Sarkar <104695310+AnishSarkar22@users.noreply.github.com> Date: Sat, 27 Dec 2025 19:41:44 +0530 Subject: [PATCH] feat: Added active highlighting to chats and notes --- surfsense_web/components/sidebar/all-chats-sidebar.tsx | 2 ++ surfsense_web/components/sidebar/all-notes-sidebar.tsx | 8 +++++++- surfsense_web/components/sidebar/nav-chats.tsx | 5 ++++- surfsense_web/components/sidebar/nav-notes.tsx | 5 ++++- 4 files changed, 17 insertions(+), 3 deletions(-) diff --git a/surfsense_web/components/sidebar/all-chats-sidebar.tsx b/surfsense_web/components/sidebar/all-chats-sidebar.tsx index a820a90c8..79a811ee1 100644 --- a/surfsense_web/components/sidebar/all-chats-sidebar.tsx +++ b/surfsense_web/components/sidebar/all-chats-sidebar.tsx @@ -310,6 +310,7 @@ export function AllChatsSidebar({ open, onOpenChange, searchSpaceId }: AllChatsS const isDeleting = deletingThreadId === thread.id; const isArchiving = archivingThreadId === thread.id; const isBusy = isDeleting || isArchiving; + const isActive = currentChatId === thread.id; return (
diff --git a/surfsense_web/components/sidebar/all-notes-sidebar.tsx b/surfsense_web/components/sidebar/all-notes-sidebar.tsx index 53bfb6498..4f5dee7b8 100644 --- a/surfsense_web/components/sidebar/all-notes-sidebar.tsx +++ b/surfsense_web/components/sidebar/all-notes-sidebar.tsx @@ -4,7 +4,7 @@ import { useQuery, useQueryClient } from "@tanstack/react-query"; import { format } from "date-fns"; import { FileText, Loader2, MoreHorizontal, Plus, Search, Trash2, X } from "lucide-react"; import { AnimatePresence, motion } from "motion/react"; -import { useRouter } from "next/navigation"; +import { useParams, useRouter } from "next/navigation"; import { useTranslations } from "next-intl"; import { useCallback, useEffect, useMemo, useState } from "react"; import { createPortal } from "react-dom"; @@ -37,7 +37,11 @@ export function AllNotesSidebar({ }: AllNotesSidebarProps) { const t = useTranslations("sidebar"); const router = useRouter(); + const params = useParams(); const queryClient = useQueryClient(); + + // Get the current note ID from URL to highlight the open note + const currentNoteId = params.note_id ? Number(params.note_id) : null; const [deletingNoteId, setDeletingNoteId] = useState(null); const [searchQuery, setSearchQuery] = useState(""); const [mounted, setMounted] = useState(false); @@ -260,6 +264,7 @@ export function AllNotesSidebar({
{notes.map((note) => { const isDeleting = deletingNoteId === note.id; + const isActive = currentNoteId === note.id; return (
diff --git a/surfsense_web/components/sidebar/nav-chats.tsx b/surfsense_web/components/sidebar/nav-chats.tsx index 1165d6057..92e814557 100644 --- a/surfsense_web/components/sidebar/nav-chats.tsx +++ b/surfsense_web/components/sidebar/nav-chats.tsx @@ -10,7 +10,7 @@ import { RefreshCw, Trash2, } from "lucide-react"; -import { useRouter } from "next/navigation"; +import { usePathname, useRouter } from "next/navigation"; import { useTranslations } from "next-intl"; import { useCallback, useEffect, useState } from "react"; import { Button } from "@/components/ui/button"; @@ -71,6 +71,7 @@ export function NavChats({ }: NavChatsProps) { const t = useTranslations("sidebar"); const router = useRouter(); + const pathname = usePathname(); const isMobile = useIsMobile(); const [isDeleting, setIsDeleting] = useState(null); const [isOpen, setIsOpen] = useState(defaultOpen); @@ -142,6 +143,7 @@ export function NavChats({ {chats.map((chat) => { const isDeletingChat = isDeleting === chat.id; + const isActive = pathname === chat.url; return ( @@ -151,6 +153,7 @@ export function NavChats({ disabled={isDeletingChat} className={cn( "pr-8", // Make room for the action button + isActive && "bg-sidebar-accent text-sidebar-accent-foreground font-medium", isDeletingChat && "opacity-50" )} > diff --git a/surfsense_web/components/sidebar/nav-notes.tsx b/surfsense_web/components/sidebar/nav-notes.tsx index f634c2b72..13886da05 100644 --- a/surfsense_web/components/sidebar/nav-notes.tsx +++ b/surfsense_web/components/sidebar/nav-notes.tsx @@ -10,7 +10,7 @@ import { Plus, Trash2, } from "lucide-react"; -import { useRouter } from "next/navigation"; +import { usePathname, useRouter } from "next/navigation"; import { useTranslations } from "next-intl"; import { useCallback, useEffect, useState } from "react"; import { Button } from "@/components/ui/button"; @@ -72,6 +72,7 @@ export function NavNotes({ }: NavNotesProps) { const t = useTranslations("sidebar"); const router = useRouter(); + const pathname = usePathname(); const isMobile = useIsMobile(); const [isDeleting, setIsDeleting] = useState(null); const [isOpen, setIsOpen] = useState(defaultOpen); @@ -157,6 +158,7 @@ export function NavNotes({ {notes.length > 0 ? ( notes.map((note) => { const isDeletingNote = isDeleting === note.id; + const isActive = pathname === note.url; return ( @@ -166,6 +168,7 @@ export function NavNotes({ disabled={isDeletingNote} className={cn( "pr-8", // Make room for the action button + isActive && "bg-sidebar-accent text-sidebar-accent-foreground font-medium", isDeletingNote && "opacity-50" )} >