feat: more actions & shortcuts

components/app/Shortcuts.vue

@@ -3,7 +3,6 @@
     <template #content>
       <div
         class="
-          bg-primary
           border-b border-dividerLight
           flex
           p-2
@@ -19,15 +18,29 @@
           <ButtonSecondary icon="close" @click.native="close()" />
         </div>
       </div>
-      <!-- <div class="search-wrapper">
-        <input
-          v-model="filterText"
-          v-focus
-          type="search"
-          class="bg-primaryLight border-b border-dividerLight flex font-semibold font-mono w-full py-2 pr-2 pl-8 truncate focus:outline-none"
-          :placeholder="$t('search')"
-        />
-      </div> -->
+      <div class="border-b border-dividerLight">
+        <div class="flex flex-col my-4 mx-6 search-wrapper">
+          <input
+            v-model="filterText"
+            type="search"
+            class="
+              bg-primaryLight
+              border border-dividerLight
+              rounded
+              flex
+              font-semibold font-mono
+              w-full
+              py-2
+              pr-2
+              pl-8
+              transition
+              truncate
+              focus:border-divider focus:outline-none
+            "
+            :placeholder="$t('search')"
+          />
+        </div>
+      </div>
       <div
         class="
           divide-y divide-dividerLight

components/collections/ChooseType.vue

@@ -21,12 +21,12 @@
                 bg-primaryLight
                 border-b border-dividerLight
                 flex
-                font-medium
+                font-semibold
                 w-full
                 py-2
                 px-4
-                focus:outline-none
                 appearance-none
+                focus:outline-none
               "
               @change="updateSelectedTeam(myTeams[$event.target.value])"
             >

components/environments/index.vue

@@ -18,12 +18,12 @@
             bg-primaryLight
             border-b border-dividerLight
             flex
-            font-semibold font-mono
+            font-semibold
             w-full
             py-2
             px-4
-            focus:outline-none
             appearance-none
+            focus:outline-none
           "
         >
           <option :value="-1">No environment</option>

components/http/BodyParameters.vue

@@ -135,32 +135,34 @@
           </SmartDeletableChip>
         </div>
       </div>
-      <ButtonSecondary
-        v-tippy="{ theme: 'tooltip' }"
-        :title="
-          param.hasOwnProperty('active')
-            ? param.active
-              ? $t('action.turn_off')
-              : $t('action.turn_on')
-            : $t('action.turn_off')
-        "
-        :icon="
-          param.hasOwnProperty('active')
-            ? param.active
-              ? 'check_box'
-              : 'check_box_outline_blank'
-            : 'check_box'
-        "
-        color="green"
-        @click.native="
-          updateBodyParam(index, {
-            key: param.key,
-            value: param.value,
-            active: param.hasOwnProperty('active') ? !param.active : false,
-          })
-        "
-      />
-      <div>
+      <span>
+        <ButtonSecondary
+          v-tippy="{ theme: 'tooltip' }"
+          :title="
+            param.hasOwnProperty('active')
+              ? param.active
+                ? $t('action.turn_off')
+                : $t('action.turn_on')
+              : $t('action.turn_off')
+          "
+          :icon="
+            param.hasOwnProperty('active')
+              ? param.active
+                ? 'check_box'
+                : 'check_box_outline_blank'
+              : 'check_box'
+          "
+          color="green"
+          @click.native="
+            updateBodyParam(index, {
+              key: param.key,
+              value: param.value,
+              active: param.hasOwnProperty('active') ? !param.active : false,
+            })
+          "
+        />
+      </span>
+      <span>
         <label for="attachment" class="p-0">
           <ButtonSecondary
             class="w-full"
@@ -176,14 +178,16 @@
           multiple
           @change="setRequestAttachment($event, index)"
         />
-      </div>
-      <ButtonSecondary
-        v-tippy="{ theme: 'tooltip' }"
-        :title="$t('delete')"
-        icon="delete"
-        color="red"
-        @click.native="deleteBodyParam(index)"
-      />
+      </span>
+      <span>
+        <ButtonSecondary
+          v-tippy="{ theme: 'tooltip' }"
+          :title="$t('delete')"
+          icon="delete"
+          color="red"
+          @click.native="deleteBodyParam(index)"
+        />
+      </span>
     </div>
     <div
       v-if="bodyParams.length === 0"

components/http/Headers.vue

@@ -103,38 +103,42 @@
           })
         "
       />
