refactor(ui): better tabs

TRANSLATIONS.md

@@ -1,41 +1,23 @@
 # Translations
 
-Thanks for your interest in helping translating the software!
-
-## Starting a translation
-
-Before you start working on a translation, look through the [open pull requests](https://github.com/hoppscotch/hoppscotch/pulls) to see if anyone else is already working on one for your language.
-
-If there's not, then today is your day to lead this effort! Here's how to start:
-
-1. [Fork this repository](https://github.com/hoppscotch/hoppscotch/fork)
-2. Create a new branch for your translation work e.g. `es`.
-3. Copy `lang/en-US.json` to your target language file e.g. `lang/es-ES.json` and translate all the strings.
-4. Add your language entry to `nuxt.config.js`.
-
-   e.g.
-
-   ```
-    i18n: {
-      locales: [
-        {
-          code: "en",
-          name: "English",
-          iso: "en-US",
-          file: "en-US.json",
-        },
-        {
-          code: 'es',
-          name: 'Español',
-          iso: 'es-ES',
-          file: 'es-ES.json'
-        }
-      ]
-    }
-   ```
-
-5. Save & commit changes.
-6. Send a pull request. (You may send a pull request before all steps above are complete: e.g., you may want to ask for help with translations, or getting tests to pass. However your pull request will not be merged until all steps above are complete.)
+Thanks for showing your interest in helping us to translate the software.
+
+## Creating a new translation
+
+Before you start working on a new language, please look through the [open pull requests](https://github.com/hoppscotch/hoppscotch/pulls) to see if anyone is already working on a translation. If you find one, please join the discussion and help us keep the existing translations up to date.
+
+if there is no existing translation, you can create a new one by following these steps:
+
+1. **[Fork the repository](https://github.com/hoppscotch/hoppscotch/fork).**
+2. **Create a new branch for your translation.**
+3. **Create target language file in the [`locales`](https://github.com/hoppscotch/hoppscotch/tree/main/locales) directory.**
+4. **Copy the contents of the source file [`locales/en.json`](https://github.com/hoppscotch/hoppscotch/blob/main/locales/en.json) to the target language file.**
+5. **Translate the strings in the target language file.**
+6. **Add your language entry to [`languages.json`](https://github.com/hoppscotch/hoppscotch/blob/main/languages.json).**
+7. **Save & commit changes.**
+8. **Send a pull request.**
+
+_You may send a pull request before all steps above are complete: e.g., you may want to ask for help with translations, or getting tests to pass. However, your pull request will not be merged until all steps above are complete._
 
 Completing an initial translation of the whole site is a fairly large task. One way to break that task up is to work with other translators through pull requests on your fork. You can also [add collaborators to your fork](https://help.github.com/en/github/setting-up-and-managing-your-github-user-account/inviting-collaborators-to-a-personal-repository) if you'd like to invite other translators to commit directly to your fork and share responsibility for merging pull requests.
 

assets/scss/styles.scss

@@ -198,7 +198,7 @@ hr {
   @apply rounded;
   @apply text-secondaryDark;
   @apply border border-divider;
-  @apply focus-visible:border-accent;
+  @apply focus-visible:border-dividerDark;
 }
 
 input,
@@ -242,7 +242,7 @@ button {
 }
 
 .floating-input:focus-within ~ label {
-  @apply text-accent;
+  @apply text-secondaryDark;
 }
 
 pre.ace_editor {
@@ -292,7 +292,7 @@ pre.ace_editor {
     @apply pointer-events-none;
     @apply font-icon;
     @apply text-secondaryLight;
-    @apply left-3;
+    @apply left-4;
 
     content: "\e8b6";
   }
@@ -400,20 +400,35 @@ input[type="checkbox"] {
   }
 }
 
-.splitpanes__splitter {
+.smart-splitter .splitpanes__splitter {
+  @apply relative;
+  @apply bg-primaryLight;
+}
+
+.no-splitter .splitpanes__splitter {
   @apply relative;
   @apply bg-primaryLight;
 }
 
-.splitpanes--vertical > .splitpanes__splitter {
+.smart-splitter.splitpanes--vertical > .splitpanes__splitter {
   @apply w-1;
 }
 
-.splitpanes--horizontal > .splitpanes__splitter {
+.smart-splitter.splitpanes--horizontal > .splitpanes__splitter {
   @apply h-1;
 }
 
-.splitpanes__splitter::before {
+.no-splitter.splitpanes--vertical > .splitpanes__splitter {
+  @apply w-0.5;
+  @apply pointer-events-none;
+}
+
+.no-splitter.splitpanes--horizontal > .splitpanes__splitter {
+  @apply h-0.5;
+  @apply pointer-events-none;
+}
+
+.smart-splitter .splitpanes__splitter::before {
   @apply absolute;
   @apply inset-0;
   @apply bg-dividerLight;
@@ -424,7 +439,7 @@ input[type="checkbox"] {
   content: "";
 }
 
-.splitpanes__splitter::after {
+.smart-splitter .splitpanes__splitter::after {
   @apply absolute;
   @apply inset-0;
   @apply z-30;
@@ -436,25 +451,25 @@ input[type="checkbox"] {
   @apply font-icon;
 }
 
-.splitpanes--vertical > .splitpanes__splitter::after {
+.smart-splitter.splitpanes--vertical > .splitpanes__splitter::after {
   content: "\e5d4";
 }
 
-.splitpanes--horizontal > .splitpanes__splitter::after {
+.smart-splitter.splitpanes--horizontal > .splitpanes__splitter::after {
   content: "\e5d3";
 }
 
-.splitpanes__splitter:hover::before {
+.smart-splitter .splitpanes__splitter:hover::before {
   @apply opacity-100;
 }
 
-.splitpanes--vertical > .splitpanes__splitter::before {
+.smart-splitter.splitpanes--vertical > .splitpanes__splitter::before {
   @apply -left-0.5;
   @apply -right-0.5;
   @apply h-full;
 }
 
-.splitpanes--horizontal > .splitpanes__splitter::before {
+.smart-splitter.splitpanes--horizontal > .splitpanes__splitter::before {
   @apply -top-0.5;
   @apply -bottom-0.5;
   @apply w-full;

assets/scss/themes.scss

@@ -37,25 +37,25 @@
   // Background color
   --primary-color: theme("colors.white");
   // Light Background color
-  --primary-light-color: theme("colors.blue-gray.50");
+  --primary-light-color: theme("colors.true-gray.50");
   // Dark Background color
-  --primary-dark-color: theme("colors.blue-gray.100");
+  --primary-dark-color: theme("colors.true-gray.100");
   // Text color
-  --secondary-color: theme("colors.blue-gray.500");
+  --secondary-color: theme("colors.true-gray.500");
   // Light Text color
-  --secondary-light-color: theme("colors.blue-gray.400");
+  --secondary-light-color: theme("colors.true-gray.400");
   // Dark Text color
-  --secondary-dark-color: theme("colors.blue-gray.900");
+  --secondary-dark-color: theme("colors.true-gray.900");
   // Border color
-  --divider-color: theme("colors.blue-gray.200");
+  --divider-color: theme("colors.true-gray.200");
   // Light Border color
-  --divider-light-color: theme("colors.blue-gray.100");
+  --divider-light-color: theme("colors.true-gray.100");
   // Dark Border color
-  --divider-dark-color: theme("colors.blue-gray.300");
+  --divider-dark-color: theme("colors.true-gray.300");
   // Error color
   --error-color: theme("colors.yellow.100");
   // Tooltip color
-  --tooltip-color: theme("colors.blue-gray.800");
+  --tooltip-color: theme("colors.true-gray.800");
   // Popover color
   --popover-color: theme("colors.white");
   // Editor theme

components/app/Sidenav.vue

@@ -17,7 +17,7 @@
         <span>{{ navigation.title }}</span>
       </NuxtLink>
     </nav>
-    <nav
+    <!-- <nav
       class="
         flex flex-nowrap
         p-4
@@ -25,7 +25,7 @@
         justify-center
         md:(flex-col
         space-x-0 space-y-2)
-      "
+        "
     >
       <ButtonSecondary
         v-tippy="{ theme: 'tooltip', placement: 'top' }"
@@ -48,41 +48,41 @@
         class="rounded"
         @click.native="showSupport = true"
       />
-    </nav>
-    <AppSearch :show="showSearch" @hide-modal="showSearch = false" />
+    </nav> -->
+    <!-- <AppSearch :show="showSearch" @hide-modal="showSearch = false" />
     <AppSupport :show="showSupport" @hide-modal="showSupport = false" />
-    <AppShare :show="showShare" @hide-modal="showShare = false" />
+    <AppShare :show="showShare" @hide-modal="showShare = false" /> -->
   </aside>
 </template>
 
 <script lang="ts">
-import { defineComponent, ref } from "@nuxtjs/composition-api"
-import { defineActionHandler } from "~/helpers/actions"
+import { defineComponent } from "@nuxtjs/composition-api"
+// import { defineActionHandler } from "~/helpers/actions"
 
 export default defineComponent({
-  setup() {
-    const showSearch = ref(false)
-    const showSupport = ref(false)
-    const showShare = ref(false)
+  // setup() {
+  // const showSearch = ref(false)
+  // const showSupport = ref(false)
+  // const showShare = ref(false)
 
-    defineActionHandler("modals.search.toggle", () => {
-      showSearch.value = !showSearch.value
-    })
+  // defineActionHandler("modals.search.toggle", () => {
+  //   showSearch.value = !showSearch.value
+  // })
 
-    defineActionHandler("modals.support.toggle", () => {
-      showSupport.value = !showSupport.value
-    })
+  // defineActionHandler("modals.support.toggle", () => {
+  //   showSupport.value = !showSupport.value
+  // })
 
-    defineActionHandler("modals.share.toggle", () => {
-      showShare.value = !showShare.value
-    })
+  // defineActionHandler("modals.share.toggle", () => {
+  //   showShare.value = !showShare.value
+  // })
 
-    return {
-      showSearch,
-      showSupport,
-      showShare,
-    }
-  },
+  //   return {
+  //     showSearch,
+  //     showSupport,
+  //     showShare,
+  //   }
+  // },
   data() {
     return {
       primaryNavigation: [
@@ -159,8 +159,9 @@ export default defineComponent({
   }
 
   &.exact-active-link {
-    @apply text-accent;
-    @apply hover:text-accent;
+    @apply text-secondaryDark;
+    @apply bg-primaryLight;
+    @apply hover:text-secondaryDark;
 
     .material-icons,
     .svg-icons {

components/collections/ChooseType.vue

@@ -18,8 +18,7 @@
               type="text"
               autofocus
               class="
-                bg-primaryLight
-                border-b border-dividerLight
+                bg-primary
                 cursor-pointer
                 flex
                 w-full

components/collections/graphql/index.vue

@@ -4,7 +4,14 @@
     :class="{ 'rounded border border-divider': savingMode }"
   >
     <div
-      class="flex flex-col top-sidebarPrimaryStickyFold z-10 sticky"
+      class="
+        divide-y divide-dividerLight
+        border-b border-dividerLight
+        flex flex-col
+        top-sidebarPrimaryStickyFold
+        z-10
+        sticky
+      "
       :class="{ 'bg-primary': !savingMode }"
     >
       <div v-if="showCollActions" class="search-wrapper">
@@ -12,18 +19,10 @@
           v-model="filterText"
           type="search"
           :placeholder="$t('action.search')"
-          class="
-            bg-primaryLight
-            border-b border-dividerLight
-            flex
-            w-full
-            py-2
-            pr-2
-            pl-9
-          "
+          class="bg-primary flex w-full py-2 pr-2 pl-10"
         />
       </div>
-      <div class="border-b border-dividerLight flex flex-1 justify-between">
+      <div class="flex flex-1 justify-between">
         <ButtonSecondary
           icon="add"
           :label="$t('action.new')"

components/collections/index.vue

@@ -4,7 +4,16 @@
     :class="{ 'rounded border border-divider': saveRequest }"
   >
     <div
-      class="bg-primary rounded-t flex flex-col top-0 z-10 sticky"
+      class="
+        divide-y divide-dividerLight
+        bg-primary
+        border-b border-dividerLight
+        rounded-t
+        flex flex-col
+        top-0
+        z-10
+        sticky
+      "
       :class="{ '!top-sidebarPrimaryStickyFold': !saveRequest && !doc }"
     >
       <div v-if="!saveRequest" class="search-wrapper">
@@ -12,15 +21,7 @@
           v-model="filterText"
           type="search"
           :placeholder="$t('action.search')"
-          class="
-            bg-primaryLight
-            border-b border-dividerLight
-            flex
-            w-full
-            py-2
-            pr-2
-            pl-9
-          "
+          class="bg-primary flex w-full py-2 pr-2 pl-10"
         />
       </div>
       <CollectionsChooseType
@@ -30,7 +31,7 @@
         @update-collection-type="updateCollectionType"
         @update-selected-team="updateSelectedTeam"
       />
-      <div class="border-b border-dividerLight flex flex-1 justify-between">
+      <div class="flex flex-1 justify-between">
         <ButtonSecondary
           v-if="
             collectionsType.type == 'team-collections' &&

components/environments/index.vue

@@ -16,7 +16,7 @@
             v-tippy="{ theme: 'tooltip' }"
             :title="$t('environment.select')"
             class="
-              bg-primaryLight
+              bg-primary
               border-b border-dividerLight
               flex-1
               select-wrapper

components/graphql/Field.vue

@@ -86,4 +86,8 @@ export default {
 .field-highlighted {
   @apply border-b-2 border-accent;
 }
+
+.field-title {
+  @apply select-text;
+}
 </style>

components/graphql/Request.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="bg-primary flex p-4 top-0 z-10 sticky">
-    <div class="flex-1 inline-flex">
+    <div class="space-x-2 flex-1 inline-flex">
       <input
         id="url"
         v-model="url"
@@ -10,12 +10,13 @@
         class="
           bg-primaryLight
           border border-divider
-          rounded-l
+          rounded
           text-secondaryDark
           w-full
           py-2
           px-4
-          focus-visible:border-accent
+          hover:border-dividerDark
+          focus-visible:bg-primary focus-visible:border-dividerDark
         "
         :placeholder="$t('request.url')"
         @keyup.enter="onConnectClick"
@@ -24,7 +25,7 @@
         id="get"
         name="get"
         :label="!connected ? $t('action.connect') : $t('action.disconnect')"
-        class="rounded-l-none w-28"
+        class="w-32"
         @click.native="onConnectClick"
       />
     </div>

components/graphql/RequestOptions.vue

@@ -159,7 +159,7 @@
               :value="header.key"
               autofocus
               styles="
-                bg-primaryLight
+                bg-primary
                 flex
                 flex-1
                 py-1
@@ -176,7 +176,7 @@
               "
             />
             <input
-              class="bg-primaryLight flex flex-1 py-2 px-4"
+              class="bg-primary flex flex-1 py-2 px-4"
               :placeholder="$t('count.value', { count: index + 1 })"
               :name="`value ${index}`"
               :value="header.value"

components/graphql/Response.vue

@@ -67,12 +67,12 @@
           <span class="flex flex-1 items-center">
             {{ $t("shortcut.general.show_all") }}
           </span>
-          <span class="flex flex-1 items-center">
+          <!-- <span class="flex flex-1 items-center">
             {{ $t("shortcut.general.command_menu") }}
           </span>
           <span class="flex flex-1 items-center">
             {{ $t("shortcut.general.help_menu") }}
-          </span>
+          </span> -->
         </div>
         <div class="flex flex-col space-y-4">
           <div class="flex">
@@ -83,12 +83,12 @@
             <span class="shortcut-key">{{ getSpecialKey() }}</span>
             <span class="shortcut-key">K</span>
           </div>
-          <div class="flex">
+          <!-- <div class="flex">
             <span class="shortcut-key">/</span>
           </div>
           <div class="flex">
             <span class="shortcut-key">?</span>
-          </div>
+          </div> -->
         </div>
       </div>
       <ButtonSecondary

components/graphql/Sidebar.vue

@@ -3,21 +3,13 @@
     <SmartTabs styles="sticky z-10 top-0">
       <SmartTab :id="'docs'" :label="`Docs`" :selected="true">
         <AppSection label="docs">
-          <div
-            class="
-              bg-primaryLight
-              flex
-              top-sidebarPrimaryStickyFold
-              z-10
-              sticky
-            "
-          >
+          <div class="bg-primary flex top-sidebarPrimaryStickyFold z-10 sticky">
             <div class="search-wrapper">
               <input
                 v-model="graphqlFieldsFilterText"
                 type="search"
                 :placeholder="$t('action.search')"
-                class="bg-primaryLight flex w-full py-2 pr-2 pl-9"
+                class="bg-primary flex w-full py-2 pr-2 pl-10"
               />
             </div>
             <div class="flex">
@@ -138,7 +130,6 @@
             v-if="schemaString"
             class="
               bg-primary
-              border-b border-dividerLight
               flex flex-1
               top-sidebarPrimaryStickyFold
               pl-4

components/history/index.vue

@@ -2,7 +2,7 @@
   <AppSection label="history">
     <div
       class="
-        bg-primaryLight
+        bg-primary
         border-b border-dividerLight
         flex
         top-sidebarPrimaryStickyFold
@@ -14,7 +14,7 @@
         <input
           v-model="filterText"
           type="search"
-          class="bg-primaryLight flex w-full py-2 pr-2 pl-9"
+          class="bg-primary flex w-full py-2 pr-2 pl-10"
           :placeholder="$t('action.search')"
         />
       </div>

components/http/Headers.vue

@@ -50,7 +50,7 @@
         :value="header.key"
         autofocus
         styles="
-          bg-primaryLight
+          bg-primary
           flex
           flex-1
           py-1
@@ -71,7 +71,7 @@
         v-model="header.value"
         :placeholder="$t('count.value', { count: index + 1 })"
         styles="
-          bg-primaryLight
+          bg-primary
           flex
           flex-1
           py-1
@@ -87,7 +87,7 @@
       />
       <input
         v-else
-        class="bg-primaryLight flex flex-1 py-2 px-4"
+        class="bg-primary flex flex-1 py-2 px-4"
         :placeholder="$t('count.value', { count: index + 1 })"
         :name="'value' + index"
         :value="header.value"

components/http/Parameters.vue

@@ -48,7 +48,7 @@
         v-model="param.key"
         :placeholder="$t('count.parameter', { count: index + 1 })"
         styles="
-          bg-primaryLight
+          bg-primary
           flex
           flex-1
           py-1
@@ -64,7 +64,7 @@
       />
       <input
         v-else
-        class="bg-primaryLight flex flex-1 py-2 px-4"
+        class="bg-primary flex flex-1 py-2 px-4"
         :placeholder="$t('count.parameter', { count: index + 1 })"
         :name="'param' + index"
         :value="param.key"
@@ -82,7 +82,7 @@
         v-model="param.value"
         :placeholder="$t('count.value', { count: index + 1 })"
         styles="
-          bg-primaryLight
+          bg-primary
           flex
           flex-1
           py-1
@@ -98,7 +98,7 @@
       />
       <input
         v-else
-        class="bg-primaryLight flex flex-1 py-2 px-4"
+        class="bg-primary flex flex-1 py-2 px-4"
         :placeholder="$t('count.value', { count: index + 1 })"
         :name="'value' + index"
         :value="param.value"

components/http/Request.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="bg-primary flex p-4 top-0 z-10 sticky">
+  <div class="bg-primary flex space-x-2 p-4 top-0 z-10 sticky">
     <div class="flex flex-1">
       <div class="flex relative">
         <label for="method">
@@ -26,7 +26,7 @@
                     px-4
                     w-28
                     hover:border-dividerDark
-                    focus-visible:border-accent
+                    focus-visible:bg-primary focus-visible:border-dividerDark
                   "
                   :value="newMethod"
                   :readonly="!isCustomMethod"
@@ -54,11 +54,13 @@
           border border-divider
           flex
           flex-1
+          rounded-r
           text-secondaryDark
           py-1
           px-4
           hover:border-dividerDark
-          focus-visible:border-accent
+          focus-visible:border-dividerDark
+                    focus-visible:bg-primary
         "
           @enter="newSendRequest()"
         />
@@ -70,12 +72,14 @@
           class="
             bg-primaryLight
             border border-divider
+            rounded-r
             flex
             text-secondaryDark
             w-full
             py-2
             px-4
-            focus-visible:border-accent
+            hover:border-dividerDark
+            focus-visible:bg-primary focus-visible:border-dividerDark
           "
           name="url"
           type="text"
@@ -89,7 +93,7 @@
     <div class="flex">
       <ButtonPrimary
         id="send"
-        class="rounded-none flex-1 min-w-24"
+        class="rounded-r-none flex-1 min-w-22"
         :label="!loading ? $t('action.send') : $t('action.cancel')"
         @click.native="!loading ? newSendRequest() : cancelRequest()"
       />

components/http/ResponseMeta.vue

@@ -17,12 +17,12 @@
           <span class="flex flex-1 items-center">
             {{ $t("shortcut.general.show_all") }}
           </span>
-          <span class="flex flex-1 items-center">
+          <!-- <span class="flex flex-1 items-center">
             {{ $t("shortcut.general.command_menu") }}
           </span>
           <span class="flex flex-1 items-center">
             {{ $t("shortcut.general.help_menu") }}
-          </span>
+          </span> -->
         </div>
         <div class="flex flex-col space-y-4">
           <div class="flex">
@@ -33,12 +33,12 @@
             <span class="shortcut-key">{{ getSpecialKey() }}</span>
             <span class="shortcut-key">K</span>
           </div>
-          <div class="flex">
+          <!-- <div class="flex">
             <span class="shortcut-key">/</span>
           </div>
           <div class="flex">
             <span class="shortcut-key">?</span>
-          </div>
+          </div> -->
         </div>
       </div>
       <ButtonSecondary

components/lenses/HeadersRenderer.vue

@@ -1,5 +1,32 @@
 <template>
   <div>
+    <div
+      class="
+        bg-primary
+        border-b border-dividerLight
+        flex flex-1
+        top-lowerSecondaryStickyFold
+        pl-4
+        z-10
+        sticky
+        items-center
+        justify-between
+      "
+    >
+      <label class="font-semibold text-secondaryLight">
+        {{ $t("request.header_list") }}
+      </label>
+      <div class="flex">
+        <ButtonSecondary
+          v-if="headers"
+          ref="copyHeaders"
+          v-tippy="{ theme: 'tooltip' }"
+          :title="$t('action.copy')"
+          :icon="copyIcon"
+          @click.native="copyHeaders"
+        />
+      </div>
+    </div>
     <div
       v-for="(header, index) in headers"
       :key="`header-${index}`"
@@ -43,9 +70,26 @@
 </template>
 
 <script>
+import { copyToClipboard } from "~/helpers/utils/clipboard"
+
 export default {
   props: {
     headers: { type: Array, default: () => [] },
   },
+  data() {
+    return {
+      copyIcon: "content_copy",
+    }
+  },
+  methods: {
+    copyHeaders() {
+      copyToClipboard(JSON.stringify(this.headers))
+      this.copyIcon = "done"
+      this.$toast.success(this.$t("state.copied_to_clipboard"), {
+        icon: "content_paste",
+      })
+      setTimeout(() => (this.copyIcon = "content_copy"), 1000)
+    },
+  },
 }
 </script>

components/realtime/Log.vue

@@ -59,7 +59,7 @@ export default {
 <style scoped lang="scss">
 .realtime-log {
   @apply p-4;
-  @apply bg-primaryLight;
+  @apply bg-primary;
   @apply text-secondary;
   @apply overflow-auto;
 

components/realtime/Mqtt.vue

@@ -1,11 +1,11 @@
 <template>
-  <Splitpanes :dbl-click-splitter="false" vertical>
+  <Splitpanes class="smart-splitter" :dbl-click-splitter="false" vertical>
     <Pane class="hide-scrollbar !overflow-auto">
-      <Splitpanes :dbl-click-splitter="false" horizontal>
+      <Splitpanes class="smart-splitter" :dbl-click-splitter="false" horizontal>
         <Pane class="hide-scrollbar !overflow-auto">
           <AppSection label="request">
             <div class="bg-primary flex p-4 top-0 z-10 sticky">
-              <div class="flex-1 inline-flex">
+              <div class="space-x-2 flex-1 inline-flex">
                 <input
                   id="mqtt-url"
                   v-model="url"
@@ -15,19 +15,20 @@
                   class="
                     bg-primaryLight
                     border border-divider
-                    rounded-l
+                    rounded
                     text-secondaryDark
                     w-full
                     py-2
                     px-4
-                    focus-visible:border-accent
+                    hover:border-dividerDark
+                    focus-visible:bg-primary focus-visible:border-dividerDark
                   "
                   :placeholder="$t('mqtt.url')"
                 />
                 <ButtonPrimary
                   id="connect"
                   :disabled="!validUrl"
-                  class="rounded-l-none w-28"
+                  class="w-32"
                   :label="
                     connectionState
                       ? $t('action.disconnect')

components/realtime/Socketio.vue

@@ -1,52 +1,57 @@
 <template>
-  <Splitpanes :dbl-click-splitter="false" vertical>
+  <Splitpanes class="smart-splitter" :dbl-click-splitter="false" vertical>
     <Pane class="hide-scrollbar !overflow-auto">
-      <Splitpanes :dbl-click-splitter="false" horizontal>
+      <Splitpanes class="smart-splitter" :dbl-click-splitter="false" horizontal>
         <Pane class="hide-scrollbar !overflow-auto">
           <AppSection label="request">
             <div class="bg-primary flex p-4 top-0 z-10 sticky">
-              <div class="flex-1 inline-flex">
-                <input
-                  id="socketio-url"
-                  v-model="url"
-                  v-focus
-                  type="url"
-                  spellcheck="false"
-                  :class="{ error: !urlValid }"
-                  class="
-                    bg-primaryLight
-                    border border-divider
-                    rounded-l
-                    flex flex-1
-                    text-secondaryDark
-                    w-full
-                    py-2
-                    px-4
-                    focus-visible:border-accent
-                  "
-                  :placeholder="$t('socketio.url')"
-                  @keyup.enter="urlValid ? toggleConnection() : null"
-                />
-                <input
-                  id="socketio-path"
-                  v-model="path"
-                  class="
-                    bg-primaryLight
-                    border border-divider
-                    flex flex-1
-                    text-secondaryDark
-                    w-full
-                    py-2
-                    px-4
-                    focus-visible:border-accent
-                  "
-                  spellcheck="false"
-                />
+              <div class="space-x-2 flex-1 inline-flex">
+                <div class="flex flex-1">
+                  <input
+                    id="socketio-url"
+                    v-model="url"
+                    v-focus
+                    type="url"
+                    spellcheck="false"
+                    :class="{ error: !urlValid }"
+                    class="
+                      bg-primaryLight
+                      border border-divider
+                      rounded-l
+                      flex flex-1
+                      text-secondaryDark
+                      w-full
+                      py-2
+                      px-4
+                      hover:border-dividerDark
+                      focus-visible:bg-primary focus-visible:border-dividerDark
+                    "
+                    :placeholder="$t('socketio.url')"
+                    @keyup.enter="urlValid ? toggleConnection() : null"
+                  />
+                  <input
+                    id="socketio-path"
+                    v-model="path"
+                    class="
+                      bg-primaryLight
+                      border border-divider
+                      rounded-r
+                      flex flex-1
+                      text-secondaryDark
+                      w-full
+                      py-2
+                      px-4
+                      hover:border-dividerDark
+                      focus-visible:bg-primary focus-visible:border-dividerDark
+                    "
+                    spellcheck="false"
+                  />
+                </div>
                 <ButtonPrimary
                   id="connect"
                   :disabled="!urlValid"
                   name="connect"
-                  class="rounded-l-none w-28"
+                  class="w-32"
                   :label="
                     !connectionState
                       ? $t('action.connect')
@@ -99,6 +104,7 @@
               v-tippy="{ theme: 'tooltip' }"
               :title="$t('add.new')"
               icon="add"
+              class="rounded"
               @click.native="addCommunicationInput"
             />
           </div>
@@ -123,7 +129,7 @@
                 v-tippy="{ theme: 'tooltip' }"
                 :title="$t('action.remove')"
                 icon="remove_circle_outline"
-                class="rounded-l-none"
+                class="rounded-r"
                 color="red"
                 outline
                 @click.native="removeCommunicationInput({ index })"

components/realtime/Sse.vue

@@ -1,62 +1,67 @@
 <template>
-  <Splitpanes :dbl-click-splitter="false" horizontal>
+  <Splitpanes class="smart-splitter" :dbl-click-splitter="false" horizontal>
     <Pane class="hide-scrollbar !overflow-auto">
       <div class="bg-primary flex p-4 top-0 z-10 sticky">
-        <div class="flex-1 inline-flex">
-          <input
-            id="server"
-            v-model="server"
-            v-focus
-            type="url"
-            :class="{ error: !serverValid }"
-            class="
-              bg-primaryLight
-              border border-divider
-              rounded-l
-              flex flex-1
-              text-secondaryDark
-              w-full
-              py-2
-              px-4
-              focus-visible:border-accent
-            "
-            :placeholder="$t('sse.url')"
-            @keyup.enter="serverValid ? toggleSSEConnection() : null"
-          />
-          <label
-            for="url"
-            class="
-              bg-primaryLight
-              border-t border-b border-divider
-              font-semibold
-              text-secondaryLight
-              py-2
-              px-4
-              truncate
-            "
-          >
-            {{ $t("sse.event_type") }}
-          </label>
-          <input
-            id="event-type"
-            v-model="eventType"
-            class="
-              bg-primaryLight
-              border border-divider
-              flex flex-1
-              text-secondaryDark
-              w-full
-              py-2
-              px-4
-              focus-visible:border-accent
-            "
-            spellcheck="false"
-          />
+        <div class="space-x-2 flex-1 inline-flex">
+          <div class="flex flex-1">
+            <input
+              id="server"
+              v-model="server"
+              v-focus
+              type="url"
+              :class="{ error: !serverValid }"
+              class="
+                bg-primaryLight
+                border border-divider
+                rounded-l
+                flex flex-1
+                text-secondaryDark
+                w-full
+                py-2
+                px-4
+                hover:border-dividerDark
+                focus-visible:bg-primary focus-visible:border-dividerDark
+              "
+              :placeholder="$t('sse.url')"
+              @keyup.enter="serverValid ? toggleSSEConnection() : null"
+            />
+            <label
+              for="url"
+              class="
+                bg-primaryLight
+                border-t border-b border-divider
+                font-semibold
+                text-secondaryLight
+                py-2
+                px-4
+                truncate
+              "
+            >
+              {{ $t("sse.event_type") }}
+            </label>
+            <input
+              id="event-type"
+              v-model="eventType"
+              class="
+                bg-primaryLight
+                border border-divider
+                rounded-r
+                flex flex-1
+                text-secondaryDark
+                w-full
+                py-2
+                px-4
+                hover:border-dividerDark
+                focus-visible:bg-primary focus-visible:border-dividerDark
+              "
+              spellcheck="false"
+            />
+          </div>
           <ButtonPrimary
             id="start"
             :disabled="!serverValid"
             name="start"
-            class="rounded-l-none w-22"
+            class="w-32"
             :label="
               !connectionSSEState ? $t('action.start') : $t('action.stop')
             "

components/realtime/Websocket.vue

@@ -1,11 +1,11 @@
 <template>
-  <Splitpanes :dbl-click-splitter="false" vertical>
+  <Splitpanes class="smart-splitter" :dbl-click-splitter="false" vertical>
     <Pane class="hide-scrollbar !overflow-auto">
-      <Splitpanes :dbl-click-splitter="false" horizontal>
+      <Splitpanes class="smart-splitter" :dbl-click-splitter="false" horizontal>
         <Pane class="hide-scrollbar !overflow-auto">
           <AppSection label="request">
             <div class="bg-primary flex p-4 top-0 z-10 sticky">
-              <div class="flex-1 inline-flex">
+              <div class="space-x-2 flex-1 inline-flex">
                 <input
                   id="websocket-url"
                   v-model="url"
@@ -13,12 +13,13 @@
                   class="
                     bg-primaryLight
                     border border-divider
-                    rounded-l
+                    rounded
                     text-secondaryDark
                     w-full
                     py-2
                     px-4
-                    focus-visible:border-accent
+                    hover:border-dividerDark
+                    focus-visible:bg-primary focus-visible:border-dividerDark
                   "
                   type="url"
                   spellcheck="false"
@@ -29,7 +30,7 @@
                 <ButtonPrimary
                   id="connect"
                   :disabled="!urlValid"
-                  class="rounded-l-none w-28"
+                  class="w-32"
                   name="connect"
                   :label="
                     !connectionState
@@ -83,7 +84,7 @@
             >
               <input
                 v-model="protocol.value"
-                class="bg-primaryLight flex flex-1 py-2 px-4"
+                class="bg-primary flex flex-1 py-2 px-4"
                 :placeholder="$t('count.protocol', { count: index + 1 })"
                 name="message"
                 type="text"

components/smart/Tabs.vue

@@ -1,25 +1,30 @@
 <template>
   <div class="flex flex-col flex-nowrap flex-1">
     <div class="rounded-t tabs hide-scrollbar relative" :class="styles">
-      <div class="flex w-0">
-        <div class="inline-flex">
-          <button
-            v-for="(tab, index) in tabs"
-            :key="`tab-${index}`"
-            class="tab"
-            :class="{ active: tab.active }"
-            tabindex="0"
-            @keyup.enter="selectTab(tab)"
-            @click="selectTab(tab)"
-          >
-            <i v-if="tab.icon" class="material-icons">
-              {{ tab.icon }}
-            </i>
-            <span v-if="tab.label">{{ tab.label }}</span>
-            <span v-if="tab.info" class="tab-info">
-              {{ tab.info }}
-            </span>
-          </button>
+      <div class="flex flex-1">
+        <div class="flex flex-1 justify-between">
+          <div class="flex">
+            <button
+              v-for="(tab, index) in tabs"
+              :key="`tab-${index}`"
+              class="tab"
+              :class="{ active: tab.active }"
+              tabindex="0"
+              @keyup.enter="selectTab(tab)"
+              @click="selectTab(tab)"
+            >
+              <i v-if="tab.icon" class="material-icons">
+                {{ tab.icon }}
+              </i>
+              <span v-if="tab.label">{{ tab.label }}</span>
+              <span v-if="tab.info" class="tab-info">
+                {{ tab.info }}
+              </span>
+            </button>
+          </div>
+          <div class="flex">
+            <slot name="actions"></slot>
+          </div>
         </div>
       </div>
     </div>
@@ -64,16 +69,16 @@ export default {
   @apply overflow-auto;
   @apply bg-primary;
 
-  &::after {
-    @apply absolute;
-    @apply inset-x-0;
-    @apply bottom-0;
-    @apply bg-dividerLight;
-    @apply z-1;
-    @apply h-0.5;
+  // &::after {
+  //   @apply absolute;
+  //   @apply inset-x-0;
+  //   @apply bottom-0;
+  //   @apply bg-dividerLight;
+  //   @apply z-1;
+  //   @apply h-0.5;
 
-    content: "";
-  }
+  //   content: "";
+  // }
 
   .tab {
     @apply relative;
@@ -104,9 +109,10 @@ export default {
 
     &::after {
       @apply absolute;
-      @apply inset-x-0;
+      @apply left-4;
+      @apply right-4;
       @apply bottom-0;
-      @apply bg-dividerLight;
+      @apply bg-primary;
       @apply z-2;
       @apply h-0.5;
 
@@ -122,8 +128,7 @@ export default {
     }
 
     &.active {
-      @apply text-accent;
-      @apply border-accent;
+      @apply text-secondaryDark;
 
       .tab-info {
         @apply text-secondary;

components/teams/Team.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="flex flex-1 items-end">
+  <div class="border border-dividerLight rounded flex flex-1 items-end">
     <div class="flex flex-1 items-start">
       <div class="p-4">
         <label
@@ -12,6 +12,8 @@
           <img
             v-for="(member, index) in team.members"
             :key="`member-${index}`"
+            v-tippy="{ theme: 'tooltip' }"
+            :title="member.user.displayName"
             :src="member.user.photoURL"
             :alt="member.user.displayName"
             class="rounded-full h-5 ring-primary ring-2 w-5 inline-block"
@@ -47,21 +49,24 @@
             $refs.options.tippy().hide()
           "
         />
-        <SmartItem
+        <span
           v-tippy="{ theme: 'tooltip' }"
           :title="
             team.myRole === 'OWNER' && team.ownersCount == 1
               ? $t('team.exit_disabled')
               : ''
           "
-          :disabled="team.myRole === 'OWNER' && team.ownersCount == 1"
-          icon="remove"
-          :label="$t('team.exit')"
-          @click.native="
-            exitTeam()
-            $refs.options.tippy().hide()
-          "
-        />
+        >
+          <SmartItem
+            :disabled="team.myRole === 'OWNER' && team.ownersCount == 1"
+            icon="remove"
+            :label="$t('team.exit')"
+            @click.native="
+              exitTeam()
+              $refs.options.tippy().hide()
+            "
+          />
+        </span>
       </tippy>
     </span>
   </div>

components/teams/index.vue

@@ -24,16 +24,7 @@
         <i class="mr-4 material-icons">help_outline</i>
         {{ $t("empty.teams") }}
       </div>
-      <div
-        v-else
-        class="
-          divide-y divide-dividerLight
-          border border-divider
-          rounded
-          flex flex-col flex-1
-          md:w-64
-        "
-      >
+      <div v-else class="grid gap-4 sm:grid-cols-2 md:grid-cols-3">
         <TeamsTeam
           v-for="(team, index) in myTeams"
           :key="`team-${index}`"

helpers/shortcuts.js

@@ -4,14 +4,14 @@ export default [
   {
     section: "shortcut.general.title",
     shortcuts: [
-      {
-        keys: ["?"],
-        label: "shortcut.general.help_menu",
-      },
-      {
-        keys: ["/"],
-        label: "shortcut.general.command_menu",
-      },
+      // {
+      //   keys: ["?"],
+      //   label: "shortcut.general.help_menu",
+      // },
+      // {
+      //   keys: ["/"],
+      //   label: "shortcut.general.command_menu",
+      // },
       {
         keys: [getPlatformSpecialKey(), "K"],
         label: "shortcut.general.show_all",
@@ -104,15 +104,15 @@ export default [
       },
     ],
   },
-  {
-    section: "shortcut.miscellaneous.title",
-    shortcuts: [
-      {
-        keys: [getPlatformSpecialKey(), "M"],
-        label: "shortcut.miscellaneous.invite",
-      },
-    ],
-  },
+  // {
+  //   section: "shortcut.miscellaneous.title",
+  //   shortcuts: [
+  //     {
+  //       keys: [getPlatformSpecialKey(), "M"],
+  //       label: "shortcut.miscellaneous.invite",
+  //     },
+  //   ],
+  // },
 ]
 
 export const spotlight = [

layouts/default.vue

@@ -1,11 +1,12 @@
 <template>
   <div class="flex h-screen w-screen">
-    <Splitpanes :dbl-click-splitter="false" horizontal>
+    <Splitpanes class="no-splitter" :dbl-click-splitter="false" horizontal>
       <Pane v-if="!ZEN_MODE" style="height: auto">
         <AppHeader />
       </Pane>
       <Pane class="flex flex-1 hide-scrollbar !overflow-auto">
         <Splitpanes
+          class="no-splitter"
           :dbl-click-splitter="false"
           :horizontal="!(windowInnerWidth >= 768)"
         >
@@ -17,7 +18,11 @@
             <AppSidenav />
           </Pane>
           <Pane class="flex flex-1 hide-scrollbar !overflow-auto">
-            <Splitpanes :dbl-click-splitter="false" horizontal>
+            <Splitpanes
+              class="no-splitter"
+              :dbl-click-splitter="false"
+              horizontal
+            >
               <Pane class="flex flex-1 hide-scrollbar !overflow-auto">
                 <main class="flex flex-1 w-full">
                   <nuxt class="flex flex-1" />

pages/documentation.vue

@@ -1,7 +1,7 @@
 <template>
-  <Splitpanes :dbl-click-splitter="false" vertical>
+  <Splitpanes class="smart-splitter" :dbl-click-splitter="false" vertical>
     <Pane class="hide-scrollbar !overflow-auto">
-      <Splitpanes :dbl-click-splitter="false" horizontal>
+      <Splitpanes class="smart-splitter" :dbl-click-splitter="false" horizontal>
         <Pane class="hide-scrollbar !overflow-auto">
           <AppSection label="import">
             <div class="flex p-4 items-start justify-between">

pages/graphql.vue

@@ -1,8 +1,12 @@
 <template>
   <div>
-    <Splitpanes :dbl-click-splitter="false" vertical>
+    <Splitpanes class="smart-splitter" :dbl-click-splitter="false" vertical>
       <Pane class="hide-scrollbar !overflow-auto">
-        <Splitpanes :dbl-click-splitter="false" horizontal>
+        <Splitpanes
+          class="smart-splitter"
+          :dbl-click-splitter="false"
+          horizontal
+        >
           <Pane class="hide-scrollbar !overflow-auto">
             <GraphqlRequest :conn="gqlConn" />
             <GraphqlRequestOptions :conn="gqlConn" />

pages/index.vue

@@ -1,7 +1,7 @@
 <template>
-  <Splitpanes :dbl-click-splitter="false" vertical>
+  <Splitpanes class="smart-splitter" :dbl-click-splitter="false" vertical>
     <Pane class="hide-scrollbar !overflow-auto">
-      <Splitpanes :dbl-click-splitter="false" horizontal>
+      <Splitpanes class="smart-splitter" :dbl-click-splitter="false" horizontal>
         <Pane class="hide-scrollbar !overflow-auto">
           <HttpRequest />
           <SmartTabs styles="sticky top-upperPrimaryStickyFold z-10">

pages/realtime.vue

@@ -1,7 +1,7 @@
 <template>
   <SmartTabs
     class="h-full overflow-hidden"
-    styles="sticky top-0 z-10 !overflow-visible"
+    styles="sticky top-0 z-10 border-b border-dividerLight !overflow-visible"
   >
     <SmartTab
       id="websocket"