chore: minor ui improvements

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="