refactor(App): extract common component tree

Signed-off-by: Fernando Fernández <[email protected]>

Author: ferferga

frontend/src/App.vue

@@ -7,27 +7,17 @@
           :name="route.meta.layout.transition.enter ?? defaultTransition"
           :mode="defaultTransitionMode ?? route.meta.layout.transition.mode">
           <Suspense @resolve="apploaded = true">
-            <div
+            <AppComp
               :key="route.meta.layout.name ?? 'default'"
-              class="uno-h-full j-transition">
-              <component
-                :is="getLayoutComponent(route.meta.layout.name)"
-                :key="route.meta.layout.name ?? 'default'">
+              :comp="getLayoutComponent(route.meta.layout.name)">
                 <JTransition
                   :name="route.meta.layout.transition.enter ?? defaultTransition"
                   :mode="defaultTransitionMode ?? route.meta.layout.transition.mode">
                   <Suspense suspensible>
-                    <div
-                      :key="route.name ?? route.path"
-                      class="uno-h-full j-transition">
-                      <component
-                        :is="Component"
-                        :key="route.name ?? route.path" />
-                    </div>
+                    <AppComp :key="route.path" :comp="Component" />
                   </Suspense>
                 </JTransition>
-              </component>
-            </div>
+            </AppComp>
             <template v-if="!apploaded" #fallback>
               <JSplashscreen />
             </template>
@@ -50,6 +40,7 @@ import type { RouteMeta } from 'vue-router/auto';
 import DefaultLayout from '@/layouts/default.vue';
 import FullPageLayout from '@/layouts/fullpage.vue';
 import ServerLayout from '@/layouts/server.vue';
+import AppComp from '@/AppComp.vue';
 
 const apploaded = shallowRef(false);
 const defaultTransition = 'slide-x-reverse';

frontend/src/AppComp.vue

@@ -0,0 +1,17 @@
+<template>
+  <div
+    class="uno-h-full j-transition">
+      <component
+        :is="comp">
+        <slot />
+      </component>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { Component } from 'vue';
+
+defineProps<{
+  comp: Component;
+}>();
+</script>