refactor: use pane layout component in pages

packages/hoppscotch-app/pages/documentation.vue

@@ -1,132 +1,103 @@
 <template>
-  <Splitpanes
-    class="smart-splitter"
-    :rtl="SIDEBAR_ON_LEFT && mdAndLarger"
-    :class="{
-      '!flex-row-reverse': SIDEBAR_ON_LEFT && mdAndLarger,
-    }"
-    :horizontal="!mdAndLarger"
-  >
-    <Pane
-      size="75"
-      min-size="65"
-      class="hide-scrollbar !overflow-auto flex flex-col"
-    >
-      <Splitpanes class="smart-splitter" :horizontal="COLUMN_LAYOUT">
-        <Pane
-          :size="COLUMN_LAYOUT ? 45 : 50"
-          class="hide-scrollbar !overflow-auto flex flex-col"
+  <AppPaneLayout>
+    <template #primary>
+      <div class="flex items-start justify-between p-4">
+        <label>
+          {{ $t("documentation.generate_message") }}
+        </label>
+        <span
+          class="inline-flex px-2 py-1 rounded bg-accentDark text-accentContrast"
         >
-          <div class="flex items-start justify-between p-4">
-            <label>
-              {{ $t("documentation.generate_message") }}
-            </label>
-            <span
-              class="inline-flex px-2 py-1 rounded bg-accentDark text-accentContrast"
-            >
-              BETA
-            </span>
-          </div>
-          <div
-            class="sticky top-0 z-10 flex items-start justify-between border-b bg-primary border-dividerLight"
-          >
-            <label for="collectionUpload">
-              <ButtonSecondary
-                v-tippy="{ theme: 'tooltip' }"
-                title="JSON"
-                svg="folder"
-                class="!rounded-none"
-                :label="$t('import.collections')"
-                @click.native="$refs.collectionUpload.click()"
-              />
-            </label>
-            <input
-              ref="collectionUpload"
-              class="input"
-              name="collectionUpload"
-              type="file"
-              @change="uploadCollection"
-            />
-            <ButtonSecondary
-              v-tippy="{ theme: 'tooltip' }"
-              :title="$t('action.clear')"
-              svg="trash-2"
-              @click.native="collectionJSON = '[]'"
-            />
-          </div>
-          <textarea-autosize
-            id="import-curl"
-            v-model="collectionJSON"
-            class="w-full p-4 font-mono bg-primary"
-            autofocus
-            rows="8"
+          BETA
+        </span>
+      </div>
+      <div
+        class="sticky top-0 z-10 flex items-start justify-between border-b bg-primary border-dividerLight"
+      >
+        <label for="collectionUpload">
+          <ButtonSecondary
+            v-tippy="{ theme: 'tooltip' }"
+            title="JSON"
+            svg="folder"
+            class="!rounded-none"
+            :label="$t('import.collections')"
+            @click.native="$refs.collectionUpload.click()"
           />
-          <div
-            class="sticky bottom-0 z-10 flex items-start justify-between p-4 border-t border-b bg-primary border-dividerLight"
+        </label>
+        <input
+          ref="collectionUpload"
+          class="input"
+          name="collectionUpload"
+          type="file"
+          @change="uploadCollection"
+        />
+        <ButtonSecondary
+          v-tippy="{ theme: 'tooltip' }"
+          :title="$t('action.clear')"
+          svg="trash-2"
+          @click.native="collectionJSON = '[]'"
+        />
+      </div>
+      <textarea-autosize
+        id="import-curl"
+        v-model="collectionJSON"
+        class="w-full p-4 font-mono bg-primary"
+        autofocus
+        rows="8"
+      />
+      <div
+        class="sticky bottom-0 z-10 flex items-start justify-between p-4 border-t border-b bg-primary border-dividerLight"
+      >
+        <ButtonPrimary
+          :label="$t('documentation.generate')"
+          @click.native="getDoc"
+        />
+      </div>
+    </template>
+    <template #secondary>
+      <div class="flex flex-col">
+        <div
+          v-if="items.length === 0"
+          class="flex flex-col items-center justify-center p-4 text-secondaryLight"
+        >
+          <i class="pb-2 opacity-75 material-icons">topic</i>
+          <span class="text-center">
+            {{ $t("helpers.generate_documentation_first") }}
+          </span>
+        </div>
+        <div
+          v-else
+          class="sticky top-0 z-10 flex flex-1 p-4 border-b bg-primary border-dividerLight"
+        >
+          <span
+            v-tippy="{ theme: 'tooltip' }"
+            :title="
+              !currentUser
+                ? $t('export.require_github')
+                : currentUser.provider !== 'github.com'
+                ? $t('export.require_github')
+                : 'Beta'
+            "
           >
             <ButtonPrimary
