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

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

@@ -18,8 +18,11 @@
   -->
 
 <script lang="ts">
-    import {eventRepo} from "@repo/event.ts";
+    import { eventRepo } from "@repo/event.ts";
     import EventView from "@components/moderator/pages/event/EventView.svelte";
+    import type { ExtendedEvent } from "@components/types/event";
+    import { onMount } from "svelte";
+    import { EventModel } from "./eventmodel.svelte";
 
     interface Props {
         params: { id: number };
@@ -28,11 +31,21 @@
     let { params }: Props = $props();
 
     let id = params.id;
-    let event = $eventRepo.getEvent(id.toString());
+    let data: EventModel | undefined = $state(undefined);
+    let loaded = $state(false);
+
+    onMount(async () => {
+        refresh();
+    });
+
+    async function refresh() {
+        data = new EventModel(await $eventRepo.getEvent(id.toString()));
+        loaded = true;
+    }
 </script>
 
-{#await event}
+{#if loaded}
+    <EventView bind:event={data!!} {refresh} />
+{:else}
     <p>Loading...</p>
-{:then data}
-    <EventView event={data} />
-{/await}
+{/if}