wip: work on fetching multiple games on search (it's broken)

bun.lock

···
 {
   "lockfileVersion": 1,
+  "configVersion": 0,
   "workspaces": {
     "": {
       "name": "game-site",
···
         "convex-svelte": "^0.0.12",
         "mode-watcher": "^1.1.0",
         "runed": "^0.37.0",
-        "svelte-placeholder": "^0.0.5",
         "type-fest": "^5.3.1",
       },
       "devDependencies": {
···
         "tw-animate-css": "^1.4.0",
         "typescript": "^5.9.3",
         "typescript-eslint": "^8.47.0",
-        "valibot": "^1.2.0",
         "vite": "^7.2.2",
         "vite-plugin-devtools-json": "^1.0.0",
       },
···
 
     "svelte-eslint-parser": ["svelte-eslint-parser@1.4.0", "", { "dependencies": { "eslint-scope": "^8.2.0", "eslint-visitor-keys": "^4.0.0", "espree": "^10.0.0", "postcss": "^8.4.49", "postcss-scss": "^4.0.9", "postcss-selector-parser": "^7.0.0" }, "peerDependencies": { "svelte": "^3.37.0 || ^4.0.0 || ^5.0.0" }, "optionalPeers": ["svelte"] }, "sha512-fjPzOfipR5S7gQ/JvI9r2H8y9gMGXO3JtmrylHLLyahEMquXI0lrebcjT+9/hNgDej0H7abTyox5HpHmW1PSWA=="],
 
-    "svelte-placeholder": ["svelte-placeholder@0.0.5", "", {}, "sha512-rikHoXeg/FdgOoiyHg6VJF9oW6RWJylVvX/yeQWoitBzADlBxVJaDNMXcKdkatoE9yi0ttxpmXvbbpYvgJfHLQ=="],
-
     "svelte-toolbelt": ["svelte-toolbelt@0.7.1", "", { "dependencies": { "clsx": "^2.1.1", "runed": "^0.23.2", "style-to-object": "^1.0.8" }, "peerDependencies": { "svelte": "^5.0.0" } }, "sha512-HcBOcR17Vx9bjaOceUvxkY3nGmbBmCBBbuWLLEWO6jtmWH8f/QoWmbyUfQZrpDINH39en1b8mptfPQT9VKQ1xQ=="],
 
     "tagged-tag": ["tagged-tag@1.0.0", "", {}, "sha512-yEFYrVhod+hdNyx7g5Bnkkb0G6si8HJurOoOEgC8B/O0uXLHlaey/65KRv6cuWBNhBgHKAROVpc7QyYqE5gFng=="],
···
     "util-deprecate": ["util-deprecate@1.0.2", "", {}, "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw=="],
 
     "uuid": ["uuid@11.1.0", "", { "bin": { "uuid": "dist/esm/bin/uuid" } }, "sha512-0/A9rDy9P7cJ+8w1c9WD9V//9Wj15Ce2MPz8Ri6032usz+NfePxx5AcN3bN+r6ZL6jEo066/yNYB3tn4pQEx+A=="],
-
-    "valibot": ["valibot@1.2.0", "", { "peerDependencies": { "typescript": ">=5" }, "optionalPeers": ["typescript"] }, "sha512-mm1rxUsmOxzrwnX5arGS+U4T25RdvpPjPN4yR0u9pUBov9+zGVtO84tif1eY4r6zWxVxu3KzIyknJy3rxfRZZg=="],
 
     "vite": ["vite@7.2.4", "", { "dependencies": { "esbuild": "^0.25.0", "fdir": "^6.5.0", "picomatch": "^4.0.3", "postcss": "^8.5.6", "rollup": "^4.43.0", "tinyglobby": "^0.2.15" }, "optionalDependencies": { "fsevents": "~2.3.3" }, "peerDependencies": { "@types/node": "^20.19.0 || >=22.12.0", "jiti": ">=1.21.0", "less": "^4.0.0", "lightningcss": "^1.21.0", "sass": "^1.70.0", "sass-embedded": "^1.70.0", "stylus": ">=0.54.8", "sugarss": "^5.0.0", "terser": "^5.16.0", "tsx": "^4.8.1", "yaml": "^2.4.2" }, "optionalPeers": ["@types/node", "jiti", "less", "lightningcss", "sass", "sass-embedded", "stylus", "sugarss", "terser", "tsx", "yaml"], "bin": { "vite": "bin/vite.js" } }, "sha512-NL8jTlbo0Tn4dUEXEsUg8KeyG/Lkmc4Fnzb8JXN/Ykm9G4HNImjtABMJgkQoVjOBN/j2WAwDTRytdqJbZsah7w=="],
 

package.json

···
 		"tw-animate-css": "^1.4.0",
 		"typescript": "^5.9.3",
 		"typescript-eslint": "^8.47.0",
-		"valibot": "^1.2.0",
 		"vite": "^7.2.2",
 		"vite-plugin-devtools-json": "^1.0.0"
 	},
···
 		"convex-svelte": "^0.0.12",
 		"mode-watcher": "^1.1.0",
 		"runed": "^0.37.0",
-		"svelte-placeholder": "^0.0.5",
 		"type-fest": "^5.3.1"
 	}
 }

