add true message caching

- caches only valid message. setting also reflects this

2 files changed, 35 insertions, 21 deletions

diff --git a/src/main/index.ts b/src/main/index.ts
index 344465f..0aa3e63 100644
--- a/src/main/index.ts
+++ b/src/main/index.ts
@@ -2,16 +2,18 @@ import { app, BrowserWindow, shell, ipcMain } from 'electron'
 import { join } from 'path'
 import { electronApp, optimizer, is, platform } from '@electron-toolkit/utils'
 import { WebSocketServer, WebSocket } from 'ws'
+
 import icon from '../../resources/icon.png?asset'
 
 let mainWindow: BrowserWindow
-let store: import('electron-store').default<{ channelNicknames: Record<string, string> }>
+let store: any
 
 async function initStore(): Promise<void> {
   const Store = (await import('electron-store')).default
   store = new Store({
     defaults: {
-      channelNicknames: {}
+      channelNicknames: {},
+      maxMessages: 300
     }
   })
 }
@@ -104,7 +106,7 @@ function setupIpcHandlers(): void {
 
   // Get max messages
   ipcMain.handle('config:get-max-messages', () => {
-    return store.get('maxMessages', 300) // Default to 100 if not set
+    return store.get('maxMessages', 300) // Default to 300 if not set
   })
 
   // Set max messages
diff --git a/src/renderer/src/App.tsx b/src/renderer/src/App.tsx
index e458f89..e3ade35 100644
--- a/src/renderer/src/App.tsx
+++ b/src/renderer/src/App.tsx
@@ -10,7 +10,6 @@ function App(): React.JSX.Element {
   const [isMouseInWindow, setIsMouseInWindow] = useState(true)
   const [maxMessages, setMaxMessages] = useState<number>(300)
 
-  // Load channel nicknames and max messages on mount
   useEffect(() => {
     const loadConfig = async (): Promise<void> => {
       try {
@@ -28,16 +27,28 @@ function App(): React.JSX.Element {
   }, [])
 
   useEffect(() => {
+    setMessages((prev) => {
+      const filteredMessages = prev.filter((msg) => channelNicknames[msg.channel])
+      return filteredMessages.slice(0, maxMessages)
+    })
+  }, [maxMessages, channelNicknames])
+
+  useEffect(() => {
     const listener = (...args: unknown[]): void => {
       const data = args[0] as DiscordMessage
 
       if (data) {
         setMessages((prev) => {
+          if (!channelNicknames[data.channel]) {
+            return prev
+          }
+
           const existingMessage = prev.find((msg) => msg.id === data.id)
           if (existingMessage) {
             return prev
           }
-          return [data, ...prev.slice(0, maxMessages - 1)]
+          const newMessages = [data, ...prev]
+          return newMessages.slice(0, maxMessages)
         })
       }
     }
@@ -46,7 +57,7 @@ function App(): React.JSX.Element {
     return () => {
       window.electron.ipcRenderer.removeListener('new-discord-message', listener)
     }
-  }, [maxMessages])
+  }, [maxMessages, channelNicknames])
 
   return (
     <div
@@ -90,18 +101,14 @@ function App(): React.JSX.Element {
             )
           }
 
-          // Filter messages from configured channels and limit to 30 displayed
-          const filteredMessages = messages
-            .filter((msg) => channelNicknames[msg.channel])
-            .filter(
-              (msg) =>
-                !(
-                  (msg.content === '' || msg.content === undefined) &&
-                  !msg.sticker_id &&
-                  (!msg.attachments || msg.attachments.length === 0)
-                )
-            )
-            .slice(0, 30)
+          const filteredMessages = messages.filter(
+            (msg) =>
+              !(
+                (msg.content === '' || msg.content === undefined) &&
+                !msg.sticker_id &&
+                (!msg.attachments || msg.attachments.length === 0)
+              )
+          )
 
           if (filteredMessages.length === 0) {
             return (
@@ -127,11 +134,16 @@ function App(): React.JSX.Element {
 
       <ConfigModal
         isOpen={isConfigOpen}
-        onClose={() => {
+        onClose={async () => {
           setIsConfigOpen(false)
           // Reload config after changes
-          window.electron.config.getChannelNicknames().then(setChannelNicknames)
-          window.electron.config.getMaxMessages().then(setMaxMessages)
+          const [newNicknames, newMaxMessages] = await Promise.all([
+            window.electron.config.getChannelNicknames(),
+            window.electron.config.getMaxMessages()
+          ])
+
+          setChannelNicknames(newNicknames)
+          setMaxMessages(newMaxMessages)
         }}
       />
     </div>