Refactor player handling: replace player arrays with IDs, implement PlayerSelector component

src/components/admin/pages/Perms.svelte

@@ -22,17 +22,33 @@
 
     import {Button, Card, Checkbox, Input, Label, Navbar, NavBrand, Radio, Spinner} from "flowbite-svelte";
     import {ArrowLeftOutline} from "flowbite-svelte-icons";
-    import {players} from "@stores/stores.ts";
     import {capitalize} from "../util.ts";
     import {permsRepo} from "@repo/perms.ts";
     import {me} from "@stores/me.ts";
     import SWButton from "@components/styled/SWButton.svelte";
     import SWModal from "@components/styled/SWModal.svelte";
     import {userRepo} from "@repo/user.ts";
+    import {dataRepo} from "@repo/data.ts";
+    import type {Player} from "@type/data";
 
     let search = $state("");
+    let playersList: Player[] = $state([]);
+    let debounceTimer: NodeJS.Timeout;
+
+    function fetchPlayers(searchTerm: string) {
+        clearTimeout(debounceTimer);
+        debounceTimer = setTimeout(async () => {
+            const res = await $dataRepo.queryPlayers(searchTerm || undefined, undefined, undefined, 100, 0, undefined, undefined);
+            playersList = res.players;
+        }, 300);
+    }
+
+    $effect(() => {
+        fetchPlayers(search);
+    });
 
     let selectedPlayer: string | null = $state(null);
+    let selectedPlayerName: string = $state("");
     let playerPerms = $state(loadPlayer(selectedPlayer));
 
     let prefixEdit = $state("PREFIX_NONE");
@@ -99,9 +115,7 @@
         resetPasswordRepeat = "";
         resetPasswordModal = false;
     }
-    let lowerCaseSearch = $derived(search.toLowerCase());
-    let filteredPlayers = $derived($players.filter(value => value.name.toLowerCase().includes(lowerCaseSearch)));
-    let player = $derived($players.find(value => value.uuid === selectedPlayer));
+    
     run(() => {
     playerPerms = loadPlayer(selectedPlayer);
   });
@@ -126,12 +140,15 @@
                     <Label for="user_search" class="mb-2">Search Users...</Label>
                     <Input type="text" id="user_search" placeholder="Name..." bind:value={search}/>
                 </div>
-                {#if filteredPlayers.length < 100}
+                {#if playersList.length < 100}
                     <ul class="flex-1 overflow-scroll">
-                        {#each filteredPlayers as player (player.uuid)}
+                        {#each playersList as player (player.uuid)}
                             <li class="p-4 transition-colors hover:bg-gray-700 cursor-pointer"
                                 class:text-orange-500={player.uuid === selectedPlayer}
-                                onclick={preventDefault(() => selectedPlayer = player.uuid)}>
+                                onclick={preventDefault(() => {
+                                    selectedPlayer = player.uuid;
+                                    selectedPlayerName = player.name;
+                                })}>
                                 {player.name}
                             </li>
                         {/each}
@@ -140,7 +157,7 @@
             </Card>
             <Card class="!max-w-full" style="grid-column: 2/4">
                 {#if selectedPlayer}
-                    <h1 class="text-3xl">{player.name}</h1>
+                    <h1 class="text-3xl">{selectedPlayerName}</h1>
                     {#await permsFuture}
                         <Spinner></Spinner>
                     {:then perms}