LunarClient · inglettronald · Jan 31, 2026 · Jan 31, 2026 · Feb 21, 2026 · Feb 21, 2026
diff --git a/.idea/.gitignore b/.idea/.gitignore
diff --git a/.idea/SkyCrypt.iml b/.idea/SkyCrypt.iml
diff --git a/.idea/codeStyles/Project.xml b/.idea/codeStyles/Project.xml
diff --git a/.idea/codeStyles/codeStyleConfig.xml b/.idea/codeStyles/codeStyleConfig.xml
diff --git a/.idea/inspectionProfiles/Project_Default.xml b/.idea/inspectionProfiles/Project_Default.xml
diff --git a/.idea/modules.xml b/.idea/modules.xml
diff --git a/.idea/prettier.xml b/.idea/prettier.xml
diff --git a/.idea/vcs.xml b/.idea/vcs.xml
diff --git a/src/app.css b/src/app.css
@@ -366,3 +366,8 @@
   @apply relative animate-chroma bg-size-[8.875rem_8.875rem] bg-clip-text bg-origin-padding text-transparent!;
   background-image: repeating-linear-gradient(-45deg, oklch(62.8% 0.258 29.2), oklch(77.2% 0.174 64.6), oklch(93.1% 0.229 123), oklch(87% 0.29 142), oklch(87.2% 0.255 148), oklch(90.5% 0.155 195), oklch(56.3% 0.241 261), oklch(46.6% 0.304 271), oklch(62.7% 0.307 316), oklch(65.3% 0.268 355), oklch(62.8% 0.258 29.2) 100px);
 }
