collapse skins under one banner (#4432)

## Description:

merges skins under one item with a circular button below it:

<img width="877" height="647" alt="image"
src="https://github.com/user-attachments/assets/a405ba34-a970-4e8c-9287-fe0055d6a02e"
/>


## Please complete the following:

- [x] I have added screenshots for all UI updates
- [x] I process any text displayed to the user through translateText()
and I've added it to the en.json file
- [x] I have added relevant tests to the test directory

## Please put your Discord username so you can be contacted if a bug or
regression is found:

w.o.n

src/client/Store.ts

@@ -10,6 +10,7 @@ import "./components/NotLoggedInWarning";
 import { modalHeader } from "./components/ui/ModalHeader";
 import {
   fetchCosmetics,
+  groupCosmeticVariants,
   purchaseCosmetic,
   resolveCosmetics,
   SUBSCRIPTIONS_ENABLED,
@@ -92,14 +93,17 @@ export class StoreModal extends BaseModal {
       </div>`;
     }
 
+    // Collapse colour-palette variants of the same pattern into one tile; the
+    // variants become clickable colour swatches on the cosmetic-button.
     return html`
       <div
         class="flex flex-wrap gap-4 p-8 justify-center items-stretch content-start"
       >
-        ${items.map(
-          (r) => html`
+        ${groupCosmeticVariants(items).map(
+          (group) => html`
             <cosmetic-button
-              .resolved=${r}
+              .resolved=${group[0]}
+              .variants=${group}
               .onPurchase=${purchaseCosmetic}
             ></cosmetic-button>
           `,
@@ -264,10 +268,11 @@ export class StoreModal extends BaseModal {
       <div
         class="flex flex-wrap gap-4 p-8 justify-center items-stretch content-start"
       >
-        ${items.map(
-          (r) => html`
+        ${groupCosmeticVariants(items).map(
+          (group) => html`
             <cosmetic-button
-              .resolved=${r}
+              .resolved=${group[0]}
+              .variants=${group}
               .onPurchase=${purchaseCosmetic}
             ></cosmetic-button>
           `,