feat: vertical and horizontal layout support

packages/hoppscotch-app/assets/icons/columns.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3h7a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-7m0-18H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h7m0-18v18"></path></svg>

packages/hoppscotch-app/components/app/Footer.vue

@@ -118,6 +118,14 @@
           :title="$t('request.share')"
           @click.native="nativeShare()"
         />
+        <ButtonSecondary
+          v-tippy="{ theme: 'tooltip' }"
+          :title="COLUMN_LAYOUT ? $t('layout.row') : $t('layout.column')"
+          svg="columns"
+          class="transform"
+          :class="{ 'rotate-90': !COLUMN_LAYOUT }"
+          @click.native="COLUMN_LAYOUT = !COLUMN_LAYOUT"
+        />
         <ButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
           :title="RIGHT_SIDEBAR ? $t('hide.sidebar') : $t('show.sidebar')"
@@ -156,6 +164,7 @@ export default defineComponent({
       LEFT_SIDEBAR: useSetting("LEFT_SIDEBAR"),
       RIGHT_SIDEBAR: useSetting("RIGHT_SIDEBAR"),
       ZEN_MODE: useSetting("ZEN_MODE"),
+      COLUMN_LAYOUT: useSetting("COLUMN_LAYOUT"),
 
       navigatorShare: !!navigator.share,
 

packages/hoppscotch-app/components/realtime/Mqtt.vue

@@ -5,7 +5,11 @@
     :horizontal="!(windowInnerWidth.x.value >= 768)"
   >
     <Pane class="hide-scrollbar !overflow-auto">
-      <Splitpanes class="smart-splitter" :dbl-click-splitter="false" horizontal>
+      <Splitpanes
+        class="smart-splitter"
+        :dbl-click-splitter="false"
+        :horizontal="COLUMN_LAYOUT"
+      >
         <Pane class="hide-scrollbar !overflow-auto">
           <AppSection label="request">
             <div class="bg-primary flex p-4 top-0 z-10 sticky">
@@ -156,6 +160,7 @@ export default defineComponent({
     return {
       windowInnerWidth: useWindowSize(),
       RIGHT_SIDEBAR: useSetting("RIGHT_SIDEBAR"),
+      COLUMN_LAYOUT: useSetting("COLUMN_LAYOUT"),
     }
   },
   data() {

packages/hoppscotch-app/components/realtime/Socketio.vue

@@ -5,7 +5,11 @@
     :horizontal="!(windowInnerWidth.x.value >= 768)"
   >
     <Pane class="hide-scrollbar !overflow-auto">
-      <Splitpanes class="smart-splitter" :dbl-click-splitter="false" horizontal>
+      <Splitpanes
+        class="smart-splitter"
+        :dbl-click-splitter="false"
+        :horizontal="COLUMN_LAYOUT"
+      >
         <Pane class="hide-scrollbar !overflow-auto">
           <AppSection label="request">
             <div class="bg-primary flex p-4 top-0 z-10 sticky">
@@ -176,6 +180,7 @@ export default defineComponent({
     return {
       windowInnerWidth: useWindowSize(),
       RIGHT_SIDEBAR: useSetting("RIGHT_SIDEBAR"),
+      COLUMN_LAYOUT: useSetting("COLUMN_LAYOUT"),
     }
   },
   data() {

packages/hoppscotch-app/components/realtime/Sse.vue

@@ -1,5 +1,9 @@
 <template>
-  <Splitpanes class="smart-splitter" :dbl-click-splitter="false" horizontal>
+  <Splitpanes
+    class="smart-splitter"
+    :dbl-click-splitter="false"
+    :horizontal="COLUMN_LAYOUT"
+  >
     <Pane class="hide-scrollbar !overflow-auto">
       <div class="bg-primary flex p-4 top-0 z-10 sticky">
         <div class="space-x-2 flex-1 inline-flex">
@@ -91,9 +95,15 @@ 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"
 
 export default defineComponent({
   components: { Splitpanes, Pane },
+  setup() {
+    return {
+      COLUMN_LAYOUT: useSetting("COLUMN_LAYOUT"),
+    }
+  },
   data() {
     return {
       connectionSSEState: false,

packages/hoppscotch-app/components/realtime/Websocket.vue

@@ -5,7 +5,11 @@
     :horizontal="!(windowInnerWidth.x.value >= 768)"
   >
     <Pane class="hide-scrollbar !overflow-auto">
-      <Splitpanes class="smart-splitter" :dbl-click-splitter="false" horizontal>
+      <Splitpanes
+        class="smart-splitter"
+        :dbl-click-splitter="false"
+        :horizontal="COLUMN_LAYOUT"
+      >
         <Pane class="hide-scrollbar !overflow-auto">
           <AppSection label="request">
             <div class="bg-primary flex p-4 top-0 z-10 sticky">
@@ -216,6 +220,7 @@ export default defineComponent({
     return {
       windowInnerWidth: useWindowSize(),
       RIGHT_SIDEBAR: useSetting("RIGHT_SIDEBAR"),
+      COLUMN_LAYOUT: useSetting("COLUMN_LAYOUT"),
     }
   },
   data() {

packages/hoppscotch-app/layouts/default.vue

@@ -61,19 +61,24 @@ import useWindowSize from "~/helpers/utils/useWindowSize"
 
 function appLayout() {
   const rightSidebar = useSetting("RIGHT_SIDEBAR")
+  const columnLayout = useSetting("COLUMN_LAYOUT")
   const windowInnerWidth = useWindowSize()
 
   // Initially apply
   onBeforeMount(() => {
-    if (windowInnerWidth.x.value < 768) rightSidebar.value = false
+    if (windowInnerWidth.x.value < 768) {
+      rightSidebar.value = false
+      columnLayout.value = true
+    }
   })
 
   // Listen for updates
-  watch(windowInnerWidth.x, () =>
+  watch(windowInnerWidth.x, () => {
-    windowInnerWidth.x.value >= 768
+    if (windowInnerWidth.x.value < 768) {
-      ? (rightSidebar.value = true)
+      rightSidebar.value = false
-      : (rightSidebar.value = false)
+      columnLayout.value = true
-  )
+    }
+  })
 }
 
 function updateThemes() {

packages/hoppscotch-app/locales/en.json

@@ -219,6 +219,8 @@
     "title": "Import"
   },
   "layout": {
+    "column": "Column layout",
+    "row": "Row layout",
     "zen_mode": "Zen mode"
   },
   "modal": {

packages/hoppscotch-app/newstore/settings.ts

@@ -52,6 +52,7 @@ export type SettingsType = {
   RIGHT_SIDEBAR: boolean
   ZEN_MODE: boolean
   FONT_SIZE: HoppFontSize
+  COLUMN_LAYOUT: boolean
 }
 
 export const defaultSettings: SettingsType = {
@@ -78,6 +79,7 @@ export const defaultSettings: SettingsType = {
   RIGHT_SIDEBAR: true,
   ZEN_MODE: false,
   FONT_SIZE: "small",
+  COLUMN_LAYOUT: true,
 }
 
 const validKeys = Object.keys(defaultSettings)

packages/hoppscotch-app/pages/documentation.vue

@@ -5,7 +5,11 @@
     :horizontal="!(windowInnerWidth.x.value >= 768)"
   >
     <Pane class="hide-scrollbar !overflow-auto">
-      <Splitpanes class="smart-splitter" :dbl-click-splitter="false" horizontal>
+      <Splitpanes
+        class="smart-splitter"
+        :dbl-click-splitter="false"
+        :horizontal="COLUMN_LAYOUT"
+      >
         <Pane class="hide-scrollbar !overflow-auto">
           <AppSection label="import">
             <div class="flex p-4 items-start justify-between">
@@ -190,6 +194,7 @@ export default defineComponent({
     return {
       windowInnerWidth: useWindowSize(),
       RIGHT_SIDEBAR: useSetting("RIGHT_SIDEBAR"),
+      COLUMN_LAYOUT: useSetting("COLUMN_LAYOUT"),
       currentUser: useReadonlyStream(currentUser$, null),
     }
   },

packages/hoppscotch-app/pages/graphql.vue

@@ -5,7 +5,11 @@
     :horizontal="!(windowInnerWidth.x.value >= 768)"
   >
     <Pane class="hide-scrollbar !overflow-auto">
-      <Splitpanes class="smart-splitter" :dbl-click-splitter="false" horizontal>
+      <Splitpanes
+        class="smart-splitter"
+        :dbl-click-splitter="false"
+        :horizontal="COLUMN_LAYOUT"
+      >
         <Pane class="hide-scrollbar !overflow-auto">
           <GraphqlRequest :conn="gqlConn" />
           <GraphqlRequestOptions :conn="gqlConn" />
@@ -59,6 +63,7 @@ export default defineComponent({
     return {
       windowInnerWidth: useWindowSize(),
       RIGHT_SIDEBAR: useSetting("RIGHT_SIDEBAR"),
+      COLUMN_LAYOUT: useSetting("COLUMN_LAYOUT"),
       gqlConn,
     }
   },

packages/hoppscotch-app/pages/index.vue

@@ -5,7 +5,11 @@
     :horizontal="!(windowInnerWidth.x.value >= 768)"
   >
     <Pane class="hide-scrollbar !overflow-auto">
-      <Splitpanes class="smart-splitter" :dbl-click-splitter="false" horizontal>
+      <Splitpanes
+        class="smart-splitter"
+        :dbl-click-splitter="false"
+        :horizontal="COLUMN_LAYOUT"
+      >
         <Pane class="hide-scrollbar !overflow-auto">
           <HttpRequest />
           <SmartTabs styles="sticky bg-primary top-upperPrimaryStickyFold z-10">
@@ -279,6 +283,7 @@ export default defineComponent({
         null
       ),
       RIGHT_SIDEBAR: useSetting("RIGHT_SIDEBAR"),
+      COLUMN_LAYOUT: useSetting("COLUMN_LAYOUT"),
       confirmSync,
       syncRequest,
       oAuthURL,

packages/hoppscotch-app/pages/settings.vue

@@ -417,7 +417,6 @@ export default defineComponent({
   watch: {
     ZEN_MODE(ZEN_MODE) {
       this.applySetting("LEFT_SIDEBAR", !ZEN_MODE)
-      // this.applySetting("RIGHT_SIDEBAR", !ZEN_MODE)
     },
     proxySettings: {
       deep: true,