From ec6bd6ed11d7a480136669c4d2a85ad6732295ef Mon Sep 17 00:00:00 2001
From: DuckySoLucky <robertkovac160@gmail.com>
Date: Fri, 27 Dec 2024 17:58:41 +0100
Subject: [PATCH 1/3] feat(stats): item container preview

---
 src/lib/components/ContainedItem.svelte | 20 ++++++++++++++++++++
 src/lib/components/Item.svelte          | 16 ++++++++++++++++
 2 files changed, 36 insertions(+)
 create mode 100644 src/lib/components/ContainedItem.svelte

diff --git a/src/lib/components/ContainedItem.svelte b/src/lib/components/ContainedItem.svelte
new file mode 100644
index 000000000..9c0167bf6
--- /dev/null
+++ b/src/lib/components/ContainedItem.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+  import { page } from "$app/stores";
+  import { cn } from "$lib/shared/utils";
+  import type { ProcessedSkyBlockItem } from "$lib/types/global";
+  import { Avatar } from "bits-ui";
+  import Image from "lucide-svelte/icons/image";
+
+  export let piece: ProcessedSkyBlockItem;
+
+  const enchanted = piece.shiny;
+</script>
+
+<div class={cn(`relative flex aspect-square items-center justify-center overflow-clip rounded-lg p-0`, { shine: enchanted })}>
+  <Avatar.Root>
+    <Avatar.Image loading="lazy" src={$page.url.origin + piece.texture_path} alt={piece.display_name} class="data-[enchanted=true]:enchanted h-auto w-14 select-none" data-enchanted={enchanted} />
+    <Avatar.Fallback>
+      <Image class="size-8" />
+    </Avatar.Fallback>
+  </Avatar.Root>
+</div>
diff --git a/src/lib/components/Item.svelte b/src/lib/components/Item.svelte
index 0f92ec081..4aa7dd996 100644
--- a/src/lib/components/Item.svelte
+++ b/src/lib/components/Item.svelte
@@ -6,6 +6,7 @@
   import type { ProcessedSkyBlockItem, ProcessedSkyblockPet } from "$lib/types/global";
   import { Avatar, Tooltip } from "bits-ui";
   import Image from "lucide-svelte/icons/image";
+  import ContainedItem from "./ContainedItem.svelte";
 
   export let piece: ProcessedSkyBlockItem | ProcessedSkyblockPet;
   export let isInventory = false;
@@ -65,6 +66,21 @@
             {@html renderLore(lore)}
           {/each}
         {/if}
