feat: revamp collections ui

components/app/Header.vue

@@ -20,6 +20,7 @@
         <tippy
           v-else
           ref="user"
+          interactive
           tabindex="-1"
           trigger="click"
           theme="popover"
@@ -63,6 +64,7 @@
       <span tabindex="-1">
         <tippy
           ref="options"
+          interactive
           tabindex="-1"
           trigger="click"
           theme="popover"

components/button/Secondary.vue

@@ -14,7 +14,7 @@
     "
     :class="[
       color
-        ? `text-${color}-500 hover:text-${color}-600 focus:text-${color}-600`
+        ? `text-${color}-400 hover:text-${color}-600 focus:text-${color}-600`
         : 'text-secondaryLight hover:text-secondary focus:text-secondary',
       label ? 'px-3 rounded-lg' : 'px-2 rounded-full',
       rounded ? 'rounded-full' : 'rounded-lg',

components/collections/ChooseType.vue

@@ -1,10 +1,6 @@
 <template>
   <div v-if="show">
-    <SmartTabs
+    <SmartTabs :id="'collections_tab'" @tab-changed="updateCollectionsType">
-      :id="'collections_tab'"
-      styles="m-4"
-      @tab-changed="updateCollectionsType"
-    >
       <SmartTab
         :id="'my-collections'"
         :label="'My Collections'"
@@ -15,15 +11,20 @@
         :id="'team-collections'"
         :label="'Team Collections'"
       >
-        <ul>
-          <li>
-            <span class="select-wrapper">
         <SmartIntersection @intersecting="onTeamSelectIntersect">
           <select
             id="team"
             type="text"
-                  class="team select"
             autofocus
+            class="
+              flex
+              w-full
+              px-4
+              text-xs
+              py-2
+              focus:outline-none
+              border-b border-dividerLight
+            "
             @change="updateSelectedTeam(myTeams[$event.target.value])"
           >
             <option
@@ -44,9 +45,6 @@
             </option>
           </select>
         </SmartIntersection>
-            </span>
-          </li>
-        </ul>
       </SmartTab>
     </SmartTabs>
   </div>

components/collections/ImportExport.vue

@@ -18,6 +18,7 @@
             mode == 'import_export' && collectionsType.type == 'my-collections'
           "
           ref="options"
+          interactive
           tabindex="-1"
           trigger="click"
           theme="popover"

components/collections/graphql/Collection.vue

@@ -33,13 +33,14 @@
         />
         <tippy
           ref="options"
+          interactive
           tabindex="-1"
           trigger="click"
           theme="popover"
           arrow
         >
           <template #trigger>
-            <TabPrimary
+            <ButtonSecondary
               v-tippy="{ theme: 'tooltip' }"
               :title="$t('more')"
               icon="more_vert"
@@ -79,7 +80,7 @@
         <li
           v-for="(folder, index) in collection.folders"
           :key="folder.name"
-          class="ml-8 border-l border-divider"
+          class="ml-5 border-l border-dividerLight"
         >
           <CollectionsGraphqlFolder
             :picked="picked"
@@ -101,7 +102,7 @@
         <li
           v-for="(request, index) in collection.requests"
           :key="index"
-          class="ml-8 border-l border-divider"
+          class="ml-5 border-l border-dividerLight"
         >
           <CollectionsGraphqlRequest
             :picked="picked"
@@ -123,7 +124,12 @@
           v-if="
             collection.folders.length === 0 && collection.requests.length === 0
           "
-          class="flex ml-8 border-l border-divider"
+          class="
+            ml-5
+            border-l border-dividerLight
+            ml-5
+            border-l border-dividerLight
+          "
         >
           <p>
             <i class="material-icons">not_interested</i>

components/collections/graphql/Folder.vue

@@ -23,9 +23,16 @@
         <i v-else class="material-icons">folder_open</i>
         <span>{{ folder.name }}</span>
       </div>
-      <tippy ref="options" tabindex="-1" trigger="click" theme="popover" arrow>
+      <tippy
+        ref="options"
+        interactive
+        tabindex="-1"
+        trigger="click"
+        theme="popover"
+        arrow
+      >
         <template #trigger>
-          <TabPrimary
+          <ButtonSecondary
             v-tippy="{ theme: 'tooltip' }"
             :title="$t('more')"
             icon="more_vert"
@@ -62,7 +69,7 @@
         <li
           v-for="(subFolder, subFolderIndex) in folder.folders"
           :key="subFolder.name"
-          class="ml-8 border-l border-divider"
+          class="ml-5 border-l border-dividerLight"
         >
           <CollectionsGraphqlFolder
             :picked="picked"
@@ -84,7 +91,7 @@
         <li
           v-for="(request, index) in folder.requests"
           :key="index"
-          class="flex ml-8 border-l border-divider"
+          class="ml-5 border-l border-dividerLight"
         >
           <CollectionsGraphqlRequest
             :picked="picked"
@@ -109,7 +116,14 @@
           folder.requests.length === 0
         "
       >
