refactor(primevue): use new tab components (#836)

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

- **New Features**
- Enhanced tab management in the Game Lobby and Witch Use Potions
components for improved organization and usability.
	- Introduced new tab components for better clarity and interaction.

- **Bug Fixes**
- Resolved issues related to tab state management, ensuring correct
content displays based on selected tabs.

- **Documentation**
- Updated configuration to reflect new tab components available for use
in the application.

- **Tests**
- Revised tests to align with the updated tab management approach,
enhancing clarity and specificity in potion management checks.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->

app/components/pages/game-lobby/GameLobbyOptionsHub/GameLobbyOptionsHubTabView/GameLobbyOptionsHubTabView.vue

@@ -1,83 +1,91 @@
 <template>
-  <PrimeVueTabView
+  <PrimeVueTabs
     id="game-lobby-options-hub-tab-view"
+    class="w-full"
     :pt="{ 'nav': '!border-none' }"
+    value="roles"
   >
-    <PrimeVueTabPanel
-      id="roles-tab-panel"
-      :pt="{ 'header': 'grow' }"
+    <PrimeVueTabList
+      :pt="{ 'tabList': '!w-full' }"
     >
-      <template #header>
-        <div
-          id="roles-tab-header"
-          class="flex gap-2 items-center justify-center w-full"
-        >
-          <RoleImage
-            height="40"
-            width="40"
-          />
+      <PrimeVueTab
+        id="roles-tab-header"
+        class="flex gap-2 grow items-center justify-center"
+        value="roles"
+      >
+        <RoleImage
+          height="40"
+          width="40"
+        />
 
-          <h3 id="roles-tab-header-text">
-            {{ $t('components.GameLobbyOptionsHubTabView.roles') }}
-          </h3>
-        </div>
-      </template>
+        <h3 id="roles-tab-header-text">
+          {{ $t('components.GameLobbyOptionsHubTabView.roles') }}
+        </h3>
+      </PrimeVueTab>
 
-      <GameLobbyOptionsHubRolesTab/>
-    </PrimeVueTabPanel>
+      <PrimeVueTab
+        id="composition-tab-header"
+        class="flex gap-2 grow items-center justify-center"
+        value="composition"
+      >
+        <NuxtImg
+          :alt="$t('components.GameLobbyOptionsHubTabView.compositionTabImageAlt')"
+          height="40"
+          placeholder="/svg/misc/infinite-spinner.svg"
+          src="/svg/misc/people.svg"
+          width="40"
+        />
 
-    <PrimeVueTabPanel
-      id="composition-tab-panel"
-      :pt="{ 'header': 'grow' }"
-    >
-      <template #header>
-        <div
-          id="composition-tab-header"
-          class="flex gap-2 items-center justify-center w-full"
-        >
-          <NuxtImg
-            :alt="$t('components.GameLobbyOptionsHubTabView.compositionTabImageAlt')"
-            height="40"
-            placeholder="/svg/misc/infinite-spinner.svg"
-            src="/svg/misc/people.svg"
-            width="40"
-          />
+        <h3 id="composition-tab-header-text">
+          {{ $t('components.GameLobbyOptionsHubTabView.composition') }}
+        </h3>
+      </PrimeVueTab>
 
-          <h3 id="composition-tab-header-text">
-            {{ $t('components.GameLobbyOptionsHubTabView.composition') }}
-          </h3>
-        </div>
-      </template>
+      <PrimeVueTab
+        id="votes-tab-header"
+        class="flex gap-2 grow items-center justify-center"
+        value="votes"
+      >
+        <NuxtImg
+          :alt="$t('components.GameLobbyOptionsHubTabView.votesTabImageAlt')"
+          height="40"
+          placeholder="/svg/misc/infinite-spinner.svg"
+          src="/svg/game/game-play/game-play-action/settle-votes.svg"
+          width="40"
+        />
 
-      <GameLobbyOptionsHubCompositionTab/>
-    </PrimeVueTabPanel>
+        <h3 id="votes-tab-header-text">
+          {{ $t('components.GameLobbyOptionsHubTabView.votes') }}
+        </h3>
+      </PrimeVueTab>
+    </PrimeVueTabList>
 
-    <PrimeVueTabPanel
-      id="votes-tab-panel"
-      :pt="{ 'header': 'grow' }"
-    >
-      <template #header>
-        <div
-          id="votes-tab-header"
-          class="flex gap-2 items-center justify-center w-full"
-        >
-          <NuxtImg
-            :alt="$t('components.GameLobbyOptionsHubTabView.votesTabImageAlt')"
-            height="40"
-            placeholder="/svg/misc/infinite-spinner.svg"
-            src="/svg/game/game-play/game-play-action/settle-votes.svg"
-            width="40"
-          />
+    <PrimeVueTabPanels>
+      <PrimeVueTabPanel
+        id="roles-tab-panel"
+        :pt="{ 'header': 'grow' }"
+        value="roles"
+      >
+        <GameLobbyOptionsHubRolesTab/>
+      </PrimeVueTabPanel>
 
-          <h3 id="votes-tab-header-text">
-            {{ $t('components.GameLobbyOptionsHubTabView.votes') }}
-          </h3>
-        </div>
-      </template>
+      <PrimeVueTabPanel
+        id="composition-tab-panel"
+        :pt="{ 'header': 'grow' }"
+        value="composition"
+      >
+        <GameLobbyOptionsHubCompositionTab/>
+      </PrimeVueTabPanel>
 
-      <GameLobbyOptionsHubVotesTab/>
-    </PrimeVueTabPanel>
-  </PrimeVueTabView>
+      <PrimeVueTabPanel
+        id="votes-tab-panel"
+        :pt="{ 'header': 'grow' }"
+        value="votes"
+      >
+        <GameLobbyOptionsHubVotesTab/>
+      </PrimeVueTabPanel>
+    </PrimeVueTabPanels>
+  </PrimeVueTabs>
 </template>
 
 <script setup lang="ts">

app/components/pages/game/GamePlaying/GamePlayground/GamePlaygroundContent/GameUsePotionsPlayground/WitchUsePotionsTabView/WitchUsePotionsTabView.vue

@@ -1,40 +1,59 @@
 <template>
-  <PrimeVueTabView
+  <PrimeVueTabs
     id="witch-use-potions-tab-view"
-    :active-index="tabViewActiveIndex"
-    class="tabview-custom"
-    :pt="{
-      'nav': 'gap-2',
-      'root': 'flex flex-col',
-      'panelContainer': 'grow'
-    }"
+    :value="tabViewActiveIndex"
   >
