From 3ec774fa4c376f8f4d9b6530febf61e9d4bfba3a Mon Sep 17 00:00:00 2001
From: DarthGigi <47110839+DarthGigi@users.noreply.github.com>
Date: Wed, 8 Jan 2025 21:11:00 +0100
Subject: [PATCH 1/9] chore: add lazy loading to avatar images for improved
 performance

---
 src/lib/components/Item.svelte            | 4 ++--
 src/lib/components/Wardrobe.svelte        | 2 +-
 src/lib/components/header/Header.svelte   | 2 +-
 src/lib/components/header/Settings.svelte | 4 ++--
 src/lib/sections/stats/Minions.svelte     | 2 +-
 src/routes/+page.svelte                   | 4 ++--
 6 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/lib/components/Item.svelte b/src/lib/components/Item.svelte
index 22a2e444..b7ebd252 100644
--- a/src/lib/components/Item.svelte
+++ b/src/lib/components/Item.svelte
@@ -123,7 +123,7 @@
               <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 src="/resourcepacks/{packData.folder}/pack.png" alt={packData.name} class="pointer-events-none aspect-square size-10 h-full select-none rounded-lg" />
+                    <Avatar.Image loading="lazy" src="/resourcepacks/{packData.folder}/pack.png" alt={packData.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">
                       {packData.name.slice(0, 2)}
                     </Avatar.Fallback>
@@ -192,7 +192,7 @@
                 <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 src="/resourcepacks/{packData.folder}/pack.png" alt={packData.name} class="pointer-events-none aspect-square size-10 h-full select-none rounded-lg" />
+                      <Avatar.Image loading="lazy" src="/resourcepacks/{packData.folder}/pack.png" alt={packData.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">
                         {packData.name.slice(0, 2)}
                       </Avatar.Fallback>
diff --git a/src/lib/components/Wardrobe.svelte b/src/lib/components/Wardrobe.svelte
index f14fa56d..8763acb7 100644
--- a/src/lib/components/Wardrobe.svelte
+++ b/src/lib/components/Wardrobe.svelte
@@ -14,7 +14,7 @@
       <Item {piece} />
     {:else}
       <Avatar.Root class="rounded-lg bg-background-lore p-2">
-        <Avatar.Image class="size-14" loading="eager" src={`/img/textures/item/empty_armor_slot_${pieces[index]}.png`} />
+        <Avatar.Image loading="lazy" class="size-14" src={`/img/textures/item/empty_armor_slot_${pieces[index]}.png`} />
       </Avatar.Root>
     {/if}
   {/each}
diff --git a/src/lib/components/header/Header.svelte b/src/lib/components/header/Header.svelte
index da46992e..16cb1835 100644
--- a/src/lib/components/header/Header.svelte
+++ b/src/lib/components/header/Header.svelte
@@ -24,7 +24,7 @@
     <div class="flex gap-2">
       <Button.Root href="/" class="flex items-center justify-center gap-2 font-bold">
         <Avatar.Root class="size-6 shrink-0 select-none rounded-lg">
-          <Avatar.Image src="/img/app-icons/svg.svg" alt="SkyCrypt" class="pointer-events-none h-6 select-none" />
+          <Avatar.Image loading="lazy" src="/img/app-icons/svg.svg" alt="SkyCrypt" class="pointer-events-none h-6 select-none" />
           <Avatar.Fallback class="flex h-full items-center justify-center text-lg font-semibold uppercase text-text/60">SC</Avatar.Fallback>
         </Avatar.Root>
         SkyCrypt
diff --git a/src/lib/components/header/Settings.svelte b/src/lib/components/header/Settings.svelte
index 5c054660..79c02503 100644
--- a/src/lib/components/header/Settings.svelte
+++ b/src/lib/components/header/Settings.svelte
@@ -66,7 +66,7 @@
         <Label.Root for={pack.id} class="flex items-center justify-between gap-4 rounded-lg bg-text/[0.05] p-2">
           <div class="flex items-center gap-2">
             <Avatar.Root class="shrink-0 select-none">
-              <Avatar.Image src="/resourcepacks/{pack.folder}/pack.png" alt={pack.name} class="pointer-events-none aspect-square size-10 h-full select-none rounded-lg" />
+              <Avatar.Image loading="lazy" src="/resourcepacks/{pack.folder}/pack.png" alt={pack.name} class="pointer-events-none aspect-square size-10 h-full select-none rounded-lg" />
               <Avatar.Fallback class="flex items-center rounded-lg text-center font-semibold uppercase">{pack.name.slice(0, 2)}</Avatar.Fallback>
             </Avatar.Root>
             <div class="flex flex-col">
@@ -99,7 +99,7 @@
           <Label.Root for={theme.id} class="flex items-center justify-between gap-4 rounded-lg bg-text/[0.05] p-2">
             <div class="flex items-center gap-2">
               <Avatar.Root class="shrink-0 select-none">
-                <Avatar.Image src={`/api/themes/${btoa(theme["colors"]!.logo)}${theme.light ? "/true" : ""}/logo.svg`} alt={theme.name} class="pointer-events-none aspect-square size-10 h-full select-none rounded-lg">testing</Avatar.Image>
+                <Avatar.Image loading="lazy" src={`/api/themes/${btoa(theme["colors"]!.logo)}${theme.light ? "/true" : ""}/logo.svg`} alt={theme.name} class="pointer-events-none aspect-square size-10 h-full select-none rounded-lg"></Avatar.Image>
                 <Avatar.Fallback class="flex items-center rounded-lg text-center font-semibold uppercase">{theme.name.slice(0, 2)}</Avatar.Fallback>
               </Avatar.Root>
               <div class="flex flex-col">
diff --git a/src/lib/sections/stats/Minions.svelte b/src/lib/sections/stats/Minions.svelte
index 12c372dd..8a58ff59 100644
--- a/src/lib/sections/stats/Minions.svelte
+++ b/src/lib/sections/stats/Minions.svelte
@@ -27,7 +27,7 @@
 
   <Button.Root href="https://minionah.com" target="_blank" class="flex h-fit w-fit max-w-fit items-center gap-2 rounded-lg bg-background/30 p-2 transition-all duration-300 hover:scale-105">
     <Avatar.Root class="size-12 shrink-0">
-      <Avatar.Image src="/img/icons/minionah.png" alt="MinionAH" class="aspect-square size-12" />
+      <Avatar.Image loading="lazy" src="/img/icons/minionah.png" alt="MinionAH" class="aspect-square size-12" />
       <Avatar.Fallback class="flex size-12 items-center justify-center rounded-lg bg-background/10 font-semibold">MA</Avatar.Fallback>
     </Avatar.Root>
     <div>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index b9d050bc..3da7853e 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -61,7 +61,7 @@
 
   <Button.Root href="https://www.patreon.com/shiiyu" target="_blank" rel="noreferrer" class="flex items-center gap-4 rounded-lg p-4 backdrop-blur-lg backdrop-brightness-150 backdrop-contrast-[60%] transition-all duration-300 hover:scale-[1.05] dark:backdrop-brightness-50 dark:backdrop-contrast-100">
     <Avatar.Root class="size-12 shrink-0 select-none rounded-lg">
-      <Avatar.Image src="/img/icons/patreon.svg" alt="Patreon logo" class="pointer-events-none size-12 rounded-lg" />
+      <Avatar.Image loading="lazy" src="/img/icons/patreon.svg" alt="Patreon logo" class="pointer-events-none size-12 rounded-lg" />
       <Avatar.Fallback class="flex h-full items-center justify-center text-lg font-semibold uppercase text-text/60">PA</Avatar.Fallback>
     </Avatar.Root>
     <div>
@@ -101,7 +101,7 @@
   <div class={cn("relative rounded-lg", { "transition-all duration-300 hover:scale-105": !options?.tip })}>
     <Button.Root href={options?.tip ? "#" : `/stats/${user.id}`} class="relative flex min-w-0 items-center gap-4 rounded-lg p-5 backdrop-blur-lg backdrop-brightness-150 backdrop-contrast-[60%] dark:backdrop-brightness-50 dark:backdrop-contrast-100">
       <Avatar.Root class="size-16 shrink-0 rounded-lg bg-text/10">
-        <Avatar.Image src={options?.tip ? "https://mc-heads.net/avatar/bc8ea1f51f253ff5142ca11ae45193a4ad8c3ab5e9c6eec8ba7a4fcb7bac40/64" : `https://crafatar.com/avatars/${user.id}?size=64&overlay`} alt={user.name} class="aspect-square size-16 rounded-lg " />
+        <Avatar.Image loading="lazy" src={options?.tip ? "https://mc-heads.net/avatar/bc8ea1f51f253ff5142ca11ae45193a4ad8c3ab5e9c6eec8ba7a4fcb7bac40/64" : `https://crafatar.com/avatars/${user.id}?size=64&overlay`} alt={user.name} class="aspect-square size-16 rounded-lg " />
         <Avatar.Fallback class="flex h-full items-center justify-center text-lg font-semibold uppercase text-text/60">
           {user.name.slice(0, 2)}
         </Avatar.Fallback>

From 20480269861dc1edfd0647124f61f30dc59d016d Mon Sep 17 00:00:00 2001
From: DarthGigi <47110839+DarthGigi@users.noreply.github.com>
Date: Wed, 8 Jan 2025 22:36:38 +0100
Subject: [PATCH 2/9] refactor(item): put the item content in a snippet so it's
 consistent, add image-rendering:pixelated to fix blurry icons

---
 src/lib/components/Item.svelte | 254 +++++++++++----------------------
 1 file changed, 85 insertions(+), 169 deletions(-)

diff --git a/src/lib/components/Item.svelte b/src/lib/components/Item.svelte
index b7ebd252..01d5077b 100644
--- a/src/lib/components/Item.svelte
+++ b/src/lib/components/Item.svelte
@@ -47,12 +47,77 @@
   });
 </script>
 
