feat: collapse collections/folders on clicking side border

packages/hoppscotch-app/components/collections/graphql/Collection.vue

@@ -97,11 +97,24 @@
         </span>
       </div>
     </div>
-    <div v-if="showChildren || isFiltered">
+    <div v-if="showChildren || isFiltered" class="flex">
+      <div
+        class="
+          flex
+          w-1
+          transform
+          transition
+          cursor-nsResize
+          ml-5.5
+          bg-dividerLight
+          hover:scale-x-125 hover:bg-dividerDark
+        "
+        @click="toggleShowChildren()"
+      ></div>
+      <div class="flex flex-col flex-1 truncate">
         <CollectionsGraphqlFolder
           v-for="(folder, index) in collection.folders"
           :key="`folder-${String(index)}`"
-        class="border-l border-dividerLight ml-6"
           :picked="picked"
           :saving-mode="savingMode"
           :folder="folder"
@@ -118,7 +131,6 @@
         <CollectionsGraphqlRequest
           v-for="(request, index) in collection.requests"
           :key="`request-${String(index)}`"
-        class="border-l border-dividerLight ml-6"
           :picked="picked"
           :saving-mode="savingMode"
           :request="request"
@@ -136,10 +148,8 @@
             collection.folders.length === 0 && collection.requests.length === 0
           "
           class="
-          border-l border-dividerLight
             flex flex-col
             text-secondaryLight
-          ml-6
             p-4
             items-center
             justify-center
@@ -151,6 +161,7 @@
           </span>
         </div>
       </div>
+    </div>
     <SmartConfirmModal
       :show="confirmRemove"
       :title="`${$t('confirm.remove_collection')}`"

packages/hoppscotch-app/components/collections/graphql/Folder.vue

@@ -93,11 +93,24 @@
         </span>
       </div>
     </div>
-    <div v-if="showChildren || isFiltered">
+    <div v-if="showChildren || isFiltered" class="flex">
+      <div
+        class="
+          flex
+          w-1
+          transform
+          transition
+          cursor-nsResize
+          ml-5.5
+          bg-dividerLight
+          hover:scale-x-125 hover:bg-dividerDark
+        "
+        @click="toggleShowChildren()"
+      ></div>
+      <div class="flex flex-col flex-1 truncate">
         <CollectionsGraphqlFolder
           v-for="(subFolder, subFolderIndex) in folder.folders"
           :key="`subFolder-${String(subFolderIndex)}`"
-        class="border-l border-dividerLight ml-6"
           :picked="picked"
           :saving-mode="savingMode"
           :folder="subFolder"
@@ -114,7 +127,6 @@
         <CollectionsGraphqlRequest
           v-for="(request, index) in folder.requests"
           :key="`request-${String(index)}`"
-        class="border-l border-dividerLight ml-6"
           :picked="picked"
           :saving-mode="savingMode"
           :request="request"
@@ -135,10 +147,8 @@
             folder.requests.length === 0
           "
           class="
-          border-l border-dividerLight
             flex flex-col
             text-secondaryLight
-          ml-6
             p-4
             items-center
             justify-center
@@ -150,6 +160,7 @@
           </span>
         </div>
       </div>
+    </div>
     <SmartConfirmModal
       :show="confirmRemove"
       :title="`${$t('confirm.remove_folder')}`"

packages/hoppscotch-app/components/collections/my/Collection.vue

@@ -116,11 +116,24 @@
         </span>
       </div>
     </div>
-    <div v-if="showChildren || isFiltered">
+    <div v-if="showChildren || isFiltered" class="flex">
+      <div
+        class="
+          flex
+          w-1
+          transform
+          transition
+          cursor-nsResize
+          ml-5.5
+          bg-dividerLight
+          hover:scale-x-125 hover:bg-dividerDark
+        "
+        @click="toggleShowChildren()"
+      ></div>
+      <div class="flex flex-col flex-1 truncate">
         <CollectionsMyFolder
           v-for="(folder, index) in collection.folders"
           :key="`folder-${index}`"
-        class="border-l border-dividerLight ml-6"
           :folder="folder"
           :folder-index="index"
           :folder-path="`${collectionIndex}/${index}`"
@@ -139,7 +152,6 @@
         <CollectionsMyRequest
           v-for="(request, index) in collection.requests"
           :key="`request-${index}`"
-        class="border-l border-dividerLight ml-6"
           :request="request"
           :collection-index="collectionIndex"
           :folder-index="-1"
@@ -158,13 +170,12 @@
           v-if="
             (collection.folders == undefined ||
               collection.folders.length === 0) &&
-          (collection.requests == undefined || collection.requests.length === 0)
+            (collection.requests == undefined ||
+              collection.requests.length === 0)
           "
           class="
-          border-l border-dividerLight
             flex flex-col
             text-secondaryLight
-          ml-6
             p-4
             items-center
             justify-center
@@ -176,6 +187,7 @@
           </span>
         </div>
       </div>
+    </div>
     <SmartConfirmModal
       :show="confirmRemove"
       :title="$t('confirm.remove_collection')"

packages/hoppscotch-app/components/collections/my/Folder.vue

@@ -98,11 +98,24 @@
         </span>
       </div>
     </div>
