make max messages kept configurable

2 files changed, 56 insertions, 6 deletions

diff --git a/src/renderer/src/App.tsx b/src/renderer/src/App.tsx
index bbd949d..2297060 100644
--- a/src/renderer/src/App.tsx
+++ b/src/renderer/src/App.tsx
@@ -8,19 +8,23 @@ function App(): React.JSX.Element {
   const [channelNicknames, setChannelNicknames] = useState<Record<string, string>>({})
   const [isConfigOpen, setIsConfigOpen] = useState(false)
   const [isMouseInWindow, setIsMouseInWindow] = useState(true)
+  const [maxMessages, setMaxMessages] = useState<number>(300)
 
-  // Load channel nicknames on mount
+  // Load channel nicknames and max messages on mount
   useEffect(() => {
-    const loadChannelNicknames = async (): Promise<void> => {
+    const loadConfig = async (): Promise<void> => {
       try {
         const nicknames = await window.electron.config.getChannelNicknames()
         setChannelNicknames(nicknames)
+
+        const maxMsgs = await window.electron.config.getMaxMessages()
+        setMaxMessages(maxMsgs)
       } catch (error) {
-        console.error('Failed to load channel nicknames:', error)
+        console.error('Failed to load config:', error)
       }
     }
 
-    loadChannelNicknames()
+    loadConfig()
   }, [])
 
   useEffect(() => {
@@ -33,7 +37,7 @@ function App(): React.JSX.Element {
           if (existingMessage) {
             return prev
           }
-          return [data, ...prev.slice(0, 300)]
+          return [data, ...prev.slice(0, maxMessages - 1)]
         })
       }
     }
@@ -125,8 +129,9 @@ function App(): React.JSX.Element {
         isOpen={isConfigOpen}
         onClose={() => {
           setIsConfigOpen(false)
-          // Reload channel nicknames after config changes
+          // Reload config after changes
           window.electron.config.getChannelNicknames().then(setChannelNicknames)
+          window.electron.config.getMaxMessages().then(setMaxMessages)
         }}
       />
     </div>
diff --git a/src/renderer/src/components/ConfigModal.tsx b/src/renderer/src/components/ConfigModal.tsx
index f927045..7f5e3e8 100644
--- a/src/renderer/src/components/ConfigModal.tsx
+++ b/src/renderer/src/components/ConfigModal.tsx
@@ -18,10 +18,13 @@ export default function ConfigModal({
   const [newChannelId, setNewChannelId] = useState('')
   const [newNickname, setNewNickname] = useState('')
   const [isLoading, setIsLoading] = useState(false)
+  const [maxMessages, setMaxMessages] = useState<number>(300)
+  const [tempMaxMessages, setTempMaxMessages] = useState<number>(300)
 
   useEffect(() => {
     if (isOpen) {
       loadChannels()
+      loadMaxMessages()
     }
   }, [isOpen])
 
@@ -34,6 +37,25 @@ export default function ConfigModal({
     }
   }
 
+  const loadMaxMessages = async (): Promise<void> => {
+    try {
+      const maxMsgs = await window.electron.config.getMaxMessages()
+      setMaxMessages(maxMsgs)
+      setTempMaxMessages(maxMsgs)
+    } catch (error) {
+      console.error('Failed to load max messages:', error)
+    }
+  }
+
+  const handleSaveMaxMessages = async (): Promise<void> => {
+    try {
+      await window.electron.config.setMaxMessages(tempMaxMessages)
+      setMaxMessages(tempMaxMessages)
+    } catch (error) {
+      console.error('Failed to save max messages:', error)
+    }
+  }
+
   const handleAddChannel = async (): Promise<void> => {
     if (!newChannelId.trim() || !newNickname.trim()) {
       return
@@ -82,6 +104,29 @@ export default function ConfigModal({
         </div>
 
         <div className="modal-body">
+          <div className="max-messages-section">
+            <h3>Message Limit</h3>
+            <div className="input-group">
+              <label>Maximum messages to keep in memory:</label>
+              <input
+                type="number"
+                min="10"
+                max="1000"
+                value={tempMaxMessages}
+                onChange={(e) => setTempMaxMessages(parseInt(e.target.value) || 300)}
+              />
+              <button
+                onClick={handleSaveMaxMessages}
+                disabled={tempMaxMessages === maxMessages}
+              >
+                Save
+              </button>
+            </div>
+            <p className="help-text">
+              Current: {maxMessages} messages. Higher values use more memory but keep more message history.
+            </p>
+          </div>
+
           <div className="add-channel-section">
             <h3>Add Channel</h3>
             <div className="input-group">