-              :label="$t('documentation.generate')"
-              @click.native="getDoc"
+              :disabled="
+                !currentUser
+                  ? true
+                  : currentUser.provider !== 'github.com'
+                  ? true
+                  : false
+              "
+              :label="$t('export.create_secret_gist')"
+              @click.native="createDocsGist"
             />
-          </div>
-        </Pane>
-        <Pane
-          :size="COLUMN_LAYOUT ? 65 : 50"
-          class="hide-scrollbar !overflow-auto flex flex-col"
-        >
-          <div class="flex flex-col">
-            <div
-              v-if="items.length === 0"
-              class="flex flex-col items-center justify-center p-4 text-secondaryLight"
-            >
-              <i class="pb-2 opacity-75 material-icons">topic</i>
-              <span class="text-center">
-                {{ $t("helpers.generate_documentation_first") }}
-              </span>
-            </div>
-            <div
-              v-else
-              class="sticky top-0 z-10 flex flex-1 p-4 border-b bg-primary border-dividerLight"
-            >
-              <span
-                v-tippy="{ theme: 'tooltip' }"
-                :title="
-                  !currentUser
-                    ? $t('export.require_github')
-                    : currentUser.provider !== 'github.com'
-                    ? $t('export.require_github')
-                    : 'Beta'
-                "
-              >
-                <ButtonPrimary
-                  :disabled="
-                    !currentUser
-                      ? true
-                      : currentUser.provider !== 'github.com'
-                      ? true
-                      : false
-                  "
-                  :label="$t('export.create_secret_gist')"
-                  @click.native="createDocsGist"
-                />
-              </span>
-            </div>
-            <div
-              v-for="(collection, index) in items"
-              :key="`collection-${index}`"
-            >
-              <DocsCollection :collection="collection" />
-            </div>
-          </div>
-        </Pane>
-      </Splitpanes>
-    </Pane>
-    <Pane
-      v-if="SIDEBAR"
-      size="25"
-      min-size="20"
-      class="hide-scrollbar !overflow-auto flex flex-col"
-    >
+          </span>
+        </div>
+        <div v-for="(collection, index) in items" :key="`collection-${index}`">
+          <DocsCollection :collection="collection" />
+        </div>
+      </div>
+    </template>
+    <template #sidebar>
       <aside>
         <Collections
           :selected="selected"
@@ -135,35 +106,23 @@
           @remove-collection="removeSelectedCollection($event)"
         />
       </aside>
-    </Pane>
-  </Splitpanes>
+    </template>
+  </AppPaneLayout>
 </template>
 
 <script>
 import { defineComponent } from "@nuxtjs/composition-api"
-import { Splitpanes, Pane } from "splitpanes"
-import "splitpanes/dist/splitpanes.css"
 import Mustache from "mustache"
