From f70393f22e3eb55d53ee53342f8c26d57ebf53c2 Mon Sep 17 00:00:00 2001
From: Hakan Shehu <hakanshehu15@gmail.com>
Date: Tue, 29 Oct 2024 01:18:02 +0100
Subject: [PATCH] Mark active sidebar item

---
 .../workspaces/sidebars/sidebar-chat-item.tsx          |  6 ++++--
 .../components/workspaces/sidebars/sidebar-chats.tsx   |  6 +++++-
 .../components/workspaces/sidebars/sidebar-item.tsx    | 10 +++++++---
 .../workspaces/sidebars/sidebar-space-item.tsx         |  6 ++++--
 4 files changed, 20 insertions(+), 8 deletions(-)

diff --git a/desktop/src/renderer/components/workspaces/sidebars/sidebar-chat-item.tsx b/desktop/src/renderer/components/workspaces/sidebars/sidebar-chat-item.tsx
index c79d3282..e7d8c834 100644
--- a/desktop/src/renderer/components/workspaces/sidebars/sidebar-chat-item.tsx
+++ b/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
diff --git a/desktop/src/renderer/components/workspaces/sidebars/sidebar-chats.tsx b/desktop/src/renderer/components/workspaces/sidebars/sidebar-chats.tsx
index 7dfd185f..4907b534 100644
--- a/desktop/src/renderer/components/workspaces/sidebars/sidebar-chats.tsx
+++ b/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>
         ))}
diff --git a/desktop/src/renderer/components/workspaces/sidebars/sidebar-item.tsx b/desktop/src/renderer/components/workspaces/sidebars/sidebar-item.tsx
index 91ef35cb..f463901c 100644
--- a/desktop/src/renderer/components/workspaces/sidebars/sidebar-item.tsx
+++ b/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
diff --git a/desktop/src/renderer/components/workspaces/sidebars/sidebar-space-item.tsx b/desktop/src/renderer/components/workspaces/sidebars/sidebar-space-item.tsx
index f08ba019..a5eeb5ec 100644
--- a/desktop/src/renderer/components/workspaces/sidebars/sidebar-space-item.tsx
+++ b/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>
               ))}