From 5d864eb53a8e24184dde79930e6b1eea3462a639 Mon Sep 17 00:00:00 2001
From: DarthGigi <47110839+DarthGigi@users.noreply.github.com>
Date: Tue, 14 Jan 2025 20:25:13 +0100
Subject: [PATCH 1/4] feat(Inventory): add search functionality and refactor
 tab handling

---
 src/lib/sections/Sections.svelte        |   2 +-
 src/lib/sections/stats/Inventory.svelte | 148 +++++++++++++++++-------
 2 files changed, 104 insertions(+), 46 deletions(-)

diff --git a/src/lib/sections/Sections.svelte b/src/lib/sections/Sections.svelte
index 0894cf959..66a9b4d39 100644
--- a/src/lib/sections/Sections.svelte
+++ b/src/lib/sections/Sections.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
   import { getProfileCtx } from "$ctx/profile.svelte";
   import Accessories from "$lib/sections/stats/Accessories.svelte";
+  import Armor from "$lib/sections/stats/Armor.svelte";
   import Bestiary from "$lib/sections/stats/Bestiary.svelte";
   import Collections from "$lib/sections/stats/Collections.svelte";
   import CrimsonIsle from "$lib/sections/stats/CrimsonIsle.svelte";
@@ -15,7 +16,6 @@
   import Weapons from "$lib/sections/stats/Weapons.svelte";
   import type { SectionName } from "$lib/sections/types";
   import { sectionOrderPreferences } from "$lib/stores/preferences";
-  import Armor from "./stats/Armor.svelte";
 
   const ctx = getProfileCtx();
   const profile = $derived(ctx.profile);
diff --git a/src/lib/sections/stats/Inventory.svelte b/src/lib/sections/stats/Inventory.svelte
index 600f32c23..948b99121 100644
--- a/src/lib/sections/stats/Inventory.svelte
+++ b/src/lib/sections/stats/Inventory.svelte
@@ -6,11 +6,19 @@
   import { Avatar, ScrollArea, Tabs } from "bits-ui";
   import Image from "lucide-svelte/icons/image";
   import { cubicInOut } from "svelte/easing";
-  import { writable } from "svelte/store";
   import { crossfade, fade } from "svelte/transition";
 
+  type Tabs = {
+    id: string;
+    icon: string;
+    items: ProcessedSkyBlockItem[];
+    gap: number;
+  };
+
   let { order }: { order: number } = $props();
-  let openStorageTab = writable<string>("0");
+  let openTab = $state<string>("inv");
+  let openStorageTab = $state<string>("0");
+  let searchValue = $state<string>("");
 
   const ctx = getProfileCtx();
   const profile = $derived(ctx.profile);
@@ -25,9 +33,7 @@
   const quiver = $derived(profile.items.quiver);
   const museum = $derived(profile.items.museum);
 
-  const openTab = writable<string>("inv");
-
-  const tabs = $derived(
+  const tabs = $derived<Tabs[]>(
     [
       {
         id: "inv",
@@ -82,33 +88,59 @@
         icon: "/api/head/438cf3f8e54afc3b3f91d20a49f324dca1486007fe545399055524c17941f4dc",
         items: museum,
         gap: 54
+      },
+      {
+        id: "search",
+        icon: "/api/item/EYE_OF_ENDER",
+        items: [],
+        gap: 45
       }
-    ].filter((tab) => tab.items.length > 0)
+    ].filter((tab) => tab.id === "search" || tab.items.length > 0)
   );
 
