From 47b3a11fef9bbf17b0a4588714d7962ecfe1f81d Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Tue, 30 Sep 2025 01:11:39 -0700
Subject: [PATCH] update extra weapons grid with header and container

---
 .../components/extra/ExtraWeaponsGrid.svelte  | 28 ++++++++++++-------
 1 file changed, 18 insertions(+), 10 deletions(-)

diff --git a/src/lib/components/extra/ExtraWeaponsGrid.svelte b/src/lib/components/extra/ExtraWeaponsGrid.svelte
index 6e33a98b..8a92cfdf 100644
--- a/src/lib/components/extra/ExtraWeaponsGrid.svelte
+++ b/src/lib/components/extra/ExtraWeaponsGrid.svelte
@@ -1,18 +1,26 @@
 <script lang="ts">
   import WeaponUnit from '$lib/components/units/WeaponUnit.svelte'
-  import type { GridWeaponItemView } from '$lib/api/schemas/party'
+  import ExtraContainerItem from './ExtraContainerItem.svelte'
+  import type { GridWeapon } from '$lib/types/api/party'
+  import * as m from '$lib/paraglide/messages'
 
-  export let weapons: GridWeaponItemView[] = []
-  export let offset = 9
+  interface Props {
+    weapons?: GridWeapon[]
+    offset?: number
+  }
+
+  let { weapons = [], offset = 9 }: Props = $props()
 </script>
 
-<ul class="grid">
-  {#each [0,1,2] as i}
-    <li class:empty={!weapons[offset + i]}>
-      <WeaponUnit item={weapons[offset + i]} position={offset + i} />
-    </li>
-  {/each}
-</ul>
+<ExtraContainerItem title={m.extra_weapons()}>
+  <ul class="grid">
+    {#each [0, 1, 2] as i}
+      <li class:empty={!weapons[offset + i]}>
+        <WeaponUnit item={weapons[offset + i]} position={offset + i} />
+      </li>
+    {/each}
+  </ul>
+</ExtraContainerItem>
 
 <style lang="scss">
   @use '$src/themes/spacing' as *;