Merge pull request #310 from SkyCryptWebsite/dev

Use combined endpoint for sections data and refactor components

Author: DuckySoLucky

.changeset/chilly-garlics-divide.md

@@ -0,0 +1,5 @@
+---
+"skycrypt-frontend": patch
+---
+
+fix: refactor SectionBoundary to use query function instead of promise

.changeset/modern-eggs-shave.md

@@ -0,0 +1,5 @@
+---
+"skycrypt-frontend": minor
+---
+
+feat: use the combined endpoint for the sections data

.changeset/ninety-plants-bathe.md

@@ -0,0 +1,5 @@
+---
+"skycrypt-frontend": minor
+---
+
+feat: refactor inventory components to improve data fetching and rendering logic

.changeset/pre.json

@@ -0,0 +1,12 @@
+{
+  "mode": "pre",
+  "tag": "beta",
+  "initialVersions": {
+    "skycrypt-frontend": "3.4.1"
+  },
+  "changesets": [
+    "chilly-garlics-divide",
+    "modern-eggs-shave",
+    "ninety-plants-bathe"
+  ]
+}

CHANGELOG.md

@@ -1,5 +1,17 @@
 # Changelog
 
+## 3.5.0-beta.0
+
+### Minor Changes
+
+- feat: use the combined endpoint for the sections data ([`638f564`](https://github.com/SkyCryptWebsite/SkyCrypt-Frontend/commit/638f564eb6e904eb08b847460d95ab430f4c26aa))
+
+- feat: refactor inventory components to improve data fetching and rendering logic ([`2c80f2d`](https://github.com/SkyCryptWebsite/SkyCrypt-Frontend/commit/2c80f2d153a3cbd324f307458e4a43ee99c1d852))
+
+### Patch Changes
+
+- fix: refactor SectionBoundary to use query function instead of promise ([`bd7398b`](https://github.com/SkyCryptWebsite/SkyCrypt-Frontend/commit/bd7398b93213bbd0db3ca24ba83bbb79c7765b7e))
+
 ## 3.4.1
 
 ### Patch Changes

package.json

@@ -1,6 +1,6 @@
 {
   "name": "skycrypt-frontend",
-  "version": "3.4.1",
+  "version": "3.5.0-beta.0",
   "private": true,
   "type": "module",
   "repository": {
@@ -108,7 +108,7 @@
     "@sentry/sveltekit": "^10.47.0",
     "culori": "^4.0.2",
     "simple-git-hooks": "^2.13.1",
-    "takumi-js": "1.0.0-rc.14"
+    "takumi-js": "1.0.0-rc.15"
   },
   "engines": {
     "node": "^24",

pnpm-lock.yaml

@@ -1,6 +1,7 @@
 import type { IsHover } from "$lib/hooks/is-hover.svelte";
 import type { IsMobile } from "$lib/hooks/is-mobile.svelte";
-import type { ModelsMiscOutput, ModelsResourcePackConfig, ModelsSkillsOutput, ModelsStatsOutput } from "$lib/shared/api/orval-generated";
+import type { ModelsCombinedOutput, ModelsMiscOutput, ModelsResourcePackConfig, ModelsSkillsOutput, ModelsStatsOutput } from "$lib/shared/api/orval-generated";
+import type { RemoteQuery } from "@sveltejs/kit";
 import { createContext } from "svelte";
 
 export class ProfileContext {
@@ -15,6 +16,30 @@ export class ProfileContext {
   }
 }
 
+export class CombinedContext {
+  #current: ModelsCombinedOutput | null = $state(null);
+
+  get current() {
+    return this.#current;
+  }
+
+  set current(value: ModelsCombinedOutput | null) {
+    this.#current = value;
+  }
+}
+
+export class CombinedQueryContext {
+  #current: RemoteQuery<ModelsCombinedOutput> | null = $state(null);
+
+  get current() {
+    return this.#current;
+  }
+
+  set current(value: RemoteQuery<ModelsCombinedOutput> | null) {
+    this.#current = value;
+  }
+}
+
 export class PacksContext {
   #packs: ModelsResourcePackConfig[] = $state([]);
 
@@ -52,6 +77,8 @@ export class SkillsContext {
 }
 
 export const [getProfileContext, setProfileContext] = createContext<ProfileContext>();
+export const [getCombinedContext, setCombinedContext] = createContext<CombinedContext>();
+export const [getCombinedQueryContext, setCombinedQueryContext] = createContext<CombinedQueryContext>();
 export const [getSkillsContext, setSkillsContext] = createContext<SkillsContext>();
 export const [getMiscContext, setMiscContext] = createContext<MiscContext>();
 export const [getMobileContext, setMobileContext] = createContext<IsMobile>();

src/context/createContext.svelte.ts

@@ -15,6 +15,7 @@
   const packageVersion = __NPM_PACKAGE_VERSION__;
 </script>
 
+<div class="invisible h-12 w-full"></div>
 <header class="@container fixed top-0 left-0 z-30 h-12 w-full overflow-clip bg-header px-2.5 pt-[env(safe-area-inset-top,0)] pr-[max(0.625rem,env(safe-area-inset-right))] pb-[env(safe-area-inset-bottom,0)] pl-[max(0.625rem,env(safe-area-inset-left))] leading-12">
   <div class="flex h-full w-full justify-center @md:justify-between">
     <div class="flex gap-2">

src/lib/components/header/Header.svelte

@@ -1,39 +1,37 @@
 <script lang="ts">
   import { getPreferences } from "$ctx";
-  import { SectionBoundary } from "$lib/components/sections";
   import { type ModelsStrippedItem } from "$lib/shared/api/orval-generated";
-  import { getInventorySection } from "$lib/shared/api/skycrypt-api.remote";
   import { shouldShine } from "$lib/shared/helper";
   import type { Snippet } from "svelte";
 
   const preferences = getPreferences();
 
-  let { uuid, profileId, inventoryId, gap, itemSnippet }: { uuid: string; profileId: string; inventoryId: string; gap: number; itemSnippet: Snippet<[ModelsStrippedItem]> } = $props();
+  let { inventoryId, gap, itemSnippet, items = [] }: { inventoryId: string; gap: number; itemSnippet: Snippet<[ModelsStrippedItem]>; items?: ModelsStrippedItem[] } = $props();
 </script>
 
-<SectionBoundary promise={getInventorySection({ uuid, profileId, inventoryId })}>
-  {#snippet children(items)}
-    {#if items?.length ?? 0 > 0}
-      <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 items as item, index (index)}
-          {#if index > 0}
-            {#if index % gap === 0}
-              <hr class="col-span-full h-4 border-0" />
-            {/if}
+{#snippet content(items: ModelsStrippedItem[] | undefined)}
+  {#if items?.length ?? 0 > 0}
+    <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 items as item, index (index)}
+        {#if index > 0}
+          {#if index % gap === 0}
+            <hr class="col-span-full h-4 border-0" />
           {/if}
-          {#if item.texture_path}
-            <div class="relative flex aspect-square items-center justify-center rounded-sm bg-text/4 data-[shine=true]:shine" data-shine={!preferences.performanceMode && shouldShine(item)}>
-              {@render itemSnippet(inventoryId === "inventory" ? ({ ...item, rarity: item.rarity ?? "uncommon" } as ModelsStrippedItem) : item)}
-            </div>
-          {:else}
-            <div class="aspect-square rounded-sm bg-text/4"></div>
-          {/if}
-        {/each}
-      </div>
-    {:else}
-      <p class="mt-2 space-x-0.5 text-center leading-6">
-        No items found in the {inventoryId.replaceAll("_", " ")}.
-      </p>
-    {/if}
-  {/snippet}
-</SectionBoundary>
+        {/if}
+        {#if item.texture_path}
+          <div class="relative flex aspect-square items-center justify-center rounded-sm bg-text/4 data-[shine=true]:shine" data-shine={!preferences.performanceMode && shouldShine(item)}>
+            {@render itemSnippet(inventoryId === "inventory" ? ({ ...item, rarity: item.rarity ?? "uncommon" } as ModelsStrippedItem) : item)}
+          </div>
+        {:else}
+          <div class="aspect-square rounded-sm bg-text/4"></div>
+        {/if}
+      {/each}
+    </div>
+  {:else}
+    <p class="mt-2 space-x-0.5 text-center leading-6">
+      No items found in the {inventoryId.replaceAll("_", " ")}.
+    </p>
+  {/if}
+{/snippet}
+
+{@render content(items)}