save window stats on all close types

src/modules/messages.ts

@@ -2,27 +2,7 @@ import { ref } from 'vue';
 import useScroll from "@/modules/scroll";
 import { RenderMessage, Annotation } from "@/types/message/index";
 
-const messagesKey = "CRIMATA_MESSAGES";
-const sizeLimit = 200;
-
-// list of messages where the first item is the oldest message.
-const messages = ref(new Map());
-
-// Get stored messages.
-const messagesString = window.localStorage.getItem(messagesKey);
-
-if (messagesString) {
-  // parse stored messages.
-  const parsed = JSON.parse(messagesString);
-  // set messages.
-  messages.value = new Map(Object.entries(parsed));
-}
-
-// Remove oldest message from the messages map. 
-function deleteOldest() { 
-   const lastKey = Array.from(messages.value.keys()).shift();
-   messages.value.delete(lastKey);
-}
+const messages = ref(new Map()); // ze messages.
 
 //---Message Grouping-----------------------------------------------
 
@@ -70,20 +50,42 @@ const updateGrouping = (currentMessageRef: string) => {
 export default function useMessages() {
 
     // Control the scrolling.
-    const { updateScrollRef, adjustScroll } = useScroll("messenger");
+    const {
+      setScroll, 
+      updateScrollRef, 
+      adjustScroll 
+    } = useScroll("messenger");
 
     // Save message to local storage.
     const saveMessages = () => {
         const messageData = Object.fromEntries(messages.value);
-        window.localStorage.setItem(messagesKey, JSON.stringify(messageData));
+        window.localStorage.setItem("crimata_messages", JSON.stringify(messageData));
+    }
+
+    // Load messages from local storage.
+    const loadMessages = () => {
+      const rawData = window.localStorage.getItem("crimata_messages");
+
+      if (rawData) {
+        const messageData = JSON.parse(rawData)
+        messages.value = new Map(Object.entries(messageData));
+      }
+
+    }
+
+    // Remove oldest message from the messages map. 
+    function popMessage() { 
+       const lastKey = Array.from(messages.value.keys()).shift();
+       messages.value.delete(lastKey);
     }
 
     // Add a new message to the view.
     const addMessage = (message: RenderMessage) => {
       updateScrollRef()
 
-      if (messages.value.size >= sizeLimit) {
-        deleteOldest();
+      // Size limit of 200.
+      if (messages.value.size >= 200) {
+        popMessage();
       }
 
       messages.value.set(message.uid, message);
@@ -106,10 +108,15 @@ export default function useMessages() {
         saveMessages()
     }
 
+    loadMessages()
+    setTimeout(setScroll, 1000);
+    console.log("loaded messages")
+
     return {
       messages,
       saveMessages,
       addMessage,
-      updateMessage
+      updateMessage, 
+      loadMessages
     }
 }

src/modules/scroll.ts

@@ -4,6 +4,18 @@ export default function useScroll(element: string) {
 
   let isScrolledToBottom: boolean;
 
+  // Set the initial scroll position.
+  const setScroll = () => {
+    const view = document.getElementById(element)
+
+    if (view) {
+      view.scrollTo({
+        top: view.scrollHeight - view.clientHeight,
+        behavior: 'smooth'
+      });
+    }
+  }
+
   // Update isScrolledToBottom
   const updateScrollRef = () => {
     const view = document.getElementById(element)
@@ -31,7 +43,8 @@ export default function useScroll(element: string) {
 
   return {
     updateScrollRef,
-    adjustScroll
+    adjustScroll, 
+    setScroll,
   }
   
 }