Allow toggling visibility of Views

src/assets/defaults.ts

@@ -26,6 +26,7 @@ export const widgetProfiles: Profile[] = [
         hash: 'eddd8e53-88c3-46a9-9e50-909227661f38',
         name: 'Video View',
         showBottomBarOnBoot: true,
+        visible: true,
         widgets: [
           {
             hash: '80e785e1-31e2-4bfe-85d4-99fee6ca3f76',
@@ -332,6 +333,7 @@ export const widgetProfiles: Profile[] = [
           },
         ],
         showBottomBarOnBoot: true,
+        visible: true,
       },
       {
         hash: '795c3c97-c3f6-4a2d-b38f-d4ac8219bac0',
@@ -512,6 +514,7 @@ export const widgetProfiles: Profile[] = [
           },
         ],
         showBottomBarOnBoot: true,
+        visible: true,
       },
     ],
   },
@@ -523,6 +526,7 @@ export const widgetProfiles: Profile[] = [
         hash: 'f8a76470-9122-44f7-97f7-4555a59ee9c4',
         name: 'Map view',
         showBottomBarOnBoot: true,
+        visible: true,
         widgets: [
           {
             hash: '6439e791-3031-4928-aff2-8bd9af713798',

src/components/EditMenu.vue

@@ -76,6 +76,11 @@
             >
               <p class="overflow-hidden text-sm text-ellipsis ml-7 whitespace-nowrap">{{ view.name }}</p>
               <div class="grow" />
+              <div
+                class="icon-btn mdi mdi-eye"
+                :class="{ 'mdi-eye-closed': !view.visible }"
+                @click.stop="toggleViewVisibility(view)"
+              />
               <div class="icon-btn mdi mdi-download" @click.stop="store.exportView(view)" />
               <div class="icon-btn mdi mdi-content-copy" @click.stop="store.duplicateView(view)" />
               <div class="icon-btn mdi mdi-cog" @click.stop="renameView(view)" />
@@ -347,6 +352,14 @@ const renameView = (view: View): void => {
   viewRenameDialogRevealed.value = true
 }
 
+const toggleViewVisibility = (view: View): void => {
+  if (view.visible && view === store.currentView) {
+    Swal.fire({ text: 'You cannot hide the current view.', icon: 'error' })
+    return
+  }
+  view.visible = !view.visible
+}
+
 const renameProfile = (profile: Profile): void => {
   profileBeingRenamed.value = profile
   newProfileName.value = profile.name

src/components/mini-widgets/ViewSelector.vue

@@ -3,7 +3,7 @@
     <Dropdown
       name-key="name"
       :model-value="widgetStore.currentView"
-      :options="widgetStore.currentProfile.views"
+      :options="widgetStore.viewsToShow"
       class="min-w-[128px]"
       @update:model-value="widgetStore.selectView"
     />

src/stores/widgetManager.ts

@@ -66,7 +66,7 @@ export const useWidgetManagerStore = defineStore('widget-manager', () => {
     const viewsOnShowOrder = currentProfile.value.views.slice()
     viewsOnShowOrder.splice(currentViewIndex.value, 1)
     viewsOnShowOrder.push(currentProfile.value.views[currentViewIndex.value])
-    return viewsOnShowOrder
+    return viewsOnShowOrder.filter((v) => v.visible)
   })
 
   const miniWidgetContainersInCurrentView = computed(() => {
@@ -203,6 +203,7 @@ export const useWidgetManagerStore = defineStore('widget-manager', () => {
         { name: 'Bottom-right container', widgets: [] },
       ],
       showBottomBarOnBoot: true,
+      visible: true,
     })
     currentViewIndex.value = 0
   }
@@ -297,6 +298,10 @@ export const useWidgetManagerStore = defineStore('widget-manager', () => {
    * @param { View } view - View
    */
   const selectView = (view: View): void => {
+    if (!view.visible) {
+      Swal.fire({ icon: 'error', text: 'Cannot select a view that is not visible.', timer: 5000 })
+      return
+    }
     const index = currentProfile.value.views.indexOf(view)
     currentViewIndex.value = index
   }
@@ -308,6 +313,7 @@ export const useWidgetManagerStore = defineStore('widget-manager', () => {
       widgets: view.widgets,
       miniWidgetContainers: view.miniWidgetContainers,
       showBottomBarOnBoot: view.showBottomBarOnBoot,
+      visible: view.visible,
     })
     currentViewIndex.value = 0
   }
@@ -497,9 +503,8 @@ export const useWidgetManagerStore = defineStore('widget-manager', () => {
   onBeforeMount(() => {
     savedProfiles.value.forEach((p) =>
       p.views.forEach((v) => {
-        if (v.showBottomBarOnBoot === undefined) {
-          v.showBottomBarOnBoot = true
-        }
+        v.showBottomBarOnBoot = v.showBottomBarOnBoot ?? true
+        v.visible = v.visible ?? true
       })
     )
   })

src/types/widgets.ts

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