-        <li class="flex ml-8 border-l border-divider">
+        <li
+          class="
+            ml-5
+            border-l border-dividerLight
+            ml-5
+            border-l border-dividerLight
+          "
+        >
           <p>
             <i class="material-icons">not_interested</i>
             {{ $t("folder_empty") }}

components/collections/graphql/ImportExport.vue

@@ -5,6 +5,7 @@
       <div>
         <tippy
           ref="options"
+          interactive
           tabindex="-1"
           trigger="click"
           theme="popover"

components/collections/graphql/Request.vue

@@ -10,17 +10,22 @@
     >
       <div>
         <ButtonSecondary
-          v-tippy="{ theme: 'tooltip' }"
-          :title="!doc ? $t('use_request') : ''"
           :class="{ 'mx-3 text-green-400': isSelected }"
           :icon="isSelected ? 'check_circle' : 'description'"
           :label="request.name"
           @click.native="!doc ? selectRequest() : {}"
         />
       </div>
-      <tippy ref="options" tabindex="-1" trigger="click" theme="popover" arrow>
+      <tippy
+        ref="options"
+        interactive
+        tabindex="-1"
+        trigger="click"
+        theme="popover"
+        arrow
+      >
         <template #trigger>
-          <TabPrimary
+          <ButtonSecondary
             v-tippy="{ theme: 'tooltip' }"
             :title="$t('more')"
             icon="more_vert"

components/collections/index.vue

@@ -1,13 +1,13 @@
 <template>
   <AppSection label="collections">
-    <div class="flex">
+    <div class="flex sticky top-10 border-b border-dividerLight">
       <input
         v-if="!saveRequest"
         v-model="filterText"
         aria-label="Search"
         type="search"
         :placeholder="$t('search')"
-        class="px-4 py-2 text-xs flex flex-1"
+        class="px-4 py-3 text-xs flex flex-1 bg-primary focus:outline-none"
       />
     </div>
     <CollectionsChooseType
@@ -53,7 +53,7 @@
       @hide-modal="displayModalImportExport(false)"
       @update-team-collections="updateTeamCollections"
     />
-    <div class="border-b flex flex-1 border-divider">
+    <div class="border-b flex justify-between flex-1 border-dividerLight">
       <ButtonSecondary
         v-if="
           collectionsType.type == 'team-collections' &&
@@ -75,30 +75,34 @@
       />
       <ButtonSecondary
         v-if="!saveRequest"
+        v-tippy="{ theme: 'tooltip' }"
         :disabled="
           collectionsType.type == 'team-collections' &&
           collectionsType.selectedTeam == undefined
         "
-        :label="$t('import_export')"
+        icon="import_export"
+        :title="$t('import_export')"
         @click.native="displayModalImportExport(true)"
       />
     </div>
-    <p v-if="collections.length === 0">
+    <div
-      <i class="material-icons">help_outline</i>
+      v-if="collections.length === 0"
-      {{ $t("create_new_collection") }}
+      class="flex items-center text-secondaryLight flex-col p-4 justify-center"
-    </p>
-    <div class="overflow-auto">
-      <ul class="flex-col">
-        <li
-          v-for="(collection, index) in filteredCollections"
-          :key="collection.name"
     >
+      <i class="material-icons opacity-50 pb-2">create_new_folder</i>
+      <span class="text-xs">
+        {{ $t("create_new_collection") }}
+      </span>
+    </div>
+    <div class="flex flex-col">
       <component
         :is="
           collectionsType.type == 'my-collections'
             ? 'CollectionsMyCollection'
             : 'CollectionsTeamsCollection'
         "
+        v-for="(collection, index) in filteredCollections"
+        :key="collection.name"
         :name="collection.name"
         :collection-index="index"
         :collection="collection"
@@ -120,13 +124,16 @@
         @remove-collection="removeCollection"
         @remove-request="removeRequest"
       />
-        </li>
-      </ul>
     </div>
-    <p v-if="filterText && filteredCollections.length === 0">
+    <div
-      <i class="material-icons">not_interested</i>
+      v-if="filterText && filteredCollections.length === 0"
+      class="flex items-center text-secondaryLight flex-col p-4 justify-center"
+    >
+      <i class="material-icons opacity-50 pb-2">manage_search</i>
+      <span class="text-xs">
         {{ $t("nothing_found") }} "{{ filterText }}"
-    </p>
+      </span>
+    </div>
   </AppSection>
 </template>
 

components/collections/my/Collection.vue

@@ -1,7 +1,7 @@
 <template>
-  <div>
+  <div class="flex flex-col" :class="[{ 'bg-primaryLight': dragging }]">
     <div
-      :class="[{ 'bg-primaryDark': dragging }]"
+      class="flex items-center group"
       @dragover.prevent
       @drop.prevent="dropEvent"
       @dragover="dragging = true"
@@ -9,21 +9,35 @@
       @dragleave="dragging = false"
       @dragend="dragging = false"
     >
