feat: collapse collections/folders on clicking side border

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

@@ -97,58 +97,69 @@
         </span>
       </div>
     </div>
-    <div v-if="showChildren || isFiltered">
+    <div v-if="showChildren || isFiltered" class="flex">
-      <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"
-        :folder-index="index"
-        :folder-path="`${collectionIndex}/${String(index)}`"
-        :collection-index="collectionIndex"
-        :doc="doc"
-        :is-filtered="isFiltered"
-        @add-folder="$emit('add-folder', $event)"
-        @edit-folder="$emit('edit-folder', $event)"
-        @edit-request="$emit('edit-request', $event)"
-        @select="$emit('select', $event)"
-      />
-      <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"
-        :collection-index="collectionIndex"
-        :folder-index="-1"
-        :folder-name="collection.name"
-        :folder-path="`${collectionIndex}`"
-        :request-index="index"
-        :doc="doc"
-        @edit-request="$emit('edit-request', $event)"
-        @select="$emit('select', $event)"
-      />
       <div
-        v-if="
-          collection.folders.length === 0 && collection.requests.length === 0
-        "
         class="
-          border-l border-dividerLight
+          flex
-          flex flex-col
+          w-1
-          text-secondaryLight
+          transform
-          ml-6
+          transition
-          p-4
+          cursor-nsResize
-          items-center
+          ml-5.5
-          justify-center
+          bg-dividerLight
+          hover:scale-x-125 hover:bg-dividerDark
         "
-      >
+        @click="toggleShowChildren()"
-        <i class="opacity-75 pb-2 material-icons">folder_open</i>
+      ></div>
-        <span class="text-center">
+      <div class="flex flex-col flex-1 truncate">
-          {{ $t("empty.collection") }}
+        <CollectionsGraphqlFolder
-        </span>
+          v-for="(folder, index) in collection.folders"
+          :key="`folder-${String(index)}`"
+          :picked="picked"
+          :saving-mode="savingMode"
+          :folder="folder"
+          :folder-index="index"
+          :folder-path="`${collectionIndex}/${String(index)}`"
+          :collection-index="collectionIndex"
+          :doc="doc"
+          :is-filtered="isFiltered"
+          @add-folder="$emit('add-folder', $event)"
+          @edit-folder="$emit('edit-folder', $event)"
+          @edit-request="$emit('edit-request', $event)"
+          @select="$emit('select', $event)"
+        />
+        <CollectionsGraphqlRequest
+          v-for="(request, index) in collection.requests"
+          :key="`request-${String(index)}`"
+          :picked="picked"
+          :saving-mode="savingMode"
+          :request="request"
+          :collection-index="collectionIndex"
+          :folder-index="-1"
+          :folder-name="collection.name"
+          :folder-path="`${collectionIndex}`"
+          :request-index="index"
+          :doc="doc"
+          @edit-request="$emit('edit-request', $event)"
+          @select="$emit('select', $event)"
+        />
+        <div
+          v-if="
+            collection.folders.length === 0 && collection.requests.length === 0
+          "
+          class="
+            flex flex-col
+            text-secondaryLight
+            p-4
+            items-center
+            justify-center
+          "
+        >
+          <i class="opacity-75 pb-2 material-icons">folder_open</i>
+          <span class="text-center">
+            {{ $t("empty.collection") }}
+          </span>
+        </div>
       </div>
     </div>
     <SmartConfirmModal

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

@@ -93,61 +93,72 @@
         </span>
       </div>
     </div>
-    <div v-if="showChildren || isFiltered">
+    <div v-if="showChildren || isFiltered" class="flex">
-      <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"
-        :folder-index="subFolderIndex"
-        :folder-path="`${folderPath}/${String(subFolderIndex)}`"
-        :collection-index="collectionIndex"
-        :doc="doc"
-        :is-filtered="isFiltered"
-        @add-folder="$emit('add-folder', $event)"
-        @edit-folder="$emit('edit-folder', $event)"
-        @edit-request="$emit('edit-request', $event)"
-        @select="$emit('select', $event)"
-      />
-      <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"
-        :collection-index="collectionIndex"
-        :folder-index="folderIndex"
-        :folder-path="folderPath"
-        :folder-name="folder.name"
-        :request-index="index"
-        :doc="doc"
-        @edit-request="$emit('edit-request', $event)"
-        @select="$emit('select', $event)"
-      />
       <div
