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

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

@@ -19,12 +19,10 @@
 
 <script lang="ts">
     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 PlayerSelector from "@components/ui/PlayerSelector.svelte";
 
     const { event }: { event: ExtendedEvent } = $props();
 
@@ -39,8 +37,6 @@
         await $eventRepo.deleteReferees(event.event.id.toString(), [value]);
         referees = await $eventRepo.listReferees(event.event.id.toString());
     }
-
-    let playerSearch = $state("");
 </script>
 
 <Table>
@@ -60,27 +56,7 @@
             </TableRow>
         {/each}
     </TableBody>
-    <Popover>
-        <TableCaption>
-            <PopoverTrigger>
-                <Button>Hinzufügen</Button>
-            </PopoverTrigger>
-        </TableCaption>
-        <PopoverContent class="p-0">
-            <Command shouldFilter={false}>
-                <CommandInput bind:value={playerSearch} placeholder="Search players..." />
-                <CommandList>
-                    <CommandEmpty>No Players found :(</CommandEmpty>
-                    <CommandGroup heading="Players">
-                        {#each $players
-                            .filter((v) => v.name.toLowerCase().includes(playerSearch.toLowerCase()))
-                            .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>
+    <TableCaption>
+        <PlayerSelector placeholder="Hinzufügen" onSelect={(player) => addReferee(player.uuid)} />
+    </TableCaption>
 </Table>

src/components/moderator/pages/logs/AuditLog.svelte

@@ -11,10 +11,10 @@
     import { Input } from "@components/ui/input";
     import { Popover, PopoverContent, PopoverTrigger } from "@components/ui/popover";
     import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "@components/ui/command";
-    import { players } from "@components/stores/stores";
     import { Check } from "lucide-svelte";
     import { cn } from "@components/utils";
     import DateTimePicker from "@components/ui/datetime-picker/DateTimePicker.svelte";
+    import PlayerSelector from "@components/ui/PlayerSelector.svelte";
 
     let debounceTimer: NodeJS.Timeout;
     const debounce = <T,>(value: T, func: (value: T) => void) => {
@@ -27,11 +27,11 @@
     let actionText = $state("");
     let serverText = $state("");
     let fullText = $state("");
-    let actors = $state<string[]>([]);
+    let actors = $state<number[]>([]);
     let actionTypes = $state<string[]>([]);
     let timeGreater = $state<ZonedDateTime>(now("Europe/Berlin").subtract({ months: 1 }));
     let timeLess = $state<ZonedDateTime>(now("Europe/Berlin"));
-    let serverOwner = $state<string[]>([]);
+    let serverOwner = $state<number[]>([]);
     let velocity = $state(false);
     let sorting = $state("DESC");
 
@@ -118,56 +118,12 @@
             </SelectContent>
         </Select>
 
-        <Popover>
-            <PopoverTrigger>
-                <Button variant="outline" class="mr-2 {actors && 'text-muted-foreground'}">Spieler Filter ({actors.length})</Button>
-            </PopoverTrigger>
-            <PopoverContent class="p-0">
-                <Command shouldFilter={false}>
-                    <CommandInput bind:value={playerSearch} placeholder="Search players..." />
-                    <CommandList>
-                        <CommandEmpty>No Players found :(</CommandEmpty>
-                        <CommandGroup heading="Players">
-                            {#each $players.filter((v) => v.name.toLowerCase().includes(playerSearch.toLowerCase())).filter((v, i) => i < 50) as player (player.uuid)}
-                                <CommandItem
-                                    value={player.name}
-                                    onSelect={() => (actors = actors.includes(player.uuid) ? actors.filter((v) => v !== player.uuid) : [...actors, player.uuid])}
-                                    keywords={[player.uuid]}
-                                >
-                                    <Check class={cn("mr-2 size-4", !actors.includes(player.uuid) && "text-transparent")} />
-                                    {player.name}
-                                </CommandItem>
-                            {/each}
-                        </CommandGroup>
-                    </CommandList>
-                </Command>
-            </PopoverContent>
-        </Popover>
-        <Popover>
-            <PopoverTrigger>
-                <Button variant="outline" class="mr-2 {serverOwner && 'text-muted-foreground'}">Server Owner ({serverOwner.length})</Button>
-            </PopoverTrigger>
-            <PopoverContent class="p-0">
-                <Command shouldFilter={false}>
-                    <CommandInput bind:value={ownerSearch} placeholder="Search players..." />
-                    <CommandList>
-                        <CommandEmpty>No Players found :(</CommandEmpty>
-                        <CommandGroup heading="Players">
-                            {#each $players.filter((v) => v.name.toLowerCase().includes(ownerSearch.toLowerCase())).filter((v, i) => i < 50) as player (player.uuid)}
-                                <CommandItem
-                                    value={player.name}
-                                    onSelect={() => (serverOwner = serverOwner.includes(player.uuid) ? serverOwner.filter((v) => v !== player.uuid) : [...serverOwner, player.uuid])}
-                                    keywords={[player.uuid]}
-                                >
-                                    <Check class={cn("mr-2 size-4", !serverOwner.includes(player.uuid) && "text-transparent")} />
-                                    {player.name}
-                                </CommandItem>
-                            {/each}
-                        </CommandGroup>
-                    </CommandList>
-                </Command>
-            </PopoverContent>
-        </Popover>
+        <div class="mr-2">
+            <PlayerSelector bind:value={actors} multiple placeholder="Spieler Filter" />
+        </div>
+        <div class="mr-2">
+            <PlayerSelector bind:value={serverOwner} multiple placeholder="Server Owner" />
+        </div>
         <div class="mr-2">
             <DateTimePicker bind:value={timeGreater} />
         </div>

src/components/moderator/pages/players/PermissionsDropdown.svelte

@@ -18,7 +18,7 @@
   -->
 
 <script lang="ts">
-    import {permissions, players} from "@stores/stores.ts";
+    import {permissions} from "@stores/stores.ts";
     import {Select, SelectContent, SelectItem} from "@components/ui/select";
     import {SelectTrigger} from "@components/ui/select/index.js";
     import {permsRepo} from "@repo/perms.ts";

src/components/moderator/pages/players/Players.svelte

@@ -17,16 +17,132 @@
   -   along with this program.  If not, see <https://www.gnu.org/licenses/>.
   -->
 
-<script>
-    import Table from "@components/moderator/pages/players/Table.svelte";
+<script lang="ts">
+    import { createSvelteTable, FlexRender } from "@components/ui/data-table";
+    import { columns } from "./columns";
+    import { getCoreRowModel, getPaginationRowModel, type PaginationState } from "@tanstack/table-core";
+    import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@components/ui/table";
+    import { dataRepo } from "@repo/data";
+    import type { Player } from "@type/data";
+    import { Button } from "@components/ui/button";
+    import { Select, SelectContent, SelectItem, SelectTrigger } from "@components/ui/select";
+    import { Input } from "@components/ui/input";
 
-    import {dataRepo} from "@repo/data";
+    let debounceTimer: NodeJS.Timeout;
+    const debounce = <T,>(value: T, func: (value: T) => void) => {
+        clearTimeout(debounceTimer);
+        debounceTimer = setTimeout(() => {
+            func(value);
+        }, 300);
+    };
 
-    let playersFuture = $state($dataRepo.getPlayers())
+    let search = $state("");
+
+    let pagination = $state<PaginationState>({
+        pageIndex: 0,
+        pageSize: 25,
+    });
+
+    let data = $state<Player[]>([]);
+    let rows = $state(0);
+
+    $effect(() => {
+        $dataRepo.queryPlayers(search || undefined, undefined, undefined, pagination.pageSize, pagination.pageIndex, true, true).then((res) => {
+            data = res.entries;
+            rows = res.rows;
+        });
+    });
+
+    const table = createSvelteTable({
+        get data() {
+            return data;
+        },
+        columns,
+        state: {
+            get pagination() {
+                return pagination;
+            },
+        },
+        onPaginationChange: (updater) => {
+            if (typeof updater === "function") {
+                pagination = updater(pagination);
+            } else {
+                pagination = updater;
+            }
+        },
+        getCoreRowModel: getCoreRowModel(),
+        getPaginationRowModel: getPaginationRowModel(),
+        manualPagination: true,
+        get rowCount() {
+            return rows;
+        },
+    });
 </script>
 
-{#await playersFuture}
-    <p>Loading...</p>
-{:then players}
-    <Table data={players} />
-{/await}
+<div class="p-4">
+    <div class="rounded border mb-4 p-2 flex lg:flex-row flex-col">
+        <Input
+            class="w-48 mr-2"
+            placeholder="Search players..."
+            value={search}
+            onchange={(e) =>
+                debounce(e.currentTarget.value, (v) => {
+                    search = v;
+                })}
+            oninput={(e) =>
+                debounce(e.currentTarget.value, (v) => {
+                    search = v;
+                })}
+        />
+    </div>
+    <div class="rounded border">
+        <Table>
+            <TableHeader>
+                {#each table.getHeaderGroups() as headerGroup (headerGroup.id)}
+                    <TableRow>
+                        {#each headerGroup.headers as header (header.id)}
+                            <TableHead colspan={header.colSpan}>
+                                {#if !header.isPlaceholder}
+                                    <FlexRender content={header.column.columnDef.header} context={header.getContext()} />
+                                {/if}
+                            </TableHead>
+                        {/each}
+                    </TableRow>
+                {/each}
+            </TableHeader>
+            <TableBody>
+                {#each table.getRowModel().rows as row (row.id)}
+                    <TableRow>
+                        {#each row.getVisibleCells() as cell (cell.id)}
+                            <TableCell class="p-2 align-top">
+                                <FlexRender content={cell.column.columnDef.cell} context={cell.getContext()} />
+                            </TableCell>
+                        {/each}
+                    </TableRow>
+                {:else}
+                    <TableRow>
+                        <TableCell colspan={columns.length} class="h-24 text-center">No players found.</TableCell>
+                    </TableRow>
+                {/each}
+            </TableBody>
+        </Table>
+    </div>
+
+    <div class="flex items-center justify-end space-x-2 py-4">
+        <div>
+            <Select type="single" value={pagination.pageSize.toString()} onValueChange={(e) => (pagination = { pageSize: +e, pageIndex: 0 })}>
+                <SelectTrigger>{pagination.pageSize}</SelectTrigger>
+                <SelectContent>
+                    <SelectItem value="5">5</SelectItem>
+                    <SelectItem value="10">10</SelectItem>
+                    <SelectItem value="25">25</SelectItem>
+                    <SelectItem value="50">50</SelectItem>
+                    <SelectItem value="100">100</SelectItem>
+                    <SelectItem value="200">200</SelectItem>
+                </SelectContent>
+            </Select>
+        </div>
+        <Button variant="outline" size="sm" onclick={() => table.previousPage()} disabled={!table.getCanPreviousPage()}>Previous</Button>
+        <Button variant="outline" size="sm" onclick={() => table.nextPage()} disabled={!table.getCanNextPage()}>Next</Button>
+    </div>
+</div>

src/components/moderator/pages/players/Table.svelte

@@ -1,174 +0,0 @@
-<!--
-  -   This file is a part of the SteamWar software.
-  -
-  -   Copyright (C) 2025 SteamWar.de-Serverteam
-  -
-  -   This program is free software: you can redistribute it and/or modify
-  -   it under the terms of the GNU Affero General Public License as published by
-  -   the Free Software Foundation, either version 3 of the License, or
-  -   (at your option) any later version.
-  -
-  -   This program is distributed in the hope that it will be useful,
-  -   but WITHOUT ANY WARRANTY; without even the implied warranty of
-  -   MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
-  -   GNU Affero General Public License for more details.
-  -
-  -   You should have received a copy of the GNU Affero General Public License
-  -   along with this program.  If not, see <https://www.gnu.org/licenses/>.
-  -->
-
-<script lang="ts">
-    import {
-        type ColumnFiltersState,
-        getCoreRowModel, getFilteredRowModel,
-        getPaginationRowModel, getSortedRowModel,
-        type PaginationState,
-        type SortingState,
-    } from "@tanstack/table-core";
-    import {
-        createSvelteTable,
-        FlexRender,
-    } from "@components/ui/data-table/index";
-    import {Table, TableBody, TableCell, TableHead, TableHeader, TableRow} from "@components/ui/table";
-    import {Button} from "@components/ui/button";
-    import {Input} from "@components/ui/input";
-    import {Select} from "@components/ui/select";
-    import {SelectContent, SelectItem, SelectTrigger} from "@components/ui/select/index.js";
-    import type {Player} from "@type/data";
-    import { columns } from "./columns";
-
-    let { data }: { data: Player[] } = $props();
-
-    let pagination = $state<PaginationState>({ pageIndex: 0, pageSize: 25 });
-    let sorting = $state<SortingState>([]);
-    let columnFilters = $state<ColumnFiltersState>([]);
-
-    const table = createSvelteTable({
-        get data() {
-            return data;
-        },
-        state: {
-            get pagination() {
-                return pagination;
-            },
-            get sorting() {
-                return sorting;
-            },
-            get columnFilters() {
-                return columnFilters;
-            },
-        },
-        onPaginationChange: (updater) => {
-            if (typeof updater === "function") {
-                pagination = updater(pagination);
-            } else {
-                pagination = updater;
-            }
-        },
-        onSortingChange: (updater) => {
-            if (typeof updater === "function") {
-                sorting = updater(sorting);
-            } else {
-                sorting = updater;
-            }
-        },
-        onColumnFiltersChange: (updater) => {
-            if (typeof updater === "function") {
-                columnFilters = updater(columnFilters);
-            } else {
-                columnFilters = updater;
-            }
-        },
-        columns,
-        getCoreRowModel: getCoreRowModel(),
-        getPaginationRowModel: getPaginationRowModel(),
-        getSortedRowModel: getSortedRowModel(),
-        getFilteredRowModel: getFilteredRowModel(),
-    });
-</script>
-
-<div class="rounded-md border m-4">
-    <div class="flex items-center p-4 border-b">
-        <Input
-                placeholder="Filter Players..."
-                value={(table.getColumn("name")?.getFilterValue() as string) ?? ""}
-                onchange={(e) => {
-        table.getColumn("name")?.setFilterValue(e.currentTarget.value);
-      }}
-                oninput={(e) => {
-        table.getColumn("name")?.setFilterValue(e.currentTarget.value);
-      }}
-                class="max-w-sm"
-        />
-        <div class="flex items-center px-4">
-            <Select type="single" value={pagination.pageSize.toString()} onValueChange={(e) => pagination = { pageSize: +e, pageIndex: 0 }}>
-                <SelectTrigger>{pagination.pageSize}</SelectTrigger>
-                <SelectContent>
-                    <SelectItem value="5">5</SelectItem>
-                    <SelectItem value="10">10</SelectItem>
-                    <SelectItem value="25">25</SelectItem>
-                    <SelectItem value="50">50</SelectItem>
-                    <SelectItem value="100">100</SelectItem>
-                    <SelectItem value="200">200</SelectItem>
-                </SelectContent>
-            </Select>
-        </div>
-    </div>
-    <Table>
-        <TableHeader>
-            {#each table.getHeaderGroups() as headerGroup (headerGroup.id)}
-                <TableRow>
-                    {#each headerGroup.headers as header (header.id)}
-                        <TableHead>
-                            {#if !header.isPlaceholder}
-                                <FlexRender
-                                        content={header.column.columnDef.header}
-                                        context={header.getContext()}
-                                />
-                            {/if}
-                        </TableHead>
-                    {/each}
-                </TableRow>
-            {/each}
-        </TableHeader>
-        <TableBody>
-            {#each table.getRowModel().rows as row (row.id)}
-                <TableRow data-state={row.getIsSelected() && "selected"}>
-                    {#each row.getVisibleCells() as cell (cell.id)}
-                        <TableCell>
-                            <FlexRender
-                                    content={cell.column.columnDef.cell}
-                                    context={cell.getContext()}
-                            />
-                        </TableCell>
-                    {/each}
-                </TableRow>
-            {:else}
-                <TableRow>
-                    <TableCell colspan={columns.length} class="h-24 text-center">
-                        No results.
-                    </TableCell>
-                </TableRow>
-            {/each}
-        </TableBody>
-    </Table>
-    <div class="flex items-center justify-end space-x-2 p-4 border-t">
-        <Button
-                variant="outline"
-                size="sm"
-                onclick={() => table.previousPage()}
-                disabled={!table.getCanPreviousPage()}
-        >
-            Previous
-        </Button>
-        <span>{pagination.pageIndex + 1}/{table.getPageCount()}</span>
-        <Button
-                variant="outline"
-                size="sm"
-                onclick={() => table.nextPage()}
-                disabled={!table.getCanNextPage()}
-        >
-            Next
-        </Button>
-    </div>
-</div>