[In progress] Feat: App header transition tweaks

src/popup/App.vue

@@ -14,8 +14,6 @@
         class="app-inner"
         :class="{ 'styled-scrollbar': showScrollbar }"
       >
-        <Header v-if="showHeader" />
-
         <!--
           Layer displayed under the password protection modal when content is not visible.
         -->
@@ -32,8 +30,8 @@
         <IonRouterOutlet
           v-show="showRouter"
           :animated="!RUNNING_IN_TESTS && !IS_FIREFOX"
-          :class="{ 'show-header': showHeader, ios: IS_IOS }"
-          class="main"
+          :class="{ 'has-header': showHeader, ios: IS_IOS }"
+          class="router-outlet"
         />
 
         <ConnectionStatus
@@ -103,7 +101,6 @@ import {
 } from '@/composables';
 import { useTransferSendHandler } from '@/composables/transferSendHandler';
 
-import Header from '@/popup/components/Header.vue';
 import ConnectionStatus from '@/popup/components/ConnectionStatus.vue';
 import Loader from '@/popup/components/Loader.vue';
 import QrCodeReaderMobileOverlay from '@/popup/components/QrCodeReaderMobileOverlay.vue';
@@ -113,7 +110,6 @@ import AppLogo from '@/icons/logo-small.svg?vue-component';
 export default defineComponent({
   name: 'App',
   components: {
-    Header,
     ConnectionStatus,
     QrCodeReaderMobileOverlay,
     IonApp,
@@ -324,7 +320,7 @@ export default defineComponent({
   --screen-padding-x: 16px;
   --screen-border-radius: 0;
   --screen-bg-color: #{$color-bg-app};
-  --header-height: 0;
+  --header-height: 40px;
   --gap: 12px;
 
   position: relative;
@@ -353,8 +349,7 @@ export default defineComponent({
       overflow-y: auto;
     }
 
-    .main {
-      margin-top: calc(var(--header-height) + env(safe-area-inset-top));
+    .router-outlet {
       padding-bottom: env(safe-area-inset-bottom);
       background-color: var(--screen-bg-color);
 
@@ -390,10 +385,6 @@ export default defineComponent({
       left: 0;
       width: 100%;
     }
-
-    &.show-header {
-      --header-height: 40px;
-    }
   }
 
   @include mixins.env-mobile-ios {

src/popup/animations/index.ts

@@ -1,3 +1 @@
-export * from './popIn';
-export * from './popOut';
 export * from './fade';

src/popup/components/AccountDetailsBase.vue

@@ -1,87 +1,88 @@
 <template>
-  <div
-    class="account-details"
-    :data-account-address="activeAccount.address"
-  >
-    <div class="account-info-wrapper">
-      <slot
-        v-if="$slots['account-info']"
-        name="account-info"
-      />
-      <AccountInfo
-        v-else
-        :account="activeAccount"
-        can-copy-address
-        show-protocol-icon
-      />
-      <BtnClose
-        data-cy="btn-close"
-        class="close-button"
-        @click="close"
-      />
-    </div>
-    <div>
-      <slot
-        v-if="$slots.balance"
-        name="balance"
-      />
-      <BalanceInfo
-        v-else
-        :balance="balanceNumeric"
-        :protocol="activeAccount.protocol"
-        horizontal-offline-message
-      />
-
-      <HorizontalScroll
-        ref="buttonsScrollContainer"
-        class="buttons"
-      >
-        <template v-if="!withoutDefaultButtons">
-          <OpenTransferReceiveModalBtn />
-          <OpenTransferSendModalBtn />
-          <OpenShareAddressModalBtn
-            :address="activeAccount.address"
-            :protocol="activeAccount.protocol"
-          />
-          <BtnBox
-            :text="$t('common.key')"
-            :icon="PrivateKeyIcon"
-            data-cy="export-private-key"
-            @click="exportPrivateKey()"
+  <PageWrapper hide-header>
+    <div
+      class="account-details-base"
+      :data-account-address="activeAccount.address"
+    >
+      <div class="account-info-wrapper">
+        <slot name="account-info">
+          <AccountInfo
+            :account="activeAccount"
+            can-copy-address
+            show-protocol-icon
           />
-        </template>
-        <slot
-          v-if="$slots.buttons"
-          name="buttons"
-        />
-      </HorizontalScroll>
-
-      <div
-        ref="headerEl"
-        class="header"
-      >
-        <slot name="navigation" />
-
-        <TransactionAndTokenFilter
-          :key="routeName!"
-          :show-all-filter-options="activeAccount.protocol === PROTOCOLS.aeternity"
-          :show-filters="isScrollEnabled"
+        </slot>
+
+        <BtnClose
+          data-cy="btn-close"
+          class="close-button"
+          @click="close"
         />
       </div>
 
-      <div
-        class="tabs-content"
-        :style="{ height: routerHeight || `${INITIAL_TABS_HEIGHT}px` }"
-      >
-        <!-- We are disabling animations on FF because of a bug that causes flickering
-          see: https://github.com/ionic-team/ionic-framework/issues/26620 -->
-        <IonRouterOutlet
-          :animated="!IS_FIREFOX"
-          :animation="fadeAnimation"
+      <div>
+        <slot
+          v-if="$slots.balance"
+          name="balance"
+        />
+        <BalanceInfo
+          v-else
+          :balance="balanceNumeric"
+          :protocol="activeAccount.protocol"
+          horizontal-offline-message
         />
+
+        <HorizontalScroll
+          ref="buttonsScrollContainer"
+          class="buttons"
+        >
+          <template v-if="!withoutDefaultButtons">
+            <OpenTransferReceiveModalBtn />
+            <OpenTransferSendModalBtn />
+            <OpenShareAddressModalBtn
+              :address="activeAccount.address"
+              :protocol="activeAccount.protocol"
+            />
+            <BtnBox
+              :text="$t('common.key')"
+              :icon="PrivateKeyIcon"
+              data-cy="export-private-key"
+              @click="exportPrivateKey()"
+            />
+          </template>
+          <slot
+            v-if="$slots.buttons"
+            name="buttons"
+          />
+        </HorizontalScroll>
+
+        <div
+          ref="headerEl"
+          class="header"
+        >
+          <slot name="navigation" />
+
+          <TransactionAndTokenFilter
+            :key="routeName!"
+            :show-all-filter-options="activeAccount.protocol === PROTOCOLS.aeternity"
+            :show-filters="isScrollEnabled"
+          />
+        </div>
+
+        <div
+          class="tabs-content"
+          :style="{ height: routerHeight || `${INITIAL_TABS_HEIGHT}px` }"
+        >
+          <!-- We are disabling animations on FF because of a bug that causes flickering
+            see: https://github.com/ionic-team/ionic-framework/issues/26620 -->
+          <IonRouterOutlet
+            :animated="!IS_FIREFOX"
+            :animation="fadeAnimation"
+          />
+        </div>
       </div>
     </div>
-  </div>
+  </PageWrapper>
 </template>
 
 <script lang="ts">
@@ -109,8 +110,9 @@ import {
   useUi,
   useScrollConfig,
 } from '@/composables';
-import { popOutAnimation, fadeAnimation } from '@/popup/animations';
+import { fadeAnimation } from '@/popup/animations';
 
+import PageWrapper from '@/popup/components//PageWrapper.vue';
 import OpenTransferSendModalBtn from '@/popup/components/OpenTransferSendModalBtn.vue';
 import BalanceInfo from '@/popup/components/BalanceInfo.vue';
 import AccountInfo from '@/popup/components/AccountInfo.vue';
@@ -128,6 +130,7 @@ const INITIAL_TABS_HEIGHT = 330;
 export default defineComponent({
   name: 'AccountDetailsBase',
   components: {
+    PageWrapper,
     AccountInfo,
     BalanceInfo,
     BtnBox,
@@ -154,7 +157,7 @@ export default defineComponent({
 
     const routerHeight = ref<string>();
     const headerEl = ref<HTMLDivElement>();
-    const resizeObserver = ref<ResizeObserver>();
+    let resizeObserver: ResizeObserver;
 
     const balanceNumeric = computed(() => balance.value.toNumber());
     const routeName = computed(() => route.name);
@@ -171,16 +174,20 @@ export default defineComponent({
     }
 
     function close() {
-      ionRouter.navigate({ name: homeRouteName.value }, 'back', 'push', popOutAnimation);
+      // Used to prevent animating the dashboard when switching the route
+      ionRouter.navigate({ name: homeRouteName.value }, 'back', 'push');
     }
 
     /**
      * Observe tab height changes and recalculate router height.
      * Tabs change height when filters are shown/hidden
      */
     function observeTabsHeight() {
-      resizeObserver.value = new ResizeObserver(calculateRouterHeight);
-      resizeObserver.value.observe(headerEl.value!);
+      console.log('observeTabsHeight', headerEl.value);
+      if (headerEl.value) {
+        resizeObserver = new ResizeObserver(calculateRouterHeight);
+        resizeObserver.observe(headerEl.value!);
+      }
     }
 
     onMounted(() => {
@@ -198,7 +205,7 @@ export default defineComponent({
     });
 
     onBeforeUnmount(() => {
-      resizeObserver.value?.disconnect();
+      resizeObserver?.disconnect();
       if (IS_MOBILE_APP) {
         StatusBar.setBackgroundColor({
           color: '#141414',
@@ -230,20 +237,16 @@ export default defineComponent({
 @use '@/styles/variables' as *;
 @use '@/styles/mixins';
 
-.account-details {
+.account-details-base {
   --account-info-height: 120px;
   --screen-padding-x: 12px;
   --screen-bg-color: #{$color-bg-modal};
   --header-height: 64px;
 
-  position: relative;
-  top: env(safe-area-inset-top);
   background-color: $color-bg-4;
-  border-radius: $border-radius-app;
   min-height: 100%;
   height: 100%;
   color: $color-white;
-  box-shadow: 0 0 0 1px $color-border, 0 0 50px rgba($color-black, 0.6);
 
   @include mixins.mobile {
     min-height: 100vh;
@@ -287,7 +290,6 @@ export default defineComponent({
         min-width: 84px;
       }
     }
-
   }
 
   .header {