fix(sidebar): keep the pin visible on the chat you're viewing (#6377)

The pin glyph carried a stale `!isCurrentRoute` guard copy-pasted from the
status dot back when the dot was also hidden on the current route. #4354 later
relaxed the dot's guard but left the pin's untouched, so opening a pinned chat
made its pin vanish.

Derive `showStatusDot` once and express the pin as its negation so the two
conditions can no longer drift apart. Also align the collapsed rail, which
never forwarded `isCurrentRoute` and so showed an unread dot on the chat you
were already reading, and hide the pin by the same opacity mechanism the dot
uses instead of a display toggle plus a mount guard.

Author: waleedlatif1

apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/collapsed-sidebar-menu/collapsed-sidebar-menu.tsx

@@ -300,7 +300,7 @@ export function CollapsedChatFlyoutItem({
         <ConversationListItem
           title={chat.name}
           isActive={!!chat.isActive}
-          isUnread={!!chat.isUnread}
+          isUnread={!!chat.isUnread && !isCurrentRoute}
         />
       </Link>
     </DropdownMenuItem>

apps/sim/app/workspace/[workspaceId]/w/components/sidebar/sidebar.tsx

@@ -195,6 +195,13 @@ const SidebarChatItem = memo(function SidebarChatItem({
 }) {
   const dragGhostRef = useRef<HTMLElement | null>(null)
 
+  /**
+   * The trailing slot fits one glyph, and the dot wins over the pin: it reports
+   * transient state (a run in progress, or an unread reply elsewhere), while pinning
+   * is persistent and already conveyed by the row sorting to the top of the list.
+   */
+  const showStatusDot = isActive || (!isCurrentRoute && isUnread)
+
   function handleDragStart(e: React.DragEvent) {
     e.dataTransfer.effectAllowed = 'copyMove'
     e.dataTransfer.setData(
@@ -238,23 +245,26 @@ const SidebarChatItem = memo(function SidebarChatItem({
       >
         <div className='min-w-0 flex-1 truncate text-[var(--text-body)]'>{chat.name}</div>
         {chat.id !== 'new' && (
-          <div className='relative flex h-[18px] w-[18px] flex-shrink-0 items-center justify-center'>
-            {(isActive || (!isCurrentRoute && isUnread)) && (
+          <div className='relative flex size-[18px] flex-shrink-0 items-center justify-center'>
+            {showStatusDot && (
               <span
                 aria-hidden='true'
                 className={cn(
-                  'h-[6px] w-[6px] rounded-full transition-opacity',
+                  'size-[6px] rounded-full transition-opacity',
                   isMenuOpen ? 'opacity-0' : 'group-hover:opacity-0'
                 )}
                 style={{
                   backgroundColor: isActive ? '#EAB308' : 'var(--brand-accent)',
                 }}
               />
             )}
-            {!isActive && !isUnread && isPinned && !isCurrentRoute && !isMenuOpen && (
+            {!showStatusDot && isPinned && (
               <Pin
                 aria-hidden='true'
-                className='absolute size-[12px] text-[var(--text-icon)] group-hover:hidden'
+                className={cn(
+                  'absolute size-[12px] text-[var(--text-icon)] transition-opacity',
+                  isMenuOpen ? 'opacity-0' : 'group-hover:opacity-0'
+                )}
               />
             )}
             <button