fix: refresh content on reconnect

vuejs · May 31, 2024 · 52442fe · 52442fe
1 parent 2248387
commit 52442fe
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 5 deletions.
diff --git a/packages/app-frontend/src/features/App.vue b/packages/app-frontend/src/features/App.vue
@@ -37,7 +37,7 @@ export default defineComponent({
   },
 
   setup() {
-    const { isConnected, isInitializing, showDisplayDisconnected } = useAppConnection()
+    const { isConnected, isInitializing, showDisplayDisconnected, connectedTimes } = useAppConnection()
 
     function updateTheme(theme: string) {
       if (theme === 'dark' || theme === 'high-contrast' || (theme === 'auto' && chromeTheme === 'dark')) {
@@ -81,6 +81,7 @@ export default defineComponent({
       isConnected,
       isInitializing,
       showDisplayDisconnected,
+      connectedTimes,
       showAppsSelector,
       orientation,
       isChrome,
@@ -91,10 +92,9 @@ export default defineComponent({
 
 <template>
   <div
-    class="app w-full h-full flex relative outline-none"
+    class="app w-full h-full relative outline-none"
     :class="{
       'disconnected pointer-events-none': !isInitializing && !isConnected,
-      'flex-col': orientation === 'portrait',
     }"
     tabindex="0"
   >
@@ -108,7 +108,14 @@ export default defineComponent({
       class="absolute inset-0"
     />
 
-    <template v-else>
+    <div
+      v-else
+      :key="connectedTimes"
+      class="w-full h-full flex"
+      :class="{
+        'flex-col': orientation === 'portrait',
+      }"
+    >
       <AppHeader class="flex-none relative z-10 border-b border-gray-200 dark:border-gray-700" />
 
       <SplitPane
@@ -129,7 +136,7 @@ export default defineComponent({
           <router-view class="h-full overflow-auto" />
         </template>
       </SplitPane>
-    </template>
+    </div>
 
     <TeleportTarget id="root" />
 

diff --git a/packages/app-frontend/src/features/connection/index.ts b/packages/app-frontend/src/features/connection/index.ts
@@ -4,6 +4,7 @@ import { useNow } from '@vueuse/core'
 const isConnected = ref(false)
 const isInitializing = ref(true)
 const lastDisconnect = ref(0)
+const connectedTimes = ref(0)
 
 export function useAppConnection() {
   const now = useNow({
@@ -25,6 +26,7 @@ export function useAppConnection() {
     isInitializing,
     lastDisconnect,
     showDisplayDisconnected,
+    connectedTimes,
   }
 }
 
@@ -36,6 +38,9 @@ export function setAppConnected(value: boolean, force = false) {
     lastDisconnect.value = Date.now()
   }
   isConnected.value = value
+  if (value) {
+    connectedTimes.value++
+  }
 }
 
 export function setAppInitializing(value: boolean) {