+  const allItems = $derived.by(() => {
+    return tabs.reduce((acc, tab) => {
+      acc.push(...tab.items);
+      return acc;
+    }, [] as ProcessedSkyBlockItem[]);
+  });
+
+  const searchedItems = $derived.by(() => {
+    const search = searchValue.trim();
+    if (!search) return [];
+    const searchedItem = allItems
+      .map((item) => {
+        const tab = tabs.find((t) => t.items.includes(item));
+        return { item, sourceTab: { name: tab?.id || "", icon: tab?.icon || "" } };
+      })
+      .filter((item) => item.item.display_name?.toLowerCase().includes(searchValue.toLowerCase()))
+      .slice(0, 45);
+    return searchedItem;
+  });
+
   const [send, receive] = crossfade({
     duration: 300,
     easing: cubicInOut
   });
 
   $effect(() => {
-    if ($openTab === "storage") {
-      openStorageTab.set("0");
-    } else if ($openTab === "museum") {
-      openStorageTab.set("19");
+    if (openTab === "storage") {
+      openStorageTab = "0";
+    } else if (openTab === "museum") {
+      openStorageTab = "19";
     }
   });
 </script>
 
 <CollapsibleSection id="Inventory" {order}>
-  {#if tabs.length > 0}
-    <Tabs.Root bind:value={$openTab} class="relative mb-0 rounded-lg bg-background/30 p-5 pt-4 @container">
+  {#if allItems.length > 0}
+    <Tabs.Root bind:value={openTab} class="relative mb-0 rounded-lg bg-background/30 p-5 pt-4 @container">
       <Tabs.List>
         <ScrollArea.Root>
           <ScrollArea.Viewport class="border-b border-icon">
             <ScrollArea.Content class="!flex h-full shrink-0 flex-nowrap items-center gap-3 whitespace-nowrap px-4">
               {#each tabs as tab}
-                {@const isActive = $openTab === tab.id}
+                {@const isActive = openTab === tab.id}
                 <Tabs.Trigger value={tab.id} class="group relative flex items-center justify-center gap-0.5 pb-2 text-xs uppercase">
                   <Avatar.Root class="size-8">
                     <Avatar.Image loading="lazy" src={tab.icon} class="size-8 object-contain" />
@@ -134,42 +166,38 @@
 
       {#each tabs as tab}
         <Tabs.Content value={tab.id} asChild let:builder>
-          {#if $openTab === tab.id}
+          {#if openTab === tab.id}
             {#if tab.id === "storage" || tab.id === "museum"}
               <div use:builder.action {...builder}>
-                <Tabs.Root bind:value={$openStorageTab}>
+                <Tabs.Root bind:value={openStorageTab}>
                   <Tabs.List class="grid grid-cols-[repeat(9,minmax(1.875rem,4.875rem))] place-content-center gap-1 pt-5 @md:gap-1.5 @xl:gap-2">
                     {#each tab.items as item, index}
-                      <Tabs.Trigger let:builder asChild value={item.texture_path ? index.toString() : "undefined"}>
-                        <div use:builder.action {...builder} class="group">
-                          {#if item.texture_path}
-                            <div class="flex aspect-square items-center justify-center rounded group-data-[state=active]:bg-text/10 group-data-[state=inactive]:bg-text/[0.04]" in:fade|global={{ duration: 300, delay: 5 * (index + 1) }}>
-                              <Item piece={item} isInventory={true} showRecombobulated={false} />
-                            </div>
-                          {:else}
-                            <div class="aspect-square rounded bg-text/[0.04]" in:fade|global={{ duration: 300, delay: 5 * (index + 1) }}></div>
-                          {/if}
-                        </div>
+                      <Tabs.Trigger asChild let:builder value={item.display_name ? index.toString() : "undefined"}>
+                        {#if item.display_name}
+                          <div class="group/inventory-tab flex flex-1" in:fade|global={{ duration: 300, delay: 5 * (index + 1) }} use:builder.action {...builder}>
+                            {@render itemSnippet(item, index)}
+                          </div>
+                        {:else}
+                          {@render emptyItem(index)}
+                        {/if}
                       </Tabs.Trigger>
                     {/each}
                   </Tabs.List>
-                  {#if tab.items[Number($openStorageTab)]?.containsItems}
-                    {@const containedItems = (tab.items[Number($openStorageTab)].containsItems as ProcessedSkyBlockItem[]) || []}
+                  {#if tab.items[Number(openStorageTab)]?.containsItems}
+                    {@const containedItems = (tab.items[Number(openStorageTab)].containsItems as ProcessedSkyBlockItem[]) || []}
                     <div class="grid grid-cols-[repeat(9,minmax(1.875rem,4.875rem))] place-content-center gap-1 pt-8 @md:gap-1.5 @xl:gap-2">
                       {#each containedItems as containedItem, index}
                         {#if index > 0}
                           {#if index % 54 === 0}
-                            <hr class="col-span-full h-4 border-0" />
+                            {@render hr()}
                           {/if}
                         {/if}
-                        <Tabs.Content value={$openStorageTab.toString()}>
-                          {#key $openStorageTab}
-                            {#if containedItem.texture_path}
-                              <div class="flex aspect-square items-center justify-center rounded bg-text/[0.04]" in:fade|global={{ duration: 300, delay: 5 * (index + 1) }}>
-                                <Item piece={containedItem} isInventory={true} showRecombobulated={false} showCount={true} />
-                              </div>
+                        <Tabs.Content value={openStorageTab.toString()} asChild>
+                          {#key openStorageTab}
+                            {#if containedItem.display_name}
+                              {@render itemSnippet(containedItem, index)}
                             {:else}
-                              <div class="aspect-square rounded bg-text/[0.04]" in:fade|global={{ duration: 300, delay: 5 * (index + 1) }}></div>
+                              {@render emptyItem(index)}
                             {/if}
                           {/key}
                         </Tabs.Content>
@@ -178,24 +206,42 @@
                   {/if}
                 </Tabs.Root>
               </div>
+            {:else if tab.id === "search"}
+              <input type="search" placeholder="Search inventory" class="mx-auto mt-4 block w-1/5 rounded-lg bg-text/10 px-2 py-2 font-normal text-text placeholder:text-text/80 focus-visible:outline-none" bind:value={searchValue} />
+              {#if searchValue !== "" && searchedItems.length === 0}
+                <p class="mx-auto w-fit leading-6">No items found.</p>
+              {:else}
+                <div use:builder.action {...builder} class="grid grid-cols-[repeat(9,minmax(1.875rem,4.875rem))] place-content-center gap-1 pt-5 @md:gap-1.5 @xl:gap-2">
+                  {#each searchedItems as item, index}
+                    {#if index > 0}
+                      {#if index % 54 === 0}
+                        {@render hr()}
+                      {/if}
+                    {/if}
+                    {#if item.item}
+                      {@render itemSnippet(item.item, index, item.sourceTab)}
+                    {:else}
+                      {@render emptyItem(index)}
+                    {/if}
+                  {/each}
+                </div>
+              {/if}
             {:else}
               <div use:builder.action {...builder} class="grid grid-cols-[repeat(9,minmax(1.875rem,4.875rem))] place-content-center gap-1 pt-5 @md:gap-1.5 @xl:gap-2">
                 {#each tab.items as item, index}
                   {#if index > 0}
                     {#if index % tab.gap === 0}
-                      <hr class="col-start-1 col-end-10 h-4 border-0" />
+                      {@render hr()}
                     {/if}
                   {/if}
-                  {#if item.texture_path}
-                    <div class="flex aspect-square items-center justify-center rounded bg-text/[0.04]" in:fade|global={{ duration: 300, delay: 5 * (index + 1) }}>
-                      {#if tab.id === "inv"}
-                        <Item piece={{ ...item, rarity: item.rarity ?? "uncommon" } as ProcessedSkyBlockItem} isInventory={true} showRecombobulated={false} showCount={true} />
-                      {:else}
-                        <Item piece={item} isInventory={true} showRecombobulated={false} showCount={true} />
-                      {/if}
-                    </div>
+                  {#if item.display_name}
+                    {#if tab.id === "inv"}
+                      {@render itemSnippet({ ...item, rarity: item.rarity ?? "uncommon" } as ProcessedSkyBlockItem, index)}
+                    {:else}
+                      {@render itemSnippet(item, index)}
+                    {/if}
                   {:else}
-                    <div class="aspect-square rounded bg-text/[0.04]" in:fade|global={{ duration: 300, delay: 5 * (index + 1) }}></div>
+                    {@render emptyItem(index)}
                   {/if}
                 {/each}
               </div>
@@ -208,3 +254,15 @@
     <p class="space-x-0.5 leading-6">{profile.username} doesn't have any items.</p>
   {/if}
 </CollapsibleSection>
+
+{#snippet itemSnippet(item: ProcessedSkyBlockItem, index: number, tab?: { name: string; icon: string })}
+  <Item piece={item} isInventory={true} showRecombobulated={false} showCount={true} inTransitionConfig={{ duration: 300, delay: 5 * (index + 1) }} {tab} />
+{/snippet}
+
+{#snippet emptyItem(index: number)}
+  <div class="aspect-square rounded bg-text/[0.04]" in:fade|global={{ duration: 300, delay: 5 * (index + 1) }}></div>
+{/snippet}
+
+{#snippet hr()}
+  <hr class="col-span-full h-4 border-0" />
+{/snippet}

From afad7968b69d532e57530ced1ce01ede9d5a35ec Mon Sep 17 00:00:00 2001
From: DarthGigi <47110839+DarthGigi@users.noreply.github.com>
Date: Tue, 14 Jan 2025 20:25:23 +0100
Subject: [PATCH 2/4] feat(Item): add tab support and transition effects to
 item display

---
 src/lib/components/Item.svelte              | 34 +++++++++++++--------
 src/lib/components/item/item-content.svelte | 30 +++++++++++++-----
 2 files changed, 44 insertions(+), 20 deletions(-)

diff --git a/src/lib/components/Item.svelte b/src/lib/components/Item.svelte
index dd75f862a..82b524222 100644
--- a/src/lib/components/Item.svelte
+++ b/src/lib/components/Item.svelte
@@ -8,6 +8,7 @@
   import { Avatar, Tooltip } from "bits-ui";
   import Image from "lucide-svelte/icons/image";
   import { getContext } from "svelte";
+  import { fade, type FadeParams } from "svelte/transition";
   import Content from "./item/item-content.svelte";
 
   type Props = {
@@ -15,9 +16,13 @@
     isInventory?: boolean;
     showCount?: boolean;
     showRecombobulated?: boolean;
+    tab?: {
+      name: string;
+      icon: string;
+    };
+    inTransitionConfig?: FadeParams;
   };
-
-  let { piece, isInventory, showCount, showRecombobulated }: Props = $props();
+  let { piece, isInventory, showCount, showRecombobulated, tab, inTransitionConfig }: Props = $props();
 
   const skyblockItem = $derived(piece as ProcessedSkyBlockItem);
   const bgColor = $derived(getRarityClass(piece.rarity ?? ("common".toLowerCase() as string), "bg"));
@@ -30,15 +35,18 @@
 </script>
 
 <Tooltip.Root group="armor" disableHoverableContent={true} openDelay={0} closeDelay={0}>
-  <Tooltip.Trigger
-    class="nice-colors-dark"
-    onclick={() => {
-      if (skyblockItem.containsItems) return;
-      itemContent.set(piece);
-      showItem.set(true);
-    }}>
-    <div class={cn(`relative flex aspect-square items-center justify-center overflow-clip rounded-lg`, isInventory ? "p-0" : `p-2 ${bgColor}`, { shine: shine })}>
-      <Avatar.Root>
+  <Tooltip.Trigger asChild let:builder>
+    <button
+      class={cn(`nice-colors-dark relative flex aspect-square items-center justify-center overflow-clip`, isInventory ? "rounded bg-text/[0.04] p-0 group-data-[state=active]/inventory-tab:bg-text/10" : `rounded-lg p-2 ${bgColor}`, { shine: shine })}
+      use:builder.action
+      {...builder}
+      in:fade|global={inTransitionConfig ?? { duration: 0 }}
+      onclick={() => {
+        if (skyblockItem.containsItems) return;
+        itemContent.set(piece);
+        showItem.set(true);
+      }}>
+      <Avatar.Root class="flex items-center justify-center">
         <Avatar.Image loading="lazy" src={piece.texture_path} alt={piece.display_name} class="data-[enchanted=true]:enchanted h-auto w-14 select-none [image-rendering:pixelated]" data-enchanted={enchanted} />
         <Avatar.Fallback>
           <Image class={cn(isInventory ? "size-8 sm:size-14" : "size-14")} />
@@ -52,11 +60,11 @@
           {skyblockItem.Count}
         </div>
       {/if}
-    </div>
+    </button>
   </Tooltip.Trigger>
   {#if isHover.current}
     <Tooltip.Content class="z-50 flex max-h-[calc(96%-3rem)] max-w-lg select-text flex-col overflow-hidden rounded-lg bg-background-lore font-icomoon" transition={flyAndScale} transitionConfig={{ x: -8, duration: 150 }} sideOffset={8} side="right" align="center">
-      <Content {piece} {isInventory} {showCount} {showRecombobulated} />
+      <Content {piece} {tab} />
     </Tooltip.Content>
   {/if}
 </Tooltip.Root>
diff --git a/src/lib/components/item/item-content.svelte b/src/lib/components/item/item-content.svelte
index 06234b539..a7ebc4b11 100644
--- a/src/lib/components/item/item-content.svelte
+++ b/src/lib/components/item/item-content.svelte
@@ -9,13 +9,13 @@
 
   type Props = {
     piece: ProcessedSkyBlockItem | ProcessedSkyblockPet;
-    isInventory?: boolean;
-    showCount?: boolean;
-    showRecombobulated?: boolean;
     isDrawer?: boolean;
+    tab?: {
+      name: string;
+      icon: string;
+    };
   };
-
-  let { piece, isDrawer }: Props = $props();
+  let { piece, isDrawer, tab }: Props = $props();
 
   const skyblockItem = $derived(piece as ProcessedSkyBlockItem);
   const itemName = $derived(skyblockItem.display_name ?? "???");
@@ -33,7 +33,6 @@
       <Image class="size-8" />
     </Avatar.Fallback>
   </Avatar.Root>
-
   <p class="relative text-wrap text-center text-base font-semibold uppercase data-[multicolor=true]:rounded-full data-[multicolor=true]:bg-background-lore data-[multicolor=true]:px-2 data-[multicolor=true]:py-1 data-[multicolor=false]:text-text sm:text-lg" data-multicolor={isMulticolor}>
     {@html isMulticolor ? itemNameHtml : removeFormatting(itemNameHtml)}
   </p>
@@ -60,8 +59,25 @@
       </div>
     {/if}
 
+    {#if typeof tab === "object" && tab.icon}
+      <div class="mt-4">
+        <div class="flex items-center justify-between gap-4 rounded-[0.625rem] bg-text/[0.05] p-2 transition-colors hover:bg-text/[0.08]">
+          <div class="flex items-center gap-2">
+            <Avatar.Root class="shrink-0 select-none">
+              <Avatar.Image loading="lazy" src={tab.icon} alt={tab.name} class="pointer-events-none aspect-square size-10 h-full select-none rounded-lg" />
+              <Avatar.Fallback class="flex size-10 items-center justify-center rounded-lg bg-icon/90 text-center font-semibold uppercase">
+                {tab.name.slice(0, 2)}
+              </Avatar.Fallback>
+            </Avatar.Root>
+            <div class="font-semibold text-link">
+              You can find this item in the <span class="capitalize">{tab.name}</span> tab
+            </div>
+          </div>
+        </div>
+      </div>
+    {/if}
     {#if packData}
-      <div class="pt-4">
+      <div class="mt-4">
         <Button.Root href={packData.link} target="_blank">
           <div class="flex items-center justify-between gap-4 rounded-[0.625rem] bg-text/[0.05] p-2 transition-colors hover:bg-text/[0.08]">
             <div class="flex items-center gap-2">

From d9ad4a99948d14c1d8da96e921aacba84f448b1d Mon Sep 17 00:00:00 2001
From: DarthGigi <47110839+DarthGigi@users.noreply.github.com>
Date: Sun, 2 Feb 2025 17:59:51 +0100
Subject: [PATCH 3/4] fix: shine animation

---
 src/app.css | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/src/app.css b/src/app.css
index 9548f017a..7af781256 100644
--- a/src/app.css
+++ b/src/app.css
@@ -214,11 +214,7 @@
 }
 
 @utility shine {
-  @apply overflow-hidden;
-
-  &::before {
-    @apply animate-shine absolute inset-0 z-8 -translate-y-full transform bg-linear-to-t from-[oklch(1_0_0_/_0)] via-[oklch(1_0_0_/_0.50)] to-[oklch(0.77_0.09_243.21_/_0)] content-[''];
-  }
+  @apply before:animate-shine overflow-hidden before:absolute before:inset-0 before:z-8 before:bg-linear-to-t before:from-[oklch(1_0_0_/_0)] before:via-[oklch(1_0_0_/_0.50)] before:to-[oklch(0.77_0.09_243.21_/_0)];
 }
 
 @utility enchanted {

From e7e51a82ab759cff732d4fb169965e05ffa1f2e0 Mon Sep 17 00:00:00 2001
From: DarthGigi <47110839+DarthGigi@users.noreply.github.com>
Date: Sun, 2 Feb 2025 18:15:24 +0100
Subject: [PATCH 4/4] feat: add search functionality to inventory section

---
 src/lib/sections/stats/Inventory.svelte | 165 +++++++++++++++---------
 1 file changed, 102 insertions(+), 63 deletions(-)

diff --git a/src/lib/sections/stats/Inventory.svelte b/src/lib/sections/stats/Inventory.svelte
index 62e59e98d..f95c77195 100644
--- a/src/lib/sections/stats/Inventory.svelte
+++ b/src/lib/sections/stats/Inventory.svelte
@@ -17,6 +17,7 @@
 
   let { order }: { order: number } = $props();
   let openTab = $state<string>("inv");
+  let searchValue = $state<string>("");
 
   const ctx = getProfileCtx();
   const profile = $derived(ctx.profile);
@@ -33,7 +34,7 @@
   const quiver = $derived(profile.items.quiver);
   const museum = $derived(profile.items.museum);
 
-  const tabs = $derived(
+  const tabs = $derived<Tabs[]>(
     [
       {
         id: "inv",
@@ -100,6 +101,12 @@
         icon: "/api/head/a6cc486c2be1cb9dfcb2e53dd9a3e9a883bfadb27cb956f1896d602b4067",
         items: rift_enderchest,
         gap: 45
+      },
+      {
+        id: "search",
+        icon: "/api/item/EYE_OF_ENDER",
+        items: [],
+        gap: 45
       }
     ].filter((tab) => tab.id === "search" || tab.items.length > 0)
   );
@@ -164,69 +171,11 @@
       {#each tabs as tab}
         <Tabs.Content value={tab.id}>
           {#if tab.id === "storage" || tab.id === "museum"}
-            <Tabs.Root value={tab.id}>
-              <Tabs.List class="grid grid-cols-[repeat(9,minmax(1.875rem,4.875rem))] place-content-center gap-1 pt-5 @md:gap-1.5 @xl:gap-2">
-                {#each tab.items as item, index}
-                  <Tabs.Trigger let:builder asChild value={item.texture_path ? index.toString() : "undefined"}>
-                    <div use:builder.action {...builder} class="group">
-                      {#if item.texture_path}
-                        <div class="group-data-[state=active]:bg-text/10 group-data-[state=inactive]:bg-text/[0.04] flex aspect-square items-center justify-center rounded-sm">
-                          <Item piece={item} isInventory={true} showRecombobulated={false} />
-                        </div>
-                      {:else}
-                        {@render emptyItem()}
-                      {/if}
-                    </div>
-                  </Tabs.Trigger>
-                {/each}
-              </Tabs.List>
-
-              {#each tab.items as item, index}
-                <Tabs.Content value={index.toString()}>
-                  <div class="grid grid-cols-[repeat(9,minmax(1.875rem,4.875rem))] place-content-center gap-1 pt-5 @md:gap-1.5 @xl:gap-2">
-                    {#if item?.containsItems}
-                      {#each item.containsItems as containedItem, index2}
-                        {#if index2 > 0}
-                          {#if index2 % 54 === 0}
-                            {@render gap()}
-                          {/if}
-                        {/if}
-                        <Tabs.Content value={index.toString()}>
-                          {#if containedItem.texture_path}
-                            <div class="bg-text/[0.04] flex aspect-square items-center justify-center rounded-sm">
-                              <Item piece={containedItem} isInventory={true} showRecombobulated={false} showCount={true} />
-                            </div>
-                          {:else}
-                            {@render emptyItem()}
-                          {/if}
-                        </Tabs.Content>
-                      {/each}
-                    {/if}
-                  </div>
-                </Tabs.Content>
-              {/each}
-            </Tabs.Root>
+            {@render multipleInventorySection(tab)}
+          {:else if tab.id == "search"}
+            {@render searchSection()}
           {:else}
-            <div class="grid grid-cols-[repeat(9,minmax(1.875rem,4.875rem))] place-content-center gap-1 pt-5 @md:gap-1.5 @xl:gap-2">
-              {#each tab.items as item, index}
-                {#if index > 0}
-                  {#if index % tab.gap === 0}
-                    {@render gap()}
-                  {/if}
-                {/if}
-                {#if item.texture_path}
-                  <div class="bg-text/[0.04] flex aspect-square items-center justify-center rounded-sm">
-                    {#if tab.id === "inv"}
-                      <Item piece={{ ...item, rarity: item.rarity ?? "uncommon" } as ProcessedSkyBlockItem} isInventory={true} showRecombobulated={false} showCount={true} />
-                    {:else}
-                      <Item piece={item} isInventory={true} showRecombobulated={false} showCount={true} />
-                    {/if}
-                  </div>
-                {:else}
-                  {@render emptyItem()}
-                {/if}
-              {/each}
-            </div>
+            {@render inventorySection(tab)}
           {/if}
         </Tabs.Content>
       {/each}
@@ -236,6 +185,10 @@
   {/if}
 </CollapsibleSection>
 
+{#snippet itemSnippet(item: ProcessedSkyBlockItem, index: number, tab?: { name: string; icon: string })}
+  <Item piece={item} isInventory={true} showRecombobulated={false} showCount={true} inTransitionConfig={{ duration: 300, delay: 5 * (index + 1) }} {tab} />
+{/snippet}
+
 {#snippet emptyItem()}
   <div class="bg-text/[0.04] aspect-square rounded-sm"></div>
 {/snippet}
@@ -243,3 +196,89 @@
 {#snippet gap()}
   <hr class="col-span-full h-4 border-0" />
 {/snippet}
+
+{#snippet searchSection()}
+  <input type="search" placeholder="Search inventory" class="bg-text/10 text-text placeholder:text-text/80 mx-auto mt-4 block w-1/5 rounded-lg px-2 py-2 font-normal focus-visible:outline-none" bind:value={searchValue} />
+  {#if searchValue !== "" && searchedItems.length === 0}
+    <p class="mx-auto w-fit leading-6">No items found.</p>
+  {:else if searchValue !== ""}
+    <div class="grid grid-cols-[repeat(9,minmax(1.875rem,4.875rem))] place-content-center gap-1 pt-5 @md:gap-1.5 @xl:gap-2">
+      {#each searchedItems as item, index}
+        {#if item.item}
+          <div class="bg-text/[0.04] flex aspect-square items-center justify-center rounded-sm">
+            {@render itemSnippet(item.item, index, item.sourceTab)}
+          </div>
+        {:else}
+          {@render emptyItem()}
+        {/if}
+      {/each}
+    </div>
+  {/if}
+{/snippet}
+
+{#snippet multipleInventorySection(tab: Tabs)}
+  <Tabs.Root value={tab.id}>
+    <Tabs.List class="grid grid-cols-[repeat(9,minmax(1.875rem,4.875rem))] place-content-center gap-1 pt-5 @md:gap-1.5 @xl:gap-2">
+      {#each tab.items as item, index}
+        <Tabs.Trigger let:builder asChild value={item.texture_path ? index.toString() : "undefined"}>
+          <div use:builder.action {...builder} class="group">
+            {#if item.texture_path}
+              <div class="group-data-[state=active]:bg-text/10 group-data-[state=inactive]:bg-text/[0.04] flex aspect-square items-center justify-center rounded-sm">
+                {@render itemSnippet(item, index)}
+              </div>
+            {:else}
+              {@render emptyItem()}
+            {/if}
+          </div>
+        </Tabs.Trigger>
+      {/each}
+    </Tabs.List>
+    {#each tab.items as item, index}
+      <Tabs.Content value={index.toString()}>
+        <div class="grid grid-cols-[repeat(9,minmax(1.875rem,4.875rem))] place-content-center gap-1 pt-5 @md:gap-1.5 @xl:gap-2">
+          {#if item?.containsItems}
+            {#each item.containsItems as containedItem, index2}
+              {#if index2 > 0}
+                {#if index2 % 54 === 0}
+                  {@render gap()}
+                {/if}
+              {/if}
+              <Tabs.Content value={index.toString()}>
+                {#if containedItem.texture_path}
+                  <div class="bg-text/[0.04] flex aspect-square items-center justify-center rounded-sm">
+                    {@render itemSnippet(containedItem, index2)}
+                  </div>
+                {:else}
+                  {@render emptyItem()}
+                {/if}
+              </Tabs.Content>
+            {/each}
+          {/if}
+        </div>
+      </Tabs.Content>
+    {/each}
+  </Tabs.Root>
+{/snippet}
+
+{#snippet inventorySection(tab: Tabs)}
+  <div class="grid grid-cols-[repeat(9,minmax(1.875rem,4.875rem))] place-content-center gap-1 pt-5 @md:gap-1.5 @xl:gap-2">
+    {#each tab.items as item, index}
+      {#if index > 0}
+        {#if index % tab.gap === 0}
+          {@render gap()}
+        {/if}
+      {/if}
+      {#if item.texture_path}
+        <div class="bg-text/[0.04] flex aspect-square items-center justify-center rounded-sm">
+          {#if tab.id === "inv"}
+            {@render itemSnippet({ ...item, rarity: item.rarity ?? "uncommon" } as ProcessedSkyBlockItem, index)}
+          {:else}
+            {@render itemSnippet(item, index)}
+          {/if}
+        </div>
+      {:else}
+        {@render emptyItem()}
+      {/if}
+    {/each}
+  </div>
+{/snippet}