Added: Dashboard view footer and base structure

web-app/packages/app/src/App.vue

@@ -27,7 +27,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
         'col-12',
         'min-h-full',
         'overflow-auto',
-        drawer && !isOverlay && 'xl:col-offset-2 xl:col-10',
+        drawer && !isOverlay && 'xl:col-offset-2 xl:col-10'
       ]"
     >
       <router-view name="header" v-slot="{ Component, route }">
@@ -50,11 +50,9 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
           >
         </v-card-text>
       </v-card>
-      <router-view class="page" v-slot="{ Component, route }">
+      <router-view v-slot="{ Component, route }">
         <transition name="fade">
-          <div :key="route.name">
-            <component :is="Component" />
-          </div>
+          <component :is="Component" />
         </transition>
       </router-view>
     </main>
@@ -75,15 +73,22 @@ import {
   useInstanceStore,
   useLayoutStore,
   useNotificationStore,
-  useUserStore
+  useUserStore,
+  AppContainer
 } from '@mergin/lib'
 import { mapActions, mapState } from 'pinia'
 import { defineComponent } from 'vue'
 import { useMeta } from 'vue-meta'
 
 export default defineComponent({
   name: 'app',
-  components: { UploadProgress, Notifications, DialogWindows, GlobalWarning },
+  components: {
+    UploadProgress,
+    Notifications,
+    DialogWindows,
+    GlobalWarning,
+    AppContainer
+  },
   computed: {
     ...mapState(useInstanceStore, ['pingData']),
     ...mapState(useAppStore, ['serverError']),
@@ -161,7 +166,6 @@ export default defineComponent({
 </script>
 
 <style lang="scss">
-
 .fade-leave-active {
   position: absolute;
   top: 0;

web-app/packages/app/src/modules/dashboard/views/DashboardView.vue

@@ -8,15 +8,19 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
   <dashboard-view-template :canCreateProject="canCreateProject">
     <template #usageInfo>
       <dashboard-usage-info-row />
+      <dashboard-full-storage-warning-row v-slot="{ usage }">
+        <full-storage-warning :usage="usage" />
+      </dashboard-full-storage-warning-row>
     </template>
     <template #content>
       <dashboard-access-requests-row v-if="userStore.isGlobalWorkspaceAdmin">
         <template v-slot:table="{ namespace }">
           <project-access-request-table :namespace="namespace" />
         </template>
       </dashboard-access-requests-row>
-      <dashboard-projects-row>
-        <template #projects>
+      <app-section>
+        <template #title>Recent active projects</template>
+        <template #default>
           <projects-table-data-loader
             :show-namespace="false"
             :showFooter="false"
@@ -27,33 +31,35 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
             show-tags
           />
         </template>
-      </dashboard-projects-row>
+      </app-section>
     </template>
   </dashboard-view-template>
 </template>
 
 <script lang="ts">
 import {
   DashboardViewTemplate,
-  DashboardProjectsRow,
-  DashboardAccessRequestsRow,
   ProjectsTableDataLoader,
   DashboardUsageInfoRow,
+  DashboardFullStorageWarningRow,
   ProjectAccessRequestTable,
+  FullStorageWarning,
   useProjectStore,
-  useUserStore
+  useUserStore,
+  AppSection
 } from '@mergin/lib'
 import { defineComponent, computed, ref, onMounted } from 'vue'
 
 export default defineComponent({
   name: 'DashboardView',
   components: {
     DashboardViewTemplate,
-    DashboardProjectsRow,
-    DashboardAccessRequestsRow,
     ProjectsTableDataLoader,
+    DashboardFullStorageWarningRow,
     DashboardUsageInfoRow,
-    ProjectAccessRequestTable
+    ProjectAccessRequestTable,
+    AppSection,
+    FullStorageWarning
   },
   setup() {
     const initialOptions = ref({

web-app/packages/app/src/modules/layout/components/AppHeader.vue

@@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
 -->
 
 <template>
-  <app-header-template :isPrimary="isPrimary" :renderNamespace="false" />
+  <app-header-template :renderNamespace="false" />
 </template>
 
 <script lang="ts">
@@ -14,12 +14,6 @@ import { defineComponent } from 'vue'
 
 export default defineComponent({
   name: 'AppHeader',
-  props: {
-    isPrimary: {
-      type: Boolean,
-      default: true
-    }
-  },
   components: { AppHeaderTemplate }
 })
 </script>

web-app/packages/lib/.eslintrc.cjs

@@ -20,5 +20,6 @@ module.exports = {
     // Vue 3 opt https://v3-migration.vuejs.org/breaking-changes/key-attribute.html#with-template-v-for
     'vue/no-v-for-template-key-on-child': 'error',
     'vue/no-v-for-template-key': 'off',
+    'vue/no-multiple-template-root': 'off',
   }
 }