Fix behaviour clicking old conversations in sidebar (#26)

Author: ScriptSmith

ui/src/components/Sidebar/Sidebar.tsx

@@ -479,6 +479,13 @@ export function Sidebar({
     ? location.pathname.split("/")[2]
     : null;
 
+  // Check if a conversation matches the active URL (may be local id or server remoteId)
+  const isActive = useCallback(
+    (conv: Conversation) =>
+      activeConversationId === conv.id || activeConversationId === conv.remoteId,
+    [activeConversationId]
+  );
+
   const filteredConversations = searchQuery
     ? conversations.filter((c) => c.title.toLowerCase().includes(searchQuery.toLowerCase()))
     : conversations;
@@ -528,7 +535,7 @@ export function Sidebar({
 
   const handleDeleteConversation = (conv: Conversation) => {
     deleteConversation(conv.id);
-    if (activeConversationId === conv.id) {
+    if (isActive(conv)) {
       navigate("/chat");
     }
   };
@@ -814,7 +821,7 @@ export function Sidebar({
                                 <SortablePinnedItem
                                   key={conv.id}
                                   conv={conv}
-                                  isActive={activeConversationId === conv.id && isChatRoute}
+                                  isActive={isActive(conv) && isChatRoute}
                                   isEditing={editingId === conv.id}
                                   editTitle={editTitle}
                                   onEditTitleChange={setEditTitle}
@@ -904,7 +911,7 @@ export function Sidebar({
                                           className={cn(
                                             "group flex w-full items-center gap-2 rounded-lg px-2 py-1.5 text-sm",
                                             "hover:bg-accent/50",
-                                            activeConversationId === conv.id && isChatRoute
+                                            isActive(conv) && isChatRoute
                                               ? "bg-accent text-accent-foreground font-medium"
                                               : "text-foreground/80"
                                           )}
@@ -925,7 +932,7 @@ export function Sidebar({
                                                 className={cn(
                                                   "inline-flex items-center justify-center h-6 w-6 shrink-0 rounded-md p-0 opacity-0 transition-opacity hover:bg-muted",
                                                   "group-hover:opacity-100",
-                                                  activeConversationId === conv.id && "opacity-100"
+                                                  isActive(conv) && "opacity-100"
                                                 )}
                                               >
                                                 <MoreHorizontal className="h-4 w-4" />
@@ -1059,7 +1066,7 @@ export function Sidebar({
                                                   className={cn(
                                                     "group flex w-full items-center gap-2 rounded-lg px-2 py-1.5 text-left text-sm",
                                                     "hover:bg-accent/50",
-                                                    activeConversationId === conv.id && isChatRoute
+                                                    isActive(conv) && isChatRoute
                                                       ? "bg-accent text-accent-foreground font-medium"
                                                       : "text-muted-foreground"
                                                   )}

ui/src/hooks/useConversationSync.ts

@@ -95,6 +95,9 @@ export function useConversationSync(conversationId: string | undefined) {
   // triggers the save effect, but nothing actually changed — saving would bump updatedAt
   // and cause the conversation to jump to the top of the sidebar)
   const skipNextSaveRef = useRef(false);
+  // Ref for currentConversationId so the save effect doesn't re-trigger on conversation
+  // switch (which would consume the skipNextSaveRef before the real message-load render)
+  const currentConversationIdRef = useRef(currentConversation?.id);
 
   // Load conversation when it changes
   useEffect(() => {
@@ -127,11 +130,15 @@ export function useConversationSync(conversationId: string | undefined) {
     }
   }, [currentConversation?.id]); // eslint-disable-line react-hooks/exhaustive-deps
 
-  // Save conversation when messages change (debounced)
-  const currentConversationId = currentConversation?.id;
+  // Save conversation when messages change (debounced).
+  // currentConversationId is accessed via ref so that switching conversations doesn't
+  // trigger this effect — otherwise it fires before the message-load render and
+  // consumes skipNextSaveRef too early, causing a spurious save that bumps updatedAt.
+  currentConversationIdRef.current = currentConversation?.id;
   useEffect(() => {
-    if (isStreaming || !currentConversationId || messages.length === 0) return;
-    if (loadedConversationIdRef.current !== currentConversationId) return;
+    const convId = currentConversationIdRef.current;
+    if (isStreaming || !convId || messages.length === 0) return;
+    if (loadedConversationIdRef.current !== convId) return;
 
     // After loading a conversation, the messages store changes which triggers this effect.
     // Skip that first save to avoid bumping updatedAt (which reorders the sidebar).
@@ -145,15 +152,15 @@ export function useConversationSync(conversationId: string | undefined) {
     }
 
     saveTimeoutRef.current = setTimeout(() => {
-      updateConversation(currentConversationId, messages, selectedModels);
+      updateConversation(currentConversationIdRef.current!, messages, selectedModels);
     }, 100);
 
     return () => {
       if (saveTimeoutRef.current) {
         clearTimeout(saveTimeoutRef.current);
       }
     };
-  }, [messages, isStreaming, currentConversationId, selectedModels, updateConversation]);
+  }, [messages, isStreaming, selectedModels, updateConversation]);
 
   /**
    * Fork a conversation, optionally up to a specific message.