-    <PrimeVueTabPanel
-      :disabled="hasWitchUsedLifePotion"
-      :pt="{
-        'header': 'grow',
-        'root': 'h-full'
-      }"
+    <PrimeVueTabList
+      class="w-full"
+      :pt="{ 'content': '!w-full' }"
     >
-      <template #header>
-        <div class="flex gap-2 items-center">
-          <NuxtImg
-            :alt="$t('components.WitchUsePotionsTabView.lifePotionImageAlt')"
-            height="40"
-            placeholder="/svg/misc/infinite-spinner.svg"
-            src="svg/game/player/player-attribute/drank-life-potion.svg"
-            width="40"
-          />
+      <PrimeVueTab
+        id="life-potion-tab"
+        class="flex gap-2 items-center w-1/2"
+        :disabled="hasWitchUsedLifePotion"
+        value="life-potion"
+      >
+        <NuxtImg
+          :alt="$t('components.WitchUsePotionsTabView.lifePotionImageAlt')"
+          height="40"
+          placeholder="/svg/misc/infinite-spinner.svg"
+          src="svg/game/player/player-attribute/drank-life-potion.svg"
+          width="40"
+        />
+
+        <h4 class="text-pretty">
+          {{ $t("components.WitchUsePotionsTabView.giveLifePotion") }}
+        </h4>
+      </PrimeVueTab>
+
+      <PrimeVueTab
+        id="death-potion-tab"
+        class="flex gap-2 items-center w-1/2"
+        :disabled="hasWitchUsedDeathPotion"
+        value="death-potion"
+      >
+        <NuxtImg
+          :alt="$t('components.WitchUsePotionsTabView.deathPotionImageAlt')"
+          height="40"
+          placeholder="/svg/misc/infinite-spinner.svg"
+          src="svg/game/player/player-attribute/drank-death-potion.svg"
+          width="40"
+        />
 