-        v-if="
-          folder.folders &&
-          folder.folders.length === 0 &&
-          folder.requests &&
-          folder.requests.length === 0
-        "
         class="
-          border-l border-dividerLight
+          flex
-          flex flex-col
+          w-1
-          text-secondaryLight
+          transform
-          ml-6
+          transition
-          p-4
+          cursor-nsResize
-          items-center
+          ml-5.5
-          justify-center
+          bg-dividerLight
+          hover:scale-x-125 hover:bg-dividerDark
         "
-      >
+        @click="toggleShowChildren()"
-        <i class="opacity-75 pb-2 material-icons">folder_open</i>
+      ></div>
-        <span class="text-center">
+      <div class="flex flex-col flex-1 truncate">
-          {{ $t("empty.folder") }}
+        <CollectionsGraphqlFolder
-        </span>
+          v-for="(subFolder, subFolderIndex) in folder.folders"
+          :key="`subFolder-${String(subFolderIndex)}`"
+          :picked="picked"
+          :saving-mode="savingMode"
+          :folder="subFolder"
+          :folder-index="subFolderIndex"
+          :folder-path="`${folderPath}/${String(subFolderIndex)}`"
+          :collection-index="collectionIndex"
+          :doc="doc"
+          :is-filtered="isFiltered"
+          @add-folder="$emit('add-folder', $event)"
+          @edit-folder="$emit('edit-folder', $event)"
+          @edit-request="$emit('edit-request', $event)"
+          @select="$emit('select', $event)"
+        />
+        <CollectionsGraphqlRequest
+          v-for="(request, index) in folder.requests"
+          :key="`request-${String(index)}`"
+          :picked="picked"
+          :saving-mode="savingMode"
+          :request="request"
+          :collection-index="collectionIndex"
+          :folder-index="folderIndex"
+          :folder-path="folderPath"
+          :folder-name="folder.name"
+          :request-index="index"
+          :doc="doc"
+          @edit-request="$emit('edit-request', $event)"
+          @select="$emit('select', $event)"
+        />
+        <div
+          v-if="
+            folder.folders &&
+            folder.folders.length === 0 &&
+            folder.requests &&
+            folder.requests.length === 0
+          "
+          class="
+            flex flex-col
+            text-secondaryLight
+            p-4
+            items-center
+            justify-center
+          "
+        >
+          <i class="opacity-75 pb-2 material-icons">folder_open</i>
+          <span class="text-center">
+            {{ $t("empty.folder") }}
+          </span>
+        </div>
       </div>
     </div>
     <SmartConfirmModal

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

@@ -116,64 +116,76 @@
         </span>
       </div>
     </div>
