feat: compact mode for team component

packages/hoppscotch-app/components/teams/Modal.vue

@@ -1,7 +1,7 @@
 <template>
   <SmartModal
     v-if="show"
-    :title="$t('team.title')"
+    :title="$t('team.select_a_team')"
     @close="$emit('hide-modal')"
   >
     <template #body>

packages/hoppscotch-app/components/teams/Team.vue

@@ -1,8 +1,18 @@
 <template>
-  <div class="border border-dividerLight rounded flex flex-col flex-1">
+  <div class="border border-divider rounded flex flex-col flex-1">
-    <div class="flex flex-1 items-start">
+    <div
+      class="flex flex-1 items-start"
+      :class="{
+        'cursor-pointer hover:bg-primaryDark transition hover:border-dividerDark focus-visible:border-dividerDark':
+          compact && team.myRole === 'OWNER',
+      }"
+      @click="compact && team.myRole === 'OWNER' ? $emit('invite-team') : ''"
+    >
       <div class="p-4">
-        <label class="font-semibold text-secondaryDark">
+        <label
+          class="font-semibold text-secondaryDark"
+          :class="{ 'cursor-pointer': compact && team.myRole === 'OWNER' }"
+        >
           {{ team.name || $t("state.nothing_found") }}
         </label>
         <div class="flex -space-x-1 mt-2 overflow-hidden">
@@ -18,11 +28,12 @@
         </div>
       </div>
     </div>
-    <div class="flex items-center justify-between">
+    <div v-if="!compact" class="flex items-center justify-between">
       <span>
         <ButtonSecondary
           v-if="team.myRole === 'OWNER'"
           svg="edit"
+          class="rounded-none"
           :label="$t('action.edit').toString()"
           @click.native="
             () => {
@@ -33,6 +44,7 @@
         <ButtonSecondary
           v-if="team.myRole === 'OWNER'"
           svg="user-plus"
+          class="rounded-none"
           :label="$t('team.invite')"
           @click.native="
             () => {
@@ -113,6 +125,7 @@ const props = defineProps<{
     }>
   }
   teamID: string
+  compact: boolean
 }>()
 
 const emit = defineEmits<{

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

@@ -42,6 +42,7 @@
           :key="`team-${String(index)}`"
           :team-i-d="team.id"
           :team="team"
+          :compact="modal"
           @edit-team="editTeam(team, team.id)"
           @invite-team="inviteTeam(team, team.id)"
         />

packages/hoppscotch-app/locales/en.json

@@ -474,6 +474,7 @@
     "invalid_email_format": "Email format is invalid",
     "invalid_member_permission": "Please provide a valid permission to the team member",
     "invite": "Invite",
+    "select_a_team": "Select a team",
     "invite_tooltip": "Invite people to this workspace",
     "invited_to_team": "{owner} invited you to join {team}",
     "join_beta": "Join the beta program to access teams.",