Mark active sidebar item

desktop/src/renderer/components/workspaces/sidebars/sidebar-chat-item.tsx

@@ -5,13 +5,15 @@ import { Avatar } from '@/renderer/components/avatars/avatar';
 
 interface SidebarChatItemProps {
   node: SidebarChatNode;
+  isActive?: boolean;
 }
 
 export const SidebarChatItem = ({
   node,
+  isActive,
 }: SidebarChatItemProps): React.ReactNode => {
-  const isActive = false;
-  const isUnread = node.unreadCount > 0 || node.mentionsCount > 0;
+  const isUnread =
+    !isActive && (node.unreadCount > 0 || node.mentionsCount > 0);
 
   return (
     <div

desktop/src/renderer/components/workspaces/sidebars/sidebar-chats.tsx

@@ -12,9 +12,12 @@ import {
   SidebarMenuButton,
   SidebarMenuItem,
 } from '@/renderer/components/ui/sidebar';
+import { useParams } from 'react-router-dom';
 
 export const SidebarChats = () => {
   const workspace = useWorkspace();
+  const { nodeId } = useParams<{ nodeId?: string | null }>();
+
   const { data } = useQuery({
     type: 'sidebar_chat_list',
     userId: workspace.userId,
@@ -30,11 +33,12 @@ export const SidebarChats = () => {
         {data?.map((item) => (
           <SidebarMenuItem key={item.name}>
             <SidebarMenuButton
+              isActive={nodeId === item.id}
               onClick={() => {
                 workspace.navigateToNode(item.id);
               }}
             >
-              <SidebarChatItem node={item} />
+              <SidebarChatItem node={item} isActive={nodeId === item.id} />
             </SidebarMenuButton>
           </SidebarMenuItem>
         ))}

desktop/src/renderer/components/workspaces/sidebars/sidebar-item.tsx

@@ -5,11 +5,15 @@ import { Avatar } from '@/renderer/components/avatars/avatar';
 
 interface SidebarItemProps {
   node: SidebarNode;
+  isActive?: boolean;
 }
 
-export const SidebarItem = ({ node }: SidebarItemProps): React.ReactNode => {
-  const isActive = false;
-  const isUnread = node.unreadCount > 0 || node.mentionsCount > 0;
+export const SidebarItem = ({
+  node,
+  isActive,
+}: SidebarItemProps): React.ReactNode => {
+  const isUnread =
+    !isActive && (node.unreadCount > 0 || node.mentionsCount > 0);
 
   return (
     <button

desktop/src/renderer/components/workspaces/sidebars/sidebar-space-item.tsx

@@ -39,6 +39,7 @@ import {
   Plus,
   ChevronRight,
 } from 'lucide-react';
+import { useParams } from 'react-router-dom';
 
 interface SettingsState {
   open: boolean;
@@ -51,6 +52,7 @@ interface SidebarSpaceNodeProps {
 
 export const SidebarSpaceItem = ({ node }: SidebarSpaceNodeProps) => {
   const workspace = useWorkspace();
+  const { nodeId } = useParams<{ nodeId?: string | null }>();
 
   const [openCreatePage, setOpenCreatePage] = React.useState(false);
   const [openCreateChannel, setOpenCreateChannel] = React.useState(false);
@@ -157,8 +159,8 @@ export const SidebarSpaceItem = ({ node }: SidebarSpaceNodeProps) => {
                   }}
                   className="cursor-pointer"
                 >
-                  <SidebarMenuSubButton>
-                    <SidebarItem node={child} />
+                  <SidebarMenuSubButton isActive={nodeId === child.id}>
+                    <SidebarItem node={child} isActive={nodeId === child.id} />
                   </SidebarMenuSubButton>
                 </SidebarMenuSubItem>
               ))}