feat: global workspace selector (#2922)

Co-authored-by: Liyas Thomas <liyascthomas@gmail.com>

packages/hoppscotch-ui/src/components/button/Primary.vue

@@ -19,14 +19,27 @@
         'border border-accent hover:border-accentDark focus-visible:border-accentDark':
           outline,
       },
-    ]" :disabled="disabled" :tabindex="loading ? '-1' : '0'" role="button">
-    <span class="inline-flex items-center justify-center whitespace-nowrap"
-      :class="[{ 'flex-row-reverse': reverse }, { 'opacity-50': loading }]">
-      <component :is="icon" v-if="icon" class="svg-icons" :class="[
-        { '!text-2xl': large },
-        label ? (reverse ? 'ml-2' : 'mr-2') : '',
-      ]" />
-      {{ label }}
+    ]"
+    :disabled="disabled"
+    :tabindex="loading ? '-1' : '0'"
+    role="button"
+  >
+    <span
+      class="inline-flex items-center justify-center whitespace-nowrap"
+      :class="[{ 'flex-row-reverse': reverse }, { 'opacity-50': loading }]"
+    >
+      <component
+        :is="icon"
+        v-if="icon"
+        class="svg-icons"
+        :class="[
+          { '!text-2xl': large },
+          label ? (reverse ? 'ml-2' : 'mr-2') : '',
+        ]"
+      />
+      <div class="truncate max-w-54">
+        {{ label }}
+      </div>
       <div v-if="shortcut.length" class="<sm:hidden">
         <kbd v-for="(key, index) in shortcut" :key="`key-${index}`"
           class="shortcut-key !bg-accentDark !border-accentLight">

packages/hoppscotch-ui/src/components/button/Secondary.vue

@@ -19,14 +19,28 @@
         'bg-primaryLight hover:bg-primaryDark focus-visible:bg-primaryDark':
           filled,
       },
-    ]" :disabled="disabled" :tabindex="loading ? '-1' : '0'" role="button">
-    <span v-if="!loading" class="inline-flex items-center justify-center whitespace-nowrap"
-      :class="{ 'flex-row-reverse': reverse }">
-      <component :is="icon" v-if="icon" class="svg-icons" :class="[
-        { '!text-2xl': large },
-        label ? (reverse ? 'ml-2' : 'mr-2') : '',
-      ]" />
-      {{ label }}
+    ]"
+    :disabled="disabled"
+    :tabindex="loading ? '-1' : '0'"
+    role="button"
+  >
+    <span
+      v-if="!loading"
+      class="inline-flex items-center justify-center whitespace-nowrap"
+      :class="{ 'flex-row-reverse': reverse }"
+    >
+      <component
+        :is="icon"
+        v-if="icon"
+        class="svg-icons"
+        :class="[
+          { '!text-2xl': large },
+          label ? (reverse ? 'ml-2' : 'mr-2') : '',
+        ]"
+      />
+      <div class="truncate max-w-54">
+        {{ label }}
+      </div>
       <div v-if="shortcut.length" class="<sm:hidden">
         <kbd v-for="(key, index) in shortcut" :key="`key-${index}`" class="shortcut-key !bg-inherit">
           {{ key }}

packages/hoppscotch-ui/src/components/smart/FileChip.vue

@@ -1,7 +1,7 @@
 <template>
   <span class="chip">
     <component :is="IconFile" class="opacity-75 svg-icons" />
-    <span class="px-2 truncate max-w-32"><slot></slot></span>
+    <span class="px-2 truncate max-w-54"><slot></slot></span>
   </span>
 </template>
 

packages/hoppscotch-ui/src/components/smart/Item.vue

@@ -19,15 +19,19 @@
     </span>
     <HoppSmartSpinner v-else class="mr-4 text-secondaryDark" />
     <div class="inline-flex items-start flex-1 truncate" :class="{ 'flex-col': description }">
-      <div class="font-semibold truncate">
+      <div class="font-semibold truncate max-w-54">
         {{ label }}
       </div>
       <p v-if="description" class="my-2 text-left text-secondaryLight">
         {{ description }}
       </p>
     </div>
-    <component :is="infoIcon" v-if="infoIcon" class="items-center self-center ml-4 svg-icons"
-      :class="{ 'text-accent': activeInfoIcon }" />
+    <component
+      :is="infoIcon"
+      v-if="infoIcon"
+      class="items-center self-center ml-6 -mr-2 svg-icons"
+      :class="{ 'text-accent': activeInfoIcon }"
+    />
     <div v-if="shortcut.length" class="ml-4 <sm:hidden font-medium">
       <kbd v-for="(key, index) in shortcut" :key="`key-${index}`" class="-mr-2 shortcut-key">
         {{ key }}

packages/hoppscotch-ui/vite.config.ts

@@ -4,6 +4,7 @@ import path from "path"
 import Icons from "unplugin-icons/vite"
 import { defineConfig } from "vite"
 import WindiCSS from "vite-plugin-windicss"
+import { VitePluginFonts } from "vite-plugin-fonts"
 
 export default defineConfig({
   plugins: [
@@ -19,6 +20,15 @@ export default defineConfig({
     Icons({
       compiler: "vue3"
     }),
+    VitePluginFonts({
+      google: {
+        families: [
+          "Inter:wght@400;500;600;700;800",
+          "Roboto+Mono:wght@400;500",
+          "Material+Icons",
+        ],
+      },
+    }),
   ], // to process SFC
   build: {
     sourcemap: true,

packages/hoppscotch-ui/windi.config.ts

@@ -20,6 +20,7 @@ export default defineConfig({
         lowerSecondaryStickyFold: "var(--lower-secondary-sticky-fold)",
         lowerTertiaryStickyFold: "var(--lower-tertiary-sticky-fold)",
         sidebarPrimaryStickyFold: "var(--sidebar-primary-sticky-fold)",
+        sidebarSecondaryStickyFold: "var(--line-height-body)",
       },
       colors: {
         primary: "var(--primary-color)",