-    <div v-if="showChildren || isFiltered">
+    <div v-if="showChildren || isFiltered" class="flex">
-      <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}`"
-        :collection-index="collectionIndex"
-        :doc="doc"
-        :save-request="saveRequest"
-        :collections-type="collectionsType"
-        :is-filtered="isFiltered"
-        :picked="picked"
-        @add-folder="$emit('add-folder', $event)"
-        @edit-folder="$emit('edit-folder', $event)"
-        @edit-request="$emit('edit-request', $event)"
-        @select="$emit('select', $event)"
-        @remove-request="$emit('remove-request', $event)"
-      />
-      <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"
-        :folder-name="collection.name"
-        :folder-path="`${collectionIndex}`"
-        :request-index="index"
-        :doc="doc"
-        :save-request="saveRequest"
-        :collections-type="collectionsType"
-        :picked="picked"
-        @edit-request="editRequest($event)"
-        @select="$emit('select', $event)"
-        @remove-request="$emit('remove-request', $event)"
-      />
       <div
-        v-if="
-          (collection.folders == undefined ||
-            collection.folders.length === 0) &&
-          (collection.requests == undefined || collection.requests.length === 0)
-        "
         class="
-          border-l border-dividerLight
+          flex
-          flex flex-col
+          w-1
-          text-secondaryLight
+          transform
-          ml-6
+          transition
-          p-4
+          cursor-nsResize
-          items-center
+          ml-5.5
-          justify-center
+          bg-dividerLight
+          hover:scale-x-125 hover:bg-dividerDark
         "
-      >
+        @click="toggleShowChildren()"
-        <i class="opacity-75 pb-2 material-icons">folder_open</i>
+      ></div>
-        <span class="text-center">
+      <div class="flex flex-col flex-1 truncate">
-          {{ $t("empty.collection") }}
+        <CollectionsMyFolder
-        </span>
+          v-for="(folder, index) in collection.folders"
+          :key="`folder-${index}`"
+          :folder="folder"
+          :folder-index="index"
+          :folder-path="`${collectionIndex}/${index}`"
+          :collection-index="collectionIndex"
+          :doc="doc"
+          :save-request="saveRequest"
+          :collections-type="collectionsType"
+          :is-filtered="isFiltered"
+          :picked="picked"
+          @add-folder="$emit('add-folder', $event)"
+          @edit-folder="$emit('edit-folder', $event)"
+          @edit-request="$emit('edit-request', $event)"
+          @select="$emit('select', $event)"
+          @remove-request="$emit('remove-request', $event)"
+        />
+        <CollectionsMyRequest
+          v-for="(request, index) in collection.requests"
+          :key="`request-${index}`"
+          :request="request"
+          :collection-index="collectionIndex"
+          :folder-index="-1"
+          :folder-name="collection.name"
+          :folder-path="`${collectionIndex}`"
+          :request-index="index"
+          :doc="doc"
+          :save-request="saveRequest"
+          :collections-type="collectionsType"
+          :picked="picked"
+          @edit-request="editRequest($event)"
+          @select="$emit('select', $event)"
+          @remove-request="$emit('remove-request', $event)"
+        />
+        <div
+          v-if="
+            (collection.folders == undefined ||
+              collection.folders.length === 0) &&
+            (collection.requests == undefined ||
+              collection.requests.length === 0)
+          "
+          class="
+            flex flex-col
+            text-secondaryLight
+            p-4
+            items-center
+            justify-center
+          "
+        >
+          <i class="opacity-75 pb-2 material-icons">folder_open</i>
+          <span class="text-center">
+            {{ $t("empty.collection") }}
+          </span>
+        </div>
       </div>
     </div>
     <SmartConfirmModal

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

@@ -98,65 +98,76 @@
         </span>
       </div>
     </div>
-    <div v-if="showChildren || isFiltered">
+    <div v-if="showChildren || isFiltered" class="flex">
-      <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"
-        :doc="doc"
-        :save-request="saveRequest"
-        :collections-type="collectionsType"
-        :folder-path="`${folderPath}/${subFolderIndex}`"
-        :picked="picked"
-        @add-folder="$emit('add-folder', $event)"
-        @edit-folder="$emit('edit-folder', $event)"
-        @edit-request="$emit('edit-request', $event)"
-        @update-team-collections="$emit('update-team-collections')"
-        @select="$emit('select', $event)"
-        @remove-request="removeRequest"
-      />
-      <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"
-        :folder-name="folder.name"
-        :folder-path="folderPath"
-        :request-index="index"
-        :doc="doc"
-        :picked="picked"
-        :save-request="saveRequest"
-        :collections-type="collectionsType"
-        @edit-request="$emit('edit-request', $event)"
-        @select="$emit('select', $event)"
-        @remove-request="removeRequest"
-      />
       <div
-        v-if="
-          folder.folders &&
-          folder.folders.length === 0 &&
-          folder.requests &&
-          folder.requests.length === 0
-        "
         class="
-          border-l border-dividerLight
+          flex
-          flex flex-col
+          w-1
-          text-secondaryLight
+          transform
-          ml-6
+          transition
-          p-4
+          cursor-nsResize
-          items-center
+          ml-5.5
-          justify-center
+          bg-dividerLight
+          hover:scale-x-125 hover:bg-dividerDark
         "
-      >
+        @click="toggleShowChildren()"
-        <i class="opacity-75 pb-2 material-icons">folder_open</i>
+      ></div>
-        <span class="text-center">
+      <div class="flex flex-col flex-1 truncate">
-          {{ $t("empty.folder") }}
+        <CollectionsMyFolder
-        </span>
+          v-for="(subFolder, subFolderIndex) in folder.folders"
+          :key="`subFolder-${subFolderIndex}`"
+          :folder="subFolder"
+          :folder-index="subFolderIndex"
+          :collection-index="collectionIndex"
+          :doc="doc"
+          :save-request="saveRequest"
+          :collections-type="collectionsType"
+          :folder-path="`${folderPath}/${subFolderIndex}`"
+          :picked="picked"
+          @add-folder="$emit('add-folder', $event)"
+          @edit-folder="$emit('edit-folder', $event)"
+          @edit-request="$emit('edit-request', $event)"
+          @update-team-collections="$emit('update-team-collections')"
+          @select="$emit('select', $event)"
+          @remove-request="removeRequest"
+        />
+        <CollectionsMyRequest
+          v-for="(request, index) in folder.requests"
+          :key="`request-${index}`"
+          :request="request"
+          :collection-index="collectionIndex"
+          :folder-index="folderIndex"
+          :folder-name="folder.name"
+          :folder-path="folderPath"
+          :request-index="index"
+          :doc="doc"
+          :picked="picked"
+          :save-request="saveRequest"
+          :collections-type="collectionsType"
+          @edit-request="$emit('edit-request', $event)"
+          @select="$emit('select', $event)"
+          @remove-request="removeRequest"
+        />
+        <div
+          v-if="
+            folder.folders &&
+            folder.folders.length === 0 &&
+            folder.requests &&
+            folder.requests.length === 0
+          "
+          class="
+            flex flex-col
+            text-secondaryLight
+            p-4
+            items-center
+            justify-center
+          "
+        >
+          <i class="opacity-75 pb-2 material-icons">folder_open</i>
+          <span class="text-center">
+            {{ $t("empty.folder") }}
+          </span>
+        </div>
       </div>
     </div>
     <SmartConfirmModal

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

@@ -112,64 +112,76 @@
         </span>
       </div>
     </div>
-    <div v-if="showChildren || isFiltered">
+    <div v-if="showChildren || isFiltered" class="flex">
-      <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}`"
-        :collection-index="collectionIndex"
-        :doc="doc"
-        :save-request="saveRequest"
-        :collections-type="collectionsType"
-        :is-filtered="isFiltered"
-        :picked="picked"
-        @add-folder="$emit('add-folder', $event)"
-        @edit-folder="$emit('edit-folder', $event)"
-        @edit-request="$emit('edit-request', $event)"
-        @select="$emit('select', $event)"
-        @expand-collection="expandCollection"
-        @remove-request="removeRequest"
-      />
-      <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"
-        :folder-name="collection.name"
-        :request-index="request.id"
-        :doc="doc"
-        :save-request="saveRequest"
-        :collections-type="collectionsType"
-        :picked="picked"
-        @edit-request="editRequest($event)"
-        @select="$emit('select', $event)"
-        @remove-request="removeRequest"
-      />
       <div
