UPD: Scramble title on (dis)connect

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,7 +222,14 @@ const previewDeviceNames = ref({
   nanoZero: 'Zero'
 })
 
-onMounted(() => {
+const zerooneTitle = ref(null)
+const zerooneSubtitle = ref(null)
+
+const scrambleTitle = () => {
+  zerooneTitle.value.scramble(1, 100, 0)
+  zerooneSubtitle.value.scramble(1, 75, 30)
+}
+
 window.addEventListener('resize', () => {
   zoomFactor.value = window.outerWidth / window.innerWidth
 })
@@ -239,7 +241,8 @@ onMounted(() => {
 appIpc.onUnmaximized(() => {
   isMaximized.value = false
 })
-})
+
+watch(() => deviceStore.connected, scrambleTitle)
 </script>
 <style scoped>
 .app-titlebar {

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) {