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);
 }
+
+body {
+  -webkit-user-select: none;
+  user-select: none;
+}
diff --git a/src/app.html b/src/app.html
@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en" class="group/html scroll-smooth text-text data-[mode=dark]:nice-colors-light data-[mode=light]:nice-colors-dark data-[mode=light]:light" data-theme="default" data-mode="dark">
+<html lang="en" class="group/html scroll-smooth text-text data-[mode=dark]:nice-colors-light data-[mode=light]:nice-colors-dark data-[mode=light]:light" data-theme="lunar" data-mode="dark">
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />

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);
@@ -39,9 +39,8 @@
     })
   );
 
-  let pinned = $state(false);
+  let pinned = $state(true);
   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,41 +84,47 @@
   });
 </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">
-  {#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>
-      <div class={cn("absolute inset-0 bottom-2", $performanceMode ? "group-data-[pinned=true]:bg-header" : "transition duration-50 ease-out group-data-[pinned=true]:group-data-[mode=dark]/html:bg-[oklch(19.13%_0_0)]/90 group-data-[pinned=true]:group-data-[mode=light]/html:bg-[oklch(95.51%_0_0)]/92")}></div>
-      {#each filteredSectionOrderPreferences as section, index (index)}
-        <Button.Root class="relative px-2 py-3 after:absolute after:top-full after:left-0 after:h-0 after:w-full after:origin-top after:rounded-full after:bg-icon after:transition-all after:duration-100 after:ease-out hover:after:top-[calc(100%-4px)] hover:after:h-2 data-[active=true]:text-text data-[active=true]:after:top-[calc(100%-4px)] data-[active=true]:after:h-2" data-id={section.name} data-active={$tabValue === section.name} onclick={() => handleSectionClick(section.name)}>
-          {section.name?.replaceAll("_", " ")}
+<div class="flex h-full min-h-0 flex-col">
+  <ScrollAreaPrimitive type="always" class="navbar group sticky! top-[env(safe-area-inset-top,0)] z-20 flex-none 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>
+        <div class={cn("absolute inset-0 bottom-2", $performanceMode ? "group-data-[pinned=true]:bg-header" : "transition duration-50 ease-out group-data-[pinned=true]:group-data-[mode=dark]/html:bg-[oklch(19.13%_0_0)]/90 group-data-[pinned=true]:group-data-[mode=light]/html:bg-[oklch(95.51%_0_0)]/92")}></div>
+        {#each filteredSectionOrderPreferences as section, index (index)}
+          <Button.Root class="relative px-2 py-3 after:absolute after:top-full after:left-0 after:h-0 after:w-full after:origin-top after:rounded-full after:bg-icon after:transition-all after:duration-100 after:ease-out hover:after:top-[calc(100%-4px)] hover:after:h-2 data-[active=true]:text-text data-[active=true]:after:top-[calc(100%-4px)] data-[active=true]:after:h-2" data-id={section.name} data-active={$tabValue === section.name} onclick={() => handleSectionClick(section.name)}>
+            {section.name?.replaceAll("_", " ")}
+          </Button.Root>
+        {/each}
+      </div>
+    {/snippet}
+
+    <ScrollArea.Scrollbar orientation="horizontal" class="z-10 flex h-0.5 w-full origin-center -translate-y-[0.44rem] touch-none transition-all duration-300 ease-out select-none group-hover:h-2 group-hover:-translate-y-1">
+      <ScrollArea.Thumb class="rounded-full bg-icon" />
+    </ScrollArea.Scrollbar>
+  </ScrollAreaPrimitive>
+
+  <div class="flex min-h-0 flex-1 flex-col">
+    <div class="min-h-0 flex-1 overflow-y-auto px-4 @[75rem]/parent:px-8">
+      <div class="flex flex-col flex-nowrap gap-y-5 py-4 @[75rem]/parent:py-8">
+        {@render children?.()}
+      </div>
+    </div>
+
+    <div class="flex items-center justify-between px-4 pb-4 @[75rem]/parent:px-8 @[75rem]/parent:pb-8">
+      {#if previousSection}
+        <Button.Root class="flex items-center justify-between rounded-lg bg-icon px-4 py-2 text-lg" onclick={() => handleSectionClick(previousSection.name ?? filteredSectionOrderPreferences[0].name)}>
+          <ChevronLeft />
+          {previousSection.name.replaceAll("_", " ")}
+        </Button.Root>
+      {:else}
+        <div></div>
+      {/if}
+      {#if nextSection}
+        <Button.Root class="flex items-center justify-between rounded-lg bg-icon px-4 py-2 text-lg" onclick={() => handleSectionClick(nextSection.name ?? filteredSectionOrderPreferences[filteredSectionOrderPreferences.length - 1].name)}>
+          {nextSection.name.replaceAll("_", " ")}
+          <ChevronRight />
         </Button.Root>
-      {/each}
+      {/if}
     </div>
-  {/snippet}
-
-  <ScrollArea.Scrollbar orientation="horizontal" class="z-10 flex h-0.5 w-full origin-center -translate-y-[0.44rem] touch-none transition-all duration-300 ease-out select-none group-hover:h-2 group-hover:-translate-y-1">
-    <ScrollArea.Thumb class="rounded-full bg-icon" />
-  </ScrollArea.Scrollbar>
-</ScrollAreaPrimitive>
-
-<div class="flex flex-col flex-nowrap gap-y-5 px-4 pb-4 @[75rem]/parent:px-8 @[75rem]/parent:pb-8">
-  {@render children?.()}
-
-  <div class="flex items-center justify-between">
-    {#if previousSection}
-      <Button.Root class="flex items-center justify-between rounded-lg bg-icon px-4 py-2 text-lg" onclick={() => handleSectionClick(previousSection.name ?? filteredSectionOrderPreferences[0].name)}>
-        <ChevronLeft />
-        {previousSection.name.replaceAll("_", " ")}
-      </Button.Root>
-    {:else}
-      <div></div>
-    {/if}
-    {#if nextSection}
-      <Button.Root class="flex items-center justify-between rounded-lg bg-icon px-4 py-2 text-lg" onclick={() => handleSectionClick(nextSection.name ?? filteredSectionOrderPreferences[filteredSectionOrderPreferences.length - 1].name)}>
-        {nextSection.name.replaceAll("_", " ")}
-        <ChevronRight />
-      </Button.Root>
-    {/if}
   </div>
 </div>
diff --git a/src/lib/components/header/settings/Order.svelte b/src/lib/components/header/settings/Order.svelte
@@ -2,8 +2,8 @@
   function changeTheme(themeId: Theme["id"]) {
     const theme = themes.find((theme) => theme.id === themeId);
     if (!theme) {
-      themeStore.set("default");
-      document.documentElement.dataset.theme = "default";
+      themeStore.set("lunar");
+      document.documentElement.dataset.theme = "lunar";
       return;
     }
     if (theme.light) {

diff --git a/src/lib/components/header/settings/Themes.svelte b/src/lib/components/header/settings/Themes.svelte
@@ -2,8 +2,8 @@
   function changeTheme(themeId: Theme["id"]) {
     const theme = themes.find((theme) => theme.id === themeId);
     if (!theme) {
-      themeStore.set("default");
-      document.documentElement.dataset.theme = "default";
+      themeStore.set("lunar");
+      document.documentElement.dataset.theme = "lunar";
       return;
     }
     if (theme.light) {

diff --git a/src/lib/hooks/is-hover.svelte.ts b/src/lib/hooks/is-hover.svelte.ts
@@ -1,9 +1,11 @@
-import { MediaQuery } from "svelte/reactivity";
+export class IsHover {
+  #current = $state(true);
 
-const MEDIA_QUERY = "(hover: hover) and (pointer: fine)";
+  constructor() {}
 
-export class IsHover extends MediaQuery {
-  constructor() {
-    super(MEDIA_QUERY);
+  get current() {
+    return this.#current;
   }
+
+  destroy() {}
 }
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();
   });
@@ -199,7 +200,7 @@
     </Pane>
   </PaneGroup> -->
   <!-- TODO: See the paneforge todo above  -->
-  <div class="@container fixed top-1/2 left-0 z-10 hidden h-dvh w-[30vw] -translate-y-1/2 @[75rem]/parent:block">
+  <div class="@container fixed inset-y-0 left-0 z-10 hidden h-dvh w-[30vw] @[75rem]/parent:block">
     {#if $performanceMode && !showStaticSkin}
       <Avatar.Root class="flex size-full items-center justify-center">
         {#snippet child({ props })}
@@ -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 h-dvh overflow-hidden @[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>