save states on ctrl W

src/App.vue

@@ -29,7 +29,6 @@
 import { defineComponent, onMounted, onUnmounted, ref } from 'vue';
 import { useIpc } from "@/modules/ipc";
 import Splash from "@/components/splash.vue"
-import useMessages from '@/modules/messages';
 
 export default defineComponent({
   components: { Splash },
@@ -43,11 +42,10 @@ export default defineComponent({
 
     // Post navbar action to backend.
     const callNavbar = (action: string) => {
-      console.log("Calling navbar")
       invoke('nav-bar', action);
     }
 
-    const onWindowReady = (_event: any, payload: any) => {
+    const onWindowReady = (_event: any, _payload: any) => {
       ready.value = true;
     }
 

src/components/inputItem/inputItem.vue

@@ -42,22 +42,9 @@ export default defineComponent({
     // Mark input item with user's initials.
     const initials = ref("")
 
-    // ---Set xStart and yStart------------------------------------
-    const cordsStr = window.localStorage.getItem("input_cords")
-
-    let cords = {x: 15, y: window.innerHeight - 200} // default values
-
-    if (cordsStr) {
-      console.log("found archived cords!")
-      cords = JSON.parse(cordsStr)
-    }
-
-    const xStart = cords.x;
-    const yStart = cords.y;
-
-    console.log(`xStart: ${xStart}`)
-    console.log(`yStart: ${yStart}`)
-    // ------------------------------------------------------------
+    // Default values for position.
+    const xStart = 15;
+    const yStart = window.innerHeight - 200;
 
     // Calculate position of inputItem on drag.
     const { elementX, elementY } = draggify("inputItem", xStart, yStart, 15);
@@ -75,17 +62,6 @@ export default defineComponent({
       window.ipcRenderer.on("update-profile", onUpdateProfile);
     }) 
 
-    const savePosition = () => {
-      const cords = JSON.stringify(
-        {
-          x: elementX.value, 
-          y: elementY.value
-        }
-      )
-      window.localStorage.setItem("input_cords", cords)
-      console.log(`Start saved: ${cords}`)
-    }
-
     onUnmounted(() => {
       window.ipcRenderer.removeAllListeners("update-profile");
     })

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 {

windowState.json

@@ -1 +1 @@
-{"w":688,"h":536,"x":1478,"y":513}
+{"w":432,"h":702,"x":1753,"y":477}