FIX - clean up CEF sheet ownership and preview lifecycle

frontend/src/App.vue

@@ -1192,7 +1192,13 @@ onMounted(() => {
 watch(
   () => route.params.appId,
   (appId) => {
-    if (typeof appId === 'string' && isPhoneAppId(appId)) {
+    if (
+      phone.isOpen &&
+      phone.device?.imei &&
+      appStore.hydrated &&
+      typeof appId === 'string' &&
+      isPhoneAppId(appId)
+    ) {
       appStore.recordLaunch(appId)
     }
   },

frontend/src/components/WidgetConfigSheet.vue

@@ -69,12 +69,12 @@ watch(
 </script>
 
 <template>
-  <k-sheet
-    :opened="opened"
-    class="widget-config-sheet"
-    :colors="sheetColors"
-    @backdropclick="emit('close')"
-  >
+  <div class="widget-config-sheet">
+    <k-sheet
+      :opened="opened"
+      :colors="sheetColors"
+      @backdropclick="emit('close')"
+    >
     <k-page
       v-if="instance"
       class="widget-config-page"
@@ -183,11 +183,12 @@ watch(
         </section>
       </div>
     </k-page>
-  </k-sheet>
+    </k-sheet>
+  </div>
 </template>
 
 <style scoped>
-:global(.widget-config-sheet) {
+.widget-config-sheet :deep(.k-sheet) {
   z-index: 115;
   height: calc(100% - 22px);
   overflow: hidden;

frontend/src/components/WidgetPickerSheet.vue

@@ -117,12 +117,12 @@ watch(
 </script>
 
 <template>
-  <k-sheet
-    :opened="opened"
-    class="widget-picker-sheet"
-    :colors="sheetColors"
-    @backdropclick="emit('close')"
-  >
+  <div class="widget-picker-sheet">
+    <k-sheet
+      :opened="opened"
+      :colors="sheetColors"
+      @backdropclick="emit('close')"
+    >
     <k-page
       class="widget-picker-page"
       :class="{ 'widget-picker-page--dark': phone.isDarkMode }"
@@ -206,11 +206,12 @@ watch(
         </p>
       </div>
     </k-page>
-  </k-sheet>
+    </k-sheet>
+  </div>
 </template>
 
 <style scoped>
-:global(.widget-picker-sheet) {
+.widget-picker-sheet :deep(.k-sheet) {
   z-index: 110;
   height: calc(100% - 22px);
   overflow: hidden;

frontend/src/views/SpringboardView.vue

@@ -1026,49 +1026,50 @@ watch(isEditablePage, (visible) => {
       </k-button>
     </nav>
 
-    <k-sheet
-      :opened="widgetActionId !== null"
-      class="widget-action-sheet"
-      @backdropclick="widgetActionId = null"
-    >
-      <div class="widget-sheet-handle" />
-      <h3>
-        {{
-          activeWidget
-            ? phone.t(`Home.widgetSystem.${activeWidget.kind}.name`)
-            : phone.t('Home.widgets.label')
-        }}
-      </h3>
-      <k-list inset strong class="widget-action-list">
-        <k-list-item
-          link
-          link-component="button"
-          content-class="w-full"
-          :title="phone.t('Home.widgetSystem.editWidget')"
-          @click="openWidgetConfig"
-        >
-          <template #media><Pencil :size="20" /></template>
-        </k-list-item>
-        <k-list-item
-          link
-          link-component="button"
-          content-class="w-full"
-          class="widget-action-remove"
-          :title="phone.t('Home.widgetSystem.removeWidget')"
-          @click="activeWidget && removeWidget(activeWidget.id)"
-        >
-          <template #media><Trash2 :size="20" /></template>
-        </k-list-item>
-      </k-list>
-      <k-button
-        large
-        rounded
-        class="widget-action-cancel"
-        @click="widgetActionId = null"
+    <div class="widget-action-sheet">
+      <k-sheet
+        :opened="widgetActionId !== null"
+        @backdropclick="widgetActionId = null"
       >
-        {{ phone.t('Common.cancel') }}
-      </k-button>
-    </k-sheet>
+        <div class="widget-sheet-handle" />
+        <h3>
+          {{
+            activeWidget
+              ? phone.t(`Home.widgetSystem.${activeWidget.kind}.name`)
+              : phone.t('Home.widgets.label')
+          }}
+        </h3>
+        <k-list inset strong class="widget-action-list">
+          <k-list-item
+            link
+            link-component="button"
+            content-class="w-full"
+            :title="phone.t('Home.widgetSystem.editWidget')"
+            @click="openWidgetConfig"
+          >
+            <template #media><Pencil :size="20" /></template>
+          </k-list-item>
+          <k-list-item
+            link
+            link-component="button"
+            content-class="w-full"
+            class="widget-action-remove"
+            :title="phone.t('Home.widgetSystem.removeWidget')"
+            @click="activeWidget && removeWidget(activeWidget.id)"
+          >
+            <template #media><Trash2 :size="20" /></template>
+          </k-list-item>
+        </k-list>
+        <k-button
+          large
+          rounded
+          class="widget-action-cancel"
+          @click="widgetActionId = null"
+        >
+          {{ phone.t('Common.cancel') }}
+        </k-button>
+      </k-sheet>
+    </div>
 
     <WidgetPickerSheet
       :opened="widgetPickerOpened"
@@ -1085,7 +1086,11 @@ watch(isEditablePage, (visible) => {
 </template>
 
 <style scoped>
-:global(.widget-action-sheet) {
+.widget-action-sheet {
+  display: contents;
+}
+
+.widget-action-sheet :deep(.k-sheet) {
   z-index: 105;
   padding: 9px 0 30px;
   border-radius: 25px 25px 0 0;

frontend/src/views/apps/CompaniesApp.vue

@@ -2167,11 +2167,11 @@ onBeforeUnmount(() => {
       </k-toolbar-pane>
     </k-tabbar>
 
-    <k-sheet
-      :opened="requestSheetOpened"
-      class="companies-sheet"
-      @backdropclick="requestSheetOpened = false"
-    >
+    <div class="companies-sheet">
+      <k-sheet
+        :opened="requestSheetOpened"
+        @backdropclick="requestSheetOpened = false"
+      >
       <section
         v-if="requestSheetOpened && activeCompany"
         ref="requestSheetContent"
@@ -2312,7 +2312,8 @@ onBeforeUnmount(() => {
           <span v-else>{{ phone.t('Apps.companies.composer.send') }}</span>
         </k-button>
       </section>
-    </k-sheet>
+      </k-sheet>
+    </div>
 
     <k-actions
       v-if="workActionsOpened"
@@ -2357,11 +2358,11 @@ onBeforeUnmount(() => {
       </k-actions-group>
     </k-actions>
 
-    <k-sheet
-      :opened="assignmentSheetOpened"
-      class="companies-sheet companies-assignment-sheet"
-      @backdropclick="assignmentSheetOpened = false"
-    >
+    <div class="companies-sheet companies-assignment-sheet">
+      <k-sheet
+        :opened="assignmentSheetOpened"
+        @backdropclick="assignmentSheetOpened = false"
+      >
       <section
         v-if="assignmentSheetOpened"
         class="companies-sheet__content"
@@ -2422,7 +2423,8 @@ onBeforeUnmount(() => {
           {{ phone.t('Apps.companies.assignment.confirm') }}
         </k-button>
       </section>
-    </k-sheet>
+      </k-sheet>
+    </div>
 
     <k-dialog
       :opened="cancelDialogOpened"
@@ -3144,7 +3146,7 @@ onBeforeUnmount(() => {
   background: var(--company-red);
 }
 
-.companies-sheet :deep(> div:last-child) {
+.companies-sheet :deep(.k-sheet) {
   max-height: 88%;
   border-radius: 24px 24px 0 0;
   overflow: hidden;

frontend/src/views/apps/DarkChatApp.vue

@@ -1789,7 +1789,7 @@ onBeforeUnmount(() => {
   background: rgb(255 255 255 / 8%);
 }
 
-.dc-action-sheet {
+.dc-action-sheet :deep(.k-sheet) {
   max-height: 72%;
   padding: 7px 0 32px;
   overflow-y: auto;
@@ -1798,7 +1798,7 @@ onBeforeUnmount(() => {
   background: #111113;
 }
 
-.dc-selection-sheet {
+.dc-selection-sheet :deep(.k-sheet) {
   z-index: 1300;
   padding-top: 9px;
 }
@@ -2852,12 +2852,12 @@ onBeforeUnmount(() => {
       >
     </k-dialog>
 
-    <k-sheet
-      :opened="Boolean(selectedMessage)"
-      class="dc-action-sheet"
-      :colors="darkSheetColors"
-      @backdropclick="selectedMessage = null"
-    >
+    <div class="dc-action-sheet">
+      <k-sheet
+        :opened="Boolean(selectedMessage)"
+        :colors="darkSheetColors"
+        @backdropclick="selectedMessage = null"
+      >
       <template v-if="selectedMessage">
         <div class="dc-sheet-handle" />
         <div class="dc-reaction-row">
@@ -2935,7 +2935,8 @@ onBeforeUnmount(() => {
           >{{ phone.t('Common.cancel') }}</k-button
         >
       </template>
-    </k-sheet>
+      </k-sheet>
+    </div>
 
     <k-dialog
       :opened="reportOpen"
@@ -2982,12 +2983,12 @@ onBeforeUnmount(() => {
       >
     </k-dialog>
 
-    <k-sheet
-      :opened="selectionSheet !== null"
-      class="dc-action-sheet dc-selection-sheet"
-      :colors="darkSheetColors"
-      @backdropclick="selectionSheet = null"
-    >
+    <div class="dc-action-sheet dc-selection-sheet">
+      <k-sheet
+        :opened="selectionSheet !== null"
+        :colors="darkSheetColors"
+        @backdropclick="selectionSheet = null"
+      >
       <div class="dc-sheet-handle" />
       <h3>{{ selectionTitle }}</h3>
       <k-list inset strong class="dc-action-list dc-selection-list">
@@ -3015,7 +3016,8 @@ onBeforeUnmount(() => {
         @click="selectionSheet = null"
         >{{ phone.t('Common.cancel') }}</k-button
       >
-    </k-sheet>
+      </k-sheet>
+    </div>
     <k-toast :opened="Boolean(toast)" position="center" class="dc-toast">{{
       toast
     }}</k-toast>

frontend/src/views/apps/FlareApp.vue

@@ -1848,11 +1848,8 @@ onBeforeUnmount(() => {
       </div>
     </div>
 
-    <k-sheet
-      :opened="choiceOpened"
-      class="flare-choice-sheet"
-      @backdropclick="closeChoice"
-    >
+    <div class="flare-choice-sheet">
+      <k-sheet :opened="choiceOpened" @backdropclick="closeChoice">
       <section
         id="flare-choice-sheet"
         ref="choiceSheetContent"
@@ -1911,7 +1908,8 @@ onBeforeUnmount(() => {
           </k-list-item>
         </k-list>
       </section>
-    </k-sheet>
+      </k-sheet>
+    </div>
 
     <k-dialog :opened="unmatchDialog" @backdropclick="unmatchDialog = false">
       <template #title>{{ phone.t('Apps.flare.unmatchTitle') }}</template>
@@ -2855,7 +2853,7 @@ onBeforeUnmount(() => {
   line-height: 1.45;
 }
 
-:global(.flare-choice-sheet) {
+.flare-choice-sheet :deep(.k-sheet) {
   z-index: 70;
   max-height: min(62%, 420px);
   overflow-y: auto !important;

frontend/src/views/apps/FlipTokApp.vue

@@ -1630,13 +1630,12 @@ onBeforeUnmount(() => {
       </div>
     </div>
 
-    <k-sheet
-      v-if="commentsOpen"
-      :opened="commentsOpen"
-      class="fliptok-sheet"
-      :colors="darkSheetColors"
-      @backdropclick="commentsOpen = false"
-    >
+    <div v-if="commentsOpen" class="fliptok-sheet">
+      <k-sheet
+        :opened="commentsOpen"
+        :colors="darkSheetColors"
+        @backdropclick="commentsOpen = false"
+      >
       <div class="sheet-handle" />
       <div class="comments-sheet">
         <header>
@@ -1698,15 +1697,15 @@ onBeforeUnmount(() => {
           </template>
         </k-messagebar>
       </div>
-    </k-sheet>
+      </k-sheet>
+    </div>
 
-    <k-sheet
-      v-if="actionsOpen"
-      :opened="actionsOpen"
-      class="fliptok-sheet"
-      :colors="darkSheetColors"
-      @backdropclick="actionsOpen = false"
-      ><div class="sheet-handle" />
+    <div v-if="actionsOpen" class="fliptok-sheet">
+      <k-sheet
+        :opened="actionsOpen"
+        :colors="darkSheetColors"
+        @backdropclick="actionsOpen = false"
+        ><div class="sheet-handle" />
       <div class="action-sheet">
         <k-list inset strong
           ><k-list-item
@@ -1724,15 +1723,15 @@ onBeforeUnmount(() => {
         ><k-button large rounded tonal @click="actionsOpen = false">{{
           t('cancel')
         }}</k-button>
-      </div></k-sheet
-    >
-    <k-sheet
-      v-if="reportSheetOpen"
-      :opened="reportSheetOpen"
-      class="fliptok-sheet"
-      :colors="darkSheetColors"
-      @backdropclick="reportSheetOpen = false"
-    >
+        </div></k-sheet
+      >
+    </div>
+    <div v-if="reportSheetOpen" class="fliptok-sheet">
+      <k-sheet
+        :opened="reportSheetOpen"
+        :colors="darkSheetColors"
+        @backdropclick="reportSheetOpen = false"
+      >
       <div class="sheet-handle" />
       <div class="selection-sheet report-sheet">
         <h3>{{ t('report') }}</h3>
@@ -1770,14 +1769,14 @@ onBeforeUnmount(() => {
           t('cancel')
         }}</k-button>
       </div>
-    </k-sheet>
-    <k-sheet
-      v-if="musicSheetOpen"
-      :opened="musicSheetOpen"
-      class="fliptok-sheet"
-      :colors="darkSheetColors"
-      @backdropclick="musicSheetOpen = false"
-    >
+      </k-sheet>
+    </div>
+    <div v-if="musicSheetOpen" class="fliptok-sheet">
+      <k-sheet
+        :opened="musicSheetOpen"
+        :colors="darkSheetColors"
+        @backdropclick="musicSheetOpen = false"
+      >
       <div class="sheet-handle" />
       <div class="selection-sheet">
         <h3>{{ t('chooseSound') }}</h3>
@@ -1820,14 +1819,14 @@ onBeforeUnmount(() => {
           t('cancel')
         }}</k-button>
       </div>
-    </k-sheet>
-    <k-sheet
-      v-if="visibilitySheetOpen"
-      :opened="visibilitySheetOpen"
-      class="fliptok-sheet"
-      :colors="darkSheetColors"
-      @backdropclick="visibilitySheetOpen = false"
-      ><div class="sheet-handle" />
+      </k-sheet>
+    </div>
+    <div v-if="visibilitySheetOpen" class="fliptok-sheet">
+      <k-sheet
+        :opened="visibilitySheetOpen"
+        :colors="darkSheetColors"
+        @backdropclick="visibilitySheetOpen = false"
+        ><div class="sheet-handle" />
       <div class="selection-sheet">
         <h3>{{ t('whoCanWatch') }}</h3>
         <k-list inset strong
@@ -1853,15 +1852,15 @@ onBeforeUnmount(() => {
         ><k-button large rounded tonal @click="visibilitySheetOpen = false">{{
           t('cancel')
         }}</k-button>
-      </div></k-sheet
-    >
-    <k-sheet
-      v-if="accountTypeSheetOpen"
-      :opened="accountTypeSheetOpen"
-      class="fliptok-sheet"
-      :colors="darkSheetColors"
-      @backdropclick="accountTypeSheetOpen = false"
-      ><div class="sheet-handle" />
+        </div></k-sheet
+      >
+    </div>
+    <div v-if="accountTypeSheetOpen" class="fliptok-sheet">
+      <k-sheet
+        :opened="accountTypeSheetOpen"
+        :colors="darkSheetColors"
+        @backdropclick="accountTypeSheetOpen = false"
+        ><div class="sheet-handle" />
       <div class="selection-sheet">
         <h3>{{ t('accountType') }}</h3>
         <k-list inset strong
@@ -1881,8 +1880,9 @@ onBeforeUnmount(() => {
         ><k-button large rounded tonal @click="accountTypeSheetOpen = false">{{
           t('cancel')
         }}</k-button>
-      </div></k-sheet
-    >
+        </div></k-sheet
+      >
+    </div>
     <k-dialog
       :opened="logoutDialogOpen"
       @backdropclick="!logoutSubmitting && (logoutDialogOpen = false)"
@@ -2720,7 +2720,7 @@ onBeforeUnmount(() => {
 .done-button {
   font-weight: 650;
 }
-.fliptok-sheet {
+.fliptok-sheet :deep(.k-sheet) {
   color: #f5f5f7;
 }
 .sheet-handle {

frontend/src/views/apps/GarageApp.vue

@@ -395,11 +395,11 @@ onBeforeUnmount(() => {
       </p>
     </div>
 
-    <k-sheet
-      :opened="Boolean(selectedVehicle)"
-      class="garage-sheet"
-      @backdropclick="selectedVehicle = null"
-    >
+    <div class="garage-sheet">
+      <k-sheet
+        :opened="Boolean(selectedVehicle)"
+        @backdropclick="selectedVehicle = null"
+      >
       <section v-if="selectedVehicle" class="garage-detail">
         <k-link
           component="button"
@@ -499,7 +499,8 @@ onBeforeUnmount(() => {
           <Share2 :size="18" />{{ phone.t('Apps.easyShare.share') }}
         </k-button>
       </section>
-    </k-sheet>
+      </k-sheet>
+    </div>
     <k-dialog
       :opened="Boolean(valetCandidate)"
       class="garage-valet-confirm"

frontend/src/views/apps/MapApp.vue

@@ -633,11 +633,11 @@ onBeforeUnmount(() => {
       </div>
     </section>
 
-    <k-sheet
-      :opened="Boolean(draftCoords || selectedMarker)"
-      class="map-marker-sheet"
-      @backdropclick="closeMarkerSheet"
-    >
+    <div class="map-marker-sheet">
+      <k-sheet
+        :opened="Boolean(draftCoords || selectedMarker)"
+        @backdropclick="closeMarkerSheet"
+      >
       <section
         v-if="draftCoords"
         class="map-marker-sheet__content"
@@ -740,7 +740,8 @@ onBeforeUnmount(() => {
           </template>
         </k-button>
       </section>
-    </k-sheet>
+      </k-sheet>
+    </div>
 
     <k-toast :opened="Boolean(toastText)" position="center">
       {{ toastText }}

frontend/src/views/apps/PhoneApp.vue

@@ -1456,11 +1456,11 @@ onBeforeUnmount(() => {
     </template>
   </k-page>
 
-  <k-sheet
-    :opened="editorOpened"
-    class="phone-contact-editor-sheet"
-    @backdropclick="editorOpened = false"
-  >
+  <div class="phone-contact-editor-sheet">
+    <k-sheet
+      :opened="editorOpened"
+      @backdropclick="editorOpened = false"
+    >
     <section
       class="phone-contact-editor"
       :class="{ 'phone-contact-editor--light': !phone.isDarkMode }"
@@ -1629,7 +1629,8 @@ onBeforeUnmount(() => {
         </k-button>
       </div>
     </section>
-  </k-sheet>
+    </k-sheet>
+  </div>
 
   <k-dialog
     :opened="blockDialogOpened"
@@ -3310,7 +3311,7 @@ onBeforeUnmount(() => {
   color: rgba(255, 255, 255, 0.62);
 }
 
-.phone-contact-editor-sheet {
+.phone-contact-editor-sheet :deep(.k-sheet) {
   width: 100%;
   height: calc(100% - 52px);
   max-height: calc(100% - 52px);