-          <h4>
-            {{ $t("components.WitchUsePotionsTabView.giveLifePotion") }}
-          </h4>
-        </div>
-      </template>
+        <h4 class="text-pretty">
+          {{ $t("components.WitchUsePotionsTabView.giveDeathPotion") }}
+        </h4>
+      </PrimeVueTab>
+    </PrimeVueTabList>
 
-      <div
+    <PrimeVueTabPanels
+      class="h-full"
+      :value="tabViewActiveIndex"
+    >
+      <PrimeVueTabPanel
         id="give-life-potion-panel"
-        class="flex flex-wrap h-full items-center justify-center m-0 place-content-center place-items-center"
+        class="!h-full flex flex-wrap grow items-center justify-center m-0 place-content-center place-items-center"
+        value="life-potion"
       >
         <GamePlaygroundPlayerCard
           v-for="target in giveLifePotionInteractionEligibleTargets"
@@ -43,35 +62,12 @@
           interaction="give-life-potion"
           :player="target"
         />
-      </div>
-    </PrimeVueTabPanel>
-
-    <PrimeVueTabPanel
-      :disabled="hasWitchUsedDeathPotion"
-      :pt="{
-        'header': 'grow',
-        'root': 'h-full'
-      }"
-    >
-      <template #header>
-        <div class="flex gap-2 items-center">
-          <NuxtImg
-            :alt="$t('components.WitchUsePotionsTabView.deathPotionImageAlt')"
-            height="40"
-            placeholder="/svg/misc/infinite-spinner.svg"
-            src="svg/game/player/player-attribute/drank-death-potion.svg"
-            width="40"
-          />
-
-          <h4>
-            {{ $t("components.WitchUsePotionsTabView.giveDeathPotion") }}
-          </h4>
-        </div>
-      </template>
+      </PrimeVueTabPanel>
 
-      <div
+      <PrimeVueTabPanel
         id="give-death-potion-panel"
-        class="flex flex-wrap h-full items-center justify-center m-0 place-content-center"
+        class="!h-full flex flex-wrap items-center justify-center m-0 place-content-center place-items-center"
+        value="death-potion"
       >
         <GamePlaygroundPlayerCard
           v-for="target in giveDeathPotionInteractionEligibleTargets"
@@ -80,9 +76,9 @@
           interaction="give-death-potion"
           :player="target"
         />
-      </div>
-    </PrimeVueTabPanel>
-  </PrimeVueTabView>
+      </PrimeVueTabPanel>
+    </PrimeVueTabPanels>
+  </PrimeVueTabs>
 </template>
 
 <script setup lang="ts">
@@ -106,5 +102,5 @@ const hasWitchUsedLifePotion = computed<boolean>(() => giveLifePotionInteraction
 
 const hasWitchUsedDeathPotion = computed<boolean>(() => giveDeathPotionInteractionEligibleTargets.value.length === 0);
 
-const tabViewActiveIndex = computed<number>(() => (hasWitchUsedLifePotion.value ? 1 : 0));
+const tabViewActiveIndex = computed<"life-potion" | "death-potion">(() => (hasWitchUsedLifePotion.value ? "death-potion" : "life-potion"));
 </script>

nuxt.config.ts

@@ -152,8 +152,11 @@ export default defineNuxtConfig({
         "Slider",
         "Toast",
         "ToggleButton",
+        "Tabs",
+        "TabList",
+        "TabPanels",
+        "Tab",
         "TabPanel",
-        "TabView",
         "Tag",
         "Timeline",
       ],