layout-adjustments

src/lib/components/Navbar.svelte

@@ -125,7 +125,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>

src/lib/layouts/stats/Main.svelte

@@ -216,16 +216,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>

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"),

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" }
 ];

src/lib/sections/stats/Overview.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+  import Skills from "$lib/layouts/stats/Skills.svelte";
+  import Section from "$lib/components/Section.svelte";
+  import Stats from "$lib/layouts/stats/Stats.svelte";
+  import AdditionalStats from "$lib/layouts/stats/AdditionalStats.svelte";
+
+  let { order }: { order: number } = $props();
+</script>
+
+<Section id="Overview" {order}>
+  <div class="space-y-5">
+    <Skills/>
+    <Stats />
+    <AdditionalStats />
+  </div>
+</Section>

src/lib/sections/types.ts

@@ -1,6 +1,6 @@
 import type { Component } from "svelte";
 
-export type SectionName = "Gear" | "Accessories" | "Pets" | "Inventory" | "Skills" | "Dungeons" | "Slayer" | "Minions" | "Bestiary" | "Collections" | "Crimson_Isle" | "Rift" | "Misc";
+export type SectionName = "Overview" | "Gear" | "Accessories" | "Pets" | "Inventory" | "Skills" | "Dungeons" | "Slayer" | "Minions" | "Bestiary" | "Collections" | "Crimson_Isle" | "Rift" | "Misc";
 
 export type SectionComponents = Record<SectionName, Promise<{ default: Component }> | null>;
 export type SectionComponentsEager = Record<SectionName, Component | null>;

src/lib/stores/preferences.ts

@@ -4,9 +4,9 @@ import type { SectionID } from "$lib/sections/types";
 import { persisted } from "svelte-persisted-store";
 
 export const sectionOrderPreferences = persisted<SectionID[]>("sectionOrderPreferences", sections);
-export const performanceMode = persisted<boolean>("performanceMode", false);
+export const performanceMode = persisted<boolean>("performanceMode", true);
 export const keybind = persisted<string>("keybind", "/");
-export const showGlint = persisted<boolean>("showGlint", true);
+export const showGlint = persisted<boolean>("showGlint", false);
 export const rainbowEnchantments = persisted<boolean>("rainbowEnchantments", false);
 
 // Check for invalid section order and reset if found

src/routes/+layout.svelte

@@ -206,9 +206,11 @@
   <PerformanceMode />
 {/if}
 
-<div class="pointer-events-none fixed inset-0 z-[-1] h-dvh w-screen [background-image:var(--bg-url)] bg-cover bg-scroll bg-center bg-no-repeat"></div>
+<!--
+<div class="pointer-events-none fixed inset-0 z-[-1] h-dvh w-screen [background-image:var(&#45;&#45;bg-url)] bg-cover bg-scroll bg-center bg-no-repeat"></div>
+-->
 
-<Header />
+<!--<Header />-->
 
 <Tooltip.Provider delayDuration={0}>
   {@render children()}