-      <ButtonSecondary
+      <span
-        :label="collection.name"
+        class="
-        @click.native="toggleShowChildren"
+          flex
-      />
+          justify-center
-      <i v-show="!showChildren && !isFiltered" class="material-icons"
+          items-center
-        >arrow_right</i
+          text-xs
+          w-10
+          truncate
+          cursor-pointer
+        "
+        @click="toggleShowChildren()"
       >
-      <i v-show="showChildren || isFiltered" class="material-icons"
+        <i class="material-icons">{{ getCollectionIcon }}</i>
-        >arrow_drop_down</i
+      </span>
+      <span
+        class="
+          py-3
+          cursor-pointer
+          pr-3
+          flex flex-1
+          min-w-0
+          text-xs
+          group-hover:text-secondaryDark
+          transition
+        "
+        @click="toggleShowChildren()"
       >
-      <i v-if="isSelected" class="text-green-400 material-icons"
+        <span class="truncate"> {{ collection.name }} </span>
-        >check_circle</i
+      </span>
-      >
-      <i v-else class="material-icons">folder</i>
-      <div>
       <ButtonSecondary
         v-if="doc && !selected"
         v-tippy="{ theme: 'tooltip' }"
@@ -38,15 +52,28 @@
         icon="check_box"
         @click.native="$emit('unselect-collection')"
       />
+      <ButtonSecondary
+        v-tippy="{ theme: 'tooltip' }"
+        icon="create_new_folder"
+        :title="$t('new_folder')"
+        class="group-hover:inline-flex hidden"
+        @click.native="
+          $emit('add-folder', {
+            folder: collection,
+            path: `${collectionIndex}`,
+          })
+        "
+      />
       <tippy
         ref="options"
+        interactive
         tabindex="-1"
         trigger="click"
         theme="popover"
         arrow
       >
         <template #trigger>
-            <TabPrimary
+          <ButtonSecondary
             v-tippy="{ theme: 'tooltip' }"
             :title="$t('more')"
             icon="more_vert"
@@ -81,15 +108,11 @@
         />
       </tippy>
     </div>
-    </div>
     <div v-show="showChildren || isFiltered">
-      <ul class="flex-col">
+      <CollectionsMyFolder
-        <li
         v-for="(folder, index) in collection.folders"
         :key="index"
-          class="ml-8 border-l border-divider"
+        class="ml-5 border-l border-dividerLight"
-        >
-          <CollectionsMyFolder
         :folder="folder"
         :folder-index="index"
         :folder-path="`${collectionIndex}/${index}`"
@@ -105,15 +128,10 @@
         @select="$emit('select', $event)"
         @remove-request="$emit('remove-request', $event)"
       />
-        </li>
+      <CollectionsMyRequest
-      </ul>
-      <ul class="flex-col">
-        <li
         v-for="(request, index) in collection.requests"
         :key="index"
-          class="ml-8 border-l border-divider"
+        class="ml-5 border-l border-dividerLight"
-        >
-          <CollectionsMyRequest
         :request="request"
         :collection-index="collectionIndex"
         :folder-index="-1"
@@ -128,24 +146,28 @@
         @select="$emit('select', $event)"
         @remove-request="$emit('remove-request', $event)"
       />
-        </li>
+      <div
-      </ul>
-      <ul>
-        <li
         v-if="
           (collection.folders == undefined ||
             collection.folders.length === 0) &&
-            (collection.requests == undefined ||
+          (collection.requests == undefined || collection.requests.length === 0)
-              collection.requests.length === 0)
+        "
+        class="
+          flex
+          items-center
+          text-secondaryLight
+          flex-col
+          p-4
+          justify-center
+          ml-5
+          border-l border-dividerLight
         "
-          class="flex ml-8 border-l border-divider"
       >
-          <p>
+        <i class="material-icons opacity-50 pb-2">folder_open</i>
-            <i class="material-icons">not_interested</i>
+        <span class="text-xs">
           {{ $t("collection_empty") }}
-          </p>
+        </span>
-        </li>
+      </div>
-      </ul>
     </div>
     <SmartConfirmModal
       :show="confirmRemove"
@@ -189,6 +211,12 @@ export default {
         this.picked.collectionIndex === this.collectionIndex
       )
     },
