refactor: clean up imports and improve player search functionality in RefereesList

src/components/moderator/pages/event/RefereesList.svelte

@@ -18,38 +18,35 @@
   -->
 
 <script lang="ts">
-    import {Table, TableBody, TableCell, TableHead, TableHeader, TableRow} from "@components/ui/table/index.js";
-    import {
-        Command,
-        CommandEmpty,
-        CommandGroup,
-        CommandInput,
-        CommandItem,
-        CommandList,
-    } from "@components/ui/command/index.js";
+    import { Table, TableBody, TableCell, TableCaption, TableHead, TableHeader, TableRow } from "@components/ui/table";
+    import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "@components/ui/command/index.js";
     import { Popover, PopoverContent, PopoverTrigger } from "@components/ui/popover/index.js";
     import { Button } from "@components/ui/button/index.js";
     import type { ExtendedEvent } from "@type/event.ts";
     import { eventRepo } from "@repo/event";
-    import { players } from "@stores/stores"
+    import { players } from "@stores/stores";
 
-    const {
-        event
-    }: { event: ExtendedEvent } = $props();
+    const { event }: { event: ExtendedEvent } = $props();
 
-    let referees = $state(event.event.referees)
+    let referees = $state(event.event.referees);
 
     async function addReferee(value: string) {
-        referees = (await $eventRepo.updateEvent(event.event.id.toString(), {
-            addReferee: [value]
-        })).referees;
+        referees = (
+            await $eventRepo.updateEvent(event.event.id.toString(), {
+                addReferee: [value],
+            })
+        ).referees;
     }
 
     async function removeReferee(value: string) {
-        referees = (await $eventRepo.updateEvent(event.event.id.toString(), {
-            removeReferee: [value]
-        })).referees;
+        referees = (
+            await $eventRepo.updateEvent(event.event.id.toString(), {
+                removeReferee: [value],
+            })
+        ).referees;
     }
+
+    let playerSearch = $state("");
 </script>
 
 <Table>
@@ -69,24 +66,27 @@
             </TableRow>
         {/each}
     </TableBody>
-</Table>
     <Popover>
+        <TableCaption>
             <PopoverTrigger>
-        <Button>
-            Add
-        </Button>
+                <Button>Add</Button>
             </PopoverTrigger>
+        </TableCaption>
         <PopoverContent class="p-0">
-        <Command>
-            <CommandInput placeholder="Search players..." />
+            <Command shouldFilter={false}>
+                <CommandInput bind:value={playerSearch} placeholder="Search players..." />
                 <CommandList>
                     <CommandEmpty>No Players found :(</CommandEmpty>
                     <CommandGroup heading="Players">
-                    {#each $players.filter(v => v.perms.length > 0).filter(v => !referees.some(k => k.uuid === v.uuid)) as player (player.uuid)}
-                        <CommandItem value={player.uuid} onSelect={() => addReferee(player.uuid)}>{player.name}</CommandItem>
+                        {#each $players
+                            .filter((v) => v.name.includes(playerSearch))
+                            .filter((v, i) => i < 50)
+                            .filter((v) => !referees.some((k) => k.uuid === v.uuid)) as player (player.uuid)}
+                            <CommandItem value={player.name} onSelect={() => addReferee(player.uuid)} keywords={[player.uuid]}>{player.name}</CommandItem>
                         {/each}
                     </CommandGroup>
                 </CommandList>
             </Command>
         </PopoverContent>
     </Popover>
+</Table>