-    <div v-if="showChildren || isFiltered">
+    <div v-if="showChildren || isFiltered" class="flex">
+      <div
+        class="
+          flex
+          w-1
+          transform
+          transition
+          cursor-nsResize
+          ml-5.5
+          bg-dividerLight
+          hover:scale-x-125 hover:bg-dividerDark
+        "
+        @click="toggleShowChildren()"
+      ></div>
+      <div class="flex flex-col flex-1 truncate">
         <CollectionsMyFolder
           v-for="(subFolder, subFolderIndex) in folder.folders"
           :key="`subFolder-${subFolderIndex}`"
-        class="border-l border-dividerLight ml-6"
           :folder="subFolder"
           :folder-index="subFolderIndex"
           :collection-index="collectionIndex"
@@ -121,7 +134,6 @@
         <CollectionsMyRequest
           v-for="(request, index) in folder.requests"
           :key="`request-${index}`"
-        class="border-l border-dividerLight ml-6"
           :request="request"
           :collection-index="collectionIndex"
           :folder-index="folderIndex"
@@ -144,10 +156,8 @@
             folder.requests.length === 0
           "
           class="
-          border-l border-dividerLight
             flex flex-col
             text-secondaryLight
-          ml-6
             p-4
             items-center
             justify-center
@@ -159,6 +169,7 @@
           </span>
         </div>
       </div>
+    </div>
     <SmartConfirmModal
       :show="confirmRemove"
       :title="$t('confirm.remove_folder')"

packages/hoppscotch-app/components/collections/teams/Collection.vue

@@ -112,11 +112,24 @@
         </span>
       </div>
     </div>
-    <div v-if="showChildren || isFiltered">
+    <div v-if="showChildren || isFiltered" class="flex">
+      <div
+        class="
+          flex
+          w-1
+          transform
+          transition
+          cursor-nsResize
+          ml-5.5
+          bg-dividerLight
+          hover:scale-x-125 hover:bg-dividerDark
+        "
+        @click="toggleShowChildren()"
+      ></div>
+      <div class="flex flex-col flex-1 truncate">
         <CollectionsTeamsFolder
           v-for="(folder, index) in collection.children"
           :key="`folder-${index}`"
-        class="border-l border-dividerLight ml-6"
           :folder="folder"
           :folder-index="index"
           :folder-path="`${collectionIndex}/${index}`"
@@ -136,7 +149,6 @@
         <CollectionsTeamsRequest
           v-for="(request, index) in collection.requests"
           :key="`request-${index}`"
-        class="border-l border-dividerLight ml-6"
           :request="request.request"
           :collection-index="collectionIndex"
           :folder-index="-1"
@@ -154,13 +166,12 @@
           v-if="
             (collection.children == undefined ||
               collection.children.length === 0) &&
-          (collection.requests == undefined || collection.requests.length === 0)
+            (collection.requests == undefined ||
+              collection.requests.length === 0)
           "
           class="
-          border-l border-dividerLight
             flex flex-col
             text-secondaryLight
-          ml-6
             p-4
             items-center
             justify-center
@@ -172,6 +183,7 @@
           </span>
         </div>
       </div>
+    </div>
     <SmartConfirmModal
       :show="confirmRemove"
       :title="$t('confirm.remove_collection')"

packages/hoppscotch-app/components/collections/teams/Folder.vue

@@ -95,11 +95,24 @@
         </span>
       </div>
     </div>
-    <div v-if="showChildren || isFiltered">
+    <div v-if="showChildren || isFiltered" class="flex">
+      <div
+        class="
+          flex
+          w-1
+          transform
+          transition
+          cursor-nsResize
+          ml-5.5
+          bg-dividerLight
+          hover:scale-x-125 hover:bg-dividerDark
+        "
+        @click="toggleShowChildren()"
+      ></div>
+      <div class="flex flex-col flex-1 truncate">
         <CollectionsTeamsFolder
           v-for="(subFolder, subFolderIndex) in folder.children"
           :key="`subFolder-${subFolderIndex}`"
-        class="border-l border-dividerLight ml-6"
           :folder="subFolder"
           :folder-index="subFolderIndex"
           :collection-index="collectionIndex"
@@ -119,7 +132,6 @@
         <CollectionsTeamsRequest
           v-for="(request, index) in folder.requests"
           :key="`request-${index}`"
-        class="border-l border-dividerLight ml-6"
           :request="request.request"
           :collection-index="collectionIndex"
           :folder-index="folderIndex"
@@ -139,10 +151,8 @@
             (folder.requests == undefined || folder.requests.length === 0)
           "
           class="
-          border-l border-dividerLight
             flex flex-col
             text-secondaryLight
-          ml-6
             p-4
             items-center
             justify-center
@@ -154,6 +164,7 @@
           </span>
         </div>
       </div>
+    </div>
     <SmartConfirmModal
       :show="confirmRemove"
       :title="$t('confirm.remove_folder')"

packages/hoppscotch-app/windi.config.js

@@ -41,6 +41,9 @@ export default defineConfig({
         mono: "var(--font-mono)",
         icon: "var(--font-icon)",
       },
+      cursor: {
+        nsResize: "ns-resize",
+      },
     },
   },
 })