feat: zenmode + toggle left, right & header panes

pages/documentation.vue

@@ -103,6 +103,7 @@
         </Splitpanes>
       </Pane>
       <Pane
+        v-if="RIGHT_SIDEBAR"
         max-size="30"
         size="25"
         min-size="20"
@@ -122,15 +123,22 @@
 </template>
 
 <script>
+import { defineComponent } from "@nuxtjs/composition-api"
 import { Splitpanes, Pane } from "splitpanes"
 import Mustache from "mustache"
 import { currentUser$ } from "~/helpers/fb/auth"
 import DocsTemplate from "~/assets/md/docs.md"
 import folderContents from "~/assets/md/folderContents.md"
 import folderBody from "~/assets/md/folderBody.md"
+import { useSetting } from "~/newstore/settings"
 
-export default {
+export default defineComponent({
   components: { Splitpanes, Pane },
+  setup() {
+    return {
+      RIGHT_SIDEBAR: useSetting("RIGHT_SIDEBAR"),
+    }
+  },
   data() {
     return {
       collectionJSON: "[]",
@@ -298,5 +306,5 @@ export default {
       )
     },
   },
-}
+})
 </script>

pages/graphql.vue

@@ -331,6 +331,7 @@
         </Splitpanes>
       </Pane>
       <Pane
+        v-if="RIGHT_SIDEBAR"
         max-size="30"
         size="25"
         min-size="20"
@@ -478,22 +479,28 @@
 </template>
 
 <script>
+import { defineComponent } from "@nuxtjs/composition-api"
 import { Splitpanes, Pane } from "splitpanes"
 import * as gql from "graphql"
 import { commonHeaders } from "~/helpers/headers"
 import { getPlatformSpecialKey } from "~/helpers/platformutils"
 import { getCurrentStrategyID, sendNetworkRequest } from "~/helpers/network"
-import { getSettingSubject } from "~/newstore/settings"
+import { getSettingSubject, useSetting } from "~/newstore/settings"
 import { addGraphqlHistoryEntry } from "~/newstore/history"
 import { logHoppRequestRunToAnalytics } from "~/helpers/fb/analytics"
 
-export default {
+export default defineComponent({
   components: { Splitpanes, Pane },
   beforeRouteLeave(_to, _from, next) {
     this.isPollingSchema = false
     if (this.timeoutSubscription) clearTimeout(this.timeoutSubscription)
     next()
   },
+  setup() {
+    return {
+      RIGHT_SIDEBAR: useSetting("RIGHT_SIDEBAR"),
+    }
+  },
   data() {
     return {
       commonHeaders,
@@ -1157,7 +1164,7 @@ export default {
       this.gqlQueryString = updatedQuery
     },
   },
-}
+})
 </script>
 
 <style scoped lang="scss">

pages/index.vue

@@ -31,7 +31,19 @@
                         <span class="select-wrapper">
                           <input
                             id="contentType"
-                            class="bg-primary rounded-lg flex font-semibold font-mono text-xs w-full py-2 px-4 transition truncate focus:outline-none"
+                            class="
+                              bg-primary
+                              rounded-lg
+                              flex
+                              font-semibold font-mono
+                              text-xs
+                              w-full
+                              py-2
+                              px-4
+                              transition
+                              truncate
+                              focus:outline-none
+                            "
                             v-model="contentType"
                             readonly
                           />
@@ -321,6 +333,7 @@
         </Splitpanes>
       </Pane>
       <Pane
+        v-if="RIGHT_SIDEBAR"
         max-size="30"
         size="25"
         min-size="20"
@@ -462,8 +475,11 @@ import {
   knownContentTypes,
   isJSONContentType,
 } from "~/helpers/utils/contenttypes"
-import { generateCodeWithGenerator } from "~/helpers/codegen/codegen"
-import { getSettingSubject, applySetting } from "~/newstore/settings"
+import {
+  getSettingSubject,
+  applySetting,
+  useSetting,
+} from "~/newstore/settings"
 import { addRESTHistoryEntry } from "~/newstore/history"
 import clone from "lodash/clone"
 import {
@@ -476,10 +492,10 @@ import { map } from "rxjs/operators"
 
 export default defineComponent({
   components: { Splitpanes, Pane },
-
   setup() {
     return {
       preRequestScript: usePreRequestScript(),
+      RIGHT_SIDEBAR: useSetting("RIGHT_SIDEBAR"),
     }
   },
   data() {

pages/settings.vue

@@ -184,11 +184,17 @@
               </div>
               <div class="flex items-center">
                 <SmartToggle
-                  :on="HIDE_NAVBAR"
-                  @change="toggleSetting('HIDE_NAVBAR')"
+                  :on="LEFT_SIDEBAR"
+                  @change="toggleSetting('LEFT_SIDEBAR')"
                 >
                   {{ $t("navigation_sidebar") }}
-                  {{ HIDE_NAVBAR ? $t("enabled") : $t("disabled") }}
+                  {{ LEFT_SIDEBAR ? $t("enabled") : $t("disabled") }}
+                </SmartToggle>
+              </div>
+              <div class="flex items-center">
+                <SmartToggle :on="ZEN_MODE" @change="toggleSetting('ZEN_MODE')">
+                  {{ $t("zen_mode") }}
+                  {{ ZEN_MODE ? $t("enabled") : $t("disabled") }}
                 </SmartToggle>
               </div>
             </div>
@@ -340,7 +346,8 @@ export default defineComponent({
       SYNC_HISTORY: useSetting("syncHistory"),
       TELEMETRY_ENABLED: useSetting("TELEMETRY_ENABLED"),
       SHORTCUTS_INDICATOR_ENABLED: useSetting("SHORTCUTS_INDICATOR_ENABLED"),
-      HIDE_NAVBAR: useSetting("HIDE_NAVBAR"),
+      LEFT_SIDEBAR: useSetting("LEFT_SIDEBAR"),
+      ZEN_MODE: useSetting("ZEN_MODE"),
       currentUser: useReadonlyStream(currentUser$, currentUser$.value),
     }
   },
@@ -372,6 +379,10 @@ export default defineComponent({
     },
   },
   watch: {
+    ZEN_MODE(ZEN_MODE) {
+      this.applySetting("LEFT_SIDEBAR", !ZEN_MODE)
+      this.applySetting("RIGHT_SIDEBAR", !ZEN_MODE)
+    },
     proxySettings: {
       deep: true,
       handler({ url, key }) {