feat: enhance customization options with new 'Mes Persos' panel and improved context menus

frontend/src/views/ShopPage.vue

@@ -47,19 +47,25 @@
         <div v-if="lastError" class="toast toast--err">{{ lastError }}</div>
         <div v-else-if="lastSuccess" class="toast toast--ok">✓ Achat effectué</div>
 
-        <div class="grid">
-          <ProductCard
-            v-for="p in visibleProducts"
-            :key="p.id"
-            :product="p"
-            :buying="buying === p.id"
-            :owns="owns"
-            :pet-count="petCount()"
-            :free-mode="freeMode"
-            @buy="onBuy"
-          />
-        </div>
-        <p v-if="visibleProducts.length === 0" class="empty">Aucun produit dans cette catégorie.</p>
+        <!-- Mes Persos panel -->
+        <MesPersos v-if="activeCat === 'perso'" />
+
+        <template v-else>
+          <div class="grid">
+            <ProductCard
+              v-for="p in visibleProducts"
+              :key="p.id"
+              :product="p"
+              :buying="buying === p.id"
+              :owns="owns"
+              :pet-count="petCount()"
+              :free-mode="freeMode"
+              @buy="onBuy"
+              @go-perso="activeCat = 'perso'"
+            />
+          </div>
+          <p v-if="visibleProducts.length === 0" class="empty">Aucun produit dans cette catégorie.</p>
+        </template>
       </main>
     </div>
   </div>
@@ -70,6 +76,7 @@ import { ref, computed, onMounted, onUnmounted } from 'vue';
 import { useShop, type PurchaseOptions } from '@/composables/useShop';
 import { useWallet } from '@/composables/useWallet';
 import ProductCard from '@/components/shop/ProductCard.vue';
+import MesPersos from '@/components/shop/MesPersos.vue';
 
 const { products, loading, buying, lastError, lastSuccess, fetchProducts, fetchMe, owns, petCount, purchase } = useShop();
 const { ip, freeMode, displayBalance, fetchWallet, topUp: walletTopUp } = useWallet();
@@ -81,6 +88,7 @@ const categories = [
   { id: 'cosmetiques', label: 'Cosmétiques' },
   { id: 'premium', label: 'Premium' },
   { id: 'promotions', label: 'Promotions' },
+  { id: 'perso', label: '✨ Mes Persos' },
 ];
 const activeCat = ref('all');