src/convex/games.ts

···
 import { query, internalMutation, internalQuery } from "./functions";
-
 import type { Doc } from "./_generated/dataModel";
 import { api, internal } from "./_generated/api";
 import type { Merge, Simplify } from "type-fest";
···
 import { Effect, Fiber, pipe } from "effect";
 import { type SGDBGame } from "steamgriddb";
 import { v } from "convex/values";
+import { steamGridDB } from ".";
 
 export const getAll = query({
 	args: {},
···
 			icon: await ctx.storage.getUrl(game.iconId),
 			grid: await ctx.storage.getUrl(game.gridId)
 		}))
+});
+
+export const getAllByIDs = query({
+	args: { ids: v.array(v.id("games")) },
+	handler: (ctx, args) =>
+		Effect.runPromise(
+			pipe(
+				Effect.promise(() => ctx.table("games").getMany(args.ids)),
+				Effect.andThen((results) =>
+					Effect.promise(() =>
+						Promise.all(
+							results
+								.filter((x) => x !== null)
+								.map(async (game) => ({
+									...game,
+									hero: await ctx.storage.getUrl(game.heroId),
+									icon: await ctx.storage.getUrl(game.iconId),
+									grid: await ctx.storage.getUrl(game.gridId)
+								}))
+						)
+					)
+				)
+			)
+		)
 });
 
 export const get = query({
···
 								onTrue: () =>
 									pipe(
 										Effect.promise(() =>
-											ctx.runAction(api.games_node.addGame, { name: args.query })
+											steamGridDB
+												.searchGame(args.query)
+												.then((results) => results.map((game) => game.name))
+										),
+										Effect.andThen((names) =>
+											Effect.promise(() => ctx.runAction(api.games_node.addGames, { names }))
 										),
-										Effect.andThen((gameID) =>
-											Effect.if(gameID !== null, {
+										Effect.andThen((gameIDs) =>
+											Effect.if(gameIDs.length !== 0, {
 												onTrue: () =>
 													pipe(
-														Effect.promise(() => ctx.runQuery(api.games.get, { id: gameID! })),
-														Effect.map((game) => [game!])
+														Effect.promise(() =>
+															ctx.runQuery(api.games.getAllByIDs, { ids: gameIDs })
+														),
+														Effect.andThen((games) => Effect.succeed(games))
 													),
 												onFalse: () => Effect.succeed(null)
 											})

src/convex/games_node.ts

···
 	// 	)
 	// )
 });
+
+export const addGames = action({
+	args: v.object({ names: v.array(v.string()) }),
+	handler: (ctx, args): Promise<Id<"games">[]> =>
+		Effect.runPromise(
+			pipe(
+				Effect.forEach(args.names, (name) =>
+					Effect.promise(() => ctx.runAction(api.games_node.addGame, { name }))
+				),
+				Effect.andThen((games) => Effect.succeed(games.filter((game) => game !== null)))
+			)
+		)
+});

src/hooks.server.ts

···
-import { STEAM_API_KEY } from "$env/static/private";
-import { steamAPI } from "$lib/server/steam-api";
-import type { ServerInit } from "@sveltejs/kit";
-import { api } from "./convex/_generated/api";
-import { convexClient } from "$lib/server";
-import { Data, Effect } from "effect";
+// import { STEAM_API_KEY } from "$env/static/private";
+// import { steamAPI } from "$lib/server/steam-api";
+// import type { ServerInit } from "@sveltejs/kit";
+// import { api } from "./convex/_generated/api";
+// import { convexClient } from "$lib/server";
+// import { Data, Effect } from "effect";
 
-export class SteamAPIError extends Data.TaggedError("SteamAPIError")<{
-	reason: unknown;
-}> {}
+// export class SteamAPIError extends Data.TaggedError("SteamAPIError")<{
+// 	reason: unknown;
+// }> {}
 
-export class AddGameError extends Data.TaggedError("AddGameError")<{
-	reason: unknown;
-}> {}
+// export class AddGameError extends Data.TaggedError("AddGameError")<{
+// 	reason: unknown;
+// }> {}
 
-export const init: ServerInit = () =>
-	Effect.runPromise(
-		Effect.gen(function* () {
-			yield* Effect.logInfo("Server started.");
+// // export const init: ServerInit = () =>
+// 	Effect.runPromise(
+// 		Effect.gen(function* () {
+// 			yield* Effect.logInfo("Server started.");
 
-			const games = yield* Effect.tryPromise({
-				try: () => steamAPI("IStoreService").getAppList({ key: STEAM_API_KEY, maxResults: 100 }),
-				catch: (reason) => new SteamAPIError({ reason })
-			});
+// 			const games = yield* Effect.tryPromise({
+// 				try: () => steamAPI("IStoreService").getAppList({ key: STEAM_API_KEY, maxResults: 100 }),
+// 				catch: (reason) => new SteamAPIError({ reason })
+// 			});
 
-			for (const game of games) {
-				const newGameID = yield* Effect.orElseSucceed(
-					Effect.tryPromise(() => convexClient.action(api.games_node.addGame, { name: game.name })),
-					() => null
-				);
+// 			for (const game of games) {
+// 				const newGameID = yield* Effect.orElseSucceed(
+// 					Effect.tryPromise(() => convexClient.action(api.games_node.addGame, { name: game.name })),
+// 					() => null
+// 				);
 
-				if (!newGameID) {
-					continue;
-				}
+// 				if (!newGameID) {
+// 					continue;
+// 				}
 
-				const newGame = yield* Effect.promise(() =>
-					convexClient.query(api.games.get, { id: newGameID })
-				);
+// 				const newGame = yield* Effect.promise(() =>
+// 					convexClient.query(api.games.get, { id: newGameID })
+// 				);
 
-				yield* Effect.logDebug(`Added ${newGameID}: ${newGame?.name}`);
-			}
-		}).pipe(
-			Effect.catchAllCause((cause) =>
-				Effect.logWarning(
-					`Encountered an error, ignoring and continuing server start... reason: ${cause.toString()}`
-				)
-			)
-		)
-	);
+// 				yield* Effect.logDebug(`Added ${newGameID}: ${newGame?.name}`);
+// 			}
+// 		}).pipe(
+// 			Effect.catchAllCause((cause) =>
+// 				Effect.logWarning(
+// 					`Encountered an error, ignoring and continuing server start... reason: ${cause.toString()}`
+// 				)
+// 			)
+// 		)
+// 	);

src/lib/components/Navbar.svelte

···
 <script lang="ts">
 	import { resolve } from "$app/paths";
+	import ModeSwitcher from "./ModeSwitcher.svelte";
+	import { Debounced, onClickOutside } from "runed";
 	import { useConvexClient } from "convex-svelte";
-	import ModeSwitcher from "./ModeSwitcher.svelte";
 	import { api } from "../../convex/_generated/api";
-	import { onClickOutside, useThrottle } from "runed";
 
 	let searchElement = $state<HTMLElement>();
 	let searchQuery = $state("");
-	let throttledSearchQuery = $state("");
-	let throttleDurationMS = $state(1000);
+	let debouncedSearchQuery = new Debounced(() => searchQuery, 500);
 
 	const convexClient = useConvexClient();
 
 	const searchResults = $derived.by(() => {
-		if (throttledSearchQuery === "") {
+		if (debouncedSearchQuery.pending) {
 			return null;
 		}
 
-		console.log(`Searching for ${throttledSearchQuery}...`);
+		console.log(`Searching for ${debouncedSearchQuery.current}...`);
 
-		return convexClient.action(api.games.search, { query: throttledSearchQuery, limit: null });
+		return convexClient.action(api.games.search, {
+			query: debouncedSearchQuery.current,
+			limit: null
+		});
 	});
 
-	const throttledUpdate = useThrottle(
-		() => (throttledSearchQuery = searchQuery),
-		() => throttleDurationMS
-	);
-
 	onClickOutside(
 		() => searchElement,
-		() => (searchQuery = "")
+		() => {
+			searchQuery = "";
+			debouncedSearchQuery.updateImmediately();
+		}
 	);
 </script>
 
···
 		<details class="dropdown w-full" open={searchQuery !== ""} bind:this={searchElement}>
 			<summary class="input input-md w-full">
 				<span class="label">Search</span>
-				<input
-					type="text"
-					placeholder="Search for a game..."
-					bind:value={
-						() => searchQuery,
-						(v) => {
-							searchQuery = v;
-							throttledUpdate();
-						}
-					}
-				/>
+				<input type="text" placeholder="Search for a game..." bind:value={searchQuery} />
 				<button
 					class="label hover:text-base-content cursor-pointer"
-					onclick={() => (searchQuery = "")}>Clear</button
+					onclick={() => {
+						searchQuery = "";
+						debouncedSearchQuery.updateImmediately();
+					}}>Clear</button
 				>
 			</summary>
 

src/routes/+page.svelte

···
 <script lang="ts">
 	import { resolve } from "$app/paths";
 	import { getGameStoreContext } from "$lib/client/GameStore.svelte";
-	import { ArrowLeft, ArrowRight } from "@lucide/svelte";
+	// import { ArrowLeft, ArrowRight } from "@lucide/svelte";
 	import { ScrollState } from "runed";
-	import Image from "svelte-placeholder";
 
 	type Game = Awaited<typeof gamesStore.games>[number];
 
···
 	const gamesStore = getGameStoreContext();
 	const carouselScroll = new ScrollState({ element: () => carouselElement });
 
-	const scroll = (direction: "left" | "right") => {
-		if (direction === "left") {
-			carouselScroll.x -= 320;
-		} else {
-			carouselScroll.x += 320;
-		}
-	};
+	// const scroll = (direction: "left" | "right") => {
+	// 	if (direction === "left") {
+	// 		carouselScroll.x -= 320;
+	// 	} else {
+	// 		carouselScroll.x += 320;
+	// 	}
+	// };
 </script>
 
 {#snippet gameCard(game: Game)}
 	<div class="align-middle justify-center items-center flex flex-col gap-4 h-fit">
-		<div class="hover-3d w-fit aspect-2/3">
-			<span class="rounded-box">
-				<Image src={game.grid!} alt={game.name} placeholder="skeleton" />
+		<div class="hover-3d w-fit aspect-2/3 hover:z-10">
+			<span class="rounded-box align-middle items-center justify-center flex bg-black">
+				<img src={game.grid!} alt={game.name} placeholder="skeleton" />
 			</span>
 
 			<div></div>
···
 			<div></div>
 		</div>
 
-		<p class="text-lg font-semibold">{game.name}</p>
+		<p class="text-lg text-center font-semibold">{game.name}</p>
 	</div>
 {/snippet}
 
···
 			{/each}
 		{/if}
 
-		<div
-			class="absolute px-5 left-5 right-5 top-1/2 flex -translate-y-1/2 transform justify-between"
-		>
+		<!-- <div class="z-1 px-5 left-5 right-5 top-1/2 flex -translate-y-1/2 transform justify-between">
 			<button class="btn btn-circle bg-base-300/90" onclick={() => scroll("left")}>
 				<ArrowLeft class="w-[1em] h-[1em]" />
 			</button>
 			<button class="btn btn-circle bg-base-300/90" onclick={() => scroll("right")}>
 				<ArrowRight class="w-[1em] h-[1em]" />
 			</button>
-		</div>
+		</div> -->
 	</div>
 </div>

src/routes/game-overview/[sortName]/+page.svelte

···
 <script lang="ts">
-	const { params, data } = $props();
+	const { data } = $props();
 	const game = data.game;
 </script>