-      <ButtonSecondary
-        v-tippy="{ theme: 'tooltip' }"
-        :title="
-          header.hasOwnProperty('active')
-            ? header.active
-              ? $t('action.turn_off')
-              : $t('action.turn_on')
-            : $t('action.turn_off')
-        "
-        :icon="
-          header.hasOwnProperty('active')
-            ? header.active
-              ? 'check_box'
-              : 'check_box_outline_blank'
-            : 'check_box'
-        "
-        color="green"
-        @click.native="
-          updateHeader(index, {
-            key: header.key,
-            value: header.value,
-            active: header.hasOwnProperty('active') ? !header.active : false,
-          })
-        "
-      />
-      <ButtonSecondary
-        v-tippy="{ theme: 'tooltip' }"
-        :title="$t('delete')"
-        icon="delete"
-        color="red"
-        @click.native="deleteHeader(index)"
-      />
+      <span>
+        <ButtonSecondary
+          v-tippy="{ theme: 'tooltip' }"
+          :title="
+            header.hasOwnProperty('active')
+              ? header.active
+                ? $t('action.turn_off')
+                : $t('action.turn_on')
+              : $t('action.turn_off')
+          "
+          :icon="
+            header.hasOwnProperty('active')
+              ? header.active
+                ? 'check_box'
+                : 'check_box_outline_blank'
+              : 'check_box'
+          "
+          color="green"
+          @click.native="
+            updateHeader(index, {
+              key: header.key,
+              value: header.value,
+              active: header.hasOwnProperty('active') ? !header.active : false,
+            })
+          "
+        />
+      </span>
+      <span>
+        <ButtonSecondary
+          v-tippy="{ theme: 'tooltip' }"
+          :title="$t('delete')"
+          icon="delete"
+          color="red"
+          @click.native="deleteHeader(index)"
+        />
+      </span>
     </div>
     <div
       v-if="headers$.length === 0"

components/http/Parameters.vue

@@ -124,38 +124,42 @@
           })
         "
       />
-      <ButtonSecondary
-        v-tippy="{ theme: 'tooltip' }"
-        :title="
-          param.hasOwnProperty('active')
-            ? param.active
-              ? $t('action.turn_off')
-              : $t('action.turn_on')
-            : $t('action.turn_off')
-        "
-        :icon="
-          param.hasOwnProperty('active')
-            ? param.active
-              ? 'check_box'
-              : 'check_box_outline_blank'
-            : 'check_box'
-        "
-        color="green"
-        @click.native="
-          updateParam(index, {
-            key: param.key,
-            value: param.value,
-            active: param.hasOwnProperty('active') ? !param.active : false,
-          })
-        "
-      />
-      <ButtonSecondary
-        v-tippy="{ theme: 'tooltip' }"
-        :title="$t('delete')"
-        icon="delete"
-        color="red"
-        @click.native="deleteParam(index)"
-      />
+      <span>
+        <ButtonSecondary
+          v-tippy="{ theme: 'tooltip' }"
+          :title="
+            param.hasOwnProperty('active')
+              ? param.active
+                ? $t('action.turn_off')
+                : $t('action.turn_on')
+              : $t('action.turn_off')
+          "
+          :icon="
+            param.hasOwnProperty('active')
+              ? param.active
+                ? 'check_box'
+                : 'check_box_outline_blank'
+              : 'check_box'
+          "
+          color="green"
+          @click.native="
+            updateParam(index, {
+              key: param.key,
+              value: param.value,
+              active: param.hasOwnProperty('active') ? !param.active : false,
+            })
+          "
+        />
+      </span>
+      <span>
+        <ButtonSecondary
+          v-tippy="{ theme: 'tooltip' }"
+          :title="$t('delete')"
+          icon="delete"
+          color="red"
+          @click.native="deleteParam(index)"
+        />
+      </span>
     </div>
     <div
       v-if="params$.length === 0"

components/realtime/Websocket.vue

@@ -97,7 +97,7 @@
                 name="message"
                 type="text"
               />
-              <div class="flex">
+              <span>
                 <ButtonSecondary
                   v-tippy="{ theme: 'tooltip' }"
                   :title="
@@ -121,8 +121,8 @@
                       : false
                   "
                 />
-              </div>
-              <div class="flex">
+              </span>
+              <span>
                 <ButtonSecondary
                   v-tippy="{ theme: 'tooltip' }"
                   :title="$t('delete')"
@@ -130,7 +130,7 @@
                   color="red"
                   @click.native="deleteProtocol({ index })"
                 />
-              </div>
+              </span>
             </div>
             <div
               v-if="protocols.length === 0"