-        v-if="
-          (collection.children == undefined ||
-            collection.children.length === 0) &&
-          (collection.requests == undefined || collection.requests.length === 0)
-        "
         class="
-          border-l border-dividerLight
+          flex
-          flex flex-col
+          w-1
-          text-secondaryLight
+          transform
-          ml-6
+          transition
-          p-4
+          cursor-nsResize
-          items-center
+          ml-5.5
-          justify-center
+          bg-dividerLight
+          hover:scale-x-125 hover:bg-dividerDark
         "
-      >
+        @click="toggleShowChildren()"
-        <i class="opacity-75 pb-2 material-icons">folder_open</i>
+      ></div>
-        <span class="text-center">
+      <div class="flex flex-col flex-1 truncate">
-          {{ $t("empty.collection") }}
+        <CollectionsTeamsFolder
-        </span>
+          v-for="(folder, index) in collection.children"
+          :key="`folder-${index}`"
+          :folder="folder"
+          :folder-index="index"
+          :folder-path="`${collectionIndex}/${index}`"
+          :collection-index="collectionIndex"
+          :doc="doc"
+          :save-request="saveRequest"
+          :collections-type="collectionsType"
+          :is-filtered="isFiltered"
+          :picked="picked"
+          @add-folder="$emit('add-folder', $event)"
+          @edit-folder="$emit('edit-folder', $event)"
+          @edit-request="$emit('edit-request', $event)"
+          @select="$emit('select', $event)"
+          @expand-collection="expandCollection"
+          @remove-request="removeRequest"
+        />
+        <CollectionsTeamsRequest
+          v-for="(request, index) in collection.requests"
+          :key="`request-${index}`"
+          :request="request.request"
+          :collection-index="collectionIndex"
+          :folder-index="-1"
+          :folder-name="collection.name"
+          :request-index="request.id"
+          :doc="doc"
+          :save-request="saveRequest"
+          :collections-type="collectionsType"
+          :picked="picked"
+          @edit-request="editRequest($event)"
+          @select="$emit('select', $event)"
+          @remove-request="removeRequest"
+        />
+        <div
+          v-if="
+            (collection.children == undefined ||
+              collection.children.length === 0) &&
+            (collection.requests == undefined ||
+              collection.requests.length === 0)
+          "
+          class="
+            flex flex-col
+            text-secondaryLight
+            p-4
+            items-center
+            justify-center
+          "
+        >
+          <i class="opacity-75 pb-2 material-icons">folder_open</i>
+          <span class="text-center">
+            {{ $t("empty.collection") }}
+          </span>
+        </div>
       </div>
     </div>
     <SmartConfirmModal

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