+
+.pixelated {
+  image-rendering: crisp-edges;
+  image-rendering: -webkit-optimize-contrast;
+}
diff --git a/src/lib/components/Chip.svelte b/src/lib/components/Chip.svelte
@@ -58,7 +58,7 @@
         <div class="flex items-center gap-2 px-2">
           {#if hasBeenInViewport}
             <Avatar.Root class="aspect-square size-12">
-              <Avatar.Image loading="lazy" src={image.src} class={cn("size-full object-contain [image-rendering:pixelated]", image.class)} />
+              <Avatar.Image loading="lazy" src={image.src} class={cn("size-full object-contain pixelated", image.class)} />
               <Avatar.Fallback>
                 <Image class="size-full" />
               </Avatar.Fallback>

diff --git a/src/lib/components/ContainedItem.svelte b/src/lib/components/ContainedItem.svelte
@@ -11,7 +11,7 @@
 <div class="relative flex aspect-square items-center justify-center overflow-clip p-0">
   <div class={cn("absolute inset-0 rounded-lg", { "data-[enchanted=true]:shine": !$performanceMode })} data-enchanted={piece.shiny}></div>
   <Avatar.Root>
-    <Avatar.Image loading="lazy" src={piece.texture_path} alt={piece.display_name} class={cn("h-auto w-14 select-none [image-rendering:pixelated] data-[enchanted=true]:enchanted", isInventory ? "w-8" : "w-14")} data-enchanted={piece.shiny} />
+    <Avatar.Image loading="lazy" src={piece.texture_path} alt={piece.display_name} class={cn("h-auto w-14 select-none pixelated data-[enchanted=true]:enchanted", isInventory ? "w-8" : "w-14")} data-enchanted={piece.shiny} />
     <Avatar.Fallback>
       <Image class={cn(isInventory ? "size-8" : "size-14")} />
     </Avatar.Fallback>

diff --git a/src/lib/components/EmptyEquipment.svelte b/src/lib/components/EmptyEquipment.svelte
@@ -18,7 +18,7 @@
 
 {#if selectedPiece}
   <div class="rounded-lg bg-background/30 p-2">
-    <div class="size-14 bg-text/80 mask-(--image) [-webkit-mask-image:var(--image)] [-webkit-mask-position:center_center] [-webkit-mask-repeat:no-repeat] [-webkit-mask-size:3.5rem] [image-rendering:pixelated]" style="--image: url('/img/textures/item/empty_armor_slot_{selectedPiece}.avif')"></div>
+    <div class="size-14 bg-text/80 mask-(--image) [-webkit-mask-image:var(--image)] [-webkit-mask-position:center_center] [-webkit-mask-repeat:no-repeat] [-webkit-mask-size:3.5rem] pixelated" style="--image: url('/img/textures/item/empty_armor_slot_{selectedPiece}.avif')"></div>
   </div>
 {:else}
   <div class="rounded-lg bg-background/30 p-2">

diff --git a/src/lib/components/Item.svelte b/src/lib/components/Item.svelte
@@ -57,7 +57,7 @@
       <div {...props}>
         {#if hasBeenInViewport}
           <Avatar.Root bind:loadingStatus>
-            <Avatar.Image loading="lazy" src={piece.texture_path} alt={piece.display_name} class={cn("pointer-events-none aspect-square select-none [image-rendering:pixelated] data-[enchanted=true]:enchanted", isInventory ? "size-6 sm:size-14" : "size-14")} data-enchanted={enchanted} />
+            <Avatar.Image loading="lazy" src={piece.texture_path} alt={piece.display_name} class={cn("pointer-events-none aspect-square select-none pixelated data-[enchanted=true]:enchanted", isInventory ? "size-6 sm:size-14" : "size-14")} data-enchanted={enchanted} />
             {#if loadingStatus === "loading"}
               {@render loadingState()}
             {:else}

diff --git a/src/lib/components/Navbar.svelte b/src/lib/components/Navbar.svelte
@@ -10,7 +10,7 @@
   import ChevronLeft from "@lucide/svelte/icons/chevron-left";
   import ChevronRight from "@lucide/svelte/icons/chevron-right";
   import { Button, ScrollArea } from "bits-ui";
-  import { onDestroy, tick, type Snippet } from "svelte";
+  import { tick, type Snippet } from "svelte";
   const { children }: { children?: Snippet } = $props();
 
   const profile = $derived(getProfileContext().current);
@@ -41,7 +41,6 @@
 
   let pinned = $state(false);
   let navbarElement = $state<HTMLDivElement | null>(null);
-  let observer: IntersectionObserver;
 
   function handleSectionClick(sectionName: SectionName) {
     tabValue.set(sectionName);
@@ -73,46 +72,6 @@
     link.scrollIntoView(scrollOptions);
   }
 
-  function observerInit() {
-    if (!navbarElement) {
-      console.warn("Navbar element is not defined");
-      return;
-    }
-
-    const topValue = parseInt(window.getComputedStyle(navbarElement).getPropertyValue("top"));
-
-    observer = new IntersectionObserver(
-      ([e]) => {
-        // Check if the element has reached its sticky position by comparing
-        // its actual top position to the CSS top value
-        const hasReachedStickyPosition = e.boundingClientRect.top <= topValue;
-        pinned = hasReachedStickyPosition && e.intersectionRatio < 1;
-      },
-      {
-        threshold: [1],
-        rootMargin: `-${topValue + 1}px 0px` // shrink the viewport to element top value +1px to trigger observer when element has reach it's sticky position
-      }
-    );
-
-    observer.observe(navbarElement);
-  }
-
-  function observerCleanup() {
-    if (observer) observer.disconnect();
-  }
-
-  $effect(() => {
-    if (!navbarElement) return;
-    observerInit();
-    return () => {
-      observerCleanup();
-    };
-  });
-
-  onDestroy(() => {
-    observerCleanup();
-  });
-
   // Effect to handle tab value changes and update URL
   $effect(() => {
     if (navbarElement && $tabValue) {
@@ -125,7 +84,7 @@
   });
 </script>
 
-<ScrollAreaPrimitive type="always" class="navbar group sticky! top-[calc(3rem+env(safe-area-inset-top,0))] z-20 overflow-clip" data-pinned={pinned} bind:ref={navbarElement} orientation="horizontal">
+<ScrollAreaPrimitive type="always" class="navbar group sticky! top-[env(safe-area-inset-top,0)] z-20 overflow-clip" data-pinned={pinned} bind:ref={navbarElement} orientation="horizontal">
   {#snippet viewportChildren()}
     <div class="flex! flex-nowrap items-center gap-2 pb-2 font-semibold whitespace-nowrap text-text/80">
       <div class="absolute bottom-1.75 z-1 h-0.5 w-[calc(100%+0.5rem)] bg-icon"></div>

diff --git a/src/lib/components/Skillbar.svelte b/src/lib/components/Skillbar.svelte
@@ -24,7 +24,7 @@
 <div class={cn("group relative flex grow basis-full flex-col sm:basis-1/3 sm:last:grow-0 sm:last:basis-1/2", !apiEnabled && "opacity-50 grayscale", className)} data-maxed={isMaxed} use:hoverAction>
   <div class={cn("absolute bottom-0 left-0 z-10 flex size-9 items-center justify-center rounded-full p-1 drop-shadow-sm group-data-[maxed=false]:bg-icon group-data-[maxed=true]:bg-maxed", apiEnabled ? "" : "bg-gray-600", { "group-data-[maxed=true]:shine": !$performanceMode })}>
     <Avatar.Root class="select-none">
-      <Avatar.Image loading="lazy" class={cn("pointer-events-none size-6.5 [image-rendering:pixelated]", !apiEnabled && "grayscale")} src={skillData.texture} alt={skill} />
+      <Avatar.Image loading="lazy" class={cn("pointer-events-none size-6.5 pixelated", !apiEnabled && "grayscale")} src={skillData.texture} alt={skill} />
       <Avatar.Fallback>
         <BarChartHorizontal class="pointer-events-none size-6" />
       </Avatar.Fallback>

diff --git a/src/lib/components/header/settings/Packs.svelte b/src/lib/components/header/settings/Packs.svelte
@@ -31,7 +31,7 @@
         <Label.Root for={pack.id} class="flex items-center justify-between gap-4 rounded-lg bg-text/5 p-2">
           <div class="flex items-center gap-2">
             <Avatar.Root class="shrink-0 select-none">
-              <Avatar.Image loading="lazy" src={pack.icon} alt={pack.name} class="pointer-events-none aspect-square size-10 h-full rounded-lg select-none [image-rendering:pixelated]" />
+              <Avatar.Image loading="lazy" src={pack.icon} alt={pack.name} class="pointer-events-none aspect-square size-10 h-full rounded-lg select-none pixelated" />
               <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">

diff --git a/src/lib/components/item/item-content.svelte b/src/lib/components/item/item-content.svelte
@@ -58,7 +58,7 @@
 <div class="contents" {@attach animateObfuscatedText}>
   <div class={cn(`flex flex-nowrap items-center justify-center gap-4 p-5 nice-colors-dark`, { "rounded-t-[10px]": isDrawer }, bgColor)}>
     <Avatar.Root class="shrink-0 px-2">
-      <Avatar.Image loading="lazy" src={piece?.texture_path} alt={piece?.display_name} class="h-auto w-8 flex-none shrink-0 overflow-hidden [image-rendering:pixelated] data-[enchanted=true]:enchanted" data-enchanted={enchanted} />
+      <Avatar.Image loading="lazy" src={piece?.texture_path} alt={piece?.display_name} class="h-auto w-8 flex-none shrink-0 overflow-hidden pixelated data-[enchanted=true]:enchanted" data-enchanted={enchanted} />
       <Avatar.Fallback>
         <Image class="size-8" />
       </Avatar.Fallback>
@@ -98,7 +98,7 @@
           <div class="flex items-center justify-between gap-4 rounded-[0.625rem] bg-text/5 p-2 transition-colors ease-out hover:bg-text/8">
             <div class="flex items-center gap-2">
               <Avatar.Root class="shrink-0 select-none">
-                <Avatar.Image loading="lazy" src={piece.sourceTab.icon} alt={piece.sourceTab.name} class="pointer-events-none aspect-square size-10 h-full rounded-lg select-none [image-rendering:pixelated]" />
+                <Avatar.Image loading="lazy" src={piece.sourceTab.icon} alt={piece.sourceTab.name} class="pointer-events-none aspect-square size-10 h-full rounded-lg select-none pixelated" />
                 <Avatar.Fallback class="flex size-10 items-center justify-center rounded-lg bg-icon/90 text-center font-semibold uppercase">
                   {piece.sourceTab.name?.slice(0, 2)}
                 </Avatar.Fallback>
@@ -124,7 +124,7 @@
             <div class="flex items-center justify-between gap-4 rounded-[0.625rem] bg-text/5 p-2 transition-colors ease-out hover:bg-text/8">
               <div class="flex items-center gap-2">
                 <Avatar.Root class="shrink-0 select-none">
-                  <Avatar.Image loading="lazy" src={packData.icon} alt={packData.name} class="pointer-events-none aspect-square size-10 h-full rounded-lg select-none [image-rendering:pixelated]" />
+                  <Avatar.Image loading="lazy" src={packData.icon} alt={packData.name} class="pointer-events-none aspect-square size-10 h-full rounded-lg select-none pixelated" />
                   <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/layouts/stats/Main.svelte b/src/lib/layouts/stats/Main.svelte
@@ -45,8 +45,14 @@
 
   // Initialize the profile context
   const profileClass = new ProfileContext();
+  profileClass.current = profile;
   setProfileContext(profileClass);
 
+  // Update the profile context when the data changes
+  $effect.pre(() => {
+    profileClass.current = profile;
+  });
+
   function rewriteURL() {
     if (!(ctx as ModelsStatsOutput)) return;
 
@@ -97,11 +103,6 @@
     return searches;
   });
 
-  // Update the profile context when the data changes
-  $effect.pre(() => {
-    profileClass.current = profile;
-  });
-
   $effect(() => {
     rewriteURL();
   });
@@ -216,16 +217,11 @@
     {/if}
   </div>
 
+<!--
   <div class={cn("fixed top-0 right-0 min-h-dvh w-full @[75rem]/parent:w-[calc(100%-30vw)]", $performanceMode ? "bg-background-grey" : "backdrop-blur-lg group-data-[mode=dark]/html:backdrop-brightness-50 group-data-[mode=light]/html:backdrop-brightness-100")}></div>
-  <main data-vaul-drawer-wrapper class="@container relative mx-auto mt-12 @[75rem]/parent:ml-[30vw]">
+-->
+  <main data-vaul-drawer-wrapper class="@container relative mx-auto @[75rem]/parent:ml-[30vw]">
     {#if getProfileContext().current}
-      <div class="space-y-5 p-4 @[75rem]/parent:p-8">
-        <PlayerProfile />
-        <Skills />
-        <Stats />
-        <AdditionalStats />
-      </div>
-
       <Navbar>
         <Sections />
       </Navbar>

diff --git a/src/lib/layouts/stats/PlayerProfile.svelte b/src/lib/layouts/stats/PlayerProfile.svelte
@@ -93,9 +93,9 @@
                     <div class="flex w-full items-center justify-between gap-2 rounded-lg bg-text/10 p-2 outline-icon transition-colors duration-300 ease-out group-hover:bg-text/20 group-focus-visible:outline-1 group-data-[removed=true]:bg-text/5 group-hover:group-data-[removed=true]:bg-text/20">
                       <div class="flex items-center gap-2 pr-4">
                         <Avatar.Root class="size-8 shrink-0">
-                          <Avatar.Image loading="lazy" src="https://nmsr.nickac.dev/face/{member.uuid}" alt={member.username} class="aspect-square size-8 rounded-sm [image-rendering:pixelated] group-data-[removed=true]:grayscale-100" />
+                          <Avatar.Image loading="lazy" src="https://nmsr.nickac.dev/face/{member.uuid}" alt={member.username} class="aspect-square size-8 rounded-sm pixelated group-data-[removed=true]:grayscale-100" />
                           <Avatar.Fallback class="flex h-full items-center justify-center rounded-sm bg-text/10 text-lg font-semibold text-text/60 uppercase">
-                            <img loading="lazy" src="https://nmsr.nickac.dev/face/bc8ea1f51f253ff5142ca11ae45193a4ad8c3ab5e9c6eec8ba7a4fcb7bac40" alt="Steve" class="aspect-square size-8 rounded-sm [image-rendering:pixelated] group-data-[removed=true]:grayscale-100" />
+                            <img loading="lazy" src="https://nmsr.nickac.dev/face/bc8ea1f51f253ff5142ca11ae45193a4ad8c3ab5e9c6eec8ba7a4fcb7bac40" alt="Steve" class="aspect-square size-8 rounded-sm pixelated group-data-[removed=true]:grayscale-100" />
                           </Avatar.Fallback>
                         </Avatar.Root>
                         <span class="light:invert">

diff --git a/src/lib/sections/Sections.svelte b/src/lib/sections/Sections.svelte
@@ -9,6 +9,7 @@
   import { Tabs } from "bits-ui";
 
   const COMPONENTS = {
+    Overview: () => import("$lib/sections/stats/Overview.svelte"),
     Gear: () => import("$lib/sections/stats/Gear.svelte"),
     Accessories: () => import("$lib/sections/stats/Accessories.svelte"),
     Pets: () => import("$lib/sections/stats/Pets.svelte"),

diff --git a/src/lib/sections/constants.ts b/src/lib/sections/constants.ts
@@ -1,17 +1,18 @@
 import type { SectionID } from "$lib/sections/types";
 
 export const sections: SectionID[] = [
-  { id: 0, name: "Gear" },
-  { id: 1, name: "Accessories" },
-  { id: 2, name: "Pets" },
-  { id: 3, name: "Inventory" },
-  { id: 4, name: "Skills" },
-  { id: 5, name: "Dungeons" },
-  { id: 6, name: "Slayer" },
-  { id: 7, name: "Minions" },
-  { id: 8, name: "Bestiary" },
-  { id: 9, name: "Collections" },
-  { id: 10, name: "Crimson_Isle" },
-  { id: 11, name: "Rift" },
-  { id: 12, name: "Misc" }
+  { id: 0, name: "Overview" },
+  { id: 1, name: "Gear" },
+  { id: 2, name: "Accessories" },
+  { id: 3, name: "Pets" },
+  { id: 4, name: "Inventory" },
+  { id: 5, name: "Skills" },
+  { id: 6, name: "Dungeons" },
+  { id: 7, name: "Slayer" },
+  { id: 8, name: "Minions" },
+  { id: 9, name: "Bestiary" },
+  { id: 10, name: "Collections" },
+  { id: 11, name: "Crimson_Isle" },
+  { id: 12, name: "Rift" },
+  { id: 13, name: "Misc" }
 ];
diff --git a/src/lib/sections/stats/Dungeons.svelte b/src/lib/sections/stats/Dungeons.svelte
@@ -128,7 +128,7 @@
             <div class="flex min-w-80 basis-[calc((100%/3)-1.25rem)] flex-col gap-1 rounded-lg bg-background/30">
               <div class="flex w-full items-center justify-center gap-1.5 border-b-2 border-icon py-2 text-center font-semibold uppercase">
                 <Avatar.Root>
-                  <Avatar.Image loading="lazy" src={catacomb.texture} class="size-8 object-contain [image-rendering:pixelated]" />
+                  <Avatar.Image loading="lazy" src={catacomb.texture} class="size-8 object-contain pixelated" />
                   <Avatar.Fallback>
                     <Image class="size-8" />
                   </Avatar.Fallback>