+        {#if item.containsItems && item.containsItems.length > 0}
+          <div class="mt-4 border-t border-text/10 pt-4">
+            <div class="grid grid-cols-9 gap-1">
+              {#each item.containsItems.slice(0, Math.min(item.containsItems.length, 54)) as containedItem}
+                {#if containedItem.texture_path}
+                  <div class="flex aspect-square items-center justify-center rounded bg-text/[0.04]">
+                    <ContainedItem piece={containedItem} />
+                  </div>
+                {:else}
+                  <div class="aspect-square rounded bg-text/[0.04]"></div>
+                {/if}
+              {/each}
+            </div>
+          </div>
+        {/if}
       </div>
     </Tooltip.Content>
   </Tooltip.Root>

From b4e884a5303a0576da178ff1d478f0b84a281f66 Mon Sep 17 00:00:00 2001
From: zickles <zicklesistaken@gmail.com>
Date: Fri, 27 Dec 2024 19:06:00 -0500
Subject: [PATCH 2/3] fix(container-preview): update styling

---
 src/lib/components/ContainedItem.svelte | 8 +++-----
 src/lib/components/Item.svelte          | 2 +-
 2 files changed, 4 insertions(+), 6 deletions(-)

diff --git a/src/lib/components/ContainedItem.svelte b/src/lib/components/ContainedItem.svelte
index 9c0167bf6..07ce9c2b4 100644
--- a/src/lib/components/ContainedItem.svelte
+++ b/src/lib/components/ContainedItem.svelte
@@ -1,18 +1,16 @@
 <script lang="ts">
-  import { page } from "$app/stores";
-  import { cn } from "$lib/shared/utils";
   import type { ProcessedSkyBlockItem } from "$lib/types/global";
   import { Avatar } from "bits-ui";
   import Image from "lucide-svelte/icons/image";
 
-  export let piece: ProcessedSkyBlockItem;
+  let { piece }: { piece: ProcessedSkyBlockItem } = $props();
 
   const enchanted = piece.shiny;
 </script>
 
-<div class={cn(`relative flex aspect-square items-center justify-center overflow-clip rounded-lg p-0`, { shine: enchanted })}>
+<div class="data-[enchanted=true]:shine relative flex aspect-square items-center justify-center overflow-clip rounded-lg p-0" data-enchanted={enchanted}>
   <Avatar.Root>
-    <Avatar.Image loading="lazy" src={$page.url.origin + piece.texture_path} alt={piece.display_name} class="data-[enchanted=true]:enchanted h-auto w-14 select-none" data-enchanted={enchanted} />
+    <Avatar.Image loading="lazy" src={piece.texture_path} alt={piece.display_name} class="group-data-[enchanted=true]:enchanted h-auto w-14 select-none" />
     <Avatar.Fallback>
       <Image class="size-8" />
     </Avatar.Fallback>
diff --git a/src/lib/components/Item.svelte b/src/lib/components/Item.svelte
index 4aa7dd996..ed345cb85 100644
--- a/src/lib/components/Item.svelte
+++ b/src/lib/components/Item.svelte
@@ -1,12 +1,12 @@
 <script lang="ts">
   import { page } from "$app/stores";
+  import ContainedItem from "$lib/components/ContainedItem.svelte";
   import { RARITIES, RARITY_COLORS } from "$lib/shared/constants/items";
   import { getRarityClass, removeFormatting, renderLore } from "$lib/shared/helper";
   import { cn, flyAndScale } from "$lib/shared/utils";
   import type { ProcessedSkyBlockItem, ProcessedSkyblockPet } from "$lib/types/global";
   import { Avatar, Tooltip } from "bits-ui";
   import Image from "lucide-svelte/icons/image";
-  import ContainedItem from "./ContainedItem.svelte";
 
   export let piece: ProcessedSkyBlockItem | ProcessedSkyblockPet;
   export let isInventory = false;

From 3ece6e5998d57e9fd26d4f61cc9ef1db51ed4f16 Mon Sep 17 00:00:00 2001
From: DuckySoLucky <robertkovac160@gmail.com>
Date: Sat, 28 Dec 2024 20:08:22 +0100
Subject: [PATCH 3/3] refactor(containedItem): clean code

---
 src/lib/components/ContainedItem.svelte | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/lib/components/ContainedItem.svelte b/src/lib/components/ContainedItem.svelte
index 07ce9c2b4..b0fab6c04 100644
--- a/src/lib/components/ContainedItem.svelte
+++ b/src/lib/components/ContainedItem.svelte
@@ -4,11 +4,9 @@
   import Image from "lucide-svelte/icons/image";
 
   let { piece }: { piece: ProcessedSkyBlockItem } = $props();
-
-  const enchanted = piece.shiny;
 </script>
 
-<div class="data-[enchanted=true]:shine relative flex aspect-square items-center justify-center overflow-clip rounded-lg p-0" data-enchanted={enchanted}>
+<div class="data-[enchanted=true]:shine relative flex aspect-square items-center justify-center overflow-clip rounded-lg p-0" data-enchanted={piece.shiny}>
   <Avatar.Root>
     <Avatar.Image loading="lazy" src={piece.texture_path} alt={piece.display_name} class="group-data-[enchanted=true]:enchanted h-auto w-14 select-none" />
     <Avatar.Fallback>