-import { breakpointsTailwind, useBreakpoints } from "@vueuse/core"
 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"
 import { useReadonlyStream } from "~/helpers/utils/composables"
 
 export default defineComponent({
-  components: { Splitpanes, Pane },
   setup() {
-    const breakpoints = useBreakpoints(breakpointsTailwind)
-    const mdAndLarger = breakpoints.greater("md")
-
     return {
-      mdAndLarger,
-      SIDEBAR: useSetting("SIDEBAR"),
-      COLUMN_LAYOUT: useSetting("COLUMN_LAYOUT"),
       currentUser: useReadonlyStream(currentUser$, null),
-      SIDEBAR_ON_LEFT: useSetting("SIDEBAR_ON_LEFT"),
     }
   },
   data() {

packages/hoppscotch-app/pages/graphql.vue

@@ -1,55 +1,24 @@
 <template>
-  <Splitpanes
-    class="smart-splitter"
-    :rtl="SIDEBAR_ON_LEFT && mdAndLarger"
-    :class="{
-      '!flex-row-reverse': SIDEBAR_ON_LEFT && mdAndLarger,
-    }"
-    :horizontal="!mdAndLarger"
-  >
-    <Pane
-      size="75"
-      min-size="65"
-      class="hide-scrollbar !overflow-auto flex flex-col"
-    >
-      <Splitpanes class="smart-splitter" :horizontal="COLUMN_LAYOUT">
-        <Pane
-          :size="COLUMN_LAYOUT ? 45 : 50"
-          class="hide-scrollbar !overflow-auto flex flex-col"
-        >
-          <GraphqlRequest :conn="gqlConn" />
-          <GraphqlRequestOptions :conn="gqlConn" />
-        </Pane>
-        <Pane
-          :size="COLUMN_LAYOUT ? 65 : 50"
-          class="hide-scrollbar !overflow-auto flex flex-col"
-        >
-          <GraphqlResponse :conn="gqlConn" />
-        </Pane>
-      </Splitpanes>
-    </Pane>
-    <Pane
-      v-if="SIDEBAR"
-      size="25"
-      min-size="20"
-      class="hide-scrollbar !overflow-auto flex flex-col"
-    >
+  <AppPaneLayout>
+    <template #primary>
+      <GraphqlRequest :conn="gqlConn" />
+      <GraphqlRequestOptions :conn="gqlConn" />
+    </template>
+    <template #secondary>
+      <GraphqlResponse :conn="gqlConn" />
+    </template>
+    <template #sidebar>
       <GraphqlSidebar :conn="gqlConn" />
-    </Pane>
-  </Splitpanes>
+    </template>
+  </AppPaneLayout>
 </template>
 
 <script lang="ts">
 import { defineComponent, watch } from "@nuxtjs/composition-api"
-import { Splitpanes, Pane } from "splitpanes"
-import "splitpanes/dist/splitpanes.css"
-import { breakpointsTailwind, useBreakpoints } from "@vueuse/core"
-import { useSetting } from "~/newstore/settings"
 import { GQLConnection } from "~/helpers/GQLConnection"
 import { useNuxt, useReadonlyStream } from "~/helpers/utils/composables"
 
 export default defineComponent({
-  components: { Splitpanes, Pane },
   beforeRouteLeave(_to, _from, next) {
     if (this.gqlConn.connected$.value) {
       this.gqlConn.disconnect()
@@ -68,14 +37,7 @@ export default defineComponent({
       else nuxt.value.$loading.finish()
     })
 
-    const breakpoints = useBreakpoints(breakpointsTailwind)
-    const mdAndLarger = breakpoints.greater("md")
-
     return {
-      mdAndLarger,
-      SIDEBAR: useSetting("SIDEBAR"),
-      COLUMN_LAYOUT: useSetting("COLUMN_LAYOUT"),
-      SIDEBAR_ON_LEFT: useSetting("SIDEBAR_ON_LEFT"),
       gqlConn,
     }
   },

packages/hoppscotch-app/pages/index.vue

@@ -1,85 +1,56 @@
 <template>
-  <Splitpanes
-    class="smart-splitter"
-    :rtl="SIDEBAR_ON_LEFT && mdAndLarger"
-    :class="{
-      '!flex-row-reverse': SIDEBAR_ON_LEFT && mdAndLarger,
-    }"
-    :horizontal="!mdAndLarger"
-  >
-    <Pane
-      size="75"
-      min-size="65"
-      class="hide-scrollbar !overflow-auto flex flex-col"
-    >
-      <Splitpanes class="smart-splitter" :horizontal="COLUMN_LAYOUT">
-        <Pane
-          :size="COLUMN_LAYOUT ? 45 : 50"
-          class="hide-scrollbar !overflow-auto flex flex-col"
+  <AppPaneLayout>
+    <template #primary>
+      <HttpRequest />
+      <SmartTabs styles="sticky bg-primary top-upperPrimaryStickyFold z-10">
+        <SmartTab
+          :id="'params'"
+          :label="`${$t('tab.parameters')}`"
+          :selected="true"
+          :info="`${newActiveParamsCount$}`"
         >
-          <HttpRequest />
-          <SmartTabs styles="sticky bg-primary top-upperPrimaryStickyFold z-10">
-            <SmartTab
-              :id="'params'"
-              :label="`${$t('tab.parameters')}`"
-              :selected="true"
-              :info="`${newActiveParamsCount$}`"
-            >
-              <HttpParameters />
-            </SmartTab>
+          <HttpParameters />
+        </SmartTab>
 
-            <SmartTab :id="'bodyParams'" :label="`${$t('tab.body')}`">
-              <HttpBody />
-            </SmartTab>
+        <SmartTab :id="'bodyParams'" :label="`${$t('tab.body')}`">
+          <HttpBody />
+        </SmartTab>
 
-            <SmartTab
-              :id="'headers'"
-              :label="`${$t('tab.headers')}`"
-              :info="`${newActiveHeadersCount$}`"
-            >
-              <HttpHeaders />
-            </SmartTab>
-
-            <SmartTab
-              :id="'authorization'"
-              :label="`${$t('tab.authorization')}`"
-            >
-              <HttpAuthorization />
-            </SmartTab>
-
-            <SmartTab
-              :id="'preRequestScript'"
-              :label="`${$t('tab.pre_request_script')}`"
-              :indicator="
-                preRequestScript && preRequestScript.length > 0 ? true : false
-              "
-            >
-              <HttpPreRequestScript />
-            </SmartTab>
-
-            <SmartTab
-              :id="'tests'"
-              :label="`${$t('tab.tests')}`"
-              :indicator="testScript && testScript.length > 0 ? true : false"
-            >
-              <HttpTests />
-            </SmartTab>
-          </SmartTabs>
-        </Pane>
-        <Pane
-          :size="COLUMN_LAYOUT ? 65 : 50"
-          class="flex flex-col hide-scrollbar !overflow-auto flex flex-col"
+        <SmartTab
+          :id="'headers'"
+          :label="`${$t('tab.headers')}`"
+          :info="`${newActiveHeadersCount$}`"
         >
-          <HttpResponse ref="response" />
-        </Pane>
-      </Splitpanes>
-    </Pane>
-    <Pane
-      v-if="SIDEBAR"
-      size="25"
-      min-size="20"
-      class="hide-scrollbar !overflow-auto flex flex-col"
-    >
+          <HttpHeaders />
+        </SmartTab>
+
+        <SmartTab :id="'authorization'" :label="`${$t('tab.authorization')}`">
+          <HttpAuthorization />
+        </SmartTab>
+
+        <SmartTab
+          :id="'preRequestScript'"
+          :label="`${$t('tab.pre_request_script')}`"
+          :indicator="
+            preRequestScript && preRequestScript.length > 0 ? true : false
+          "
+        >
+          <HttpPreRequestScript />
+        </SmartTab>
+
+        <SmartTab
+          :id="'tests'"
+          :label="`${$t('tab.tests')}`"
+          :indicator="testScript && testScript.length > 0 ? true : false"
+        >
+          <HttpTests />
+        </SmartTab>
+      </SmartTabs>
+    </template>
+    <template #secondary>
+      <HttpResponse ref="response" />
+    </template>
+    <template #sidebar>
       <SmartTabs styles="sticky bg-primary z-10 top-0" vertical>
         <SmartTab
           :id="'history'"
@@ -106,8 +77,8 @@
           <Environments />
         </SmartTab>
       </SmartTabs>
-    </Pane>
-  </Splitpanes>
+    </template>
+  </AppPaneLayout>
 </template>
 
 <script lang="ts">
@@ -121,8 +92,6 @@ import {
   useContext,
   watch,
 } from "@nuxtjs/composition-api"
-import { Splitpanes, Pane } from "splitpanes"
-import "splitpanes/dist/splitpanes.css"
 import { map } from "rxjs/operators"
 import { Subscription } from "rxjs"
 import isEqual from "lodash/isEqual"
@@ -131,8 +100,6 @@ import {
   HoppRESTAuthOAuth2,
   safelyExtractRESTRequest,
 } from "@hoppscotch/data"
-import { breakpointsTailwind, useBreakpoints } from "@vueuse/core"
-import { useSetting } from "~/newstore/settings"
 import {
   restActiveParamsCount$,
   restActiveHeadersCount$,
@@ -227,7 +194,6 @@ function setupRequestSync(
 }
 
 export default defineComponent({
-  components: { Splitpanes, Pane },
   setup() {
     const requestForSync = ref<HoppRESTRequest | null>(null)
 
@@ -271,11 +237,7 @@ export default defineComponent({
     setupRequestSync(confirmSync, requestForSync)
     bindRequestToURLParams()
 
-    const breakpoints = useBreakpoints(breakpointsTailwind)
-    const mdAndLarger = breakpoints.greater("md")
-
     return {
-      mdAndLarger,
       newActiveParamsCount$: useReadonlyStream(
         restActiveParamsCount$.pipe(
           map((e) => {
@@ -294,9 +256,6 @@ export default defineComponent({
         ),
         null
       ),
-      SIDEBAR: useSetting("SIDEBAR"),
-      COLUMN_LAYOUT: useSetting("COLUMN_LAYOUT"),
-      SIDEBAR_ON_LEFT: useSetting("SIDEBAR_ON_LEFT"),
       confirmSync,
       syncRequest,
       oAuthURL,