Merge pull request #315 from SkyCryptWebsite/dev

Author: DarthGigi

.changeset/pre.json

@@ -0,0 +1,11 @@
+{
+  "mode": "pre",
+  "tag": "beta",
+  "initialVersions": {
+    "skycrypt-frontend": "3.5.1"
+  },
+  "changesets": [
+    "rare-snakes-vanish",
+    "ten-trees-beg"
+  ]
+}

.changeset/rare-snakes-vanish.md

@@ -0,0 +1,5 @@
+---
+"skycrypt-frontend": patch
+---
+
+Fix remaining SvelteKit remote query lifecycle regressions by replacing stored live query instances with plain reactive snapshots in the stats route, combined section loading, inventory, networth, additional stats, and header theme icon flows. This aligns the app more closely with the stricter remote query behavior introduced around sveltejs/kit#15533 and prevents inactive query access during tab and section transitions.

.changeset/ten-trees-beg.md

@@ -0,0 +1,5 @@
+---
+"skycrypt-frontend": patch
+---
+
+Improve the mobile stats header and profile action layout by collapsing the search trigger earlier on small screens and keeping the expanded profile actions inline with the always-visible buttons while preserving their staggered animation timing.

CHANGELOG.md

@@ -1,5 +1,13 @@
 # Changelog
 