+    getCollectionIcon() {
+      if (this.isSelected) return "check_circle"
+      else if (!this.showChildren && !this.isFiltered) return "arrow_right"
+      else if (this.showChildren || this.isFiltered) return "arrow_drop_down"
+      else return "folder"
+    },
   },
   methods: {
     editRequest(event) {

components/collections/my/Folder.vue

@@ -1,7 +1,7 @@
 <template>
-  <div>
+  <div class="flex flex-col" :class="[{ 'bg-primaryLight': dragging }]">
     <div
-      :class="[{ 'bg-primaryDark': dragging }]"
+      class="flex items-center group"
       @dragover.prevent
       @drop.prevent="dropEvent"
       @dragover="dragging = true"
@@ -9,25 +9,54 @@
       @dragleave="dragging = false"
       @dragend="dragging = false"
     >
-      <div>
+      <span
+        class="
+          flex
+          justify-center
+          items-center
+          text-xs
+          w-10
+          truncate
+          cursor-pointer
+        "
+        @click="toggleShowChildren()"
+      >
+        <i class="material-icons">{{ getCollectionIcon }}</i>
+      </span>
+      <span
+        class="
+          py-3
+          cursor-pointer
+          pr-3
+          flex flex-1
+          min-w-0
+          text-xs
+          group-hover:text-secondaryDark
+          transition
+        "
+        @click="toggleShowChildren()"
+      >
+        <span class="truncate">
+          {{ folder.name ? folder.name : folder.title }}
+        </span>
+      </span>
       <ButtonSecondary
-          :label="folder.name ? folder.name : folder.title"
+        v-tippy="{ theme: 'tooltip' }"
-          @click.native="toggleShowChildren"
+        icon="create_new_folder"
+        :title="$t('new_folder')"
+        class="group-hover:inline-flex hidden"
+        @click.native="$emit('add-folder', { folder, path: folderPath })"
       />
-        <i v-show="!showChildren && !isFiltered" class="material-icons"
+      <tippy
-          >arrow_right</i
+        ref="options"
+        interactive
+        tabindex="-1"
+        trigger="click"
+        theme="popover"
+        arrow
       >
-        <i v-show="showChildren || isFiltered" class="material-icons"
-          >arrow_drop_down</i
-        >
-        <i v-if="isSelected" class="text-green-400 material-icons"
-          >check_circle</i
-        >
-        <i v-else class="material-icons">folder_open</i>
-      </div>
-      <tippy ref="options" tabindex="-1" trigger="click" theme="popover" arrow>
         <template #trigger>
-          <TabPrimary
+          <ButtonSecondary
             v-tippy="{ theme: 'tooltip' }"
             :title="$t('more')"
             icon="more_vert"
@@ -56,7 +85,7 @@
         />
         <SmartItem
           icon="delete"
-          :labl="$t('delete')"
+          :label="$t('delete')"
           @click.native="
             confirmRemove = true
             $refs.options.tippy().hide()
@@ -65,13 +94,10 @@
       </tippy>
     </div>
     <div v-show="showChildren || isFiltered">
-      <ul class="flex-col">
+      <CollectionsMyFolder
-        <li
         v-for="(subFolder, subFolderIndex) in folder.folders"
         :key="subFolder.name"
-          class="ml-8 border-l border-divider"
+        class="ml-5 border-l border-dividerLight"
-        >
-          <CollectionsMyFolder
         :folder="subFolder"
         :folder-index="subFolderIndex"
         :collection-index="collectionIndex"
@@ -87,15 +113,10 @@
         @select="$emit('select', $event)"
         @remove-request="removeRequest"
       />
-        </li>
+      <CollectionsMyRequest
-      </ul>
-      <ul class="flex-col">
-        <li
         v-for="(request, index) in folder.requests"
         :key="index"
-          class="flex ml-8 border-l border-divider"
+        class="ml-5 border-l border-dividerLight"
-        >
-          <CollectionsMyRequest
         :request="request"
         :collection-index="collectionIndex"
         :folder-index="folderIndex"
@@ -110,23 +131,29 @@
         @select="$emit('select', $event)"
         @remove-request="removeRequest"
       />
-        </li>
+      <div
-      </ul>
-      <ul
         v-if="
           folder.folders &&
           folder.folders.length === 0 &&
           folder.requests &&
           folder.requests.length === 0
         "
+        class="
+          flex
+          items-center
+          text-secondaryLight
+          flex-col
+          p-4
+          justify-center
+          ml-5
+          border-l border-dividerLight
+        "
       >
-        <li class="flex ml-8 border-l border-divider">
+        <i class="material-icons opacity-50 pb-2">folder_open</i>
-          <p>
+        <span class="text-xs">
-            <i class="material-icons">not_interested</i>
           {{ $t("folder_empty") }}
-          </p>
+        </span>
-        </li>
+      </div>
-      </ul>
     </div>
     <SmartConfirmModal
       :show="confirmRemove"
@@ -174,6 +201,12 @@ export default {
         this.picked.folderPath === this.folderPath
       )
     },
+    getCollectionIcon() {
+      if (this.isSelected) return "check_circle"
+      else if (!this.showChildren && !this.isFiltered) return "arrow_right"
+      else if (this.showChildren || this.isFiltered) return "arrow_drop_down"
+      else return "folder"
+    },
   },
   methods: {
     toggleShowChildren() {

components/collections/my/Request.vue

@@ -1,29 +1,58 @@
 <template>
-  <div>
+  <div class="flex flex-col" :class="[{ 'bg-primaryLight': dragging }]">
     <div
-      :class="[{ 'bg-primaryDark': dragging }]"
+      class="flex items-center group"
       draggable="true"
       @dragstart="dragStart"
       @dragover.stop
       @dragleave="dragging = false"
       @dragend="dragging = false"
     >
-      <div>
+      <span
-        <ButtonSecondary
+        class="
-          v-tippy="{ theme: 'tooltip' }"
+          font-mono font-bold
-          :title="!doc ? $t('use_request') : ''"
+          flex
+          justify-center
+          items-center
+          text-xs
+          w-12
+          truncate
+          cursor-pointer
+        "
         :class="[
           getRequestLabelColor(request.method),
           { 'mx-3 text-green-400': isSelected },
         ]"
-          :icon="isSelected ? 'check_circle' : ''"
+        @click="!doc ? selectRequest() : {}"
-          :label="request.method + request.name"
+      >
-          @click.native="!doc ? selectRequest() : {}"
+        <i v-if="isSelected" class="material-icons">check_circle</i>
-        />
+        {{ request.method }}
-      </div>
+      </span>
-      <tippy ref="options" tabindex="-1" trigger="click" theme="popover" arrow>
+      <span
+        class="
+          py-3
+          cursor-pointer
+          pr-3
+          flex flex-1
+          min-w-0
+          text-xs
+          group-hover:text-secondaryDark
+          transition
+        "
+        @click="!doc ? selectRequest() : {}"
+      >
+        <span class="truncate"> {{ request.name }} </span>
+      </span>
+      <tippy
+        ref="options"
+        interactive
+        tabindex="-1"
+        trigger="click"
+        theme="popover"
+        arrow
+      >
         <template #trigger>
-          <TabPrimary
+          <ButtonSecondary
             v-tippy="{ theme: 'tooltip' }"
             :title="$t('more')"
             icon="more_vert"

components/collections/teams/Collection.vue

@@ -1,21 +1,35 @@
 <template>
-  <div>
+  <div class="flex flex-col">
-    <div>
+    <div class="flex items-center group">
-      <ButtonSecondary
+      <span
-        :label="collection.title"
+        class="
-        @click.native="toggleShowChildren"
+          flex
-      />
+          justify-center
-      <i v-show="!showChildren && !isFiltered" class="material-icons"
+          items-center
-        >arrow_right</i
+          text-xs
+          w-10
+          truncate
+          cursor-pointer
+        "
+        @click="toggleShowChildren()"
       >
-      <i v-show="showChildren || isFiltered" class="material-icons"
+        <i class="material-icons">{{ getCollectionIcon }}</i>
-        >arrow_drop_down</i
+      </span>
+      <span
+        class="
+          py-3
+          cursor-pointer
+          pr-3
+          flex flex-1
+          min-w-0
+          text-xs
+          group-hover:text-secondaryDark
+          transition
+        "
+        @click="toggleShowChildren()"
       >
-      <i v-if="isSelected" class="text-green-400 material-icons"
+        <span class="truncate"> {{ collection.title }} </span>
-        >check_circle</i
+      </span>
-      >
-      <i v-else class="material-icons">folder</i>
-      <div>
       <ButtonSecondary
         v-if="doc && !selected"
         v-tippy="{ theme: 'tooltip' }"
@@ -30,16 +44,30 @@
         icon="check_box"
         @click.native="$emit('unselect-collection')"
       />
+      <ButtonSecondary
+        v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
+        v-tippy="{ theme: 'tooltip' }"
+        icon="create_new_folder"
+        :title="$t('new_folder')"
+        class="group-hover:inline-flex hidden"
+        @click.native="
+          $emit('add-folder', {
+            folder: collection,
+            path: `${collectionIndex}`,
+          })
+        "
+      />
       <tippy
+        v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
         ref="options"
+        interactive
         tabindex="-1"
         trigger="click"
         theme="popover"
         arrow
       >
         <template #trigger>
-            <TabPrimary
+          <ButtonSecondary
-              v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
             v-tippy="{ theme: 'tooltip' }"
             :title="$t('more')"
             icon="more_vert"
@@ -77,15 +105,11 @@
         />
       </tippy>
     </div>
-    </div>
     <div v-show="showChildren || isFiltered">
-      <ul class="flex-col">
+      <CollectionsTeamsFolder
-        <li
         v-for="(folder, index) in collection.children"
         :key="folder.title"
-          class="ml-8 border-l border-divider"
+        class="ml-5 border-l border-dividerLight"
-        >
-          <CollectionsTeamsFolder
         :folder="folder"
         :folder-index="index"
         :folder-path="`${collectionIndex}/${index}`"
@@ -102,15 +126,10 @@
         @expand-collection="expandCollection"
         @remove-request="removeRequest"
       />
-        </li>
+      <CollectionsTeamsRequest
-      </ul>
-      <ul class="flex-col">
-        <li
         v-for="(request, index) in collection.requests"
         :key="index"
-          class="ml-8 border-l border-divider"
+        class="ml-5 border-l border-dividerLight"
-        >
-          <CollectionsTeamsRequest
         :request="request.request"
         :collection-index="collectionIndex"
         :folder-index="-1"
@@ -124,24 +143,28 @@
         @select="$emit('select', $event)"
         @remove-request="removeRequest"
       />
-        </li>
+      <div
-      </ul>
-      <ul>
-        <li
         v-if="
           (collection.children == undefined ||
             collection.children.length === 0) &&
-            (collection.requests == undefined ||
+          (collection.requests == undefined || collection.requests.length === 0)
-              collection.requests.length === 0)
+        "
+        class="
+          flex
+          items-center
+          text-secondaryLight
+          flex-col
+          p-4
+          justify-center
+          ml-5
+          border-l border-dividerLight
         "
-          class="flex ml-8 border-l border-divider"
       >
-          <p>
+        <i class="material-icons opacity-50 pb-2">folder_open</i>
-            <i class="material-icons">not_interested</i>
+        <span class="text-xs">
           {{ $t("collection_empty") }}
-          </p>
+        </span>
-        </li>
+      </div>
-      </ul>
     </div>
     <SmartConfirmModal
       :show="confirmRemove"
@@ -167,7 +190,6 @@ export default {
   data() {
     return {
       showChildren: false,
-      dragging: false,
       selectedFolder: {},
       confirmRemove: false,
       prevCursor: "",
@@ -183,6 +205,12 @@ export default {
         this.picked.collectionID === this.collection.id
       )
     },
+    getCollectionIcon() {
+      if (this.isSelected) return "check_circle"
+      else if (!this.showChildren && !this.isFiltered) return "arrow_right"
+      else if (this.showChildren || this.isFiltered) return "arrow_drop_down"
+      else return "folder"
+    },
   },
   methods: {
     editRequest(event) {

components/collections/teams/Folder.vue

@@ -1,26 +1,56 @@
 <template>
-  <div>
+  <div class="flex flex-col">
-    <div>
+    <div class="flex items-center group">
-      <div>
+      <span
+        class="
+          flex
+          justify-center
+          items-center
+          text-xs
+          w-10
+          truncate
+          cursor-pointer
+        "
+        @click="toggleShowChildren()"
+      >
+        <i class="material-icons">{{ getCollectionIcon }}</i>
+      </span>
+      <span
+        class="
+          py-3
+          cursor-pointer
+          pr-3
+          flex flex-1
+          min-w-0
+          text-xs
+          group-hover:text-secondaryDark
+          transition
+        "
+        @click="toggleShowChildren()"
+      >
+        <span class="truncate">
+          {{ folder.name ? folder.name : folder.title }}
+        </span>
+      </span>
       <ButtonSecondary
-          :label="folder.name ? folder.name : folder.title"
-          @click.native="toggleShowChildren"
-        />
-        <i v-show="!showChildren && !isFiltered" class="material-icons"
-          >arrow_right</i
-        >
-        <i v-show="showChildren || isFiltered" class="material-icons"
-          >arrow_drop_down</i
-        >
-        <i v-if="isSelected" class="text-green-400 material-icons"
-          >check_circle</i
-        >
-        <i v-else class="material-icons">folder_open</i>
-      </div>
-      <tippy ref="options" tabindex="-1" trigger="click" theme="popover" arrow>
-        <template #trigger>
-          <TabPrimary
         v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
+        v-tippy="{ theme: 'tooltip' }"
+        icon="create_new_folder"
+        :title="$t('new_folder')"
+        class="group-hover:inline-flex hidden"
+        @click.native="$emit('add-folder', { folder, path: folderPath })"
+      />
+      <tippy
+        v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
+        ref="options"
+        interactive
+        tabindex="-1"
+        trigger="click"
+        theme="popover"
+        arrow
+      >
+        <template #trigger>
+          <ButtonSecondary
             v-tippy="{ theme: 'tooltip' }"
             :title="$t('more')"
             icon="more_vert"
@@ -61,13 +91,10 @@
       </tippy>
     </div>
     <div v-show="showChildren || isFiltered">
-      <ul class="flex-col">
+      <CollectionsTeamsFolder
-        <li
         v-for="(subFolder, subFolderIndex) in folder.children"
         :key="subFolder.name"
-          class="ml-8 border-l border-divider"
+        class="ml-5 border-l border-dividerLight"
-        >
-          <CollectionsTeamsFolder
         :folder="subFolder"
         :folder-index="subFolderIndex"
         :collection-index="collectionIndex"
@@ -84,15 +111,10 @@
         @expand-collection="expandCollection"
         @remove-request="removeRequest"
       />
-        </li>
+      <CollectionsTeamsRequest
-      </ul>
-      <ul class="flex-col">
-        <li
         v-for="(request, index) in folder.requests"
         :key="index"
-          class="flex ml-8 border-l border-divider"
+        class="ml-5 border-l border-dividerLight"
-        >
-          <CollectionsTeamsRequest
         :request="request.request"
         :collection-index="collectionIndex"
         :folder-index="folderIndex"
@@ -106,21 +128,27 @@
         @select="$emit('select', $event)"
         @remove-request="removeRequest"
       />
-        </li>
+      <div
-      </ul>
-      <ul
         v-if="
           (folder.children == undefined || folder.children.length === 0) &&
           (folder.requests == undefined || folder.requests.length === 0)
         "
+        class="
+          flex
+          items-center
+          text-secondaryLight
+          flex-col
+          p-4
+          justify-center
+          ml-5
+          border-l border-dividerLight
+        "
       >
-        <li class="flex ml-8 border-l border-divider">
+        <i class="material-icons opacity-50 pb-2">folder_open</i>
-          <p>
+        <span class="text-xs">
-            <i class="material-icons">not_interested</i>
           {{ $t("folder_empty") }}
-          </p>
+        </span>
-        </li>
+      </div>
-      </ul>
     </div>
     <SmartConfirmModal
       :show="confirmRemove"
@@ -163,6 +191,12 @@ export default {
         this.picked.folderID === this.folder.id
       )
     },
+    getCollectionIcon() {
+      if (this.isSelected) return "check_circle"
+      else if (!this.showChildren && !this.isFiltered) return "arrow_right"
+      else if (this.showChildren || this.isFiltered) return "arrow_drop_down"
+      else return "folder"
+    },
   },
   methods: {
     toggleShowChildren() {

components/collections/teams/Request.vue

@@ -1,24 +1,52 @@
 <template>
-  <div>
+  <div class="flex flex-col">
-    <div>
+    <div class="flex items-center group">
-      <div>
+      <span
-        <ButtonSecondary
+        class="
-          v-tippy="{ theme: 'tooltip' }"
+          font-mono font-bold
-          :title="!doc ? $t('use_request') : ''"
+          flex
-          :label="request.name"
+          justify-center
-          @click.native="!doc ? selectRequest() : {}"
+          items-center
-        />
+          text-xs
-        <i v-if="isSelected" class="mx-3 text-green-400 material-icons"
+          w-12
-          >check_circle</i
+          truncate
+          cursor-pointer
+        "
+        :class="[
+          getRequestLabelColor(request.method),
+          { 'mx-3 text-green-400': isSelected },
+        ]"
+        @click="!doc ? selectRequest() : {}"
       >
-        <span v-else :class="getRequestLabelColor(request.method)">{{
+        <i v-if="isSelected" class="material-icons">check_circle</i>
-          request.method
+        {{ request.method }}
-        }}</span>
+      </span>
-      </div>
+      <span
-      <tippy ref="options" tabindex="-1" trigger="click" theme="popover" arrow>
+        class="
-        <template #trigger>
+          py-3
-          <TabPrimary
+          cursor-pointer
+          pr-3
+          flex flex-1
+          min-w-0
+          text-xs
+          group-hover:text-secondaryDark
+          transition
+        "
+        @click="!doc ? selectRequest() : {}"
+      >
+        <span class="truncate"> {{ request.name }} </span>
+      </span>
+      <tippy
         v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
+        ref="options"
+        interactive
+        tabindex="-1"
+        trigger="click"
+        theme="popover"
+        arrow
+      >
+        <template #trigger>
+          <ButtonSecondary
             v-tippy="{ theme: 'tooltip' }"
             :title="$t('more')"
             icon="more_vert"
@@ -73,7 +101,6 @@ export default {
   },
   data() {
     return {
-      dragging: false,
       requestMethodLabels: {
         get: "text-green-400",
         post: "text-yellow-400",

components/environments/Environment.vue

@@ -8,7 +8,14 @@
           @click.native="$emit('edit-environment')"
         />
       </div>
-      <tippy ref="options" tabindex="-1" trigger="click" theme="popover" arrow>
+      <tippy
+        ref="options"
+        interactive
+        tabindex="-1"
+        trigger="click"
+        theme="popover"
+        arrow
+      >
         <template #trigger>
           <TabPrimary
             v-tippy="{ theme: 'tooltip' }"

components/environments/ImportExport.vue

@@ -7,6 +7,7 @@
       <div>
         <tippy
           ref="options"
+          interactive
           tabindex="-1"
           trigger="click"
           theme="popover"

components/history/graphql/Card.vue

@@ -28,7 +28,14 @@
         :icon="expand ? 'unfold_less' : 'unfold_more'"
         @click.native="expand = !expand"
       />
-      <tippy ref="options" tabindex="-1" trigger="click" theme="popover" arrow>
+      <tippy
+        ref="options"
+        interactive
+        tabindex="-1"
+        trigger="click"
+        theme="popover"
+        arrow
+      >
         <template #trigger>
           <TabPrimary
             v-tippy="{ theme: 'tooltip' }"

components/history/index.vue

@@ -1,11 +1,11 @@
 <template>
   <AppSection label="history">
-    <div class="flex sticky top-10 shadow-sm">
+    <div class="flex sticky top-10 border-b border-dividerLight">
       <input
         v-model="filterText"
         aria-label="Search"
         type="search"
-        class="px-4 py-2 text-xs flex flex-1 focus:outline-none border-divider"
+        class="px-4 py-3 text-xs flex flex-1 bg-primary focus:outline-none"
         :placeholder="$t('search')"
       />
       <ButtonSecondary

components/history/rest/Card.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="flex group">
+  <div class="flex items-center group">
     <span
       class="
         font-mono font-bold
@@ -10,14 +10,26 @@
         w-12
         mx-2
         truncate
+        cursor-pointer
       "
       :class="entryStatus.className"
-      :style="{ '--status-code': entry.status }"
       @click="$emit('use-entry')"
     >
       {{ entry.method }}
     </span>
-    <span class="py-3 pr-3 flex flex-1 min-w-0 text-secondaryLight text-xs">
+    <span
+      class="
+        py-3
+        cursor-pointer
+        pr-3
+        flex flex-1
+        min-w-0
+        text-secondaryLight text-xs
+        group-hover:text-secondary
+        transition
+      "
+      @click="$emit('use-entry')"
+    >
       <span class="truncate">
         {{ `${entry.url}${entry.path}` }}
       </span>

components/http/CodegenModal.vue

@@ -11,6 +11,7 @@
       <span class="select-wrapper">
         <tippy
           ref="options"
+          interactive
           tabindex="-1"
           trigger="click"
           theme="popover"

components/smart/ChangeLanguage.vue

@@ -2,6 +2,7 @@
   <span>
     <tippy
       ref="language"
+      interactive
       tabindex="-1"
       trigger="click"
       theme="popover"

components/smart/Tabs.vue

@@ -1,6 +1,6 @@
 <template>
-  <div class="flex flex-col flex-nowrap relative flex-1">
+  <div class="flex flex-col flex-nowrap flex-1">
-    <div class="tabs hide-scrollbar" :class="styles">
+    <div class="tabs hide-scrollbar relative" :class="styles">
       <div class="flex w-0">
         <div class="inline-flex">
           <button

components/smart/Toggle.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="inline-block cursor-pointer" @click="toggle()">
+  <div class="inline-block cursor-pointer" @click="$emit('change')">
     <label ref="toggle" class="toggle" :class="{ on: on }">
       <span class="handle"></span>
     </label>
@@ -17,13 +17,6 @@ export default {
       default: false,
     },
   },
-
-  methods: {
-    toggle() {
-      const containsOnClass = this.$refs.toggle.classList.toggle("on")
-      this.$emit("change", containsOnClass)
-    },
-  },
 }
 </script>
 

components/teams/Edit.vue

@@ -57,6 +57,7 @@
           <span class="select-wrapper">
             <tippy
               ref="options"
+              interactive
               tabindex="-1"
               trigger="click"
               theme="popover"
@@ -136,6 +137,7 @@
           <span class="select-wrapper">
             <tippy
               ref="memberOptions"
+              interactive
               tabindex="-1"
               trigger="click"
               theme="popover"

components/teams/Team.vue

@@ -9,7 +9,14 @@
         @click.native="team.myRole === 'OWNER' ? $emit('edit-team') : ''"
       />
     </div>
-    <tippy ref="options" tabindex="-1" trigger="click" theme="popover" arrow>
+    <tippy
+      ref="options"
+      interactive
+      tabindex="-1"
+      trigger="click"
+      theme="popover"
+      arrow
+    >
       <template #trigger>
         <TabPrimary
           v-tippy="{ theme: 'tooltip' }"

pages/api.vue

@@ -10,7 +10,7 @@
                 <li class="shrink">
                   <label for="method">{{ $t("method") }}</label>
                   <span class="select-wrapper">
-                    <tippy
+                    <tippy interactive
                       ref="options"
                       tabindex="-1"
                       trigger="click"
@@ -104,7 +104,7 @@
                       $t("content_type")
                     }}</label>
                     <span class="select-wrapper">
-                      <tippy
+                      <tippy interactive
                         ref="contentTypeOptions"
                         tabindex="-1"
                         trigger="click"
@@ -599,7 +599,7 @@
           </Pane>
         </Splitpanes>
       </Pane>
-      <Pane max-size="35" min-size="20" class="overflow-auto hide-scrollbar">
+      <Pane max-size="30" size="25" min-size="20" class="overflow-auto hide-scrollbar">
         <aside class="h-full">
           <SmartTabs styles="sticky top-0">
             <SmartTab :id="'history'" :label="$t('history')" :selected="true">

plugins/v-tippy.js

@@ -3,6 +3,5 @@ import VueTippy, { TippyComponent } from "vue-tippy"
 
 Vue.use(VueTippy, {
   animateFill: false,
-  interactive: true,
 })
 Vue.component("Tippy", TippyComponent)

windi.config.js

@@ -33,5 +33,4 @@ export default defineConfig({
       icon: "var(--font-icon)",
     },
   },
-  safelist: "text-red-500 text-red-600",
 })