fix: remove unused RemoteQuery import and refactor searchUser function calls

Author: DarthGigi

src/lib/components/misc/CommandPalette.svelte

@@ -5,7 +5,7 @@
   import CircleAlert from "@lucide/svelte/icons/circle-alert";
   import LoaderCircle from "@lucide/svelte/icons/loader-circle";
   import Search from "@lucide/svelte/icons/search";
-  import { isHttpError, type RemoteQuery } from "@sveltejs/kit";
+  import { isHttpError } from "@sveltejs/kit";
   import { Button, Command, computeCommandScore, Dialog } from "bits-ui";
   import { cubicOut } from "svelte/easing";
   import { fade } from "svelte/transition";
@@ -18,9 +18,10 @@
   let commandInput = $state<HTMLElement>(null!);
   let commandValue = $state<string | undefined>(null!);
   let searchQuery = $state<string>("");
-  let searchUserRemoteFn = $state<RemoteQuery<never>>();
+  let submittedSearchQuery = $state<string>("");
 
   const searchQueryValidated = $derived(schema.safeParse({ query: searchQuery }));
+  const searchUserRemoteFn = $derived(submittedSearchQuery ? searchUser({ username: submittedSearchQuery }) : undefined);
 
   const preferences = getPreferences();
   const internalState = getInternalState();
@@ -37,14 +38,15 @@
     internalState.openCommand = false;
     commandValue = undefined;
     searchQuery = "";
+    submittedSearchQuery = "";
   }
 
   function handleKeydown(e: KeyboardEvent) {
     if (commandValue && commandValue !== "search") return;
     const k = e.key.toLowerCase();
     if (k === "enter" || k === "search") {
       e.preventDefault();
-      searchUserRemoteFn = searchUser({ username: searchQuery });
+      submittedSearchQuery = searchQuery;
     }
   }
 </script>
@@ -77,7 +79,7 @@
                   type="button"
                   class="flex aspect-square h-full items-center justify-center text-text"
                   onclick={() => {
-                    searchUserRemoteFn = searchUser({ username: searchQuery });
+                    submittedSearchQuery = searchQuery;
                   }}>
                   {#if !searchQueryValidated.success && searchQuery.length > 0}
                     <CircleAlert class="size-4" />
@@ -112,7 +114,7 @@
                           class={cn("flex h-10 cursor-pointer items-center gap-2 rounded-lg px-3 py-2.5 text-sm outline-hidden select-none", preferences.performanceMode ? "data-selected:bg-background-lore" : "data-selected:bg-background-grey")}
                           keywords={[searchQuery, "search", "find", "profile"]}
                           onSelect={() => {
-                            searchUserRemoteFn = searchUser({ username: searchQuery });
+                            submittedSearchQuery = searchQuery;
                           }}>
                           {#if searchUserRemoteFn?.loading || loading}
                             <LoaderCircle class="size-4 animate-spin" />

src/lib/layouts/stats/Stats.svelte

@@ -2,10 +2,8 @@
   import { getProfileContext } from "$ctx";
   import { Notice } from "$lib/components/notices";
   import { Stat } from "$lib/components/stats";
-  import type { ModelsStats } from "$lib/shared/api/orval-generated";
   import { getAdditionalStats } from "$lib/shared/api/skycrypt-api.remote";
   import LoaderCircle from "@lucide/svelte/icons/loader-circle";
-  import type { RemoteQuery } from "@sveltejs/kit";
   import { Collapsible } from "bits-ui";
   import { cubicOut } from "svelte/easing";
   import { slide } from "svelte/transition";
@@ -15,23 +13,11 @@
   const profileUUID = $derived(profile?.uuid);
   const profileId = $derived(profile?.profile_id);
 
-  let stats = $state<RemoteQuery<ModelsStats>>();
-
-  $effect(() => {
-    if (openState) {
-      stats = getAdditionalStats({ uuid: profileUUID!, profileId: profileId! });
-    }
-  });
+  const stats = $derived(openState && profileUUID && profileId ? getAdditionalStats({ uuid: profileUUID, profileId }) : undefined);
 </script>
 
 <div class="stats flex flex-col">
-  <Collapsible.Root
-    bind:open={openState}
-    onOpenChange={(open) => {
-      if (open && !stats) {
-        stats = getAdditionalStats({ uuid: profileUUID!, profileId: profileId! });
-      }
-    }}>
+  <Collapsible.Root bind:open={openState}>
     {#key profile}
       <Collapsible.Content forceMount={true} class="columns-[12.5rem] *:motion-preset-focus *:motion-preset-slide-down *:motion-delay-[calc(sibling-index()*0.01s)]">
         {#snippet child({ props, open })}

src/routes/+page.svelte

@@ -11,7 +11,7 @@
   import LoaderCircle from "@lucide/svelte/icons/loader-circle";
   import Server from "@lucide/svelte/icons/server";
   import Star from "@lucide/svelte/icons/star";
-  import { isHttpError, type RemoteQuery } from "@sveltejs/kit";
+  import { isHttpError } from "@sveltejs/kit";
   import { Button } from "bits-ui";
   import { onMount } from "svelte";
   import { Role } from "./enums";
@@ -25,7 +25,8 @@
   let searchQuery = $state<string>(null!);
   const searchQueryValidated = $derived(schema.safeParse({ query: searchQuery }));
 
-  let searchUserRemoteFn = $state<RemoteQuery<never>>();
+  let searchUserArgs = $state<{ username: string }>();
+  const searchUserRemoteFn = $derived(searchUserArgs ? searchUser(searchUserArgs) : undefined);
 
   const iconMapper: Record<Role, typeof CodeXml | typeof Server | typeof GitPullRequestArrow | typeof Star | string> = {
     [Role.MAINTAINER]: CodeXml,
@@ -90,7 +91,7 @@
       <div class="flex flex-col gap-6">
         <label for="search" class="m-1 w-full text-center font-semibold">Show SkyBlock stats for</label>
         <!-- svelte-ignore a11y_autofocus -->
-        <input id="search" type="search" required autofocus placeholder="Enter username" class="relative h-16 grow bg-text/10 text-center font-normal text-text placeholder:text-text/80 focus-visible:outline-hidden" bind:value={searchQuery} onchange={() => (searchUserRemoteFn = searchUser({ username: searchQuery }))} />
+        <input id="search" type="search" required autofocus placeholder="Enter username" class="relative h-16 grow bg-text/10 text-center font-normal text-text placeholder:text-text/80 focus-visible:outline-hidden" bind:value={searchQuery} onchange={() => (searchUserArgs = { username: searchQuery })} />
       </div>
 
       {#if !searchQueryValidated.success && searchQuery != null && searchQuery.length > 0}