feat: added a button to hide non owned patterns (#2432)

Resolves #2431

## Description:

Adds a button in the pattern menu to hide non owned skins
<img width="1264" height="976" alt="image"
src="https://github.com/user-attachments/assets/70a27c99-82f2-4414-b218-59deed723177"
/>


## 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
- [x] I confirm I have thoroughly tested these changes and take full
responsibility for any bugs introduced



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

notifxy (1379678982676676639)

resources/lang/en.json

@@ -679,6 +679,7 @@
     "title": "Skins",
     "colors": "Colors",
     "purchase": "Purchase",
+    "show_only_owned": "My Skins",
     "blocked": {
       "login": "You must be logged in to access this skin.",
       "purchase": "Purchase this skin to unlock it."

src/client/TerritoryPatternsModal.ts

@@ -28,6 +28,7 @@ export class TerritoryPatternsModal extends LitElement {
   @state() private selectedColor: string | null = null;
 
   @state() private activeTab: "patterns" | "colors" = "patterns";
+  @state() private showOnlyOwned: boolean = false;
 
   private cosmetics: Cosmetics | null = null;
 
@@ -112,6 +113,9 @@ export class TerritoryPatternsModal extends LitElement {
         if (rel === "blocked") {
           continue;
         }
+        if (this.showOnlyOwned && rel !== "owned") {
+          continue;
+        }
         buttons.push(html`
           <pattern-button
             .pattern=${pattern}
@@ -128,19 +132,34 @@ export class TerritoryPatternsModal extends LitElement {
     }
 
     return html`
-      <div
-        class="flex flex-wrap gap-4 p-2"
-        style="justify-content: center; align-items: flex-start;"
-      >
-        ${this.affiliateCode === null
-          ? html`
-              <pattern-button
-                .pattern=${null}
-                .onSelect=${(p: Pattern | null) => this.selectPattern(null)}
-              ></pattern-button>
-            `
-          : html``}
-        ${buttons}
+      <div class="flex flex-col gap-2">
+        <div class="flex justify-center">
+          <button
+            class="px-4 py-2 text-sm font-medium transition-colors duration-200 rounded-lg ${this
+              .showOnlyOwned
+              ? "bg-blue-500 text-white hover:bg-blue-600"
+              : "bg-gray-700 text-gray-300 hover:bg-gray-600"}"
+            @click=${() => {
+              this.showOnlyOwned = !this.showOnlyOwned;
+            }}
+          >
+            ${translateText("territory_patterns.show_only_owned")}
+          </button>
+        </div>
+        <div
+          class="flex flex-wrap gap-4 p-2"
+          style="justify-content: center; align-items: flex-start;"
+        >
+          ${this.affiliateCode === null
+            ? html`
+                <pattern-button
+                  .pattern=${null}
+                  .onSelect=${(p: Pattern | null) => this.selectPattern(null)}
+                ></pattern-button>
+              `
+            : html``}
+          ${buttons}
+        </div>
       </div>
     `;
   }