From bf286606d036c4470f94dc5cda5df2b6d629c87f Mon Sep 17 00:00:00 2001
From: Robert Kossessa <github@kosro.de>
Date: Wed, 13 Mar 2024 20:43:22 +0100
Subject: [PATCH] UPD: Scramble title on (dis)connect

---
 src/renderer/src/components/navbar/Navbar.vue | 39 ++++++++++---------
 src/renderer/src/deviceStore.ts               |  2 +-
 2 files changed, 22 insertions(+), 19 deletions(-)

diff --git a/src/renderer/src/components/navbar/Navbar.vue b/src/renderer/src/components/navbar/Navbar.vue
index bb5f2b1..5b2e298 100644
--- a/src/renderer/src/components/navbar/Navbar.vue
+++ b/src/renderer/src/components/navbar/Navbar.vue
@@ -7,12 +7,7 @@
       <div class="flex items-center">
         <h1
           class="app-titlebar-button min-w-32 text-nowrap text-2xl text-zinc-100"
-          @click="
-            () => {
-              $refs.zerooneTitle.scramble(1, 100, 0)
-              $refs.zerooneSubtitle.scramble(1, 75, 30)
-            }
-          "
+          @click="scrambleTitle"
         >
           <ScrambleText
             ref="zerooneTitle"
@@ -200,7 +195,7 @@ import {
 } from '@renderer/components/ui/menubar'
 import ScrambleText from '@renderer/components/common/ScrambleText.vue'
 import { Minus, Square, Copy, X, PenLine } from 'lucide-vue-next'
-import { onMounted, ref } from 'vue'
+import { ref, watch } from 'vue'
 import { Separator } from '@renderer/components/ui/separator'
 import MenubarButton from '@renderer/components/navbar/MenubarButton.vue'
 import { useAppStore } from '@renderer/appStore'
@@ -227,19 +222,27 @@ const previewDeviceNames = ref({
   nanoZero: 'Zero'
 })
 
-onMounted(() => {
-  window.addEventListener('resize', () => {
-    zoomFactor.value = window.outerWidth / window.innerWidth
-  })
-  appIpc.onMaximized((maximized) => {
-    console.log(maximized)
-    isMaximized.value = true
-  })
+const zerooneTitle = ref(null)
+const zerooneSubtitle = ref(null)
 
-  appIpc.onUnmaximized(() => {
-    isMaximized.value = false
-  })
+const scrambleTitle = () => {
+  zerooneTitle.value.scramble(1, 100, 0)
+  zerooneSubtitle.value.scramble(1, 75, 30)
+}
+
+window.addEventListener('resize', () => {
+  zoomFactor.value = window.outerWidth / window.innerWidth
 })
+appIpc.onMaximized((maximized) => {
+  console.log(maximized)
+  isMaximized.value = true
+})
+
+appIpc.onUnmaximized(() => {
+  isMaximized.value = false
+})
+
+watch(() => deviceStore.connected, scrambleTitle)
 </script>
 <style scoped>
 .app-titlebar {
diff --git a/src/renderer/src/deviceStore.ts b/src/renderer/src/deviceStore.ts
index 01eec61..98b492f 100644
--- a/src/renderer/src/deviceStore.ts
+++ b/src/renderer/src/deviceStore.ts
@@ -241,7 +241,7 @@ export const initializeDevices = () => {
         try {
           update = JSON.parse(dataString) as UpdateData
         } catch (e) {
-          console.error(e)
+          console.error('Failed to parse update data:', e, dataString)
         }
       }
       if (update.a !== undefined) {