chore: minor ui improvements

packages/hoppscotch-common/src/components.d.ts

@@ -99,6 +99,7 @@ declare module '@vue/runtime-core' {
     HttpTests: typeof import('./components/http/Tests.vue')['default']
     HttpURLEncodedParams: typeof import('./components/http/URLEncodedParams.vue')['default']
     IconLucideArrowLeft: typeof import('~icons/lucide/arrow-left')['default']
+    IconLucideBrush: typeof import('~icons/lucide/brush')['default']
     IconLucideCheckCircle: typeof import('~icons/lucide/check-circle')['default']
     IconLucideChevronRight: typeof import('~icons/lucide/chevron-right')['default']
     IconLucideGlobe: typeof import('~icons/lucide/globe')['default']
@@ -107,6 +108,7 @@ declare module '@vue/runtime-core' {
     IconLucideLayers: typeof import('~icons/lucide/layers')['default']
     IconLucideLoader: typeof import('~icons/lucide/loader')['default']
     IconLucideMinus: typeof import('~icons/lucide/minus')['default']
+    IconLucideRss: typeof import('~icons/lucide/rss')['default']
     IconLucideSearch: typeof import('~icons/lucide/search')['default']
     IconLucideUser: typeof import('~icons/lucide/user')['default']
     IconLucideUsers: typeof import('~icons/lucide/users')['default']
@@ -119,7 +121,6 @@ declare module '@vue/runtime-core' {
     LensesRenderersRawLensRenderer: typeof import('./components/lenses/renderers/RawLensRenderer.vue')['default']
     LensesRenderersXMLLensRenderer: typeof import('./components/lenses/renderers/XMLLensRenderer.vue')['default']
     LensesResponseBodyRenderer: typeof import('./components/lenses/ResponseBodyRenderer.vue')['default']
-    Newcollections: typeof import('./components/newcollections/index.vue')['default']
     ProfilePicture: typeof import('./components/profile/Picture.vue')['default']
     ProfileShortcode: typeof import('./components/profile/Shortcode.vue')['default']
     RealtimeCommunication: typeof import('./components/realtime/Communication.vue')['default']

packages/hoppscotch-common/src/components/app/Footer.vue

@@ -194,6 +194,7 @@
       :show="showDeveloperOptions"
       @hide-modal="showDeveloperOptions = false"
     />
+    <FirebaseLogin :show="showLogin" @hide-modal="showLogin = false" />
   </div>
 </template>
 
@@ -231,6 +232,7 @@ const t = useI18n()
 const showShortcuts = ref(false)
 const showShare = ref(false)
 const showDeveloperOptions = ref(false)
+const showLogin = ref(false)
 
 defineActionHandler("flyouts.keybinds.toggle", () => {
   showShortcuts.value = !showShortcuts.value
@@ -240,6 +242,10 @@ defineActionHandler("modals.share.toggle", () => {
   showShare.value = !showShare.value
 })
 
+defineActionHandler("modals.login.toggle", () => {
+  showLogin.value = !showLogin.value
+})
+
 const EXPAND_NAVIGATION = useSetting("EXPAND_NAVIGATION")
 const SIDEBAR = useSetting("SIDEBAR")
 const ZEN_MODE = useSetting("ZEN_MODE")

packages/hoppscotch-common/src/components/app/Header.vue

@@ -42,12 +42,12 @@
           :label="t('header.save_workspace')"
           filled
           class="hidden md:flex"
-          @click="showLogin = true"
+          @click="invokeAction('modals.login.toggle')"
         />
         <ButtonPrimary
           v-if="currentUser === null"
           :label="t('header.login')"
-          @click="showLogin = true"
+          @click="invokeAction('modals.login.toggle')"
         />
         <div v-else class="inline-flex items-center space-x-2">
           <ButtonPrimary
@@ -150,7 +150,6 @@
       </div>
     </header>
     <AppAnnouncement v-if="!network.isOnline" />
-    <FirebaseLogin :show="showLogin" @hide-modal="showLogin = false" />
     <TeamsModal :show="showTeamsModal" @hide-modal="showTeamsModal = false" />
   </div>
 </template>
@@ -181,7 +180,6 @@ const t = useI18n()
 
 const showInstallButton = computed(() => !!pwaDefferedPrompt.value)
 
-const showLogin = ref(false)
 const showTeamsModal = ref(false)
 
 const breakpoints = useBreakpoints(breakpointsTailwind)

packages/hoppscotch-common/src/components/app/PaneLayout.vue

@@ -76,10 +76,10 @@ type PaneEvent = {
   size: number
 }
 
-const PANE_SIDEBAR_SIZE = ref(25)
-const PANE_MAIN_SIZE = ref(75)
-const PANE_MAIN_TOP_SIZE = ref(45)
-const PANE_MAIN_BOTTOM_SIZE = ref(65)
+const PANE_MAIN_SIZE = ref(74)
+const PANE_SIDEBAR_SIZE = ref(26)
+const PANE_MAIN_TOP_SIZE = ref(42)
+const PANE_MAIN_BOTTOM_SIZE = ref(58)
 
 if (!COLUMN_LAYOUT.value) {
   PANE_MAIN_TOP_SIZE.value = 50

packages/hoppscotch-common/src/components/collections/ChooseType.vue

@@ -12,7 +12,6 @@
       <SmartTab
         :id="'team-collections'"
         :label="`${t('collection.team_collections')}`"
-        :disabled="!currentUser"
       >
         <SmartIntersection @intersecting="onTeamSelectIntersect">
           <tippy
@@ -78,7 +77,7 @@
 <script setup lang="ts">
 import IconUsers from "~icons/lucide/users"
 import IconDone from "~icons/lucide/check"
-import { ref, watch } from "vue"
+import { nextTick, ref, watch } from "vue"
 import { GetMyTeamsQuery, Team } from "~/helpers/backend/graphql"
 import { currentUserInfo$ } from "~/helpers/teams/BackendUserInfo"
 import TeamListAdapter from "~/helpers/teams/TeamListAdapter"
@@ -86,6 +85,7 @@ import { useReadonlyStream } from "@composables/stream"
 import { onLoggedIn } from "@composables/auth"
 import { useI18n } from "@composables/i18n"
 import { useLocalState } from "~/newstore/localstate"
+import { invokeAction } from "~/helpers/actions"
 
 type TeamData = GetMyTeamsQuery["myTeams"][number]
 
@@ -153,7 +153,10 @@ const updateSelectedTeam = (team: TeamData | undefined) => {
   emit("update-selected-team", team)
 }
 
-watch(selectedCollectionTab, (newValue: string) => {
-  updateCollectionsType(newValue)
+watch(selectedCollectionTab, (newValue: CollectionTabs) => {
+  if (newValue === "team-collections" && !currentUser.value) {
+    invokeAction("modals.login.toggle")
+    nextTick(() => (selectedCollectionTab.value = "my-collections"))
+  } else updateCollectionsType(newValue)
 })
 </script>

packages/hoppscotch-common/src/components/environments/ChooseType.vue

@@ -12,7 +12,6 @@
       <SmartTab
         :id="'team-environments'"
         :label="`${t('environment.team_environments')}`"
-        :disabled="!currentUser"
       >
         <SmartIntersection @intersecting="onTeamSelectIntersect">
           <tippy
@@ -76,7 +75,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, watch } from "vue"
+import { nextTick, ref, watch } from "vue"
 import { GetMyTeamsQuery } from "~/helpers/backend/graphql"
 import { onLoggedIn } from "@composables/auth"
 import { currentUserInfo$ } from "~/helpers/teams/BackendUserInfo"
@@ -86,6 +85,7 @@ import { useLocalState } from "~/newstore/localstate"
 import { useI18n } from "@composables/i18n"
 import IconDone from "~icons/lucide/check"
 import IconUsers from "~icons/lucide/users"
+import { invokeAction } from "~/helpers/actions"
 
 const t = useI18n()
 
@@ -156,6 +156,9 @@ const updateSelectedTeam = (team: SelectedTeam) => {
 }
 
 watch(selectedEnvironmentTab, (newValue: EnvironmentTabs) => {
-  updateEnvironmentType(newValue)
+  if (newValue === "team-environments" && !currentUser.value) {
+    invokeAction("modals.login.toggle")
+    nextTick(() => (selectedEnvironmentTab.value = "my-environments"))
+  } else updateEnvironmentType(newValue)
 })
 </script>

packages/hoppscotch-common/src/components/environments/index.vue

@@ -8,7 +8,6 @@
         interactive
         trigger="click"
         theme="popover"
-        arrow
         :on-shown="() => tippyActions!.focus()"
       >
         <span
@@ -69,7 +68,7 @@
           </div>
         </template>
       </tippy>
-      <tippy v-else interactive trigger="click" theme="popover" arrow>
+      <tippy v-else interactive trigger="click" theme="popover">
         <span
           v-tippy="{ theme: 'tooltip' }"
           :title="`${t('environment.select')}`"

packages/hoppscotch-common/src/components/environments/teams/Environment.vue

@@ -24,7 +24,6 @@
         interactive
         trigger="click"
         theme="popover"
-        arrow
         :on-shown="() => tippyActions!.focus()"
       >
         <ButtonSecondary

packages/hoppscotch-common/src/components/teams/Edit.vue

@@ -34,12 +34,10 @@
             />
           </div>
         </div>
-        <div
-          v-if="teamDetails.loading"
-          class="flex flex-col items-center justify-center"
-        >
-          <SmartSpinner class="mb-4" />
-          <span class="text-secondaryLight">{{ t("state.loading") }}</span>
+        <div v-if="teamDetails.loading" class="border rounded border-divider">
+          <div class="flex items-center justify-center p-4">
+            <SmartSpinner />
+          </div>
         </div>
         <div
           v-if="

packages/hoppscotch-common/src/helpers/actions.ts

@@ -37,6 +37,7 @@ export type HoppAction =
   | "response.preview.toggle" // Toggle response preview
   | "response.file.download" // Download response as file
   | "response.copy" // Copy response to clipboard
+  | "modals.login.toggle" // Login to Hoppscotch
 
 /**
  * Defines the arguments, if present for a given type that is required to be passed on

packages/hoppscotch-common/src/helpers/editor/themes/baseTheme.ts

@@ -47,6 +47,7 @@ export const baseTheme = EditorView.theme({
     fontFamily: "var(--font-mono)",
     color: "var(--secondary-dark-color)",
     backgroundColor: "transparent",
+    height: "100%",
   },
   ".cm-cursor": {
     borderColor: "var(--secondary-color)",

packages/hoppscotch-common/src/helpers/keybindings.ts

@@ -56,8 +56,8 @@ export const bindings: {
   "alt-q": "navigation.jump.graphql",
   "alt-w": "navigation.jump.realtime",
   "alt-d": "navigation.jump.documentation",
-  "alt-m": "navigation.jump.profile",
   "alt-s": "navigation.jump.settings",
+  "alt-m": "navigation.jump.profile",
   "ctrl-shift-p": "response.preview.toggle",
   "ctrl-j": "response.file.download",
   "ctrl-.": "response.copy",

packages/hoppscotch-common/src/index.ts

@@ -26,11 +26,11 @@ export function createHoppApp(el: string | Element) {
   app.mount(el)
 
   console.info(
-    "%cWe ❤︎ open source!",
-    "background-color:white;padding:8px 16px;border-radius:8px;font-size:32px;color:red;"
+    "%cWE ♥️ OPEN SOURCE",
+    "margin:8px 0;font-family:Inter;font-weight:600;font-size:60px;color:violet;"
   )
   console.info(
     "%cContribute: https://github.com/hoppscotch/hoppscotch",
-    "background-color:black;padding:4px 8px;border-radius:8px;font-size:16px;color:white;"
+    "margin:8px 0;font-family:Inter;font-weight:500;font-size:24px;color:violet;"
   )
 }

packages/hoppscotch-common/src/pages/join-team.vue

@@ -27,7 +27,7 @@
       <ButtonPrimary
         :label="t('auth.login_to_hoppscotch')"
         class="mt-8"
-        @click="showLogin = true"
+        @click="invokeAction('modals.login.toggle')"
       />
     </div>
     <div v-else class="flex flex-col items-center justify-center flex-1 p-4">
@@ -138,7 +138,6 @@
         to="/"
       />
     </div>
-    <FirebaseLogin :show="showLogin" @hide-modal="showLogin = false" />
   </div>
 </template>
 
@@ -163,6 +162,7 @@ import { useReadonlyStream } from "@composables/stream"
 import { useToast } from "@composables/toast"
 import { useI18n } from "~/composables/i18n"
 import IconHome from "~icons/lucide/home"
+import { invokeAction } from "~/helpers/actions"
 
 type GetInviteDetailsError =
   | "team_invite/not_valid_viewer"
@@ -214,12 +214,12 @@ export default defineComponent({
       toast: useToast(),
       t: useI18n(),
       IconHome,
+      invokeAction,
     }
   },
   data() {
     return {
       invalidLink: false,
-      showLogin: false,
       loading: false,
       revokedLink: false,
       inviteID: "",

packages/hoppscotch-common/src/pages/profile.vue

@@ -24,7 +24,7 @@
           <ButtonPrimary
             :label="t('auth.login')"
             class="mb-4"
-            @click="showLogin = true"
+            @click="invokeAction('modals.login.toggle')"
           />
         </div>
         <div v-else class="space-y-8">
@@ -285,7 +285,6 @@
         </div>
       </div>
     </div>
-    <FirebaseLogin :show="showLogin" @hide-modal="showLogin = false" />
   </div>
 </template>
 
@@ -317,6 +316,7 @@ import { deleteShortcode as backendDeleteShortcode } from "~/helpers/backend/mut
 import IconVerified from "~icons/lucide/verified"
 import IconSettings from "~icons/lucide/settings"
 import IconHelpCircle from "~icons/lucide/help-circle"
+import { invokeAction } from "~/helpers/actions"
 
 type ProfileTabs = "sync" | "teams"
 
@@ -330,8 +330,6 @@ usePageHead({
   title: computed(() => t("navigation.profile")),
 })
 
-const showLogin = ref(false)
-
 const SYNC_COLLECTIONS = useSetting("syncCollections")
 const SYNC_ENVIRONMENTS = useSetting("syncEnvironments")
 const SYNC_HISTORY = useSetting("syncHistory")