Fix issues synchronizing chat data (#118)

app/components/sidebar/Menu.client.tsx

@@ -41,18 +41,19 @@ const skipConfirmDeleteCookieName = 'skipConfirmDelete';
 
 export const Menu = () => {
   const menuRef = useRef<HTMLDivElement>(null);
-  const [list, setList] = useState<ChatSummary[]>([]);
+  const [list, setList] = useState<ChatSummary[] | null>(null);
   const [open, setOpen] = useState(false);
   const [dialogContent, setDialogContent] = useState<DialogContent>(null);
   const [isSettingsOpen, setIsSettingsOpen] = useState(false);
   const [skipConfirmDeleteChecked, setSkipConfirmDeleteChecked] = useState(false);
 
   const { filteredItems: filteredList, handleSearchChange } = useSearchFilter({
-    items: list,
+    items: list ?? [],
     searchFields: ['title'],
   });
 
   const loadEntries = useCallback(() => {
+    setList(null);
     database
       .getAllChats()
       .then(setList)
@@ -64,7 +65,7 @@ export const Menu = () => {
       event.preventDefault();
 
       // Optimistically remove the item from the list while we update the database.
-      setList(list.filter((chat) => chat.id !== item.id));
+      setList((list ?? []).filter((chat) => chat.id !== item.id));
 
       database
         .deleteChat(item.id)
@@ -168,7 +169,7 @@ export const Menu = () => {
         <div className="flex-1 overflow-auto pl-4 pr-5 pb-5">
           {filteredList.length === 0 && (
             <div className="pl-2 text-bolt-elements-textTertiary">
-              {list.length === 0 ? 'No previous conversations' : 'No matches found'}
+              {list ? (list.length === 0 ? 'No previous conversations' : 'No matches found') : 'Loading...'}
             </div>
           )}
           <DialogRoot open={dialogContent !== null}>

app/lib/persistence/chats.ts

@@ -68,26 +68,13 @@ const deletedChats = new Set<string>();
 
 async function getAllChats(): Promise<ChatSummary[]> {
   const userId = await getCurrentUserId();
-
-  if (!userId) {
-    return getLocalChats();
-  }
-
-  const { data, error } = await getSupabase().from('chats').select(CHAT_SUMMARY_COLUMNS).eq('deleted', false);
-
-  if (error) {
-    throw error;
-  }
-
-  const chats = data.map(databaseRowToChatSummary);
-  return chats.filter((chat) => !deletedChats.has(chat.id));
-}
-
-async function syncLocalChats(): Promise<void> {
-  const userId = await getCurrentUserId();
   const localChats = getLocalChats();
 
-  if (userId && localChats.length) {
+  if (!userId) {
+    return localChats;
+  }
+
+  if (localChats.length) {
     try {
       for (const chat of localChats) {
         if (chat.title) {
@@ -99,6 +86,15 @@ async function syncLocalChats(): Promise<void> {
       console.error('Error syncing local chats', error);
     }
   }
+
+  const { data, error } = await getSupabase().from('chats').select(CHAT_SUMMARY_COLUMNS).eq('deleted', false);
+
+  if (error) {
+    throw error;
+  }
+
+  const chats = data.map(databaseRowToChatSummary);
+  return chats.filter((chat) => !deletedChats.has(chat.id));
 }
 
 async function setChatContents(chat: ChatContents) {
@@ -254,7 +250,6 @@ async function updateChatLastMessage(
 
 export const database = {
   getAllChats,
-  syncLocalChats,
   setChatContents,
   getChatPublicData,
   getChatContents,

app/lib/stores/auth.ts

@@ -4,7 +4,6 @@ import { type User, type Session, AuthError } from '@supabase/supabase-js';
 import { logStore } from './logs';
 import { useEffect, useState } from 'react';
 import { isAuthenticated } from '~/lib/supabase/client';
-import { database } from '~/lib/persistence/chats';
 import { pingTelemetry } from '~/lib/hooks/pingTelemetry';
 
 export const userStore = atom<User | null>(null);
@@ -84,8 +83,6 @@ export async function initializeAuth() {
         sessionStore.set(null);
         logStore.logSystem('User signed out');
       }
-
-      await database.syncLocalChats();
     });
 
     return () => {