Allow hiding the bottom bar view-wise

src/App.vue

@@ -89,25 +89,30 @@
               {{ format(timeNow, 'E LLL do HH:mm') }}
             </div>
           </div>
-          <div class="z-[60] w-full h-12 bg-slate-600/50 absolute flex bottom-0 backdrop-blur-[2px] justify-between">
-            <MiniWidgetContainer
-              :container="widgetStore.currentView.miniWidgetContainers[0]"
-              :allow-editing="widgetStore.editingMode"
-              align="start"
-            />
-            <div />
-            <MiniWidgetContainer
-              :container="widgetStore.currentView.miniWidgetContainers[1]"
-              :allow-editing="widgetStore.editingMode"
-              align="center"
-            />
-            <div />
-            <MiniWidgetContainer
-              :container="widgetStore.currentView.miniWidgetContainers[2]"
-              :allow-editing="widgetStore.editingMode"
-              align="end"
-            />
-          </div>
+          <Transition name="fade">
+            <div
+              v-if="widgetStore.currentView.showBottomBarOnBoot"
+              class="z-[60] w-full h-12 bg-slate-600/50 absolute flex bottom-0 backdrop-blur-[2px] justify-between"
+            >
+              <MiniWidgetContainer
+                :container="widgetStore.currentView.miniWidgetContainers[0]"
+                :allow-editing="widgetStore.editingMode"
+                align="start"
+              />
+              <div />
+              <MiniWidgetContainer
+                :container="widgetStore.currentView.miniWidgetContainers[1]"
+                :allow-editing="widgetStore.editingMode"
+                align="center"
+              />
+              <div />
+              <MiniWidgetContainer
+                :container="widgetStore.currentView.miniWidgetContainers[2]"
+                :allow-editing="widgetStore.editingMode"
+                align="end"
+              />
+            </div>
+          </Transition>
           <router-view />
         </div>
         <EditMenu v-model:edit-mode="widgetStore.editingMode" />
@@ -213,4 +218,14 @@ body.hide-cursor {
 .swal2-container {
   z-index: 10000;
 }
+
+.fade-enter-active,
+.fade-leave-active {
+  transition: all 0.3s cubic-bezier(0.55, 0, 0.1, 1);
+}
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+  transform: translate(0, 100px);
+}
 </style>

src/assets/defaults.ts

@@ -25,6 +25,7 @@ export const widgetProfiles: Profile[] = [
       {
         hash: 'eddd8e53-88c3-46a9-9e50-909227661f38',
         name: 'Video view',
+        showBottomBarOnBoot: true,
         widgets: [
           {
             hash: '8b1448f5-3f07-4bfc-8a0e-5d491993f858',
@@ -137,6 +138,7 @@ export const widgetProfiles: Profile[] = [
       {
         hash: 'f8a76470-9122-44f7-97f7-4555a59ee9c4',
         name: 'Map view',
+        showBottomBarOnBoot: true,
         widgets: [
           {
             hash: '6439e791-3031-4928-aff2-8bd9af713798',

src/components/EditMenu.vue

@@ -214,6 +214,11 @@
       <v-card class="pa-2">
         <v-card-text>
           <v-text-field v-model="newViewName" counter="25" label="New view name" />
+          <v-switch
+            v-model="store.currentView.showBottomBarOnBoot"
+            label="Show bottom bar on boot"
+            class="m-2 text-slate-800"
+          />
         </v-card-text>
         <v-card-actions class="flex justify-end">
           <v-btn @click="viewRenameDialog.confirm">Save</v-btn>

src/stores/widgetManager.ts

@@ -5,7 +5,7 @@ import { saveAs } from 'file-saver'
 import { defineStore } from 'pinia'
 import Swal from 'sweetalert2'
 import { v4 as uuid4 } from 'uuid'
-import { computed, onBeforeUnmount, ref, watch } from 'vue'
+import { computed, onBeforeMount, onBeforeUnmount, ref, watch } from 'vue'
 
 import { widgetProfiles } from '@/assets/defaults'
 import { miniWidgetsProfile } from '@/assets/defaults'
@@ -172,6 +172,7 @@ export const useWidgetManagerStore = defineStore('widget-manager', () => {
         { name: 'Bottom-center container', widgets: [] },
         { name: 'Bottom-right container', widgets: [] },
       ],
+      showBottomBarOnBoot: true,
     })
     currentViewIndex.value = 0
   }
@@ -439,6 +440,18 @@ export const useWidgetManagerStore = defineStore('widget-manager', () => {
   const selectPrevViewCBId = registerActionCallback(CockpitAction.GO_TO_PREVIOUS_VIEW, debouncedSelectPreviousView)
   onBeforeUnmount(() => unregisterActionCallback(selectPrevViewCBId))
 
+  // Profile migrations
+  // TODO: remove on first stable release
+  onBeforeMount(() => {
+    savedProfiles.value.forEach((p) =>
+      p.views.forEach((v) => {
+        if (v.showBottomBarOnBoot === undefined) {
+          v.showBottomBarOnBoot = true
+        }
+      })
+    )
+  })
+
   return {
     editingMode,
     showGrid,

src/types/widgets.ts

@@ -97,6 +97,10 @@ export type View = {
    * Editable name for the view
    */
   name: string
+  /**
+   * To show or not the bottom bar on boot.
+   */
+  showBottomBarOnBoot: boolean
 }
 
 export type Profile = {