fix: resolved #2771

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

@@ -1,5 +1,5 @@
 <template>
-  <div v-show="show">
+  <div>
     <SmartTabs
       :id="'collections_tab'"
       v-model="selectedCollectionTab"
@@ -10,9 +10,9 @@
         :label="`${t('collection.my_collections')}`"
       />
       <SmartTab
-        v-if="currentUser"
         :id="'team-collections'"
         :label="`${t('collection.team_collections')}`"
+        :disabled="!currentUser"
       >
         <SmartIntersection @intersecting="onTeamSelectIntersect">
           <tippy
@@ -98,7 +98,6 @@ const tippyActions = ref<any | null>(null)
 const selectedCollectionTab = ref<CollectionTabs>("my-collections")
 
 defineProps<{
-  show: boolean
   collectionsType: {
     type: "my-collections" | "team-collections"
     selectedTeam: Team | undefined

packages/hoppscotch-app/src/components/collections/index.vue

@@ -18,7 +18,6 @@
       </div>
       <CollectionsChooseType
         :collections-type="collectionsType"
-        :show="showTeamCollections"
         @update-collection-type="updateCollectionType"
         @update-selected-team="updateSelectedTeam"
       />
@@ -323,12 +322,6 @@ export default defineComponent({
     }
   },
   computed: {
-    showTeamCollections() {
-      if (this.currentUser == null) {
-        return false
-      }
-      return true
-    },
     filteredCollections() {
       const collections =
         this.collectionsType.type === "my-collections"

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

@@ -1,5 +1,5 @@
 <template>
-  <div v-show="show">
+  <div>
     <SmartTabs
       :id="'environments_tab'"
       v-model="selectedEnvironmentTab"
@@ -10,9 +10,9 @@
         :label="`${t('environment.my_environments')}`"
       />
       <SmartTab
-        v-if="currentUser"
         :id="'team-environments'"
         :label="`${t('environment.team_environments')}`"
+        :disabled="!currentUser"
       >
         <SmartIntersection @intersecting="onTeamSelectIntersect">
           <tippy
@@ -98,7 +98,6 @@ const tippyActions = ref<any | null>(null)
 const selectedEnvironmentTab = ref<EnvironmentTabs>("my-environments")
 
 defineProps<{
-  show: boolean
   environmentType: {
     type: "my-environments" | "team-environments"
     selectedTeam: SelectedTeam

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

@@ -151,7 +151,6 @@
       </tippy>
       <EnvironmentsChooseType
         :environment-type="environmentType"
-        :show="showTeamEnvironment"
         @update-environment-type="updateEnvironmentType"
         @update-selected-team="updateSelectedTeam"
       />
@@ -202,13 +201,6 @@ const environmentType = ref<EnvironmentsChooseType>({
 
 const currentUser = useReadonlyStream(currentUser$, null)
 
-const showTeamEnvironment = computed(() => {
-  if (currentUser.value == null) {
-    return false
-  }
-  return true
-})
-
 const updateSelectedTeam = (newSelectedTeam: SelectedTeam) => {
   environmentType.value.selectedTeam = newSelectedTeam
 }
@@ -232,6 +224,15 @@ watch(
   }
 )
 
+watch(
+  () => currentUser.value,
+  (newValue) => {
+    if (!newValue) {
+      updateEnvironmentType("my-environments")
+    }
+  }
+)
+
 const myEnvironments = useReadonlyStream(environments$, [])
 
 const selectedEnvironmentIndex = useStream(

packages/hoppscotch-app/src/components/environments/my/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <div
-      class="sticky z-10 top-upperPrimaryStickyFold flex justify-between flex-1 border-b border-dividerLight bg-primary"
+      class="sticky z-10 flex justify-between flex-1 border-b top-upperPrimaryStickyFold border-dividerLight bg-primary"
     >
       <ButtonSecondary
         :icon="IconPlus"

packages/hoppscotch-app/src/components/environments/teams/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <div
-      class="sticky z-10 top-upperSecondaryStickyFold flex justify-between flex-1 border-b border-dividerLight bg-primary"
+      class="sticky z-10 flex justify-between flex-1 border-b top-upperSecondaryStickyFold border-dividerLight bg-primary"
     >
       <ButtonSecondary
         v-if="team === undefined || team.myRole === 'VIEWER'"

packages/hoppscotch-app/src/components/smart/Tab.vue

@@ -23,11 +23,13 @@ const props = withDefaults(
     icon?: Component | object | string | null
     info?: string | null
     indicator?: boolean
+    disabled?: boolean
   }>(),
   {
     icon: null,
     indicator: false,
     info: null,
+    disabled: false,
   }
 )
 
@@ -41,6 +43,7 @@ const tabMeta = computed<TabMeta>(() => ({
   indicator: props.indicator,
   info: props.info,
   label: props.label,
+  disabled: props.disabled,
 }))
 
 const {

packages/hoppscotch-app/src/components/smart/Tabs.vue

@@ -25,8 +25,10 @@
               :class="[
                 { active: modelValue === tabID },
                 { vertical: vertical },
+                { 'opacity-75 !cursor-not-allowed': tabMeta.disabled },
               ]"
               :aria-label="tabMeta.label || ''"
+              :disabled="tabMeta.disabled"
               role="button"
               @keyup.enter="selectTab(tabID)"
               @click="selectTab(tabID)"
@@ -80,6 +82,7 @@ export type TabMeta = {
   icon: string | Component | null
   indicator: boolean
   info: string | null
+  disabled: boolean
 }
 
 export type TabProvider = {