feat: Refactor event management components and introduce EventModel for better state handling

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

@@ -25,21 +25,19 @@
     import { Popover, PopoverContent, PopoverTrigger } from "@components/ui/popover";
     import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "@components/ui/command";
     import { teams } from "@components/stores/stores";
+    import type { Team } from "@components/types/team";
+    import type { EventModel } from "./eventmodel.svelte";
 
-    const { event = $bindable() }: { event: ExtendedEvent } = $props();
-
-    let team = $state(event.teams);
+    let { event = $bindable() }: { event: EventModel } = $props();
 
     async function addTeam(value: number) {
         await $eventRepo.updateTeams(event.event.id.toString(), [value]);
-        team = await $eventRepo.listTeams(event.event.id.toString());
-        event.teams = team;
+        event.teams = await $eventRepo.listTeams(event.event.id.toString());
     }
 
     async function removeTeam(value: number) {
         await $eventRepo.deleteTeams(event.event.id.toString(), [value]);
-        team = await $eventRepo.listTeams(event.event.id.toString());
-        event.teams = team;
+        event.teams = await $eventRepo.listTeams(event.event.id.toString());
     }
 
     let teamSearch = $state("");
@@ -54,7 +52,7 @@
         </TableRow>
     </TableHeader>
     <TableBody>
-        {#each team as t (t.id)}
+        {#each event.teams as t (t.id)}
             <TableRow>
                 <TableCell>{t.kuerzel}</TableCell>
                 <TableCell>{t.name}</TableCell>
@@ -63,7 +61,7 @@
                 </TableCell>
             </TableRow>
         {/each}
-        {#if team.length === 0}
+        {#if event.teams.length === 0}
             <TableRow>
                 <TableCell class="text-center col-span-3">No teams available</TableCell>
             </TableRow>
@@ -83,7 +81,7 @@
                     <CommandGroup heading="Teams">
                         {#each $teams
                             .filter((v) => v.name.includes(teamSearch))
-                            .filter((v) => !team.some((k) => k.id === v.id))
+                            .filter((v) => !event.teams.some((k) => k.id === v.id))
                             .filter((v, i) => i < 50) as t (t.id)}
                             <CommandItem value={t.id.toString()} onSelect={() => addTeam(t.id)} keywords={[t.name, t.kuerzel]}>{t.name}</CommandItem>
                         {/each}