save states on ctrl W

src/modules/draggify.ts

@@ -69,7 +69,6 @@ export default function draggify(elementId: string, xStart: number,
           }, 16) // 60fps
 
         }
-
     }
 
     //---Event Handlers-----------------------------------------------
@@ -130,6 +129,12 @@ export default function draggify(elementId: string, xStart: number,
       percentX = elementX.value / winW;
       percentY = elementY.value / winH;
 
+      // Save position.
+      const position = {
+        x: elementX.value,
+        y: elementY.value
+      }
+      window.localStorage.setItem("inputItem_position", JSON.stringify(position));
     }
 
     // Update position of targetEl on windowResize.
@@ -166,9 +171,18 @@ export default function draggify(elementId: string, xStart: number,
       window.addEventListener('resize', onWindowResize, false);
     });
 
-    // Initialize the coordinants.
-    elementX.value = xStart;
-    elementY.value = yStart;
+    // Try loading initPosition, otherwise set default values
+    let initPosition: any;
+    const rawData = window.localStorage.getItem("inputItem_position")
+
+    if (rawData) {
+      initPosition = JSON.parse(rawData)
+    } else {
+      initPosition = {x: xStart, y: yStart}
+    }
+
+    elementX.value = initPosition.x;
+    elementY.value = initPosition.y;
 
     // remove event listeners on component dismount.
     onUnmounted(() => {

src/modules/messages.ts

@@ -72,6 +72,12 @@ export default function useMessages() {
     // Control the scrolling.
     const { updateScrollRef, adjustScroll } = useScroll("messenger");
 
+    // Save message to local storage.
+    const saveMessages = () => {
+        const messageData = Object.fromEntries(messages.value);
+        window.localStorage.setItem(messagesKey, JSON.stringify(messageData));
+    }
+
     // Add a new message to the view.
     const addMessage = (message: RenderMessage) => {
       updateScrollRef()
@@ -84,6 +90,7 @@ export default function useMessages() {
 
       setTimeout(adjustScroll, 20);
       updateGrouping(message.uid)
+      saveMessages()
     }
 
     // Update an existing message in the view.
@@ -96,13 +103,7 @@ export default function useMessages() {
         message.content.text = a.text
 
         setTimeout(adjustScroll, 20);
-    }
-
-    // Used in App.vue on shutdown.
-    const saveMessages = () => {
-        // de-reactivate message data before saving.
-        const messageData = Object.fromEntries(messages.value);
-        window.localStorage.setItem(messagesKey, JSON.stringify(messageData));
+        saveMessages()
     }
 
     return {