Refactor referee management into standalone component

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

@@ -20,80 +20,27 @@
 <script lang="ts">
     import type {ExtendedEvent} from "@type/event.ts";
     import EventEdit from "@components/moderator/pages/event/EventEdit.svelte";
-    import {Table, TableBody, TableCell, TableHead, TableHeader, TableRow} from "@components/ui/table/index.js";
-    import {Button} from "@components/ui/button";
-    import {Popover, PopoverTrigger} from "@components/ui/popover";
-    import {PopoverContent} from "@components/ui/popover/index.js";
-    import {CommandEmpty, CommandGroup, CommandInput, CommandList, CommandItem, Command} from "@components/ui/command";
-    import {players} from "@stores/stores.ts";
-    import {eventRepo} from "@repo/event.ts";
     import EventFightList from "@components/moderator/pages/event/EventFightList.svelte";
+    import RefereesList from "@components/moderator/pages/event/RefereesList.svelte";
 
     const {
         event
     }: { event: ExtendedEvent } = $props();
-
-    let referees = $state(event.event.referees)
-
-    async function addReferee(value: string) {
-        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;
-    }
 </script>
 
 <div class="flex flex-col m-4 p-4 rounded-md border gap-4">
     <div class="flex flex-col md:flex-row">
-        <div class="w-1/2">
+        <div class="md:w-1/3">
             <h1 class="text-2xl font-bold mb-4">{event.event.name}</h1>
             <EventEdit event={event.event} />
         </div>
-        <div class="ml-4 pl-4 border-l w-1/2">
+        <div class="md:ml-4 md:pl-4 md:border-l md:w-1/3">
+            <h2>Teams</h2>
+
+        </div>
+        <div class="md:ml-4 md:pl-4 md:border-l md:w-1/3">
             <h2>Referees</h2>
-            <Table>
+            <RefereesList event={event} />
-                <TableHeader>
-                    <TableRow>
-                        <TableHead>Name</TableHead>
-                        <TableHead>Actions</TableHead>
-                    </TableRow>
-                </TableHeader>
-                <TableBody>
-                    {#each referees as referee (referee.uuid)}
-                        <TableRow>
-                            <TableCell>{referee.name}</TableCell>
-                            <TableCell>
-                                <Button onclick={() => removeReferee(referee.uuid)}>Remove</Button>
-                            </TableCell>
-                        </TableRow>
-                    {/each}
-                </TableBody>
-            </Table>
-            <Popover>
-                <PopoverTrigger>
-                    <Button>
-                        Add
-                    </Button>
-                </PopoverTrigger>
-                <PopoverContent class="p-0">
-                    <Command>
-                        <CommandInput 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}
-                            </CommandGroup>
-                        </CommandList>
-                    </Command>
-                </PopoverContent>
-            </Popover>
         </div>
     </div>
     <EventFightList data={event} />

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

@@ -0,0 +1,92 @@
+<!--
+  -   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 {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 {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"
+
+    const {
+        event
+    }: { event: ExtendedEvent } = $props();
+
+    let referees = $state(event.event.referees)
+
+    async function addReferee(value: string) {
+        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;
+    }
+</script>
+
+<Table>
+    <TableHeader>
+        <TableRow>
+            <TableHead>Name</TableHead>
+            <TableHead>Actions</TableHead>
+        </TableRow>
+    </TableHeader>
+    <TableBody>
+        {#each referees as referee (referee.uuid)}
+            <TableRow>
+                <TableCell>{referee.name}</TableCell>
+                <TableCell>
+                    <Button onclick={() => removeReferee(referee.uuid)}>Remove</Button>
+                </TableCell>
+            </TableRow>
+        {/each}
+    </TableBody>
+</Table>
+<Popover>
+    <PopoverTrigger>
+        <Button>
+            Add
+        </Button>
+    </PopoverTrigger>
+    <PopoverContent class="p-0">
+        <Command>
+            <CommandInput 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}
+                </CommandGroup>
+            </CommandList>
+        </Command>
+    </PopoverContent>
+</Popover>