-{#snippet item()}
+{#snippet itemContents(isDrawer: boolean = false)}
+  <div class={cn(`nice-colors-dark flex flex-nowrap items-center justify-center gap-4 p-5`, { "rounded-t-[10px]": isDrawer }, bgColor)}>
+    <Avatar.Root class="shrink-0 px-2">
+      <Avatar.Image loading="lazy" src={$page.url.origin + piece.texture_path} alt={piece.display_name} class="data-[enchanted=true]:enchanted h-auto w-8 flex-none shrink-0 overflow-hidden [image-rendering:pixelated]" data-enchanted={enchanted} />
+      <Avatar.Fallback>
+        <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>
+  </div>
+  <div class="w-full overflow-auto">
+    <div class="w-full p-6 font-semibold leading-snug">
+      {#each skyblockItem.lore as lore}
+        {@html renderLore(lore)}
+      {/each}
+      {#if skyblockItem.containsItems && skyblockItem.containsItems.length > 0}
+        <div class="mt-4 border-t border-text/10 pt-4">
+          <div class="grid grid-cols-9 gap-1">
+            {#each skyblockItem.containsItems.slice(0, Math.min(skyblockItem.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}
+
+      {#if packData}
+        <div class="pt-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">
+                <Avatar.Root class="shrink-0 select-none">
+                  <Avatar.Image loading="lazy" src="/resourcepacks/{packData.folder}/pack.png" alt={packData.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">
+                    {packData.name.slice(0, 2)}
+                  </Avatar.Fallback>
+                </Avatar.Root>
+                <div class="flex flex-col">
+                  <div class="font-semibold text-link">
+                    <span class="underline">
+                      {packData.name}
+                    </span>
+                    <span class="text-sm text-text/60">{packData.version}</span>
+                  </div>
+                  <div class="text-sm text-text/60">
+                    by <span class="text-text/80">{packData.author}</span>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </Button.Root>
+        </div>
+      {/if}
+    </div>
+  </div>
+{/snippet}
+
+{#snippet itemIcon()}
   <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>
-      <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={$page.url.origin + piece.texture_path + "asdjasdj"} 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="size-14" />
+        <Image class={cn(isInventory ? "size-8 sm:size-14" : "size-14")} />
       </Avatar.Fallback>
     </Avatar.Root>
     {#if recombobulated}
@@ -67,184 +132,25 @@
 {/snippet}
 
 {#snippet tooltip()}
-  <Tooltip.Root group="armor" openDelay={0} closeDelay={0}>
-    <Tooltip.Trigger class={cn(`nice-colors-dark relative flex aspect-square items-center justify-center overflow-clip rounded-lg`, isInventory ? "p-0" : `p-2 ${bgColor}`, { shine: enchanted })} onclick={() => showDialog.set(!$showDialog)}>
-      <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-14" />
-        </Avatar.Fallback>
-      </Avatar.Root>
-      {#if recombobulated}
-        <div class="absolute -right-3 -top-3 z-10 size-6 rotate-45 bg-[--color]" style="--color: var(--§{RARITY_COLORS[RARITIES[RARITIES.indexOf(piece.rarity ?? 'common') - 1]]})"></div>
-      {/if}
-      {#if showNumbers}
-        <div class="absolute bottom-0.5 right-0.5 text-sm font-semibold text-white text-shadow-[.1em_.1em_.1em_#000] sm:text-2xl">
-          {skyblockItem.Count ?? 1}
-        </div>
-      {/if}
+  <Tooltip.Root group="armor" openDelay={0} closeDelay={999999}>
+    <Tooltip.Trigger class="nice-colors-dark" onclick={() => showDialog.set(!$showDialog)}>
+      {@render itemIcon()}
     </Tooltip.Trigger>
-    <Tooltip.Content class="pointer-events-none z-50 flex max-h-[calc(96%-3rem)] w-max min-w-96 max-w-[calc(100vw-2.5rem)] 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">
-      <div class={cn(`nice-colors-dark flex flex-nowrap items-center justify-center gap-4 p-5`, bgColor)}>
-        <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-8 flex-none overflow-hidden" data-enchanted={enchanted} />
-          <Avatar.Fallback>
-            <Image class="size-8" />
-          </Avatar.Fallback>
-        </Avatar.Root>
-
-        <p class="relative flex-1 text-center text-lg 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" data-multicolor={isMulticolor}>
-          {@html isMulticolor ? itemNameHtml : removeFormatting(itemNameHtml)}
-        </p>
-      </div>
-      <div class="mx-auto w-full max-w-md overflow-auto p-6 font-semibold leading-snug">
-        {#each skyblockItem.lore as lore}
-          {@html renderLore(lore)}
-        {/each}
-        {#if skyblockItem.containsItems && skyblockItem.containsItems.length > 0}
-          <div class="mt-4 border-t border-text/10 pt-4">
-            <div class="grid grid-cols-9 gap-1">
-              {#each skyblockItem.containsItems.slice(0, Math.min(skyblockItem.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}
-
-        {#if packData}
-          <div class="pt-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">
-                  <Avatar.Root class="shrink-0 select-none">
-                    <Avatar.Image loading="lazy" src="/resourcepacks/{packData.folder}/pack.png" alt={packData.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">
-                      {packData.name.slice(0, 2)}
-                    </Avatar.Fallback>
-                  </Avatar.Root>
-                  <div class="flex flex-col">
-                    <div class="font-semibold text-link">
-                      <span class="underline">
-                        {packData.name}
-                      </span>
-                      <span class="text-sm text-text/60">{packData.version}</span>
-                    </div>
-                    <div class="text-sm text-text/60">
-                      by <span class="text-text/80">{packData.author}</span>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </Button.Root>
-          </div>
-        {/if}
-      </div>
+    <Tooltip.Content class="pointer-events-none z-50 flex max-h-[calc(96%-3rem)] max-w-[calc(100vw-2.5rem)] 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">
+      {@render itemContents()}
     </Tooltip.Content>
   </Tooltip.Root>
 {/snippet}
 
-{#if isHover.current && $showDialog}
-  <Dialog.Root bind:open={$showDialogDelayed}>
-    <Dialog.Portal>
-      <Dialog.Overlay transition={fade} transitionConfig={{ duration: 150 }} class="fixed inset-0 z-40 bg-black/80" />
-      <Dialog.Content class="fixed left-[50%] top-[50%] z-50 flex max-h-[calc(96%-3rem)] w-max min-w-96 max-w-[calc(100vw-2.5rem)] -translate-x-1/2 -translate-y-1/2 select-text flex-col overflow-hidden rounded-lg bg-background-lore font-icomoon" transition={flyAndScale} transitionConfig={{ x: -8, duration: 150 }}>
-        <div class={cn(`nice-colors-dark flex flex-nowrap items-center justify-center gap-4 p-5`, bgColor)}>
-          <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-8 flex-none overflow-hidden" data-enchanted={enchanted} />
-            <Avatar.Fallback>
-              <Image class="size-8" />
-            </Avatar.Fallback>
-          </Avatar.Root>
-
-          <p class="relative flex-1 text-center text-lg 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" data-multicolor={isMulticolor}>
-            {@html isMulticolor ? itemNameHtml : removeFormatting(itemNameHtml)}
-          </p>
-        </div>
-        <div class="mx-auto w-full max-w-md overflow-auto p-6 font-semibold leading-snug">
-          {#each skyblockItem.lore as lore}
-            {@html renderLore(lore)}
-          {/each}
-          {#if skyblockItem.containsItems && skyblockItem.containsItems.length > 0}
-            <div class="mt-4 border-t border-text/10 pt-4">
-              <div class="grid grid-cols-9 gap-1">
-                {#each skyblockItem.containsItems.slice(0, Math.min(skyblockItem.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}
-
-          {#if packData}
-            <div class="pt-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">
-                    <Avatar.Root class="shrink-0 select-none">
-                      <Avatar.Image loading="lazy" src="/resourcepacks/{packData.folder}/pack.png" alt={packData.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">
-                        {packData.name.slice(0, 2)}
-                      </Avatar.Fallback>
-                    </Avatar.Root>
-                    <div class="flex flex-col">
-                      <div class="font-semibold text-link">
-                        <span class="underline">
-                          {packData.name}
-                        </span>
-                        <span class="text-sm text-text/60">{packData.version}</span>
-                      </div>
-                      <div class="text-sm text-text/60">
-                        by <span class="text-text/80">{packData.author}</span>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </Button.Root>
-            </div>
-          {/if}
-        </div>
-      </Dialog.Content>
-    </Dialog.Portal>
-  </Dialog.Root>
-{/if}
-
 {#snippet drawer()}
   <Drawer.Root shouldScaleBackground={true} setBackgroundColorOnScale={false}>
     <Drawer.Trigger class="nice-colors-dark">
-      {@render item()}
+      {@render itemIcon()}
     </Drawer.Trigger>
     <Drawer.Portal>
       <Drawer.Overlay class="fixed inset-0 z-40 bg-black/80" />
       <Drawer.Content class="fixed bottom-0 left-0 right-0 z-50 flex max-h-[96%] flex-col rounded-t-[10px] bg-background-lore">
-        <div class={cn(`nice-colors-dark flex flex-nowrap items-center justify-center gap-4 rounded-t-[10px] p-5`, bgColor)}>
-          <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-8 flex-none overflow-hidden" data-enchanted={enchanted} />
-            <Avatar.Fallback>
-              <Image class="size-8" />
-            </Avatar.Fallback>
-          </Avatar.Root>
-
-          <p class="relative flex-1 text-center text-lg 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" data-multicolor={isMulticolor}>
-            {@html isMulticolor ? itemNameHtml : removeFormatting(itemNameHtml)}
-          </p>
-        </div>
-
-        <div class="mx-auto w-full max-w-md overflow-auto p-6 font-semibold leading-snug">
-          {#each skyblockItem.lore as lore}
-            {@html renderLore(lore)}
-          {/each}
-        </div>
+        {@render itemContents(true)}
       </Drawer.Content>
     </Drawer.Portal>
   </Drawer.Root>
@@ -252,6 +158,16 @@
 
 {#if isHover.current}
   {@render tooltip()}
+  {#if $showDialog}
+    <Dialog.Root bind:open={$showDialogDelayed}>
+      <Dialog.Portal>
+        <Dialog.Overlay transition={fade} transitionConfig={{ duration: 150 }} class="fixed inset-0 z-40 bg-black/80" />
+        <Dialog.Content class="fixed left-[50%] top-[50%] z-50 flex max-h-[calc(96%-3rem)] max-w-[calc(100vw-2.5rem)] -translate-x-1/2 -translate-y-1/2 select-text flex-col overflow-hidden rounded-lg bg-background-lore font-icomoon" transition={flyAndScale} transitionConfig={{ x: -8, duration: 150 }}>
+          {@render itemContents()}
+        </Dialog.Content>
+      </Dialog.Portal>
+    </Dialog.Root>
+  {/if}
 {:else}
   {@render drawer()}
 {/if}

From 2988bac45c112a78e81baf3cf864237fe1acea97 Mon Sep 17 00:00:00 2001
From: DarthGigi <47110839+DarthGigi@users.noreply.github.com>
Date: Wed, 8 Jan 2025 22:36:51 +0100
Subject: [PATCH 3/9] fix(tooltip): fix tooltip styling by removing max-width
 constraint

---
 src/app.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app.css b/src/app.css
index 10e72c10..1fdfce87 100644
--- a/src/app.css
+++ b/src/app.css
@@ -212,7 +212,7 @@
   }
 
   [data-tooltip-content] {
-    @apply max-w-[min(20rem,100vw-2.5rem)] text-pretty text-sm;
+    @apply text-pretty text-sm;
   }
 }
 

From c8bf6cd0853785ee3b57ddfe955a81e24ecd328c Mon Sep 17 00:00:00 2001
From: DarthGigi <47110839+DarthGigi@users.noreply.github.com>
Date: Wed, 8 Jan 2025 22:37:23 +0100
Subject: [PATCH 4/9] refactor(wardrobe): replace Avatar component with a div
 for improved styling

---
 src/lib/components/Wardrobe.svelte | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/src/lib/components/Wardrobe.svelte b/src/lib/components/Wardrobe.svelte
index 8763acb7..5ac8e4c2 100644
--- a/src/lib/components/Wardrobe.svelte
+++ b/src/lib/components/Wardrobe.svelte
@@ -1,7 +1,6 @@
 <script lang="ts">
   import Item from "$lib/components/Item.svelte";
   import type { ProcessedSkyBlockItem } from "$types/stats";
-  import { Avatar } from "bits-ui";
 
   let { wardrobeItems }: { wardrobeItems: ProcessedSkyBlockItem[] } = $props();
 
@@ -13,9 +12,9 @@
     {#if piece && piece.display_name}
       <Item {piece} />
     {:else}
-      <Avatar.Root class="rounded-lg bg-background-lore p-2">
-        <Avatar.Image loading="lazy" class="size-14" src={`/img/textures/item/empty_armor_slot_${pieces[index]}.png`} />
-      </Avatar.Root>
+      <div class="rounded-lg bg-background/30 p-2">
+        <div class="size-14 bg-text/80 [-webkit-mask-image:--image] [-webkit-mask-position:center_center] [-webkit-mask-repeat:no-repeat] [-webkit-mask-size:3.5rem] [image-rendering:pixelated] [mask-image:--image]" style="--image: url('/img/textures/item/empty_armor_slot_{pieces[index]}.png')"></div>
+      </div>
     {/if}
   {/each}
 </div>

From 38abc2e5aef1d51045c1568cce83335ed5965bea Mon Sep 17 00:00:00 2001
From: DarthGigi <47110839+DarthGigi@users.noreply.github.com>
Date: Wed, 8 Jan 2025 22:38:42 +0100
Subject: [PATCH 5/9] fix(item): remove debug string from Avatar image source

---
 src/lib/components/Item.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/lib/components/Item.svelte b/src/lib/components/Item.svelte
index 01d5077b..68cc4666 100644
--- a/src/lib/components/Item.svelte
+++ b/src/lib/components/Item.svelte
@@ -115,7 +115,7 @@
 {#snippet itemIcon()}
   <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>
-      <Avatar.Image loading="lazy" src={$page.url.origin + piece.texture_path + "asdjasdj"} alt={piece.display_name} class="data-[enchanted=true]:enchanted h-auto w-14 select-none [image-rendering:pixelated]" data-enchanted={enchanted} />
+      <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 [image-rendering:pixelated]" data-enchanted={enchanted} />
       <Avatar.Fallback>
         <Image class={cn(isInventory ? "size-8 sm:size-14" : "size-14")} />
       </Avatar.Fallback>

From 7414389905c9587e977fb44f55601ddd3f66480a Mon Sep 17 00:00:00 2001
From: DarthGigi <47110839+DarthGigi@users.noreply.github.com>
Date: Wed, 8 Jan 2025 22:40:44 +0100
Subject: [PATCH 6/9] fix(tooltip): set closeDelay to 0 for immediate tooltip
 closure

---
 src/lib/components/Item.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/lib/components/Item.svelte b/src/lib/components/Item.svelte
index 68cc4666..73646816 100644
--- a/src/lib/components/Item.svelte
+++ b/src/lib/components/Item.svelte
@@ -132,7 +132,7 @@
 {/snippet}
 
 {#snippet tooltip()}
-  <Tooltip.Root group="armor" openDelay={0} closeDelay={999999}>
+  <Tooltip.Root group="armor" openDelay={0} closeDelay={0}>
     <Tooltip.Trigger class="nice-colors-dark" onclick={() => showDialog.set(!$showDialog)}>
       {@render itemIcon()}
     </Tooltip.Trigger>

From b471567d8b768236a05ffa631348309c2eb40eee Mon Sep 17 00:00:00 2001
From: DarthGigi <47110839+DarthGigi@users.noreply.github.com>
Date: Wed, 8 Jan 2025 23:08:24 +0100
Subject: [PATCH 7/9] fix(seo): rename description functions for clarity and
 consistency

---
 src/lib/components/SEO.svelte | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/lib/components/SEO.svelte b/src/lib/components/SEO.svelte
index ece951d5..0abfd3e9 100644
--- a/src/lib/components/SEO.svelte
+++ b/src/lib/components/SEO.svelte
@@ -37,11 +37,11 @@
     vampire: "🩸"
   } as Record<string, string>;
 
-  function getDescription() {
+  function getLongDescription() {
     let output = "";
 
     // Skyblock Level
-    if (profile.skyblock_level.xp !== 0 && profile.skyblock_level.level !== 0) {
+    if (profile.skyblock_level.xp !== 0 && profile.skyblock_level?.level !== 0) {
       output += `🌟 Skyblock Level: ${formatNumber(profile.skyblock_level.levelWithProgress)}\n`;
     }
 
@@ -160,7 +160,7 @@
     return metaTitle;
   }
 
-  function getMetaDescription() {
+  function getShortDescription() {
     let description = "";
 
     // Base
@@ -189,11 +189,11 @@
 
 <SvelteSeo
   title="{profile.displayName} | SkyCrypt"
-  description={getDescription()}
+  description={getShortDescription()}
   canonical="https://sky.shiiyu.moe/stats/{profile.uuid}/{profile.profile_id}"
   openGraph={{
     title: getMetaTitle(),
-    description: getMetaDescription(),
+    description: getLongDescription(),
     type: "profile",
     profile: {
       username: profile.username

From e2fdda233ac8b88fcb52020075e5d15240a83895 Mon Sep 17 00:00:00 2001
From: DarthGigi <47110839+DarthGigi@users.noreply.github.com>
Date: Wed, 8 Jan 2025 23:10:48 +0100
Subject: [PATCH 8/9] fix(lint): add pnpm check to lint script for improved
 validation

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 408fd598..89fb2d42 100644
--- a/package.json
+++ b/package.json
@@ -12,7 +12,7 @@
     "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
     "runbuild": "node ./build/index.js",
     "test": "vitest",
-    "lint": "prettier --check . && eslint .",
+    "lint": "prettier --check . && eslint . && pnpm check",
     "format": "prettier --write ."
   },
   "devDependencies": {

From d6dc93869795be167fc15e9e27f90c763a3b418a Mon Sep 17 00:00:00 2001
From: DarthGigi <47110839+DarthGigi@users.noreply.github.com>
Date: Wed, 8 Jan 2025 23:17:32 +0100
Subject: [PATCH 9/9] refactor(workflow): consolidate linting, formatting, and
 svelte checks into a single job

---
 .github/workflows/website.yml | 34 ++++------------------------------
 1 file changed, 4 insertions(+), 30 deletions(-)

diff --git a/.github/workflows/website.yml b/.github/workflows/website.yml
index 134aa125..a28d156b 100644
--- a/.github/workflows/website.yml
+++ b/.github/workflows/website.yml
@@ -41,34 +41,8 @@ jobs:
       - name: Perform CodeQL Analysis
         uses: github/codeql-action/analyze@v2
 
-  es-lint:
-    name: Check linting (es-lint)
-    runs-on: ubuntu-latest
-    steps:
-      - name: Git checkout
-        uses: actions/checkout@v3
-
-      - name: PNPM Install
-        uses: ./.github/actions/pnpm-install
-
-      - name: Check ESlint
-        run: pnpm lint
-
-  prettier:
-    name: Check formatting (prettier)
-    runs-on: ubuntu-latest
-    steps:
-      - name: Git checkout
-        uses: actions/checkout@v3
-
-      - name: PNPM Install
-        uses: ./.github/actions/pnpm-install
-
-      - name: Check Prettier
-        run: pnpm prettier --check .
-
-  sveltecheck:
-    name: Svelte Check
+  formatting-checks:
+    name: Check linting (es-lint), formatting (prettier), and svelte checks (svelte-check)
     runs-on: ubuntu-latest
     steps:
       - name: Git checkout
@@ -83,8 +57,8 @@ jobs:
           ls -a .
           mv .env.example .env
 
-      - name: Check Svelte
-        run: pnpm run check
+      - name: Check linting, formatting, and svelte checks
+        run: pnpm lint
 
   build:
     name: Svelte Build