refactor: use pane layout component in pages

2022-03-02 07:57:05 +05:30
parent 6e59ae6424
commit 4b6581934e
9 changed files with 583 additions and 779 deletions
--- a/packages/hoppscotch-app/components/app/PaneLayout.vue
+++ b/packages/hoppscotch-app/components/app/PaneLayout.vue
@@ -0,0 +1,55 @@
+<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"
+        >
+          <slot name="primary" />
+        </Pane>
+        <Pane
+          :size="COLUMN_LAYOUT ? 65 : 50"
+          class="flex flex-col hide-scrollbar !overflow-auto"
+        >
+          <slot name="secondary" />
+        </Pane>
+      </Splitpanes>
+    </Pane>
+    <Pane
+      v-if="SIDEBAR"
+      size="25"
+      min-size="20"
+      class="hide-scrollbar !overflow-auto flex flex-col"
+    >
+      <slot name="sidebar" />
+    </Pane>
+  </Splitpanes>
+</template>
+
+<script setup lang="ts">
+import { Splitpanes, Pane } from "splitpanes"
+import "splitpanes/dist/splitpanes.css"
+import { breakpointsTailwind, useBreakpoints } from "@vueuse/core"
+import { useSetting } from "~/newstore/settings"
+
+const SIDEBAR_ON_LEFT = useSetting("SIDEBAR_ON_LEFT")
+
+const breakpoints = useBreakpoints(breakpointsTailwind)
+const mdAndLarger = breakpoints.greater("md")
+
+const COLUMN_LAYOUT = useSetting("COLUMN_LAYOUT")
+
+const SIDEBAR = useSetting("SIDEBAR")
+</script>
--- a/packages/hoppscotch-app/components/realtime/Mqtt.vue
+++ b/packages/hoppscotch-app/components/realtime/Mqtt.vue
@@ -1,22 +1,6 @@
 <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="sticky top-0 z-10 flex flex-shrink-0 p-4 overflow-x-auto space-x-2 bg-primary hide-scrollbar"
      >
@@ -37,9 +21,7 @@
            :disabled="!validUrl"
            class="w-32"
            :label="
-                  connectionState
-                    ? $t('action.disconnect')
-                    : $t('action.connect')
+              connectionState ? $t('action.disconnect') : $t('action.connect')
            "
            :loading="connectingState"
            @click.native="toggleConnection"
@@ -64,21 +46,11 @@
          />
        </div>
      </div>
-        </Pane>
-        <Pane
-          :size="COLUMN_LAYOUT ? 65 : 50"
-          class="hide-scrollbar !overflow-auto flex flex-col"
-        >
+    </template>
+    <template #secondary>
      <RealtimeLog :title="$t('mqtt.log')" :log="log" />
-        </Pane>
-      </Splitpanes>
-    </Pane>
-    <Pane
-      v-if="SIDEBAR"
-      size="25"
-      min-size="20"
-      class="hide-scrollbar !overflow-auto flex flex-col"
-    >
+    </template>
+    <template #sidebar>
      <div class="flex items-center justify-between p-4">
        <label for="pub_topic" class="font-semibold text-secondaryLight">
          {{ $t("mqtt.topic") }}
@@ -146,19 +118,15 @@
          @click.native="toggleSubscription"
        />
      </div>
-    </Pane>
-  </Splitpanes>
+    </template>
+  </AppPaneLayout>
 </template>

 <script>
 import { defineComponent } from "@nuxtjs/composition-api"
-import { Splitpanes, Pane } from "splitpanes"
-import "splitpanes/dist/splitpanes.css"
 import Paho from "paho-mqtt"
 import debounce from "lodash/debounce"
-import { breakpointsTailwind, useBreakpoints } from "@vueuse/core"
 import { logHoppRequestRunToAnalytics } from "~/helpers/fb/analytics"
