refactor for better message handling

src/stores/nostr.ts

@@ -97,6 +97,30 @@ export const useNostrStore = defineStore('nostr', () => {
   const relayPool = ref<any[]>([])
   const processedMessageIds = ref(new Set<string>())
   const currentSubscription = ref<any | null>(null)
+  const hasActiveSubscription = ref(false)
+
+  // Load stored messages and IDs on initialization
+  const initializeFromStorage = () => {
+    try {
+      const storedMessages = JSON.parse(localStorage.getItem('nostr_messages') || '[]')
+      const messageMap = new Map(storedMessages)
+      
+      // Initialize processedMessageIds from stored messages
+      messageMap.forEach(msgs => {
+        msgs.forEach(msg => {
+          processedMessageIds.value.add(msg.id)
+        })
+      })
+      
+      messages.value = messageMap
+    } catch (err) {
+      console.error('Failed to load stored messages:', err)
+      localStorage.removeItem('nostr_messages')
+    }
+  }
+
+  // Call initialization
+  initializeFromStorage()
 
   // Watch account changes and persist to localStorage
   watch(account, (newAccount) => {
@@ -107,6 +131,17 @@ export const useNostrStore = defineStore('nostr', () => {
     }
   }, { deep: true })
 
+  // Watch messages for changes and persist
+  watch(messages, (newMessages) => {
+    try {
+      localStorage.setItem('nostr_messages', 
+        JSON.stringify(Array.from(newMessages.entries()))
+      )
+    } catch (err) {
+      console.error('Failed to save messages:', err)
+    }
+  }, { deep: true })
+
   // Initialize store if account exists in localStorage
   if (account.value) {
     console.log('Found existing account, initializing connection...')
@@ -124,8 +159,7 @@ export const useNostrStore = defineStore('nostr', () => {
     if (!account.value) return
 
     try {
-      // Clear existing state
-      messages.value.clear()
+      // Only clear profiles and processed IDs
       profiles.value.clear()
       processedMessageIds.value.clear()
       
@@ -186,7 +220,10 @@ export const useNostrStore = defineStore('nostr', () => {
     relayPool.value = []
     messages.value.clear()
     profiles.value.clear()
+    processedMessageIds.value.clear()
     activeChat.value = null
+    localStorage.removeItem('nostr_messages')
+    localStorage.removeItem('nostr_account')
   }
 
   const addMessage = async (pubkey: string, message: DirectMessage) => {
@@ -200,12 +237,21 @@ export const useNostrStore = defineStore('nostr', () => {
 
     // Add message to the map
     const userMessages = messages.value.get(pubkey) || []
-    messages.value.set(pubkey, [...userMessages, message])
+    
+    // Check for duplicates by content and timestamp (backup check)
+    const isDuplicate = userMessages.some(msg => 
+      msg.content === message.content && 
+      Math.abs(msg.created_at - message.created_at) < 1
+    )
 
-    // Sort messages by timestamp
-    const sortedMessages = messages.value.get(pubkey) || []
-    sortedMessages.sort((a, b) => a.created_at - b.created_at)
-    messages.value.set(pubkey, sortedMessages)
+    if (!isDuplicate) {
+      messages.value.set(pubkey, [...userMessages, message])
+
+      // Sort messages by timestamp
+      const sortedMessages = messages.value.get(pubkey) || []
+      sortedMessages.sort((a, b) => a.created_at - b.created_at)
+      messages.value.set(pubkey, sortedMessages)
+    }
   }
 
   async function sendMessage(to: string, content: string) {
@@ -241,8 +287,9 @@ export const useNostrStore = defineStore('nostr', () => {
   }
 
   async function subscribeToMessages() {
-    if (!account.value) return
-
+    if (!account.value || hasActiveSubscription.value) return
+    
+    hasActiveSubscription.value = true
     // Cleanup existing subscription
     unsubscribeFromMessages()
 
@@ -395,6 +442,7 @@ export const useNostrStore = defineStore('nostr', () => {
       }
       currentSubscription.value = null
     }
+    hasActiveSubscription.value = false
   }
 
   async function loadProfiles() {
@@ -492,18 +540,28 @@ export const useNostrStore = defineStore('nostr', () => {
     await subscribeToMessages()
   }
 
-  // Add visibility change handler
+  // Update visibility handler
   function setupVisibilityHandler() {
-    document.addEventListener('visibilitychange', async () => {
+    const handleVisibilityChange = async () => {
       if (document.visibilityState === 'visible' && account.value) {
-        console.log('Page became visible, reconnecting...')
+        console.log('Page became visible, checking connection...')
         try {
-          await reconnectToRelays()
+          // Only reconnect if we don't have active connections
+          if (relayPool.value.length === 0 || !hasActiveSubscription.value) {
+            await reconnectToRelays()
+          }
         } catch (err) {
           console.error('Failed to reconnect:', err)
         }
       }
-    })
+    }
+
+    // Remove any existing handler
+    document.removeEventListener('visibilitychange', handleVisibilityChange)
+    document.addEventListener('visibilitychange', handleVisibilityChange)
+
+    // Add focus handler for mobile
+    window.addEventListener('focus', handleVisibilityChange)
   }
 
   return {
@@ -521,5 +579,6 @@ export const useNostrStore = defineStore('nostr', () => {
     unsubscribeFromMessages,
     loadProfiles,
     connectionStatus,
+    hasActiveSubscription,
   }
 })