feat(views): maximize a view on double click

Author: PaulHax

src/components/LayoutGrid.vue

@@ -6,7 +6,7 @@
   >
     <div v-for="(item, i) in items" :key="i" class="d-flex flex-equal">
       <layout-grid v-if="item.type === 'layout'" :layout="(item as Layout)" />
-      <div v-else class="layout-item">
+      <div v-else class="layout-item" @dblclick="maximize(item.id)">
         <component
           :is="item.component"
           :key="item.id"
@@ -35,6 +35,9 @@ export default defineComponent({
         useViewStore().setActiveViewID(id);
       }
     },
+    maximize(viewId: string) {
+      useViewStore().toggleMaximizeView(viewId);
+    },
   },
   props: {
     layout: {

src/store/views.ts

@@ -9,10 +9,22 @@ import {
   View,
 } from '../io/state-file/schema';
 
+function cloneLayout(layout: Layout): Layout {
+  return {
+    direction: layout.direction,
+    items: layout.items.map((item) =>
+      typeof item === 'string' ? item : cloneLayout(item)
+    ),
+    ...(layout.name && { name: layout.name }),
+  };
+}
+
 interface State {
   layout: Layout;
   viewSpecs: Record<string, ViewSpec>;
   activeViewID: string;
+  maximizedViewID: string | null;
+  originalLayout: Layout | null;
 }
 
 export const useViewStore = defineStore('view', {
@@ -23,6 +35,8 @@ export const useViewStore = defineStore('view', {
     },
     viewSpecs: structuredClone(InitViewSpecs),
     activeViewID: '',
+    maximizedViewID: null,
+    originalLayout: null,
   }),
   getters: {
     viewIDs(state) {
@@ -44,6 +58,7 @@ export const useViewStore = defineStore('view', {
       }
     },
     setLayout(layout: Layout) {
+      this.restoreLayout();
       this.layout = layout;
 
       const layoutsToProcess = [layout];
@@ -59,6 +74,33 @@ export const useViewStore = defineStore('view', {
         });
       }
     },
+    maximizeView(viewID: string) {
+      if (this.maximizedViewID) {
+        this.restoreLayout();
+      }
+
+      this.originalLayout = cloneLayout(this.layout);
+      this.maximizedViewID = viewID;
+
+      this.layout = {
+        direction: LayoutDirection.H,
+        items: [viewID],
+      };
+    },
+    restoreLayout() {
+      if (this.originalLayout) {
+        this.layout = this.originalLayout;
+        this.originalLayout = null;
+        this.maximizedViewID = null;
+      }
+    },
+    toggleMaximizeView(viewID: string) {
+      if (this.maximizedViewID === viewID) {
+        this.restoreLayout();
+      } else {
+        this.maximizeView(viewID);
+      }
+    },
     serialize(stateFile: StateFile) {
       const viewConfigStore = useViewConfigStore();
       const { manifest } = stateFile;