-import { useSetting } from "~/newstore/settings"
 import {
  MQTTEndpoint$,
  setMQTTEndpoint,
@@ -177,16 +145,8 @@ import {
 import { useStream } 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"),
-      SIDEBAR_ON_LEFT: useSetting("SIDEBAR_ON_LEFT"),
      url: useStream(MQTTEndpoint$, "", setMQTTEndpoint),
      connectionState: useStream(
        MQTTConnectionState$,
--- a/packages/hoppscotch-app/components/realtime/Socketio.vue
+++ b/packages/hoppscotch-app/components/realtime/Socketio.vue
@@ -1,22 +1,6 @@
 <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="sticky top-0 z-10 flex flex-shrink-0 p-4 overflow-x-auto space-x-2 bg-primary hide-scrollbar"
      >
@@ -80,9 +64,7 @@
            name="connect"
            class="w-32"
            :label="
-                  !connectionState
-                    ? $t('action.connect')
-                    : $t('action.disconnect')
+              !connectionState ? $t('action.connect') : $t('action.disconnect')
            "
            :loading="connectingState"
            @click.native="toggleConnection"
@@ -216,21 +198,11 @@
          </div>
        </div>
      </div>
-        </Pane>
-        <Pane
-          :size="COLUMN_LAYOUT ? 65 : 50"
-          class="hide-scrollbar !overflow-auto flex flex-col"
-        >
+    </template>
+    <template #secondary>
      <RealtimeLog :title="$t('socketio.log')" :log="log" />
-        </Pane>
-      </Splitpanes>
-    </Pane>
-    <Pane
-      v-if="SIDEBAR"
-      size="25"
-      min-size="20"
-      class="hide-scrollbar !overflow-auto flex flex-col"
-    >
+    </template>
+    <template #sidebar>
      <div class="flex items-center justify-between p-4">
        <label for="events" class="font-semibold text-secondaryLight">
          {{ $t("socketio.events") }}
@@ -297,24 +269,19 @@
          </div>
        </div>
      </div>
-    </Pane>
-  </Splitpanes>
+    </template>
+  </AppPaneLayout>
 </template>

 <script>
 import { defineComponent, ref } from "@nuxtjs/composition-api"
-import { Splitpanes, Pane } from "splitpanes"
-import "splitpanes/dist/splitpanes.css"
 // All Socket.IO client version imports
 import ClientV2 from "socket.io-client-v2"
 import { io as ClientV3 } from "socket.io-client-v3"
 import { io as ClientV4 } from "socket.io-client-v4"
-
 import wildcard from "socketio-wildcard"
 import debounce from "lodash/debounce"
-import { breakpointsTailwind, useBreakpoints } from "@vueuse/core"
 import { logHoppRequestRunToAnalytics } from "~/helpers/fb/analytics"
-import { useSetting } from "~/newstore/settings"
 import {
  SIOEndpoint$,
  setSIOEndpoint,
@@ -341,16 +308,8 @@ const socketIoClients = {
 }

 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"),
-      SIDEBAR_ON_LEFT: useSetting("SIDEBAR_ON_LEFT"),
      socketIoClients,
      url: useStream(SIOEndpoint$, "", setSIOEndpoint),
      clientVersion: useStream(SIOVersion$, "", setSIOVersion),
--- a/packages/hoppscotch-app/components/realtime/Sse.vue
+++ b/packages/hoppscotch-app/components/realtime/Sse.vue
@@ -1,9 +1,6 @@
 <template>
-  <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="sticky top-0 z-10 flex flex-shrink-0 p-4 overflow-x-auto space-x-2 bg-primary hide-scrollbar"
      >
@@ -48,23 +45,18 @@
          />
        </div>
      </div>
-    </Pane>
-    <Pane
-      :size="COLUMN_LAYOUT ? 65 : 50"
-      class="hide-scrollbar !overflow-auto flex flex-col"
-    >
+    </template>
+    <template #secondary>
      <RealtimeLog :title="$t('sse.log')" :log="log" />
-    </Pane>
-  </Splitpanes>
+    </template>
+  </AppPaneLayout>
 </template>

 <script>
 import { defineComponent } from "@nuxtjs/composition-api"
-import { Splitpanes, Pane } from "splitpanes"
 import "splitpanes/dist/splitpanes.css"
 import debounce from "lodash/debounce"
 import { logHoppRequestRunToAnalytics } from "~/helpers/fb/analytics"
-import { useSetting } from "~/newstore/settings"
 import {
  SSEEndpoint$,
  setSSEEndpoint,
@@ -83,10 +75,8 @@ import {
 import { useStream } from "~/helpers/utils/composables"

 export default defineComponent({
-  components: { Splitpanes, Pane },
  setup() {
    return {
-      COLUMN_LAYOUT: useSetting("COLUMN_LAYOUT"),
      connectionSSEState: useStream(
        SSEConnectionState$,
        false,
--- a/packages/hoppscotch-app/components/realtime/Websocket.vue
+++ b/packages/hoppscotch-app/components/realtime/Websocket.vue
@@ -1,22 +1,6 @@
 <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="sticky top-0 z-10 flex flex-shrink-0 p-4 overflow-x-auto space-x-2 bg-primary hide-scrollbar"
      >
@@ -39,9 +23,7 @@
            class="w-32"
            name="connect"
            :label="
-                  !connectionState
-                    ? $t('action.connect')
-                    : $t('action.disconnect')
+              !connectionState ? $t('action.connect') : $t('action.disconnect')
            "
            :loading="connectingState"
            @click.native="toggleConnection"
@@ -138,21 +120,11 @@
          {{ $t("empty.protocols") }}
        </span>
      </div>
-        </Pane>
-        <Pane
-          :size="COLUMN_LAYOUT ? 65 : 50"
-          class="hide-scrollbar !overflow-auto flex flex-col"
-        >
+    </template>
+    <template #secondary>
      <RealtimeLog :title="$t('websocket.log')" :log="log" />
-        </Pane>
-      </Splitpanes>
-    </Pane>
-    <Pane
-      v-if="SIDEBAR"
-      size="25"
-      min-size="20"
-      class="hide-scrollbar !overflow-auto flex flex-col"
-    >
+    </template>
+    <template #sidebar>
      <div class="flex items-center justify-between p-4">
        <label
          for="websocket-message"
@@ -183,18 +155,14 @@
          @click.native="sendMessage"
        />
      </div>
-    </Pane>
-  </Splitpanes>
+    </template>
+  </AppPaneLayout>
 </template>

 <script>
 import { defineComponent } from "@nuxtjs/composition-api"
-import { Splitpanes, Pane } from "splitpanes"
-import "splitpanes/dist/splitpanes.css"
 import debounce from "lodash/debounce"
-import { breakpointsTailwind, useBreakpoints } from "@vueuse/core"
 import { logHoppRequestRunToAnalytics } from "~/helpers/fb/analytics"
-import { useSetting } from "~/newstore/settings"
 import {
  setWSEndpoint,
  WSEndpoint$,
@@ -217,16 +185,8 @@ import {
 import { useStream } 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"),
-      SIDEBAR_ON_LEFT: useSetting("SIDEBAR_ON_LEFT"),
      url: useStream(WSEndpoint$, "", setWSEndpoint),
      protocols: useStream(WSProtocols$, [], setWSProtocols),
      connectionState: useStream(
--- a/packages/hoppscotch-app/layouts/default.vue
+++ b/packages/hoppscotch-app/layouts/default.vue
@@ -23,7 +23,7 @@
              horizontal
            >
              <Pane class="flex flex-1 hide-scrollbar !overflow-auto">
-                <main class="flex flex-1 w-full">
+                <main class="flex flex-1 w-full" role="main">
                  <nuxt class="flex flex-1" />
                </main>
              </Pane>
--- a/packages/hoppscotch-app/pages/documentation.vue
+++ b/packages/hoppscotch-app/pages/documentation.vue
@@ -1,22 +1,6 @@
 <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") }}
@@ -69,11 +53,8 @@
          @click.native="getDoc"
        />
      </div>
-        </Pane>
-        <Pane
-          :size="COLUMN_LAYOUT ? 65 : 50"
-          class="hide-scrollbar !overflow-auto flex flex-col"
-        >
+    </template>
+    <template #secondary>
      <div class="flex flex-col">
        <div
          v-if="items.length === 0"
@@ -111,22 +92,12 @@
            />
          </span>
        </div>
-            <div
-              v-for="(collection, index) in items"
-              :key="`collection-${index}`"
-            >
+        <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"
-    >
+    </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() {
--- a/packages/hoppscotch-app/pages/graphql.vue
+++ b/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"
-        >
+  <AppPaneLayout>
+    <template #primary>
      <GraphqlRequest :conn="gqlConn" />
      <GraphqlRequestOptions :conn="gqlConn" />
-        </Pane>
-        <Pane
-          :size="COLUMN_LAYOUT ? 65 : 50"
-          class="hide-scrollbar !overflow-auto flex flex-col"
-        >
+    </template>
+    <template #secondary>
      <GraphqlResponse :conn="gqlConn" />
-        </Pane>
-      </Splitpanes>
-    </Pane>
-    <Pane
-      v-if="SIDEBAR"
-      size="25"
-      min-size="20"
-      class="hide-scrollbar !overflow-auto flex flex-col"
-    >
+    </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,
    }
  },
--- a/packages/hoppscotch-app/pages/index.vue
+++ b/packages/hoppscotch-app/pages/index.vue
@@ -1,22 +1,6 @@
 <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
@@ -40,10 +24,7 @@
          <HttpHeaders />
        </SmartTab>

-            <SmartTab
-              :id="'authorization'"
-              :label="`${$t('tab.authorization')}`"
-            >
+        <SmartTab :id="'authorization'" :label="`${$t('tab.authorization')}`">
          <HttpAuthorization />
        </SmartTab>

@@ -65,21 +46,11 @@
          <HttpTests />
        </SmartTab>
      </SmartTabs>
-        </Pane>
-        <Pane
-          :size="COLUMN_LAYOUT ? 65 : 50"
-          class="flex flex-col hide-scrollbar !overflow-auto flex flex-col"
-        >
+    </template>
+    <template #secondary>
      <HttpResponse ref="response" />
-        </Pane>
-      </Splitpanes>
-    </Pane>
-    <Pane
-      v-if="SIDEBAR"
-      size="25"
-      min-size="20"
-      class="hide-scrollbar !overflow-auto flex flex-col"
-    >
+    </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,