@@ -95,63 +95,74 @@
         </span>
       </div>
     </div>
-    <div v-if="showChildren || isFiltered">
+    <div v-if="showChildren || isFiltered" class="flex">
-      <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"
-        :doc="doc"
-        :save-request="saveRequest"
-        :collections-type="collectionsType"
-        :folder-path="`${folderPath}/${subFolderIndex}`"
-        :picked="picked"
-        @add-folder="$emit('add-folder', $event)"
-        @edit-folder="$emit('edit-folder', $event)"
-        @edit-request="$emit('edit-request', $event)"
-        @update-team-collections="$emit('update-team-collections')"
-        @select="$emit('select', $event)"
-        @expand-collection="expandCollection"
-        @remove-request="removeRequest"
-      />
-      <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"
-        :folder-name="folder.name"
-        :request-index="request.id"
-        :doc="doc"
-        :save-request="saveRequest"
-        :collections-type="collectionsType"
-        :picked="picked"
-        @edit-request="$emit('edit-request', $event)"
-        @select="$emit('select', $event)"
-        @remove-request="removeRequest"
-      />
       <div
-        v-if="
-          (folder.children == undefined || folder.children.length === 0) &&
-          (folder.requests == undefined || folder.requests.length === 0)
-        "
         class="
-          border-l border-dividerLight
+          flex
-          flex flex-col
+          w-1
-          text-secondaryLight
+          transform
-          ml-6
+          transition
-          p-4
+          cursor-nsResize
-          items-center
+          ml-5.5
-          justify-center
+          bg-dividerLight
+          hover:scale-x-125 hover:bg-dividerDark
         "
-      >
+        @click="toggleShowChildren()"
-        <i class="opacity-75 pb-2 material-icons">folder_open</i>
+      ></div>
-        <span class="text-center">
+      <div class="flex flex-col flex-1 truncate">
-          {{ $t("empty.folder") }}
+        <CollectionsTeamsFolder
-        </span>
+          v-for="(subFolder, subFolderIndex) in folder.children"
+          :key="`subFolder-${subFolderIndex}`"
+          :folder="subFolder"
+          :folder-index="subFolderIndex"
+          :collection-index="collectionIndex"
+          :doc="doc"
+          :save-request="saveRequest"
+          :collections-type="collectionsType"
+          :folder-path="`${folderPath}/${subFolderIndex}`"
+          :picked="picked"
+          @add-folder="$emit('add-folder', $event)"
+          @edit-folder="$emit('edit-folder', $event)"
+          @edit-request="$emit('edit-request', $event)"
+          @update-team-collections="$emit('update-team-collections')"
+          @select="$emit('select', $event)"
+          @expand-collection="expandCollection"
+          @remove-request="removeRequest"
+        />
+        <CollectionsTeamsRequest
+          v-for="(request, index) in folder.requests"
+          :key="`request-${index}`"
+          :request="request.request"
+          :collection-index="collectionIndex"
+          :folder-index="folderIndex"
+          :folder-name="folder.name"
+          :request-index="request.id"
+          :doc="doc"
+          :save-request="saveRequest"
+          :collections-type="collectionsType"
+          :picked="picked"
+          @edit-request="$emit('edit-request', $event)"
+          @select="$emit('select', $event)"
+          @remove-request="removeRequest"
+        />
+        <div
+          v-if="
+            (folder.children == undefined || folder.children.length === 0) &&
+            (folder.requests == undefined || folder.requests.length === 0)
+          "
+          class="
+            flex flex-col
+            text-secondaryLight
+            p-4
+            items-center
+            justify-center
+          "
+        >
+          <i class="opacity-75 pb-2 material-icons">folder_open</i>
+          <span class="text-center">
+            {{ $t("empty.folder") }}
+          </span>
+        </div>
       </div>
     </div>
     <SmartConfirmModal

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",
+      },
     },
   },
 })