feat: pass allStats to LoadoutCard and Loadouts components for enhanced stats handling

Author: DarthGigi

src/lib/components/stats/LoadoutCard.svelte

@@ -3,15 +3,15 @@
   import EmptyItemSlot from "$lib/components/item/EmptyItemSlot.svelte";
   import GearSlotColumn from "$lib/components/item/GearSlotColumn.svelte";
   import Item from "$lib/components/item/Item.svelte";
-  import type { ModelsResolvedLoadout } from "$lib/shared/api/orval-generated";
+  import type { ModelsResolvedLoadout, ModelsStatData } from "$lib/shared/api/orval-generated";
   import { titleCase } from "$lib/shared/helper";
   import { cn } from "$lib/shared/utils";
-  import { getAllStats } from "$src/lib/shared/api/skycrypt-api.remote";
   import { Separator } from "$ui/separator";
 
   type Props = {
     loadout: ModelsResolvedLoadout;
     index: number;
+    allStats: ModelsStatData[];
     class?: string;
   };
 
@@ -22,16 +22,14 @@
     walk_speed: "speed"
   } as const;
 
-  let { loadout, index, class: className }: Props = $props();
+  let { loadout, index, allStats, class: className }: Props = $props();
 
   const name = $derived(loadout.name?.trim() || `Loadout ${index + 1}`);
   const armor = $derived(loadout.armor ?? []);
   const equipment = $derived(loadout.equipment ?? []);
   const pet = $derived(loadout.pet);
   const tuningPoints = $derived(Object.entries(loadout.accessories?.tuningPoints ?? {}));
   const powerStone = $derived(loadout.accessories?.powerStone ? titleCase(loadout.accessories.powerStone) : "None");
-  const allStats = await getAllStats();
-
   function selectedSlot(value: number | undefined): string {
     return value ? value.toString() : "None";
   }

src/lib/components/stats/Loadouts.svelte

@@ -1,13 +1,14 @@
 <script lang="ts">
-  import type { ModelsResolvedLoadout } from "$lib/shared/api/orval-generated";
+  import type { ModelsResolvedLoadout, ModelsStatData } from "$lib/shared/api/orval-generated";
   import { ScrollArea } from "$ui/scroll-area";
   import LoadoutCard from "./LoadoutCard.svelte";
 
   type Props = {
     loadouts: ModelsResolvedLoadout[];
+    allStats?: ModelsStatData[];
   };
 
-  let { loadouts }: Props = $props();
+  let { loadouts, allStats = [] }: Props = $props();
 
   function loadoutKey(loadout: ModelsResolvedLoadout | undefined, index: number): string {
     return `${loadout?.id ?? "loadout"}-${index}`;
@@ -21,7 +22,7 @@
     viewportClasses="rounded-xl pr-4 scroll-fade-track-y">
     <div class="grid grid-cols-1 gap-4 lg:grid-cols-2">
       {#each loadouts as loadout, index (loadoutKey(loadout, index))}
-        <LoadoutCard {loadout} {index} />
+        <LoadoutCard {loadout} {index} {allStats} />
       {/each}
     </div>
     <div

src/lib/sections/stats/Gear.svelte

@@ -10,6 +10,7 @@
   import { cn } from "$lib/shared/utils";
   import ScrollAreaItems from "$src/lib/components/ScrollAreaItems.svelte";
   import SectionSubtitle from "$src/lib/components/sections/SectionSubtitle.svelte";
+  import { getAllStats } from "$src/lib/shared/api/skycrypt-api.remote";
   import ShieldIcon from "@lucide/svelte/icons/shield";
   import ShirtIcon from "@lucide/svelte/icons/shirt";
   import SwordIcon from "@lucide/svelte/icons/sword";
@@ -23,6 +24,7 @@
   const equipmentWardrobe = $derived(gear?.equipmentWardrobe);
   const weapons = $derived(gear?.weapons);
   const loadouts = $derived(getCombinedContext().current?.loadouts ?? []);
+  const allStats = await getAllStats();
   const armorSlots = ["helmet", "chestplate", "leggings", "boots"] as const;
   const firstWardrobeItems = $derived.by(() => {
     if (wardrobe?.length === 0) return [];
@@ -94,7 +96,7 @@
   {#if loadouts.length > 0}
     <div class="space-y-4 rounded-xl border p-4">
       <SectionSubtitle>Loadouts</SectionSubtitle>
-      <Loadouts {loadouts} />
+      <Loadouts {loadouts} {allStats} />
     </div>
   {/if}