+## 3.5.2-beta.0
+
+### Patch Changes
+
+- Fix remaining SvelteKit remote query lifecycle regressions by replacing stored live query instances with plain reactive snapshots in the stats route, combined section loading, inventory, networth, additional stats, and header theme icon flows. This aligns the app more closely with the stricter remote query behavior introduced around sveltejs/kit#15533 and prevents inactive query access during tab and section transitions. ([`3dd3f2f`](https://github.com/SkyCryptWebsite/SkyCrypt-Frontend/commit/3dd3f2fa7d77e2668c90755ec5e18933838c2752))
+
+- Improve the mobile stats header and profile action layout by collapsing the search trigger earlier on small screens and keeping the expanded profile actions inline with the always-visible buttons while preserving their staggered animation timing. ([`c677cbb`](https://github.com/SkyCryptWebsite/SkyCrypt-Frontend/commit/c677cbb95be31fcb9887beca90cdb607ade05efd))
+
 ## 3.5.1
 
 ### Patch Changes

package.json

@@ -1,6 +1,6 @@
 {
   "name": "skycrypt-frontend",
-  "version": "3.5.1",
+  "version": "3.5.2-beta.0",
   "private": true,
   "type": "module",
   "repository": {
@@ -32,7 +32,7 @@
     "test:e2e": "playwright test"
   },
   "devDependencies": {
-    "@changesets/cli": "^2.30.0",
+    "@changesets/cli": "^2.31.0",
     "@commitlint/cli": "^20.5.0",
     "@commitlint/config-conventional": "^20.5.0",
     "@commitlint/types": "^20.5.0",
@@ -60,12 +60,12 @@
     "@vitest/browser-playwright": "^4.1.4",
     "@vitest/coverage-v8": "^4.1.4",
     "@vitest/ui": "^4.1.4",
-    "bits-ui": "^2.17.3",
+    "bits-ui": "^2.18.0",
     "clsx": "^2.1.1",
     "date-fns": "^4.1.0",
     "devalue": "^5.7.1",
     "dotenv-cli": "^11.0.0",
-    "eslint": "^10.2.0",
+    "eslint": "^10.2.1",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-svelte": "^3.17.0",
     "formsnap": "^2.0.1",
@@ -95,7 +95,7 @@
     "tailwindcss": "^4.2.2",
     "tailwindcss-motion": "^1.1.1",
     "tslib": "^2.8.1",
-    "typescript": "^6.0.2",
+    "typescript": "^6.0.3",
     "typescript-eslint": "^8.58.2",
     "vaul-svelte": "1.0.0-next.7",
     "vite": "^8.0.8",
@@ -104,10 +104,10 @@
     "zod": "^4.3.6"
   },
   "dependencies": {
-    "@sentry/sveltekit": "^10.48.0",
+    "@sentry/sveltekit": "^10.49.0",
     "culori": "^4.0.2",
     "simple-git-hooks": "^2.13.1",
-    "takumi-js": "1.0.9"
+    "takumi-js": "1.0.14"
   },
   "engines": {
     "node": "^24",

pnpm-lock.yaml

@@ -4,3 +4,5 @@ allowBuilds:
   esbuild: true
   simple-git-hooks: true
   svelte-preprocess: true
+
+minimumReleaseAge: 1440 # 1 day

pnpm-workspace.yaml

@@ -11,7 +11,7 @@
   const preferences = getPreferences();
   const internalState = getInternalState();
   const theme = getTheme();
-  const themeIconQuery = $derived(getThemeIcons({ color: theme.activeTheme?.colors?.logo, invert: theme.activeTheme?.light }));
+  const themeIcon = $derived(getThemeIcons({ color: theme.activeTheme?.colors?.logo, invert: theme.activeTheme?.light }).current);
 
   const packageVersion = __NPM_PACKAGE_VERSION__;
 </script>
@@ -22,8 +22,8 @@
     <div class="flex gap-2">
       <Button.Root href="/" class="flex items-center justify-center gap-2 font-bold" data-sveltekit-preload-data="hover">
         <Avatar.Root class="size-6 shrink-0 rounded-lg select-none">
-          {#if themeIconQuery.current}
-            <Avatar.Image loading="lazy" src="data:image/svg+xml;base64,{btoa(themeIconQuery.current)}" alt="SkyCrypt" class="pointer-events-none h-6 select-none" />
+          {#if themeIcon}
+            <Avatar.Image loading="lazy" src="data:image/svg+xml;base64,{btoa(themeIcon)}" alt="SkyCrypt" class="pointer-events-none h-6 select-none" />
           {:else}
             <Avatar.Image loading="lazy" src="/img/app-icons/svg.svg" alt="SkyCrypt" class="pointer-events-none h-6 select-none" />
           {/if}
@@ -48,8 +48,8 @@
 
     {#if page.url.pathname.startsWith("/stats")}
       <div class="mx-auto my-1.5 w-full max-w-lg px-4 @[38rem]:block">
-        <Button.Root class="relative flex h-full w-4/5 items-center justify-start overflow-clip rounded-[1.125rem] bg-background/20 @[38rem]:w-full" onpointerdown={() => (internalState.openCommand = true)}>
-          <div class="peer flex h-full w-full shrink items-center rounded-r-3xl bg-transparent pr-0 pl-2 text-xs font-semibold text-text/80 outline-hidden transition-[colors_border-radius_opacity] duration-300 ease-out hover:rounded-r-none hover:bg-background/20 focus-visible:rounded-r-none focus-visible:bg-background/20 focus-visible:ring-transparent focus-visible:outline-hidden @[38rem]:grow @[38rem]:pl-4 @[38rem]:text-base">Press <kbd class="mx-1 rounded-sm bg-background/20 px-1">{preferences.keybind}</kbd> to search</div>
+        <Button.Root class="relative mx-auto flex h-full items-center justify-start overflow-clip rounded-[1.125rem] bg-background/20 @[26rem]:w-4/5 @[38rem]:w-full" onpointerdown={() => (internalState.openCommand = true)}>
+          <div class="peer hidden h-full w-full shrink items-center rounded-r-3xl bg-transparent pr-0 pl-2 text-xs font-semibold whitespace-nowrap text-text/80 outline-hidden transition-[colors_border-radius_opacity] duration-300 ease-out hover:rounded-r-none hover:bg-background/20 focus-visible:rounded-r-none focus-visible:bg-background/20 focus-visible:ring-transparent focus-visible:outline-hidden @[26rem]:flex @[38rem]:grow @[38rem]:pl-4 @[38rem]:text-base">Press <kbd class="mx-1 rounded-sm bg-background/20 px-1">{preferences.keybind}</kbd> to search</div>
 
           <div class="flex aspect-square h-full items-center justify-center rounded-full bg-background/15 transition-all duration-300 ease-out peer-hover:rounded-l-none peer-hover:bg-background/20 peer-focus-visible:rounded-l-none peer-focus-visible:bg-background/20 @[38rem]:aspect-video @[38rem]:px-4">
             <Search class="size-4 text-text @[38rem]:size-6" />

src/lib/components/header/Header.svelte

@@ -15,7 +15,17 @@
   const profile = $derived(getProfileContext().current);
   const profileUUID = $derived(profile?.uuid);
   const profileId = $derived(profile?.profile_id);
-  const networthQuery = $derived(profileUUID != null && profileId != null ? getNetworth({ uuid: profileUUID, profileId }) : null);
+  const networthState = $derived.by(() => {
+    if (profileUUID == null || profileId == null) {
+      return { current: null };
+    }
+
+    const query = getNetworth({ uuid: profileUUID, profileId });
+
+    return {
+      current: query.current
+    };
+  });
 
   const defaultPatternDecimal: string = "0,0.##";
   const defaultPattern: string = "0,0";
@@ -134,12 +144,12 @@
           <Button.Root onclick={retry} class="text-icon hover:text-icon/80">Retry</Button.Root>
         </div>
       {/snippet}
-      {#if networthQuery?.current}
-        {#if networthQuery.current.normal}
-          <NetworthCard networth={networthQuery.current.normal} title="Networth" />
+      {#if networthState.current}
+        {#if networthState.current.normal}
+          <NetworthCard networth={networthState.current.normal} title="Networth" />
         {/if}
-        {#if networthQuery.current.nonCosmetic}
-          <NetworthCard networth={networthQuery.current.nonCosmetic} title="Non-Cosmetic Networth" />
+        {#if networthState.current.nonCosmetic}
+          <NetworthCard networth={networthState.current.nonCosmetic} title="Non-Cosmetic Networth" />
         {/if}
       {/if}
     </svelte:boundary>