feat: Refactor connection rendering logic for improved layout and offset handling

Reviewed-on: #20

.eslintrc.json

@@ -37,10 +37,6 @@
             "error",
             4
         ],
-        "linebreak-style": [
-            "error",
-            "unix"
-        ],
         "quotes": [
             "error",
             "double"

astro.config.mjs

@@ -1,4 +1,4 @@
-import {defineConfig, sharpImageService} from "astro/config";
+import { defineConfig, sharpImageService } from "astro/config";
 import svelte from "@astrojs/svelte";
 import tailwind from "@astrojs/tailwind";
 import configureI18n from "./astro-i18n.adapter";
@@ -8,6 +8,8 @@ import robotsTxt from "astro-robots-txt";
 import path from "node:path";
 import mdx from "@astrojs/mdx";
 
+import starlight from "@astrojs/starlight";
+
 // https://astro.build/config
 export default defineConfig({
     output: "static",
@@ -18,14 +20,40 @@ export default defineConfig({
     site: "https://steamwar.de",
     integrations: [
         svelte(),
+        starlight({
+            disable404Route: true,
+            title: "SteamWar Docs",
+            defaultLocale: "de",
+            logo: {
+                src: "./src/images/logo.png",
+            },
+            social: [
+                { icon: "discord", label: "Discord", href: "https://steamwar.de/discord" },
+                { icon: "document", label: "Gitea", href: "https://git.steamwar.de" },
+            ],
+            sidebar: [
+                { label: "Startseite", slug: "docs" },
+                { label: "Bau", badge: "WIP", items: ["docs/bausystem", { label: "Script System", items: ["docs/bausystem/script"] }] },
+                { label: "Kampfsystem", badge: "WIP", items: ["docs/fightsystem"] },
+                { label: "Minigames", badge: "WIP", items: ["docs/minigames"] },
+                { label: "Schematicsystem", badge: "WIP", items: ["docs/schematicsystem"] },
+                { label: "API", badge: "WIP", items: ["docs/api"] },
+            ],
+            editLink: {
+                baseUrl: "https://git.steamwar.de/SteamWar/Website/src/branch/master/",
+            },
+        }),
         tailwind({
             configFile: "./tailwind.config.js",
+            applyBaseStyles: false,
         }),
         configureI18n(),
         sitemap({
             i18n: {
-                defaultLocale: "en", locales: {
-                    en: "en-US", de: "de-DE",
+                defaultLocale: "en",
+                locales: {
+                    en: "en-US",
+                    de: "de-DE",
                 },
             },
         }),
@@ -49,7 +77,7 @@ export default defineConfig({
                 { userAgent: "omgili", disallow: "/" },
                 { userAgent: "OmigliBot", disallow: "/" },
                 { userAgent: "PerplexityBot", disallow: "/" },
-                { userAgent: "Timpibot", disallow: "/" }
+                { userAgent: "Timpibot", disallow: "/" },
             ],
         }),
         mdx(),
@@ -66,8 +94,8 @@ export default defineConfig({
                 "@layouts": path.resolve("./src/layouts"),
                 "@repo": path.resolve("./src/components/repo"),
                 "@stores": path.resolve("./src/components/stores"),
-                "$lib": path.resolve("./src"),
+                $lib: path.resolve("./src"),
             },
         },
     },
-});
+});

components.json

@@ -1,8 +1,6 @@
 {
 	"$schema": "https://shadcn-svelte.com/schema.json",
-	"style": "default",
 	"tailwind": {
-		"config": "tailwind.config.js",
 		"css": "src\\styles\\app.css",
 		"baseColor": "slate"
 	},
@@ -10,8 +8,9 @@
 		"components": "$lib/components",
 		"utils": "$lib/components/utils",
 		"ui": "$lib/components/ui",
-		"hooks": "$lib/hooks"
+		"hooks": "$lib/hooks",
+		"lib": "$lib"
 	},
 	"typescript": true,
-	"registry": "https://next.shadcn-svelte.com/registry"
+	"registry": "https://tw3.shadcn-svelte.com/registry/default"
 }

package.json

@@ -1,83 +1,95 @@
 {
-	"name": "steamwar-website",
-	"type": "module",
-	"version": "0.0.1",
-	"scripts": {
-		"dev": "astro dev",
-		"start": "astro dev",
-		"build": "astro build",
-		"preview": "astro preview",
-		"astro": "astro",
-		"i18n:extract": "astro-i18n extract",
-		"i18n:generate:pages": "astro-i18n generate:pages --purge",
-		"i18n:generate:types": "astro-i18n generate:types",
-		"i18n:sync": "pnpm run i18n:generate:pages && pnpm run i18n:generate:types",
-		"clean:dist": "rm -rf dist",
-		"clean:node_modules": "rm -rf node_modules",
-		"ci": "pnpm install && pnpm run i18n:sync && pnpm run build"
-	},
-	"devDependencies": {
-		"@astrojs/svelte": "^7.0.4",
-		"@astrojs/tailwind": "^5.1.5",
-		"@astropub/icons": "^0.2.0",
-		"@internationalized/date": "^3.7.0",
-		"@lucide/svelte": "^0.488.0",
-		"@types/color": "^4.2.0",
-		"@types/node": "^22.9.3",
-		"@types/three": "^0.170.0",
-		"@typescript-eslint/eslint-plugin": "^8.15.0",
-		"@typescript-eslint/parser": "^8.15.0",
-		"autoprefixer": "^10.4.20",
-		"bits-ui": "1.3.4",
-		"clsx": "^2.1.1",
-		"cmdk-sv": "^0.0.18",
-		"cssnano": "^7.0.6",
-		"embla-carousel-svelte": "^8.5.2",
-		"esbuild": "^0.24.0",
-		"eslint": "^9.15.0",
-		"eslint-plugin-astro": "^1.3.1",
-		"eslint-plugin-jsx-a11y": "^6.10.2",
-		"eslint-plugin-svelte": "^2.46.0",
-		"formsnap": "1.0.1",
-		"lucide-svelte": "^0.476.0",
-		"mode-watcher": "^0.5.1",
-		"paneforge": "^0.0.6",
-		"postcss-nesting": "^13.0.1",
-		"sass": "^1.81.0",
-		"svelte": "^5.16.0",
-		"svelte-sonner": "^0.3.28",
-		"tailwind-merge": "^2.5.5",
-		"tailwind-variants": "^0.3.1",
-		"tailwindcss": "^3.4.15",
-		"three": "^0.170.0",
-		"typescript": "^5.7.2",
-		"vaul-svelte": "^0.3.2",
-		"zod": "^3.23.8"
-	},
-	"dependencies": {
-		"@astrojs/mdx": "^4.0.7",
-		"@astrojs/sitemap": "^3.2.1",
-		"@codemirror/commands": "^6.8.0",
-		"@codemirror/lang-json": "^6.0.1",
-		"@ddietr/codemirror-themes": "^1.4.4",
-		"@tanstack/table-core": "^8.21.2",
-		"astro": "^5.1.8",
-		"astro-i18n": "^2.2.4",
-		"astro-robots-txt": "^1.0.0",
-		"astro-seo": "^0.8.4",
-		"chart.js": "^4.4.6",
-		"chartjs-adapter-dayjs-4": "^1.0.4",
-		"chartjs-adapter-moment": "^1.0.1",
-		"color": "^4.2.3",
-		"dayjs": "^1.11.13",
-		"easymde": "^2.18.0",
-		"flowbite": "^2.5.2",
-		"flowbite-svelte": "^0.47.3",
-		"flowbite-svelte-icons": "^2.0.2",
-		"qs": "^6.13.1",
-		"sharp": "^0.33.5",
-		"svelte-awesome": "^3.3.5",
-		"svelte-codemirror-editor": "^1.4.1",
-		"svelte-spa-router": "^4.0.1"
-	}
+    "name": "steamwar-website",
+    "type": "module",
+    "version": "0.0.1",
+    "scripts": {
+        "dev": "astro dev",
+        "start": "astro dev",
+        "build": "astro build",
+        "preview": "astro preview",
+        "astro": "astro",
+        "i18n:extract": "astro-i18n extract",
+        "i18n:generate:pages": "astro-i18n generate:pages --purge",
+        "i18n:generate:types": "astro-i18n generate:types",
+        "i18n:sync": "pnpm run i18n:generate:pages && pnpm run i18n:generate:types",
+        "clean:dist": "rm -rf dist",
+        "clean:node_modules": "rm -rf node_modules",
+        "ci": "pnpm install && pnpm run i18n:sync && pnpm run build"
+    },
+    "devDependencies": {
+        "@astrojs/svelte": "^7.1.0",
+        "@astrojs/tailwind": "^5.1.5",
+        "@astropub/icons": "^0.2.0",
+        "@internationalized/date": "^3.8.1",
+        "@lucide/svelte": "^0.488.0",
+        "@types/color": "^4.2.0",
+        "@types/js-yaml": "^4.0.9",
+        "@types/node": "^22.15.23",
+        "@types/three": "^0.170.0",
+        "@typescript-eslint/eslint-plugin": "^8.33.0",
+        "@typescript-eslint/parser": "^8.33.0",
+        "autoprefixer": "^10.4.21",
+        "bits-ui": "1.3.4",
+        "clsx": "^2.1.1",
+        "cmdk-sv": "^0.0.18",
+        "cssnano": "^7.0.7",
+        "embla-carousel-svelte": "^8.6.0",
+        "esbuild": "^0.24.2",
+        "eslint": "^9.27.0",
+        "eslint-plugin-astro": "^1.3.1",
+        "eslint-plugin-jsx-a11y": "^6.10.2",
+        "eslint-plugin-svelte": "^2.46.1",
+        "formsnap": "1.0.1",
+        "lucide-svelte": "^0.476.0",
+        "mode-watcher": "^0.5.1",
+        "paneforge": "^0.0.6",
+        "postcss-nesting": "^13.0.1",
+        "sass": "^1.89.0",
+        "svelte": "^5.33.4",
+        "svelte-sonner": "^0.3.28",
+        "tailwind-merge": "^2.6.0",
+        "tailwind-variants": "^0.3.1",
+        "tailwindcss": "^3.4.17",
+        "three": "^0.170.0",
+        "typescript": "^5.8.3",
+        "vaul-svelte": "^0.3.2",
+        "zod": "^3.25.31"
+    },
+    "dependencies": {
+        "@astrojs/mdx": "^4.3.0",
+        "@astrojs/sitemap": "^3.4.0",
+        "@astrojs/starlight": "^0.34.4",
+        "@astrojs/starlight-tailwind": "^4.0.1",
+        "@codemirror/commands": "^6.8.1",
+        "@codemirror/lang-json": "^6.0.1",
+        "@codemirror/view": "^6.36.8",
+        "@ddietr/codemirror-themes": "^1.5.1",
+        "@tanstack/table-core": "^8.21.3",
+        "astro": "5.7.14",
+        "astro-i18n": "^2.2.4",
+        "astro-robots-txt": "^1.0.0",
+        "astro-seo": "^0.8.4",
+        "chart.js": "^4.4.9",
+        "chartjs-adapter-dayjs-4": "^1.0.4",
+        "chartjs-adapter-moment": "^1.0.1",
+        "codemirror": "^6.0.1",
+        "color": "^4.2.3",
+        "dayjs": "^1.11.13",
+        "easymde": "^2.20.0",
+        "flowbite": "^2.5.2",
+        "flowbite-svelte": "^0.47.4",
+        "flowbite-svelte-icons": "^2.2.0",
+        "js-yaml": "^4.1.0",
+        "qs": "^6.14.0",
+        "sharp": "^0.33.5",
+        "svelte-awesome": "^3.3.5",
+        "svelte-spa-router": "^4.0.1"
+    },
+    "pnpm": {
+        "onlyBuiltDependencies": [
+            "@parcel/watcher",
+            "esbuild",
+            "sharp"
+        ]
+    }
 }

src/components/FightStatistics.svelte

@@ -1,7 +1,7 @@
 <!--
   -   This file is a part of the SteamWar software.
   -
-  -   Copyright (C) 2023 SteamWar.de-Serverteam
+  -   Copyright (C) 2026 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

src/components/FightTable.svelte

@@ -19,25 +19,27 @@
   -->
 
 <script lang="ts">
-    import {window} from "./utils.ts";
-    import {astroI18n, t} from "astro-i18n";
-    import type {EventFight, ExtendedEvent} from "@type/event";
+    import { window } from "./utils.ts";
+    import { astroI18n, t } from "astro-i18n";
+    import type { EventFight, ExtendedEvent } from "@type/event";
     import "@styles/table.css";
 
     export let event: ExtendedEvent;
-    export let group: string;
+    export let group: number;
     export let rows: number = 1;
 
     function getWinner(fight: EventFight) {
+        if (!fight.hasFinished) {
+            return t("announcements.table.notPlayed");
+        }
+
         switch (fight.ergebnis) {
             case 1:
                 return fight.blueTeam.kuerzel;
             case 2:
                 return fight.redTeam.kuerzel;
-            case 3:
-                return t("announcements.table.draw");
             default:
-                return t("announcements.table.notPlayed");
+                return t("announcements.table.draw");
         }
     }
 </script>
@@ -55,13 +57,15 @@
             </tr>
         </thead>
         <tbody>
-            {#each window(event.fights.filter(f => group === undefined ? true : f.group === group), rows) as fights}
+            {#each window( event.fights.filter((f) => (group === undefined ? true : f.group?.id === group)), rows ) as fights}
                 <tr>
                     {#each fights as fight (fight.id)}
-                        <td>{Intl.DateTimeFormat(astroI18n.locale, {
-                            hour: "numeric",
-                            minute: "numeric",
-                        }).format(new Date(fight.start))}</td>
+                        <td
+                            >{Intl.DateTimeFormat(astroI18n.locale, {
+                                hour: "numeric",
+                                minute: "numeric",
+                            }).format(new Date(fight.start))}</td
+                        >
                         <td class:font-bold={fight.ergebnis === 1} class:italic={fight.ergebnis === 3}>{fight.blueTeam.kuerzel}</td>
                         <td class:font-bold={fight.ergebnis === 2} class:italic={fight.ergebnis === 3}>{fight.redTeam.kuerzel}</td>
                         <td>{getWinner(fight)}</td>
@@ -70,4 +74,4 @@
             {/each}
         </tbody>
     </table>
-</div>
+</div>

src/components/GroupTable.svelte

@@ -19,33 +19,29 @@
   -->
 
 <script lang="ts">
-    import {window} from "./utils.ts";
-    import {t} from "astro-i18n";
-    import type {ExtendedEvent} from "@type/event.ts";
-    import "@styles/table.css"
+    import { window } from "./utils.ts";
+    import { t } from "astro-i18n";
+    import type { ExtendedEvent } from "@type/event.ts";
+    import "@styles/table.css";
 
-    export let event: ExtendedEvent;
-    export let group: string;
-    export let rows: number = 1;
+    let {
+        event,
+        group,
+        rows = 1,
+    }: {
+        event: ExtendedEvent;
+        group: number;
+        rows?: number;
+    } = $props();
 
-    $: teamPoints = event.teams.map(team => {
-        const fights = event.fights.filter(fight => fight.blueTeam.id === team.id || fight.redTeam.id === team.id);
-        const points = fights.reduce((acc, fight) => {
-            if (fight.ergebnis === 1 && fight.blueTeam.id === team.id) {
-                return acc + 3;
-            } else if (fight.ergebnis === 2 && fight.redTeam.id === team.id) {
-                return acc + 3;
-            } else if (fight.ergebnis === 3) {
-                return acc + 1;
-            } else {
-                return acc;
-            }
-        }, 0);
-        return {
-            team,
-            points,
-        };
-    }).sort((a, b) => b.points - a.points);
+    let teamPoints = $derived(
+        Object.entries(event.groups.find((g) => g.id === group)?.points ?? {})
+            .map(([teamId, points]) => ({
+                team: event.teams.find((t) => t.id === Number(teamId))!!,
+                points: points,
+            }))
+            .sort((a, b) => b.points - a.points)
+    );
 </script>
 
 <div class="p-3 bg-gray-200 dark:bg-neutral-800 rounded-2xl w-3/4 mx-auto">

src/components/Login.svelte

@@ -1,7 +1,7 @@
 <!--
   -   This file is a part of the SteamWar software.
   -
-  -   Copyright (C) 2023 SteamWar.de-Serverteam
+  -   Copyright (C) 2026 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
@@ -18,20 +18,20 @@
   -->
 
 <script lang="ts">
-  import { preventDefault } from 'svelte/legacy';
-
-    import {l} from "@utils/util.ts";
-    import {t} from "astro-i18n";
-    import {get} from "svelte/store";
-    import {navigate} from "astro:transitions/client";
+    import { preventDefault } from "svelte/legacy";
+    import { l } from "@utils/util.ts";
+    import { t } from "astro-i18n";
+    import { get } from "svelte/store";
+    import { navigate } from "astro:transitions/client";
+    import { onMount } from "svelte";
+    import { authV2Repo } from "./repo/authv2.ts";
 
     let username: string = $state("");
     let pw: string = $state("");
-
     let error: string = $state("");
 
     async function login() {
-        let {authV2Repo} = await import("./repo/authv2.ts");
+        let { authV2Repo } = await import("./repo/authv2.ts");
         if (username === "" || pw === "") {
             pw = "";
             error = t("login.error");
@@ -52,6 +52,26 @@
             error = t("login.error");
         }
     }
+
+    onMount(() => {
+        if (window.location.hash.includes("access_token")) {
+            const params = new URLSearchParams(window.location.hash.substring(1));
+            const accessToken = params.get("access_token");
+
+            if (accessToken) {
+                (async () => {
+                    let auth = await $authV2Repo.loginDiscord(accessToken);
+                    if (!auth) {
+                        pw = "";
+                        error = t("login.error");
+                        return;
+                    }
+
+                    navigate(l("/dashboard"));
+                })();
+            }
+        }
+    });
 </script>
 
 <form class="bg-gray-100 dark:bg-neutral-900 p-12 rounded-2xl shadow-2xl border-2 border-gray-600 flex flex-col" onsubmit={preventDefault(login)}>
@@ -63,12 +83,16 @@
         <input type="password" id="password" name="password" placeholder={t("login.placeholder.password")} bind:value={pw} />
     </div>
     <p class="mt-2">
-        <a class="text-neutral-500 hover:underline" href={l("/set-password")}>{t("login.setPassword")}</a></p>
+        <a class="text-neutral-500 hover:underline" href={l("/set-password")}>{t("login.setPassword")}</a>
+    </p>
 
     {#if error}
         <p class="mt-2 text-red-500">{error}</p>
     {/if}
     <button class="btn mt-4 !mx-0 justify-center" type="submit" onclick={preventDefault(login)}>{t("login.submit")}</button>
+    <a class="btn mt-4 !mx-0 justify-center" href="https://discord.com/oauth2/authorize?client_id=869606970099904562&response_type=token&redirect_uri=https%3A%2F%2Fsteamwar.de%2Flogin&scope=identify">
+        {t("login.discord")}
+    </a>
 </form>
 
 <style lang="postcss">
@@ -79,4 +103,4 @@
     label {
         @apply text-neutral-300;
     }
-</style>
+</style>

src/components/Navbar.svelte

@@ -81,6 +81,7 @@
                 </button>
                 <div>
                     <a class="btn btn-gray" href={l("/announcements")}>{t("navbar.links.home.announcements")}</a>
+                    <a class="btn btn-gray" href={l("/events")}>{t("navbar.links.home.events")}</a>
                     <a class="btn btn-gray" href={l("/downloads")}>{t("navbar.links.home.downloads")}</a>
                     <a class="btn btn-gray" href={l("/faq")}>{t("navbar.links.home.faq")}</a>
                     <a class="btn btn-gray" href={l("/code-of-conduct")}>{t("navbar.links.rules.coc")}</a>

src/components/admin/components/FightEditPart.svelte

@@ -18,83 +18,103 @@
   -->
 
 <script lang="ts">
-    import {Input, Label, Select} from "flowbite-svelte";
+    import { Input, Label, Select } from "flowbite-svelte";
     import TypeAheadSearch from "./TypeAheadSearch.svelte";
-    import {gamemodes, groups, maps, players} from "@stores/stores.ts";
-    import type {Team} from "@type/team.ts";
+    import { gamemodes, groups, maps } from "@stores/stores.ts";
+    import type { Team } from "@type/team.ts";
 
-  interface Props {
-    teams?: Team[];
-    blueTeam: string;
-    redTeam: string;
-    start?: string;
-    gamemode?: string;
-    map?: string;
-    spectatePort?: string | null;
-    group?: string | null;
-    groupSearch?: string;
-  }
+    interface Props {
+        teams?: Team[];
+        blueTeam: string;
+        redTeam: string;
+        start?: string;
+        gamemode?: string;
+        map?: string;
+        spectatePort?: string | null;
+        group?: string | null;
+        groupSearch?: string;
+    }
 
-  let {
-    teams = [],
-    blueTeam = $bindable(),
-    redTeam = $bindable(),
-    start = $bindable(""),
-    gamemode = $bindable(""),
-    map = $bindable(""),
-    spectatePort = $bindable(null),
-    group = $bindable(""),
-    groupSearch = $bindable("")
-  }: Props = $props();
+    let {
+        teams = [],
+        blueTeam = $bindable(),
+        redTeam = $bindable(),
+        start = $bindable(""),
+        gamemode = $bindable(""),
+        map = $bindable(""),
+        spectatePort = $bindable(null),
+        group = $bindable(""),
+        groupSearch = $bindable(""),
+    }: Props = $props();
 
-    let selectableTeams = $derived(teams.map(team => {
-        return {
-            name: team.name,
-            value: team.id.toString()
-        };
-    }).sort((a, b) => a.name.localeCompare(b.name)));
+    let selectableTeams = $derived(
+        teams
+            .map((team) => {
+                return {
+                    name: team.name,
+                    value: team.id.toString(),
+                };
+            })
+            .sort((a, b) => a.name.localeCompare(b.name))
+    );
 
-    let selectableGamemodes = $derived($gamemodes.map(gamemode => {
-        return {
-            name: gamemode,
-            value: gamemode
-        };
-    }).sort((a, b) => a.name.localeCompare(b.name)));
+    let selectableGamemodes = $derived(
+        $gamemodes
+            .map((gamemode) => {
+                return {
+                    name: gamemode,
+                    value: gamemode,
+                };
+            })
+            .sort((a, b) => a.name.localeCompare(b.name))
+    );
     let customGamemode = $derived(!selectableGamemodes.some((e) => e.name === gamemode) && gamemode !== "");
     let selectableCustomGamemode = $derived([
-        ...selectableGamemodes, {
+        ...selectableGamemodes,
+        {
             name: gamemode + " (custom)",
-            value: gamemode
-        }
+            value: gamemode,
+        },
     ]);
 
     let mapsStore = $derived(maps(gamemode));
-    let selectableMaps = $derived($mapsStore.map(map => {
-        return {
-            name: map,
-            value: map
-        };
-    }).sort((a, b) => a.name.localeCompare(b.name)));
+    let selectableMaps = $derived(
+        $mapsStore
+            .map((map) => {
+                return {
+                    name: map,
+                    value: map,
+                };
+            })
+            .sort((a, b) => a.name.localeCompare(b.name))
+    );
     let customMap = $derived(!selectableMaps.some((e) => e.name === map) && map !== "");
     let selectableCustomMaps = $derived([
-        ...selectableMaps, {
+        ...selectableMaps,
+        {
             name: map + " (custom)",
-            value: map
-        }
+            value: map,
+        },
     ]);
 
-    let selectableGroups = $derived([{
-        name: "None",
-        value: ""
-    }, {
-        value: groupSearch,
-        name: `Create: '${groupSearch}'`
-    }, ...$groups.map(group => {
-        return {
-            name: group,
-            value: group
-        };
-    }).sort((a, b) => a.name.localeCompare(b.name))]);
+    let selectableGroups = $derived([
+        {
+            name: "None",
+            value: "",
+        },
+        {
+            value: groupSearch,
+            name: `Create: '${groupSearch}'`,
+        },
+        ...$groups
+            .map((group) => {
+                return {
+                    name: group,
+                    value: group,
+                };
+            })
+            .sort((a, b) => a.name.localeCompare(b.name)),
+    ]);
 </script>
 
 <div class="m-2">
@@ -107,32 +127,29 @@
 </div>
 <div class="mt-4">
     <Label for="fight-start">Start</Label>
-    <Input id="fight-start" bind:value={start} >
+    <Input id="fight-start" bind:value={start}>
         {#snippet children({ props })}
-        <input type="datetime-local" {...props} bind:value={start}/>
-            {/snippet}
+            <input type="datetime-local" {...props} bind:value={start} />
+        {/snippet}
     </Input>
 </div>
 <div class="m-2">
     <Label for="fight-gamemode">Gamemode</Label>
-    <Select items={customGamemode ? selectableCustomGamemode : selectableGamemodes} bind:value={gamemode}
-            id="fight-gamemode"></Select>
+    <Select items={customGamemode ? selectableCustomGamemode : selectableGamemodes} bind:value={gamemode} id="fight-gamemode"></Select>
 </div>
 <div class="m-2">
     <Label for="fight-maps">Map</Label>
-    <Select items={customMap ? selectableCustomMaps : selectableMaps} bind:value={map} id="fight-maps"
-            disabled={customGamemode} class={customGamemode ? "cursor-not-allowed" : ""}></Select>
+    <Select items={customMap ? selectableCustomMaps : selectableMaps} bind:value={map} id="fight-maps" disabled={customGamemode} class={customGamemode ? "cursor-not-allowed" : ""}></Select>
 </div>
 <div class="m-2">
     <Label for="fight-port">Spectate Port</Label>
-    <Input id="fight-port" bind:value={spectatePort} >
+    <Input id="fight-port" bind:value={spectatePort}>
         {#snippet children({ props })}
-        <input type="number" inputmode="numeric" {...props} bind:value={spectatePort}/>
-            {/snippet}
+            <input type="number" inputmode="numeric" {...props} bind:value={spectatePort} />
+        {/snippet}
     </Input>
 </div>
 <div class="m-2">
     <Label for="fight-kampf">Group</Label>
-    <TypeAheadSearch items={selectableGroups} bind:selected={group} bind:searchValue={groupSearch}
-                     all></TypeAheadSearch>
+    <TypeAheadSearch items={selectableGroups} bind:selected={group} bind:searchValue={groupSearch} all></TypeAheadSearch>
 </div>

src/components/admin/pages/Event.svelte

@@ -18,19 +18,18 @@
   -->
 
 <script lang="ts">
-    import {Navbar, NavBrand, Spinner, TabItem, Tabs} from "flowbite-svelte";
+    import { Navbar, NavBrand, Spinner, TabItem, Tabs } from "flowbite-svelte";
     import EventEdit from "./event/EventEdit.svelte";
-    import {ArrowLeftOutline} from "flowbite-svelte-icons";
-    import FightList from "./event/FightList.svelte";
+    import { ArrowLeftOutline } from "flowbite-svelte-icons";
     import TeamList from "./event/TeamList.svelte";
-    import {eventRepo} from "@repo/event.ts";
+    import { eventRepo } from "@repo/event.ts";
     import RefereesList from "@components/admin/pages/event/RefereesList.svelte";
 
-  interface Props {
-    params: { id: number };
-  }
+    interface Props {
+        params: { id: number };
+    }
 
-  let { params }: Props = $props();
+    let { params }: Props = $props();
 
     let id = params.id;
     let event = $eventRepo.getEvent(id.toString());
@@ -38,44 +37,43 @@
 
 {#await event}
     <div class="h-screen w-screen grid place-items-center">
-        <Spinner size={16}/>
+        <Spinner size={16} />
     </div>
 {:then data}
-    <Navbar  >
+    <Navbar>
         {#snippet children({ hidden, toggle })}
-        <NavBrand href="#">
-              <ArrowLeftOutline></ArrowLeftOutline>
-              <span class="ml-4 self-center whitespace-nowrap text-xl font-semibold dark:text-white">
-                  {data.event.name}
-              </span>
-          </NavBrand>
-            {/snippet}
+            <NavBrand href="#">
+                <ArrowLeftOutline></ArrowLeftOutline>
+                <span class="ml-4 self-center whitespace-nowrap text-xl font-semibold dark:text-white">
+                    {data.event.name}
+                </span>
+            </NavBrand>
+        {/snippet}
     </Navbar>
 
     <Tabs style="pill" class="mx-4 flex shadow-lg border-b-2 border-gray-700 pb-2" contentClass="">
         <TabItem open>
             {#snippet title()}
-            <span >Event</span>
-          {/snippet}
-            <EventEdit {data}/>
+                <span>Event</span>
+            {/snippet}
+            <EventEdit {data} />
         </TabItem>
         <TabItem>
             {#snippet title()}
-            <span >Teams</span>
-          {/snippet}
-            <TeamList {data}/>
+                <span>Teams</span>
+            {/snippet}
+            <TeamList {data} />
         </TabItem>
         <TabItem>
             {#snippet title()}
-            <span >Schiedsrichter</span>
-          {/snippet}
-            <RefereesList {data}/>
+                <span>Schiedsrichter</span>
+            {/snippet}
+            <RefereesList {data} />
         </TabItem>
         <TabItem>
             {#snippet title()}
-            <span >Kämpfe</span>
-          {/snippet}
-            <FightList {data}/>
+                <span>Kämpfe</span>
+            {/snippet}
         </TabItem>
     </Tabs>
 {:catch error}

src/components/admin/pages/Perms.svelte

@@ -18,21 +18,37 @@
   -->
 
 <script lang="ts">
-  import { run, preventDefault } from 'svelte/legacy';
+    import { run, preventDefault } from "svelte/legacy";
 
-    import {Button, Card, Checkbox, Input, Label, Navbar, NavBrand, Radio, Spinner} from "flowbite-svelte";
-    import {ArrowLeftOutline} from "flowbite-svelte-icons";
-    import {players} from "@stores/stores.ts";
-    import {capitalize} from "../util.ts";
-    import {permsRepo} from "@repo/perms.ts";
-    import {me} from "@stores/me.ts";
+    import { Button, Card, Checkbox, Input, Label, Navbar, NavBrand, Radio, Spinner } from "flowbite-svelte";
+    import { ArrowLeftOutline } from "flowbite-svelte-icons";
+    import { capitalize } from "../util.ts";
+    import { permsRepo } from "@repo/perms.ts";
+    import { me } from "@stores/me.ts";
     import SWButton from "@components/styled/SWButton.svelte";
     import SWModal from "@components/styled/SWModal.svelte";
-    import {userRepo} from "@repo/user.ts";
+    import { userRepo } from "@repo/user.ts";
+    import { dataRepo } from "@repo/data.ts";
+    import type { Player } from "@type/data";
 
     let search = $state("");
+    let playersList: Player[] = $state([]);
+    let debounceTimer: NodeJS.Timeout;
+
+    function fetchPlayers(searchTerm: string) {
+        clearTimeout(debounceTimer);
+        debounceTimer = setTimeout(async () => {
+            const res = await $dataRepo.queryPlayers(searchTerm || undefined, undefined, undefined, 100, 0, undefined, undefined);
+            playersList = res.players;
+        }, 300);
+    }
+
+    $effect(() => {
+        fetchPlayers(search);
+    });
 
     let selectedPlayer: string | null = $state(null);
+    let selectedPlayerName: string = $state("");
     let playerPerms = $state(loadPlayer(selectedPlayer));
 
     let prefixEdit = $state("PREFIX_NONE");
@@ -46,7 +62,7 @@
         if (!id) {
             return;
         }
-        return $permsRepo.getPerms(id).then(value => {
+        return $permsRepo.getPerms(id).then((value) => {
             activePerms = value.perms;
             prefixEdit = value.prefix.name;
             return value;
@@ -56,7 +72,7 @@
     function togglePerm(perm: string) {
         return () => {
             if (activePerms.includes(perm)) {
-                activePerms = activePerms.filter(value => value !== perm);
+                activePerms = activePerms.filter((value) => value !== perm);
             } else {
                 activePerms = [...activePerms, perm];
             }
@@ -64,7 +80,7 @@
     }
 
     function save() {
-        playerPerms!.then(async perms => {
+        playerPerms!.then(async (perms) => {
             if (perms.prefix.name != prefixEdit) {
                 await $permsRepo.setPrefix(selectedPlayer!, prefixEdit);
             }
@@ -99,24 +115,20 @@
         resetPasswordRepeat = "";
         resetPasswordModal = false;
     }
-    let lowerCaseSearch = $derived(search.toLowerCase());
-    let filteredPlayers = $derived($players.filter(value => value.name.toLowerCase().includes(lowerCaseSearch)));
-    let player = $derived($players.find(value => value.uuid === selectedPlayer));
+
     run(() => {
-    playerPerms = loadPlayer(selectedPlayer);
-  });
+        playerPerms = loadPlayer(selectedPlayer);
+    });
 </script>
 
 <div class="flex flex-col h-screen overflow-hidden">
-    <Navbar  >
+    <Navbar>
         {#snippet children({ hidden, toggle })}
-        <NavBrand href="#">
-              <ArrowLeftOutline></ArrowLeftOutline>
-              <span class="ml-4 self-center whitespace-nowrap text-xl font-semibold dark:text-white">
-                  Permissions
-              </span>
-          </NavBrand>
-            {/snippet}
+            <NavBrand href="#">
+                <ArrowLeftOutline></ArrowLeftOutline>
+                <span class="ml-4 self-center whitespace-nowrap text-xl font-semibold dark:text-white"> Permissions </span>
+            </NavBrand>
+        {/snippet}
     </Navbar>
 
     <div class="p-4 flex-1 overflow-hidden">
@@ -124,14 +136,19 @@
             <Card class="h-full flex flex-col overflow-hidden !max-w-full">
                 <div class="border-b border-b-gray-600 pb-2">
                     <Label for="user_search" class="mb-2">Search Users...</Label>
-                    <Input type="text" id="user_search" placeholder="Name..." bind:value={search}/>
+                    <Input type="text" id="user_search" placeholder="Name..." bind:value={search} />
                 </div>
-                {#if filteredPlayers.length < 100}
+                {#if playersList.length < 100}
                     <ul class="flex-1 overflow-scroll">
-                        {#each filteredPlayers as player (player.uuid)}
-                            <li class="p-4 transition-colors hover:bg-gray-700 cursor-pointer"
+                        {#each playersList as player (player.uuid)}
+                            <li
+                                class="p-4 transition-colors hover:bg-gray-700 cursor-pointer"
                                 class:text-orange-500={player.uuid === selectedPlayer}
-                                onclick={preventDefault(() => selectedPlayer = player.uuid)}>
+                                onclick={preventDefault(() => {
+                                    selectedPlayer = player.uuid;
+                                    selectedPlayerName = player.name;
+                                })}
+                            >
                                 {player.name}
                             </li>
                         {/each}
@@ -140,7 +157,7 @@
             </Card>
             <Card class="!max-w-full" style="grid-column: 2/4">
                 {#if selectedPlayer}
-                    <h1 class="text-3xl">{player.name}</h1>
+                    <h1 class="text-3xl">{selectedPlayerName}</h1>
                     {#await permsFuture}
                         <Spinner></Spinner>
                     {:then perms}
@@ -149,39 +166,27 @@
                         {:then player}
                             <h1>Prefix</h1>
                             {#each Object.entries(perms.prefixes) as [key, prefix]}
-                                <Radio name="prefix" bind:group={prefixEdit}
-                                       value={prefix.name}>{capitalize(prefix.name.substring(7).toLowerCase())}</Radio>
+                                <Radio name="prefix" bind:group={prefixEdit} value={prefix.name}>{capitalize(prefix.name.substring(7).toLowerCase())}</Radio>
                             {/each}
                             <h1>Permissions</h1>
                             {#each perms.perms as perm}
-                                <Checkbox checked={activePerms.includes(perm)}
-                                          onclick={togglePerm(perm)}>{capitalize(perm.toLowerCase())}</Checkbox>
+                                <Checkbox checked={activePerms.includes(perm)} onclick={togglePerm(perm)}>{capitalize(perm.toLowerCase())}</Checkbox>
                             {/each}
                             <div class="mt-4">
-                                <Button disabled={prefixEdit === (player?.prefix.name ?? "") && activePerms === (player?.perms ?? [])}
-                                        onclick={save}>Save
-                                </Button>
+                                <Button disabled={prefixEdit === (player?.prefix.name ?? "") && activePerms === (player?.perms ?? [])} onclick={save}>Save</Button>
                                 {#if $me != null && $me.perms.includes("ADMINISTRATION")}
-                                    <Button onclick={() => resetPasswordModal = true}>
-                                        Reset Password
-                                    </Button>
+                                    <Button onclick={() => (resetPasswordModal = true)}>Reset Password</Button>
 
                                     <SWModal bind:open={resetPasswordModal} title="Reset Password">
                                         <Label for="new_password">New Password</Label>
-                                        <Input type="password" id="new_password" placeholder="New Password" bind:value={resetPassword}/>
+                                        <Input type="password" id="new_password" placeholder="New Password" bind:value={resetPassword} />
                                         <Label for="repeat_password">Repeat Password</Label>
-                                        <Input type="password" id="repeat_password" placeholder="Repeat Password" bind:value={resetPasswordRepeat}/>
+                                        <Input type="password" id="repeat_password" placeholder="Repeat Password" bind:value={resetPasswordRepeat} />
 
                                         {#snippet footer()}
-                                      
-                                              <Button class="ml-auto mr-4" onclick={resetResetPassword}>
-                                                  Cancel
-                                              </Button>
-                                              <Button disabled={resetPassword === "" || resetPassword !== resetPasswordRepeat} onclick={resetPW}>
-                                                  Reset Password
-                                              </Button>
-                                          
-                                      {/snippet}
+                                            <Button class="ml-auto mr-4" onclick={resetResetPassword}>Cancel</Button>
+                                            <Button disabled={resetPassword === "" || resetPassword !== resetPasswordRepeat} onclick={resetPW}>Reset Password</Button>
+                                        {/snippet}
                                     </SWModal>
                                 {/if}
                             </div>

src/components/admin/pages/edit/Editor.svelte

@@ -18,23 +18,22 @@
   -->
 
 <script lang="ts">
-    import {Spinner, Toolbar, ToolbarButton, ToolbarGroup} from "flowbite-svelte";
-    import {json} from "@codemirror/lang-json";
-    import CodeMirror from "svelte-codemirror-editor";
-    import {base64ToBytes} from "../../util.ts";
-    import type {Page} from "@type/page.ts";
-    import {materialDark} from "@ddietr/codemirror-themes/material-dark";
-    import {createEventDispatcher} from "svelte";
+    import { Spinner, Toolbar, ToolbarButton, ToolbarGroup } from "flowbite-svelte";
+    import { json } from "@codemirror/lang-json";
+    import { base64ToBytes } from "../../util.ts";
+    import type { Page } from "@type/page.ts";
+    import { materialDark } from "@ddietr/codemirror-themes/material-dark";
+    import { createEventDispatcher } from "svelte";
     import MDEMarkdownEditor from "./MDEMarkdownEditor.svelte";
-    import {pageRepo} from "@repo/page.ts";
+    import { pageRepo } from "@repo/page.ts";
 
-  interface Props {
-    pageId: number;
-    branch: string;
-    dirty?: boolean;
-  }
+    interface Props {
+        pageId: number;
+        branch: string;
+        dirty?: boolean;
+    }
 
-  let { pageId, branch = $bindable(), dirty = $bindable(false) }: Props = $props();
+    let { pageId, branch = $bindable(), dirty = $bindable(false) }: Props = $props();
 
     let dispatcher = createEventDispatcher();
 
@@ -71,35 +70,32 @@
     }
     let pageFuture = $derived($pageRepo.getPage(pageId, branch).then(getPage));
 </script>
-<svelte:window onbeforeunload={() => {
-    if (dirty) {
-        return "You have unsaved changes. Are you sure you want to leave?";
-    }
-}}/>
+
+<svelte:window
+    onbeforeunload={() => {
+        if (dirty) {
+            return "You have unsaved changes. Are you sure you want to leave?";
+        }
+    }}
+/>
 {#await pageFuture}
-    <Spinner/>
+    <Spinner />
 {:then p}
     <div>
         <div>
             <Toolbar class="!bg-gray-900">
                 {#snippet end()}
-                <ToolbarGroup >
-                      <ToolbarButton onclick={deletePage}>
-                          Delete
-                      </ToolbarButton>
-                      <ToolbarButton color="primary" onclick={savePage}>
-                          Save
-                      </ToolbarButton>
-                  </ToolbarGroup>
-              {/snippet}
+                    <ToolbarGroup>
+                        <ToolbarButton onclick={deletePage}>Delete</ToolbarButton>
+                        <ToolbarButton color="primary" onclick={savePage}>Save</ToolbarButton>
+                    </ToolbarGroup>
+                {/snippet}
             </Toolbar>
         </div>
         {#if page?.name.endsWith("md") || page?.name.endsWith("mdx")}
-            <MDEMarkdownEditor bind:value={pageContent} bind:dirty/>
-        {:else}
-            <CodeMirror bind:value={pageContent} lang={json()} theme={materialDark} onchange={() => dirty = true}/>
-        {/if}
+            <MDEMarkdownEditor bind:value={pageContent} bind:dirty />
+        {:else}{/if}
     </div>
 {:catch error}
     <p>{error.message}</p>
-{/await}
+{/await}

src/components/admin/pages/event/FightList.svelte

@@ -1,312 +0,0 @@
-<!--
-  -   This file is a part of the SteamWar software.
-  -
-  -   Copyright (C) 2023 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 {EventFight, ExtendedEvent} from "@type/event.ts";
-    import {
-        Button,
-        Checkbox, Input, Label,
-        Modal,
-        SpeedDial,
-        SpeedDialButton,
-        Toolbar,
-        ToolbarButton,
-        ToolbarGroup,
-        Tooltip
-    } from "flowbite-svelte";
-    import {
-        ArrowsRepeatOutline, CalendarWeekOutline,
-        PlusOutline, ProfileCardOutline, TrashBinOutline, UsersGroupOutline,
-    } from "flowbite-svelte-icons";
-    import FightCard from "./FightCard.svelte";
-    import CreateFightModal from "./modals/CreateFightModal.svelte";
-    import {groups, players} from "@stores/stores.ts";
-    import TypeAheadSearch from "../../components/TypeAheadSearch.svelte";
-    import {fightRepo, type UpdateFight} from "@repo/fight.ts";
-    import dayjs from "dayjs";
-    import duration from "dayjs/plugin/duration";
-
-    dayjs.extend(duration);
-
-  interface Props {
-    data: ExtendedEvent;
-  }
-
-  let { data = $bindable() }: Props = $props();
-
-    let createOpen = $state(false);
-    let fights = $state(data.fights);
-    let selectedFights: Set<EventFight> = $state(new Set());
-
-    let groupsMap = $derived(new Set(fights.map(fight => fight.group)));
-    let groupedFights = $derived(Array.from(groupsMap).map(group => {
-        return {
-            group: group,
-            fights: fights.filter(fight => fight.group === group)
-        };
-    }));
-
-    function cycleSelect() {
-        if (selectedFights.size === fights.length) {
-            selectedFights = new Set();
-        } else if (selectedFights.size === 0) {
-            selectedFights = new Set(fights.filter(fight => fight.start > Date.now()));
-
-            if (selectedFights.size === 0) {
-                selectedFights = new Set(fights);
-            }
-        } else {
-            selectedFights = new Set(fights);
-        }
-    }
-
-    function cycleGroup(groupFights: EventFight[]) {
-        if (groupFights.every(gf => selectedFights.has(gf))) {
-            groupFights.forEach(fight => selectedFights.delete(fight));
-        } else {
-            groupFights.forEach(fight => selectedFights.add(fight));
-        }
-        selectedFights = new Set(selectedFights);
-    }
-
-    let deleteOpen = $state(false);
-
-    async function deleteFights() {
-        for (const fight of selectedFights) {
-            await $fightRepo.deleteFight(fight.id);
-        }
-        fights = await $fightRepo.listFights(data.event.id);
-        selectedFights = new Set();
-        deleteOpen = false;
-    }
-
-    let spectatePortOpen = $state(false);
-    let selectPlayers = $derived($players.map(player => {
-        return {
-            name: player.name,
-            value: player.uuid
-        };
-    }).sort((a, b) => a.name.localeCompare(b.name)));
-    let spectatePort = $state("");
-
-    async function updateSpectatePort() {
-        for (const fight of selectedFights) {
-            let f: UpdateFight = {
-                blueTeam: null,
-                group: null,
-                spectatePort: Number.parseInt(spectatePort),
-                map: null,
-                redTeam: null,
-                spielmodus: null,
-                start: null
-            };
-            await $fightRepo.updateFight(fight.id, f);
-        }
-        fights = await $fightRepo.listFights(data.event.id);
-        selectedFights = new Set();
-        spectatePort = "";
-        spectatePortOpen = false;
-    }
-
-    let groupChangeOpen = $state(false);
-    let group = $state("");
-    let groupSearch = $state("");
-
-    let selectableGroups = $derived([{
-        name: "Keine",
-        value: ""
-    }, {
-        value: groupSearch,
-        name: `Erstelle: '${groupSearch}'`
-    }, ...$groups.map(group => {
-        return {
-            name: group,
-            value: group
-        };
-    }).sort((a, b) => a.name.localeCompare(b.name))]);
-
-    async function updateGroup() {
-        for (const fight of selectedFights) {
-            let f: UpdateFight = {
-                blueTeam: null,
-                group: group,
-                spectatePort: null,
-                map: null,
-                redTeam: null,
-                spielmodus: null,
-                start: null
-            };
-            await $fightRepo.updateFight(fight.id, f);
-        }
-        fights = await $fightRepo.listFights(data.event.id);
-        selectedFights = new Set();
-        group = "";
-        groupSearch = "";
-        groupChangeOpen = false;
-    }
-
-    let minTime = $derived(dayjs(Math.min(...fights.map(fight => fight.start))).utc(true));
-    let changeTimeOpen = $state(false);
-    let changedTime = $state(fights.length != 0 ? dayjs(Math.min(...fights.map(fight => fight.start)))?.utc(true)?.toISOString()?.slice(0, -1) : undefined);
-
-    let deltaTime = $derived(dayjs.duration(dayjs(changedTime).utc(true).diff(minTime)));
-
-    async function updateStartTime() {
-        for (const fight of selectedFights) {
-            let f: UpdateFight = {
-                blueTeam: null,
-                group: null,
-                spectatePort: null,
-                map: null,
-                redTeam: null,
-                spielmodus: null,
-                start: dayjs(fight.start).add(deltaTime.asMilliseconds(), "millisecond")
-            };
-            await $fightRepo.updateFight(fight.id, f);
-        }
-        fights = await $fightRepo.listFights(data.event.id);
-        changedTime = minTime.toISOString().slice(0, -1);
-        selectedFights = new Set();
-        changeTimeOpen = false;
-    }
-</script>
-
-<svelte:head>
-    <title>{data.event.name} - Fights</title>
-</svelte:head>
-
-<div class="pb-28">
-    <Toolbar class="mx-4 mt-2 w-fit">
-        <ToolbarGroup>
-            <Checkbox class="ml-2" checked={selectedFights.size === fights.length} onclick={cycleSelect}/>
-            <Tooltip>Select Upcoming</Tooltip>
-        </ToolbarGroup>
-        <ToolbarGroup>
-            <ToolbarButton onclick={() => selectedFights.size > 0 ? changeTimeOpen = true : changeTimeOpen = false}>
-                <CalendarWeekOutline/>
-            </ToolbarButton>
-            <Tooltip>Reschedule Fights</Tooltip>
-            <ToolbarButton onclick={() => selectedFights.size > 0 ? spectatePortOpen = true : spectatePortOpen = false}
-                           disabled={changedTime === undefined}>
-                <ProfileCardOutline/>
-            </ToolbarButton>
-            <Tooltip>Change Spectate Port</Tooltip>
-            <ToolbarButton onclick={() => selectedFights.size > 0 ? groupChangeOpen = true : groupChangeOpen = false}>
-                <UsersGroupOutline/>
-            </ToolbarButton>
-            <Tooltip>Change Group</Tooltip>
-        </ToolbarGroup>
-        <ToolbarGroup>
-            <ToolbarButton color="red"
-                           onclick={() => selectedFights.size > 0 ? deleteOpen = true : deleteOpen = false}>
-                <TrashBinOutline/>
-            </ToolbarButton>
-            <Tooltip>Delete</Tooltip>
-        </ToolbarGroup>
-    </Toolbar>
-    {#each groupedFights as group}
-        <div class="flex mt-4">
-            <Checkbox class="ml-2 text-center" checked={group.fights.every(gf => selectedFights.has(gf))}
-                      onclick={() => cycleGroup(group.fights)}/>
-            <h1 class="ml-4 text-2xl">{group.group ?? "Ungrouped"}</h1>
-        </div>
-        {#each group.fights.sort((a, b) => a.start - b.start) as fight, i (fight.id)}
-            {@const isSelected = selectedFights.has(fight)}
-            <FightCard {fight} {i} {data} selected={isSelected}
-                       select={() => {
-                    if (selectedFights.has(fight)) {
-                        selectedFights.delete(fight);
-                    } else {
-                        selectedFights.add(fight);
-                    }
-
-                    selectedFights = new Set(selectedFights);
-                }} update={async () => fights = await $fightRepo.listFights(data.event.id)}
-            />
-        {/each}
-    {/each}
-</div>
-
-<CreateFightModal {data} bind:open={createOpen}
-                  on:create={async () => data.fights = await $fightRepo.listFights(data.event.id)}></CreateFightModal>
-
-<Modal bind:open={deleteOpen} title="Delete {selectedFights.size} Fights" autoclose size="sm">
-    <p>Are you sure you want to delete {selectedFights.size} fights?</p>
-    {#snippet footer()}
-  
-          <Button color="red" class="ml-auto" onclick={deleteFights}>Delete</Button>
-          <Button onclick={() => deleteOpen = false} color="alternative">Cancel</Button>
-      
-  {/snippet}
-</Modal>
-
-<Modal bind:open={spectatePortOpen} title="Change Kampfleiter" size="sm">
-    <div class="m-2">
-        <Label for="fight-kampf">Kampfleiter</Label>
-        <TypeAheadSearch items={selectPlayers} bind:selected={spectatePort}></TypeAheadSearch>
-    </div>
-    {#snippet footer()}
-  
-          <Button class="ml-auto" onclick={updateSpectatePort}>Change</Button>
-          <Button onclick={() => spectatePortOpen = false} color="alternative">Cancel</Button>
-      
-  {/snippet}
-</Modal>
-
-<Modal bind:open={groupChangeOpen} title="Change Group" size="sm">
-    <div class="m-2">
-        <Label for="fight-kampf">Group</Label>
-        <TypeAheadSearch items={selectableGroups} bind:selected={group} bind:searchValue={groupSearch}
-                         all></TypeAheadSearch>
-    </div>
-    {#snippet footer()}
-  
-          <Button class="ml-auto" onclick={updateGroup}>Change</Button>
-          <Button onclick={() => groupChangeOpen = false} color="alternative">Cancel</Button>
-      
-  {/snippet}
-</Modal>
-
-<Modal bind:open={changeTimeOpen} title="Change Start Time" size="sm">
-    <div class="m-2">
-        <Label for="fight-start">New Start Time:</Label>
-        <Input id="fight-start" bind:value={changedTime} >
-            {#snippet children({ props })}
-            <input type="datetime-local" {...props} bind:value={changedTime}/>
-                    {/snippet}
-        </Input>
-    </div>
-    <p>{deltaTime.asMilliseconds() < 0 ? '' : '+'}{("0" + deltaTime.hours()).slice(-2)}
-        :{("0" + deltaTime.minutes()).slice(-2)}</p>
-    {#snippet footer()}
-  
-          <Button class="ml-auto" onclick={updateStartTime}>Update</Button>
-          <Button onclick={() => changeTimeOpen = false} color="alternative">Cancel</Button>
-      
-  {/snippet}
-</Modal>
-
-<SpeedDial>
-    <SpeedDialButton name="Add" onclick={() => createOpen = true}>
-        <PlusOutline/>
-    </SpeedDialButton>
-    <SpeedDialButton name="Generate" href="#/event/{data.event.id}/generate">
-        <ArrowsRepeatOutline/>
-    </SpeedDialButton>
-</SpeedDial>

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

@@ -18,20 +18,19 @@
   -->
 
 <script lang="ts">
-    import type {ExtendedEvent} from "@type/event.ts";
-    import {Button} from "flowbite-svelte";
-    import {PlusOutline} from "flowbite-svelte-icons";
+    import type { ExtendedEvent } from "@type/event.ts";
+    import { Button } from "flowbite-svelte";
+    import { PlusOutline } from "flowbite-svelte-icons";
     import SWModal from "@components/styled/SWModal.svelte";
     import SWButton from "@components/styled/SWButton.svelte";
-    import TypeAheadSearch from "@components/admin/components/TypeAheadSearch.svelte";
-    import {players} from "@stores/stores.ts";
-    import {eventRepo} from "@repo/event.ts";
+    import PlayerSelector from "@components/ui/PlayerSelector.svelte";
+    import { eventRepo } from "@repo/event.ts";
 
-  interface Props {
-    data: ExtendedEvent;
-  }
+    interface Props {
+        data: ExtendedEvent;
+    }
 
-  let { data }: Props = $props();
+    let { data }: Props = $props();
 
     let searchValue = $state("");
     let selectedPlayer: string | null = $state(null);
@@ -42,17 +41,19 @@
 
     async function addReferee() {
         if (selectedPlayer) {
-            referees = (await $eventRepo.updateEvent(data.event.id.toString(), {
-                deadline: null,
-                end: null,
-                maxTeamMembers: null,
-                name: null,
-                publicSchemsOnly: null,
-                removeReferee: null,
-                schemType: null,
-                start: null,
-                addReferee: [selectedPlayer]
-            })).referees;
+            referees = (
+                await $eventRepo.updateEvent(data.event.id.toString(), {
+                    deadline: null,
+                    end: null,
+                    maxTeamMembers: null,
+                    name: null,
+                    publicSchemsOnly: null,
+                    removeReferee: null,
+                    schemType: null,
+                    start: null,
+                    addReferee: [selectedPlayer],
+                })
+            ).referees;
         }
 
         reset();
@@ -60,18 +61,20 @@
 
     function removeReferee(id: string) {
         return async () => {
-            referees = (await $eventRepo.updateEvent(data.event.id.toString(), {
-                deadline: null,
-                end: null,
-                maxTeamMembers: null,
-                name: null,
-                publicSchemsOnly: null,
-                addReferee: null,
-                schemType: null,
-                start: null,
-                removeReferee: [id],
-            })).referees;
-        }
+            referees = (
+                await $eventRepo.updateEvent(data.event.id.toString(), {
+                    deadline: null,
+                    end: null,
+                    maxTeamMembers: null,
+                    name: null,
+                    publicSchemsOnly: null,
+                    addReferee: null,
+                    schemType: null,
+                    start: null,
+                    removeReferee: [id],
+                })
+            ).referees;
+        };
     }
 
     function reset() {
@@ -84,9 +87,7 @@
     {#each referees as referee}
         <li class="flex flex-grow justify-between">
             {referee.name}
-            <SWButton onclick={removeReferee(referee.uuid)}>
-                Entfernen
-            </SWButton>
+            <SWButton onclick={removeReferee(referee.uuid)}>Entfernen</SWButton>
         </li>
     {/each}
 
@@ -95,23 +96,22 @@
     {/if}
 </ul>
 
-<Button class="fixed bottom-6 right-6 !p-4 z-10 shadow-lg" onclick={() => showAdd = true}>
-    <PlusOutline/>
+<Button class="fixed bottom-6 right-6 !p-4 z-10 shadow-lg" onclick={() => (showAdd = true)}>
+    <PlusOutline />
 </Button>
 
 <SWModal title="Schiedsrichter hinzufügen" bind:open={showAdd}>
     <div class="flex flex-grow justify-center h-80">
         <div>
-            <TypeAheadSearch bind:searchValue bind:selected={selectedPlayer}
-                             items={$players.map(v => ({ name: v.name, value: v.uuid }))}/>
+            <PlayerSelector bind:value={selectedPlayer} placeholder="Search player..." />
         </div>
     </div>
     {#snippet footer()}
-    <div  class="flex flex-grow justify-end">
-          <SWButton onclick={reset} type="gray">Abbrechen</SWButton>
-          <SWButton onclick={addReferee}>Hinzufügen</SWButton>
-      </div>
-  {/snippet}
+        <div class="flex flex-grow justify-end">
+            <SWButton onclick={reset} type="gray">Abbrechen</SWButton>
+            <SWButton onclick={addReferee}>Hinzufügen</SWButton>
+        </div>
+    {/snippet}
 </SWModal>
 
 <style>

src/components/admin/pages/generate/DragAcceptor.svelte

@@ -18,12 +18,14 @@
   -->
 
 <script lang="ts">
-    import {createEventDispatcher} from "svelte";
-  interface Props {
-    children?: import('svelte').Snippet;
-  }
+    import { Card } from "@components/ui/card";
 
-  let { children }: Props = $props();
+    interface Props {
+        children?: import("svelte").Snippet;
+        ondrop: (event: DragEvent) => void;
+    }
+
+    let { children, ondrop }: Props = $props();
 
     let dragover = $state(false);
 
@@ -32,19 +34,16 @@
         dragover = true;
     }
 
-    const dispatch = createEventDispatcher();
-
     function handleDrop(ev: DragEvent) {
         ev.preventDefault();
         dragover = false;
-        dispatch("drop", ev);
+        ondrop(ev);
     }
 </script>
 
-<div class="w-56 bg-gray-800 p-4 rounded" class:border={dragover} class:m-px={!dragover} ondrop={handleDrop}
-     ondragover={handleDragOver} ondragleave={() => dragover = false} role="none">
+<Card class="w-56 p-4 rounded m-px {dragover ? 'border-white' : ''}" ondrop={handleDrop} ondragover={handleDragOver} ondragleave={() => (dragover = false)} role="none">
     {@render children?.()}
-</div>
+</Card>
 
 <style>
     div {

src/components/admin/pages/generate/TeamChip.svelte

@@ -18,28 +18,28 @@
   -->
 
 <script lang="ts">
-  import { createBubbler } from 'svelte/legacy';
+    import type { Team } from "@type/team.ts";
+    import { brightness, colorFromTeam, lighten } from "../../util";
 
-  const bubble = createBubbler();
-    import type {Team} from "@type/team.ts";
-    import {brightness, colorFromTeam, lighten} from "../../util";
+    interface Props {
+        team: Team;
+        ondragstart: (event: DragEvent) => void;
+    }
 
-  interface Props {
-    team: Team;
-  }
-
-  let { team }: Props = $props();
+    let { team, ondragstart }: Props = $props();
 
     let hover = $state(false);
 </script>
 
-<div class="rounded w-fit p-2 border-gray-600 border cursor-grab select-none m-1 flex place-items-center"
-     style:background-color={hover ? lighten(colorFromTeam(team)) : colorFromTeam(team)}
-     class:text-black={brightness(colorFromTeam(team))} draggable="true"
-     ondragstart={bubble('dragstart')}
-     onmouseenter={() => hover = true}
-     onmouseleave={() => hover = false}
-     role="figure">
+<div
+    class="rounded w-fit p-2 border-gray-600 border cursor-grab select-none m-1 flex place-items-center"
+    style:background-color={hover ? lighten(colorFromTeam(team)) : colorFromTeam(team)}
+    class:text-black={brightness(colorFromTeam(team))}
+    draggable="true"
+    {ondragstart}
+    onmouseenter={() => (hover = true)}
+    onmouseleave={() => (hover = false)}
+    role="figure"
+>
     <span>{team.name}</span>
 </div>
-

src/components/dashboard/UserInfo.svelte

@@ -18,19 +18,19 @@
   -->
 
 <script lang="ts">
-    import {t} from "astro-i18n";
-    import type {Player} from "@type/data.ts";
-    import {l} from "@utils/util.ts";
+    import { t } from "astro-i18n";
+    import type { Player } from "@type/data.ts";
+    import { l } from "@utils/util.ts";
     import Statistics from "./Statistics.svelte";
-    import {authV2Repo} from "@repo/authv2.ts";
+    import { authV2Repo } from "@repo/authv2.ts";
     import Card from "@components/Card.svelte";
-    import {navigate} from "astro:transitions/client";
+    import { navigate } from "astro:transitions/client";
 
-  interface Props {
-    user: Player;
-  }
+    interface Props {
+        user: Player;
+    }
 
-  let { user }: Props = $props();
+    let { user }: Props = $props();
 
     async function logout() {
         await $authV2Repo.logout();
@@ -43,19 +43,25 @@
         <Card>
             <figure>
                 <figcaption class="text-center mb-4 text-2xl">{user.name}</figcaption>
-                <img src={`${import.meta.env.PUBLIC_API_SERVER}/data/skin/${user.uuid}`} class="transition duration-300 ease-in-out hover:scale-110 hover:drop-shadow-2xl" alt={user.name + "s bust"} width="150" height="150" />
+                <img
+                    src={`${import.meta.env.PUBLIC_API_SERVER}/data/skin/${user.uuid}`}
+                    class="transition duration-300 ease-in-out hover:scale-110 hover:drop-shadow-2xl"
+                    alt={user.name + "s bust"}
+                    width="150"
+                    height="150"
+                />
             </figure>
         </Card>
         <div class="flex flex-wrap">
             <button class="btn mt-2" onclick={logout}>{t("dashboard.buttons.logout")}</button>
             {#if user.perms.includes("MODERATION")}
-                <a class="btn w-fit mt-2" href="/admin" data-astro-reload>{t("dashboard.buttons.admin")}</a>
+                <a class="btn w-fit mt-2" href="/admin/new" data-astro-reload>{t("dashboard.buttons.admin")}</a>
             {/if}
         </div>
     </div>
     <div>
-        <h1 class="text-4xl font-bold">{t("dashboard.title", {name: user.name})}</h1>
-        <p>{t("dashboard.rank", {rank: t("home.prefix." + (user.prefix || "User"))})}</p>
+        <h1 class="text-4xl font-bold">{t("dashboard.title", { name: user.name })}</h1>
+        <p>{t("dashboard.rank", { rank: t("home.prefix." + (user.prefix || "User")) })}</p>
         <Statistics {user} />
     </div>
-</div>
+</div>

src/components/event/Calendar.svelte

@@ -0,0 +1,95 @@
+<script lang="ts">
+    import dayjs from "dayjs";
+    import "dayjs/locale/de";
+    import type { ExtendedEvent } from "../types/event";
+    import { Button } from "../ui/button";
+    import { ChevronLeft, ChevronRight } from "lucide-svelte";
+    import * as Card from "../ui/card";
+    import EventCard from "./EventCard.svelte";
+    import SWButton from "@components/styled/SWButton.svelte";
+
+    const {
+        events,
+    }: {
+        events: { slug: string; data: { event: ExtendedEvent } }[];
+    } = $props();
+
+    let currentYear = $state(dayjs().year());
+
+    // Group events by month
+    let eventsByMonth = $derived.by(() => {
+        const grouped = new Map<string, typeof events>();
+
+        events.forEach((event) => {
+            const eventDate = dayjs(event.data.event.event.start).locale("de");
+            if (eventDate.year() === currentYear) {
+                const monthKey = eventDate.format("YYYY-MM");
+                if (!grouped.has(monthKey)) {
+                    grouped.set(monthKey, []);
+                }
+                grouped.get(monthKey)!.push(event);
+            }
+        });
+
+        return grouped;
+    });
+
+    // Generate all 12 months for the current year
+    let months = $derived.by(() => {
+        return Array.from({ length: 12 }, (_, i) => {
+            const monthDate = dayjs().locale("de").year(currentYear).month(i);
+            const monthKey = monthDate.format("YYYY-MM");
+            return {
+                date: monthDate,
+                key: monthKey,
+                name: monthDate.format("MMMM"),
+                events: eventsByMonth.get(monthKey) || [],
+            };
+        });
+    });
+
+    function prevYear() {
+        currentYear = currentYear - 1;
+    }
+
+    function nextYear() {
+        currentYear = currentYear + 1;
+    }
+</script>
+
+<div>
+    <div class="flex justify-between items-center mb-6">
+        <h2 class="text-2xl font-bold text-white">
+            {currentYear}
+        </h2>
+        <div class="flex gap-2">
+            <SWButton onclick={prevYear} type="gray">
+                <ChevronLeft size={20} />
+            </SWButton>
+            <SWButton onclick={nextYear} type="gray">
+                <ChevronRight size={20} />
+            </SWButton>
+        </div>
+    </div>
+
+    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
+        {#each months as month}
+            <EventCard title={month.name} unsized={true}>
+                {#if month.events.length > 0}
+                    {#each month.events as event}
+                        <a href={`/events/${event.slug}/`} class="block p-2 bg-slate-800 hover:bg-slate-700 rounded border border-slate-600 transition-colors group">
+                            <div class="text-sm font-semibold text-white group-hover:text-blue-400 transition-colors">
+                                {event.data.event.event.name}
+                            </div>
+                            <div class="text-xs text-gray-400 mt-1">
+                                {dayjs(event.data.event.event.start).format("MMM D, YYYY • HH:mm")}
+                            </div>
+                        </a>
+                    {/each}
+                {:else}
+                    <p class="text-gray-500 text-sm italic">Keine Events für diesen Monat</p>
+                {/if}
+            </EventCard>
+        {/each}
+    </div>
+</div>

src/components/event/ConnectionRenderer.svelte

@@ -0,0 +1,109 @@
+<script lang="ts">
+    import { fightConnector } from "./connections.svelte";
+    import { onMount, onDestroy } from "svelte";
+
+    let root: HTMLElement | null = null;
+
+    let refresh = $state(0);
+
+    function handleScroll() {
+        refresh++;
+    }
+
+    function getScrollableParent(el: HTMLElement | null): HTMLElement | null {
+        let node: HTMLElement | null = el?.parentElement ?? null;
+        while (node) {
+            const style = getComputedStyle(node);
+            const canScrollX = (style.overflowX === "auto" || style.overflowX === "scroll") && node.scrollWidth > node.clientWidth;
+            const canScrollY = (style.overflowY === "auto" || style.overflowY === "scroll") && node.scrollHeight > node.clientHeight;
+            if (canScrollX || canScrollY) return node;
+            node = node.parentElement;
+        }
+        return null;
+    }
+
+    let cleanup: (() => void) | null = null;
+
+    onMount(() => {
+        const scrollParent = getScrollableParent(root);
+        const target: EventTarget | null = scrollParent ?? window;
+
+        target?.addEventListener("scroll", handleScroll, { passive: true } as AddEventListenerOptions);
+        window.addEventListener("resize", handleScroll, { passive: true });
+
+        cleanup = () => {
+            target?.removeEventListener?.("scroll", handleScroll as EventListener);
+            window.removeEventListener("resize", handleScroll as EventListener);
+        };
+    });
+
+    onDestroy(() => {
+        cleanup?.();
+        cleanup = null;
+    });
+</script>
+
+<div bind:this={root} class="connection-renderer-root">
+    {#key refresh}
+        {#each $fightConnector.showedConnections as connection}
+            {@const fromLeft = connection.fromElement.offsetLeft + connection.fromElement.offsetWidth}
+            {@const toLeft = connection.toElement.offsetLeft}
+            {@const fromTop = connection.fromElement.offsetTop + connection.fromElement.offsetHeight / 2}
+            {@const toTop = connection.toElement.offsetTop + connection.toElement.offsetHeight / 2}
+            {@const horizontalDistance = toLeft - fromLeft}
+            {@const verticalDistance = toTop - fromTop}
+            <!-- Apply horizontal offset only to the mid bridge and second segment fan-out; also shift vertical line to keep continuity -->
+            {@const midLeft = fromLeft + horizontalDistance / 2 + connection.offset}
+            {@const firstSegmentWidth = horizontalDistance / 2}
+
+            {#if firstSegmentWidth > 0}
+                <div
+                    class="horizontal-line"
+                    style="
+                    background-color: {connection.color};
+                    left: {fromLeft}px;
+                    top: {fromTop + connection.offset / 4}px;
+                    width: {firstSegmentWidth + connection.offset + 2}px;
+                "
+                ></div>
+                <div
+                    class="vertical-line"
+                    style="
+                    background-color: {connection.color};
+                    left: {midLeft}px;
+                    top: {Math.min(fromTop + connection.offset / 4, toTop + connection.offset / 4)}px;
+                    height: {Math.abs(toTop + connection.offset / 4 - (fromTop + connection.offset / 4))}px;
+                "
+                ></div>
+                <div
+                    class="horizontal-line"
+                    style="
+                    background-color: {connection.color};
+                    left: {midLeft}px;
+                    top: {toTop + connection.offset / 4}px;
+                    width: {firstSegmentWidth - connection.offset}px;
+                "
+                ></div>
+            {/if}
+        {/each}
+    {/key}
+</div>
+
+<style>
+    .connection-renderer-root {
+        position: static;
+        pointer-events: none;
+    }
+    .vertical-line {
+        position: absolute;
+        width: 2px;
+        z-index: -10;
+        pointer-events: none;
+    }
+    .horizontal-line {
+        position: absolute;
+        height: 2px;
+        z-index: -10;
+        pointer-events: none;
+    }
+</style>

src/components/event/DoubleEleminationDisplay.svelte

@@ -0,0 +1,212 @@
+<script lang="ts">
+    import type {
+        ExtendedEvent,
+        EventFight,
+        ResponseGroups,
+        ResponseRelation,
+    } from "@type/event.ts";
+    import type { DoubleEleminationViewConfig } from "./types";
+    import EventCard from "./EventCard.svelte";
+    import EventFightChip from "./EventFightChip.svelte";
+    import { onMount, onDestroy, tick } from "svelte";
+    import { fightConnector } from "./connections.svelte.ts";
+
+    const {
+        event,
+        config,
+    }: { event: ExtendedEvent; config: DoubleEleminationViewConfig } = $props();
+
+    const defaultGroup: ResponseGroups = {
+        id: -1,
+        name: "Double Elimination",
+        pointsPerWin: 0,
+        pointsPerLoss: 0,
+        pointsPerDraw: 0,
+        type: "ELIMINATION_STAGE",
+        points: null,
+    };
+
+    function indexRelations(
+        ev: ExtendedEvent,
+    ): Map<number, ResponseRelation[]> {
+        const map = new Map<number, ResponseRelation[]>();
+        for (const rel of ev.relations) {
+            const list = map.get(rel.fight) ?? [];
+            list.push(rel);
+            map.set(rel.fight, list);
+        }
+        return map;
+    }
+
+    const relationsByFight = indexRelations(event);
+    const fightMap = new Map<number, EventFight>(
+        event.fights.map((f) => [f.id, f]),
+    );
+
+    function collectBracket(startFinalId: number): EventFight[][] {
+        const finalFight = fightMap.get(startFinalId);
+        if (!finalFight) return [];
+        const bracketGroupId = finalFight.group?.id ?? null;
+        const stages: EventFight[][] = [];
+        let layer: EventFight[] = [finalFight];
+        const visited = new Set<number>([finalFight.id]);
+        while (layer.length) {
+            stages.push(layer);
+            const next: EventFight[] = [];
+            for (const fight of layer) {
+                const rels = relationsByFight.get(fight.id) ?? [];
+                for (const rel of rels) {
+                    if (rel.type === "FIGHT" && rel.fromFight) {
+                        const src =
+                            fightMap.get(rel.fromFight.id) ?? rel.fromFight;
+                        if (!src) continue;
+                        // Only traverse within the same bracket (group) to avoid cross-bracket pollution
+                        if (
+                            bracketGroupId !== null &&
+                            src.group?.id !== bracketGroupId
+                        )
+                            continue;
+                        if (!visited.has(src.id)) {
+                            visited.add(src.id);
+                            next.push(src);
+                        }
+                    }
+                }
+            }
+            layer = next;
+        }
+        stages.reverse();
+        return stages;
+    }
+
+    const winnersStages = $derived(collectBracket(config.winnersFinalFight));
+    const losersStages = $derived(collectBracket(config.losersFinalFight));
+    const grandFinal = fightMap.get(config.grandFinalFight);
+
+    function stageName(count: number, isWinners: boolean): string {
+        switch (count) {
+            case 1:
+                return isWinners ? "Finale (W)" : "Finale (L)";
+            case 2:
+                return isWinners ? "Halbfinale (W)" : "Halbfinale (L)";
+            case 4:
+                return isWinners ? "Viertelfinale (W)" : "Viertelfinale (L)";
+            case 8:
+                return isWinners ? "Achtelfinale (W)" : "Achtelfinale (L)";
+            default:
+                return `Runde (${count}) ${isWinners ? "W" : "L"}`;
+        }
+    }
+
+    let connector: any;
+    const unsubscribe = fightConnector.subscribe((v) => (connector = v));
+    onDestroy(() => {
+        connector.clearAllConnections();
+        unsubscribe();
+    });
+
+    function buildConnections() {
+        if (!connector) return;
+        connector.clearAllConnections();
+        // Track offsets per source fight and team to stagger multiple outgoing lines for visual clarity
+        const fightTeamOffsetMap = new Map<string, number>();
+        const step = 8; // px separation between parallel lines
+        for (const rel of event.relations) {
+            if (rel.type !== "FIGHT" || !rel.fromFight) continue;
+            const fromId = rel.fromFight.id;
+            const fromEl = document.getElementById(
+                `fight-${fromId}`,
+            ) as HTMLElement | null;
+            const toEl = document.getElementById(
+                `fight-${rel.fight}-team-${rel.team.toLowerCase()}`,
+            ) as HTMLElement | null;
+            if (!fromEl || !toEl) continue;
+            // Use team-signed offsets so BLUE goes left (negative), RED goes right (positive)
+            const key = `${fromId}:${rel.team}`;
+            const index = fightTeamOffsetMap.get(key) ?? 0;
+            const sign = rel.team === "BLUE" ? -1 : 1;
+            const offset = sign * (index + 1) * step;
+            const color = rel.fromPlace === 0 ? "#60a5fa" : "#f87171";
+            connector.addConnection(fromEl, toEl, color, offset);
+            fightTeamOffsetMap.set(key, index + 1);
+        }
+    }
+
+    onMount(async () => {
+        await tick();
+        buildConnections();
+    });
+</script>
+
+{#if !grandFinal}
+    <p class="text-gray-400 italic">
+        Konfiguration unvollständig (Grand Final fehlt).
+    </p>
+{:else}
+    {#key winnersStages.length + ":" + losersStages.length}
+        <!-- Build a grid where rows: winners (stages), losers (stages), with losers offset by one stage/column -->
+        {@const totalColumns =
+            Math.max(winnersStages.length, losersStages.length + 1) + 1}
+        <div
+            class="grid gap-x-16 gap-y-6 items-start"
+            style={`grid-template-columns: repeat(${totalColumns}, max-content);`}
+        >
+            <!-- Winners heading spans all columns -->
+            <h2 class="font-bold text-center">Winners Bracket</h2>
+
+            <!-- Winners stages in row 2 -->
+            {#each winnersStages as stage, i}
+                <div style={`grid-row: 2; grid-column: ${i + 1};`}>
+                    <EventCard title={stageName(stage.length, true)}>
+                        {#each stage as fight}
+                            <EventFightChip
+                                {event}
+                                {fight}
+                                group={fight.group ?? defaultGroup}
+                            />
+                        {/each}
+                    </EventCard>
+                </div>
+            {/each}
+
+            <!-- Place Grand Final at the far right, aligned with winners row -->
+            <div
+                style={`grid-row: 2; grid-column: ${totalColumns};`}
+                class="self-center"
+            >
+                <EventCard title="Grand Final">
+                    {#if grandFinal}
+                        <EventFightChip
+                            {event}
+                            fight={grandFinal}
+                            group={grandFinal.group ?? defaultGroup}
+                        />
+                    {/if}
+                </EventCard>
+            </div>
+
+            <!-- Losers heading spans all columns -->
+            <h2
+                class="font-bold text-center"
+                style="grid-row: 3; grid-column: 1 / {totalColumns};"
+            >
+                Losers Bracket
+            </h2>
+
+            <!-- Losers stages in row 4, offset by one column to the right -->
+            {#each losersStages as stage, j}
+                <div style={`grid-row: 4; grid-column: ${j + 2};`} class="mt-2">
+                    <EventCard title={stageName(stage.length, false)}>
+                        {#each stage as fight}
+                            <EventFightChip
+                                {event}
+                                {fight}
+                                group={fight.group ?? defaultGroup}
+                            />
+                        {/each}
+                    </EventCard>
+                </div>
+            {/each}
+        </div>
+    {/key}
+{/if}

src/components/event/EleminationDisplay.svelte

@@ -0,0 +1,142 @@
+<script lang="ts">
+    import type {
+        ExtendedEvent,
+        EventFight,
+        ResponseGroups,
+        ResponseRelation,
+    } from "@type/event.ts";
+    import type { EleminationViewConfig } from "./types";
+    import EventCard from "./EventCard.svelte";
+    import EventFightChip from "./EventFightChip.svelte";
+    import { onMount, onDestroy, tick } from "svelte";
+    import { FightConnector, fightConnector } from "./connections.svelte.ts";
+
+    const {
+        event,
+        config,
+    }: { event: ExtendedEvent; config: EleminationViewConfig } = $props();
+
+    const defaultGroup: ResponseGroups = {
+        id: -1,
+        name: "Elimination",
+        pointsPerWin: 0,
+        pointsPerLoss: 0,
+        pointsPerDraw: 0,
+        type: "ELIMINATION_STAGE",
+        points: null,
+    };
+
+    function buildStages(
+        ev: ExtendedEvent,
+        finalFightId: number,
+    ): EventFight[][] {
+        const fightMap = new Map<number, EventFight>(
+            ev.fights.map((f) => [f.id, f]),
+        );
+        const relationsByFight = new Map<number, ResponseRelation[]>();
+        for (const rel of ev.relations) {
+            const list = relationsByFight.get(rel.fight) ?? [];
+            list.push(rel);
+            relationsByFight.set(rel.fight, list);
+        }
+
+        const finalFight = fightMap.get(finalFightId);
+        if (!finalFight) return [];
+
+        const stages: EventFight[][] = [];
+        let currentLayer: EventFight[] = [finalFight];
+        const visited = new Set<number>([finalFight.id]);
+
+        while (currentLayer.length) {
+            stages.push(currentLayer);
+            const nextLayer: EventFight[] = [];
+            for (const fight of currentLayer) {
+                const rels = relationsByFight.get(fight.id) ?? [];
+                for (const rel of rels) {
+                    if (rel.type === "FIGHT" && rel.fromFight) {
+                        const src =
+                            fightMap.get(rel.fromFight.id) ?? rel.fromFight;
+                        if (src && !visited.has(src.id)) {
+                            visited.add(src.id);
+                            nextLayer.push(src);
+                        }
+                    }
+                }
+            }
+            currentLayer = nextLayer;
+        }
+
+        stages.reverse();
+
+        return stages;
+    }
+
+    function stageName(index: number, fights: EventFight[]): string {
+        const count = fights.length;
+        switch (count) {
+            case 1:
+                return `Finale`;
+            case 2:
+                return "Halbfinale";
+            case 4:
+                return "Viertelfinale";
+            case 8:
+                return "Achtelfinale";
+            case 16:
+                return "Sechzehntelfinale";
+            default:
+                return `Runde ${index + 1}`;
+        }
+    }
+
+    const stages = $derived(buildStages(event, config.finalFight));
+
+    const connector = $fightConnector;
+
+    onDestroy(() => {
+        connector.clearAllConnections();
+    });
+
+    function buildConnections() {
+        if (!connector) return;
+        connector.clearConnections();
+
+        for (const rel of event.relations) {
+            if (rel.type !== "FIGHT" || !rel.fromFight) continue;
+            const fromEl = document.getElementById(
+                `fight-${rel.fromFight.id}`,
+            ) as HTMLElement | null;
+            const toEl = document.getElementById(
+                `fight-${rel.fight}-team-${rel.team.toLowerCase()}`,
+            ) as HTMLElement | null;
+            if (fromEl && toEl) {
+                connector.addConnection(fromEl, toEl, "#9ca3af");
+            }
+        }
+    }
+
+    onMount(async () => {
+        await tick();
+        buildConnections();
+    });
+</script>
+
+{#if stages.length === 0}
+    <p class="text-gray-400 italic">Keine Eliminationsdaten gefunden.</p>
+{:else}
+    <div class="flex gap-12">
+        {#each stages as stage, index}
+            <div class="flex flex-col justify-center">
+                <EventCard title={stageName(index, stage)}>
+                    {#each stage as fight}
+                        <EventFightChip
+                            {event}
+                            {fight}
+                            group={fight.group ?? defaultGroup}
+                        />
+                    {/each}
+                </EventCard>
+            </div>
+        {/each}
+    </div>
+{/if}

src/components/event/EventCard.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+    import type { Snippet } from "svelte";
+
+    const {
+        title,
+        children,
+        unsized = false,
+    }: {
+        title: string;
+        children: Snippet;
+        unsized?: boolean;
+    } = $props();
+</script>
+
+<div class="flex flex-col gap-1 {unsized ? '' : 'w-72 m-4'}">
+    <div class="bg-gray-100 text-black font-bold px-2 rounded uppercase">
+        {title}
+    </div>
+    <div class="border border-gray-600 rounded p-2 flex flex-col gap-2 bg-slate-900">
+        {@render children()}
+    </div>
+</div>

src/components/event/EventCardOutline.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+    import type { Snippet } from "svelte";
+
+    const {
+        children,
+    }: {
+        children: Snippet;
+    } = $props();
+</script>
+
+<div class="bg-neutral-900 border border-gray-700 rounded-lg overflow-hidden">
+    {@render children()}
+</div>

src/components/event/EventFightChip.svelte

@@ -0,0 +1,67 @@
+<script lang="ts">
+    import type { EventFight, ExtendedEvent, ResponseGroups } from "@components/types/event";
+    import EventCardOutline from "./EventCardOutline.svelte";
+    import EventTeamChip from "./EventTeamChip.svelte";
+
+    let {
+        fight,
+        group,
+        event,
+        disabled = false,
+    }: {
+        fight: EventFight;
+        group: ResponseGroups;
+        event: ExtendedEvent;
+        disabled?: boolean;
+    } = $props();
+
+    function getScore(group: ResponseGroups, fight: EventFight, blueTeam: boolean): string {
+        if (!fight.hasFinished) return "-";
+
+        if (fight.ergebnis === 1) {
+            return blueTeam ? group.pointsPerWin.toString() : group.pointsPerLoss.toString();
+        } else if (fight.ergebnis === 2) {
+            return blueTeam ? group.pointsPerLoss.toString() : group.pointsPerWin.toString();
+        } else {
+            return group.pointsPerDraw.toString();
+        }
+    }
+</script>
+
+<EventCardOutline>
+    <EventTeamChip
+        team={{
+            id: -1,
+            kuerzel: new Date(fight.start).toLocaleTimeString([], {
+                hour: "2-digit",
+                minute: "2-digit",
+            }),
+            name: new Date(fight.start).toLocaleDateString([]),
+            color: "-1",
+        }}
+        time={true}
+        {event}
+    />
+    <div id={"fight-" + fight.id}>
+        <EventTeamChip
+            {event}
+            {disabled}
+            team={fight.blueTeam}
+            score={getScore(group, fight, true)}
+            showWinner={true}
+            isWinner={fight.ergebnis === 1}
+            noWinner={fight.ergebnis === 0}
+            id="fight-{fight.id}-team-blue"
+        />
+        <EventTeamChip
+            {event}
+            {disabled}
+            team={fight.redTeam}
+            score={getScore(group, fight, false)}
+            showWinner={true}
+            isWinner={fight.ergebnis === 2}
+            noWinner={fight.ergebnis === 0}
+            id="fight-{fight.id}-team-red"
+        />
+    </div>
+</EventCardOutline>

src/components/event/EventFights.svelte

@@ -0,0 +1,50 @@
+<script lang="ts">
+    import type { ExtendedEvent } from "@type/event.ts";
+    import type { EventViewConfig } from "./types";
+    import { onMount } from "svelte";
+    import { eventRepo } from "@components/repo/event";
+    import GroupDisplay from "./GroupDisplay.svelte";
+    import ConnectionRenderer from "./ConnectionRenderer.svelte";
+    import EleminationDisplay from "./EleminationDisplay.svelte";
+    import DoubleEleminationDisplay from "./DoubleEleminationDisplay.svelte";
+
+    const { event, viewConfig }: { event: ExtendedEvent; viewConfig: EventViewConfig } = $props();
+
+    let loadedEvent = $state<ExtendedEvent>(event);
+
+    onMount(() => {
+        loadEvent();
+    });
+
+    async function loadEvent() {
+        loadedEvent = await $eventRepo.getEvent(event.event.id.toString());
+    }
+
+    let selectedView = $state<string>(Object.keys(viewConfig)[0]);
+</script>
+
+<div class="flex gap-4 overflow-x-auto mb-4">
+    {#each Object.entries(viewConfig) as [name, view]}
+        <button
+            class="mb-8 border-gray-700 border rounded-lg p-4 w-60 hover:bg-gray-700 hover:shadow-lg transition-shadow hover:border-gray-500"
+            class:bg-gray-800={selectedView === name}
+            onclick={() => (selectedView = name)}
+        >
+            <h1 class="text-left">{view.name}</h1>
+        </button>
+    {/each}
+</div>
+
+{#if selectedView}
+    {@const view = viewConfig[selectedView]}
+    <div class="overflow-x-scroll relative">
+        <ConnectionRenderer />
+        {#if view.view.type === "GROUP"}
+            <GroupDisplay event={loadedEvent} config={view.view} />
+        {:else if view.view.type === "ELEMINATION"}
+            <EleminationDisplay event={loadedEvent} config={view.view} />
+        {:else if view.view.type === "DOUBLE_ELEMINATION"}
+            <DoubleEleminationDisplay event={loadedEvent} config={view.view} />
+        {/if}
+    </div>
+{/if}

src/components/event/EventList.svelte

@@ -0,0 +1,122 @@
+<script lang="ts">
+    import type { ExtendedEvent } from "../types/event";
+    import dayjs from "dayjs";
+    import * as Card from "../ui/card";
+
+    const { events }: { events: { slug: string; data: { event: ExtendedEvent } }[] } = $props();
+    // Categorize events into current, upcoming and past.
+    const now = dayjs();
+    const sorted = [...events].sort((a, b) => a.data.event.event.start - b.data.event.event.start);
+
+    const currentEvents = sorted
+        .filter((e) => {
+            const start = dayjs(e.data.event.event.start);
+            const end = dayjs(e.data.event.event.end);
+            return start.isBefore(now) && end.isAfter(now);
+        })
+        .sort((a, b) => a.data.event.event.end - b.data.event.event.end);
+
+    const currentEvent = currentEvents[0];
+    const upcomingEvents = sorted.filter((e) => dayjs(e.data.event.event.start).isAfter(now));
+    const pastEvents = sorted.filter((e) => dayjs(e.data.event.event.end).isBefore(now)).sort((a, b) => b.data.event.event.end - a.data.event.event.end);
+</script>
+
+{#if currentEvent}
+    <div class="mb-8">
+        <h2 class="text-xl font-semibold text-white mb-4">Aktuelles Event</h2>
+        <div class="grid grid-cols-1">
+            <a href={`/events/${currentEvent.slug}/`} class="group block h-full">
+                <Card.Root class="h-full overflow-hidden border-slate-700 bg-slate-800 transition-all hover:-translate-y-1 hover:shadow-xl">
+                    <div class="h-32 bg-gradient-to-br from-blue-600 to-purple-700 relative">
+                        <div class="absolute bottom-0 left-0 p-4 bg-gradient-to-t from-slate-900 to-transparent w-full">
+                            <div class="inline-block bg-slate-900/80 backdrop-blur text-white text-xs font-bold px-2 py-1 rounded mb-1 border border-slate-600">
+                                {dayjs(currentEvent.data.event.event.start).format("DD.MM.YYYY")}
+                            </div>
+                        </div>
+                    </div>
+                    <Card.Header>
+                        <Card.Title class="text-white group-hover:text-blue-400 transition-colors">
+                            {currentEvent.data.event.event.name}
+                        </Card.Title>
+                    </Card.Header>
+                    <Card.Content>
+                        <p class="text-gray-400 text-sm line-clamp-2">
+                            Läuft seit {dayjs(currentEvent.data.event.event.start).format("HH:mm")}
+                        </p>
+                        <div class="mt-4 flex items-center text-sm text-blue-400 font-medium">
+                            Details <span class="ml-1 transition-transform group-hover:translate-x-1">→</span>
+                        </div>
+                    </Card.Content>
+                </Card.Root>
+            </a>
+        </div>
+    </div>
+{/if}
+
+{#if upcomingEvents.length}
+    <div class="mb-8">
+        <h2 class="text-xl font-semibold text-white mb-4">Bevorstehende Events</h2>
+        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+            {#each upcomingEvents as event}
+                <a href={`/events/${event.slug}/`} class="group block h-full">
+                    <Card.Root class="h-full overflow-hidden border-slate-700 bg-slate-800 transition-all hover:-translate-y-1 hover:shadow-xl">
+                        <div class="h-32 bg-gradient-to-br from-blue-600 to-purple-700 relative">
+                            <div class="absolute bottom-0 left-0 p-4 bg-gradient-to-t from-slate-900 to-transparent w-full">
+                                <div class="inline-block bg-slate-900/80 backdrop-blur text-white text-xs font-bold px-2 py-1 rounded mb-1 border border-slate-600">
+                                    {dayjs(event.data.event.event.start).format("DD.MM.YYYY")}
+                                </div>
+                            </div>
+                        </div>
+                        <Card.Header>
+                            <Card.Title class="text-white group-hover:text-blue-400 transition-colors">
+                                {event.data.event.event.name}
+                            </Card.Title>
+                        </Card.Header>
+                        <Card.Content>
+                            <p class="text-gray-400 text-sm line-clamp-2">
+                                Startet um {dayjs(event.data.event.event.start).format("HH:mm")}
+                            </p>
+                            <div class="mt-4 flex items-center text-sm text-blue-400 font-medium">
+                                Details <span class="ml-1 transition-transform group-hover:translate-x-1">→</span>
+                            </div>
+                        </Card.Content>
+                    </Card.Root>
+                </a>
+            {/each}
+        </div>
+    </div>
+{/if}
+
+{#if pastEvents.length}
+    <div class="mb-4">
+        <h2 class="text-xl font-semibold text-white mb-4">Vergangene Events</h2>
+        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 opacity-70">
+            {#each pastEvents as event}
+                <a href={`/events/${event.slug}/`} class="group block h-full">
+                    <Card.Root class="h-full overflow-hidden border-slate-700 bg-slate-800 transition-all hover:-translate-y-1 hover:shadow-xl">
+                        <div class="h-32 bg-gradient-to-br from-blue-600 to-purple-700 relative">
+                            <div class="absolute bottom-0 left-0 p-4 bg-gradient-to-t from-slate-900 to-transparent w-full">
+                                <div class="inline-block bg-slate-900/80 backdrop-blur text-white text-xs font-bold px-2 py-1 rounded mb-1 border border-slate-600">
+                                    {dayjs(event.data.event.event.start).format("DD.MM.YYYY")}
+                                </div>
+                            </div>
+                        </div>
+                        <Card.Header>
+                            <Card.Title class="text-white group-hover:text-blue-400 transition-colors">
+                                {event.data.event.event.name}
+                            </Card.Title>
+                        </Card.Header>
+                        <Card.Content>
+                            <p class="text-gray-400 text-sm line-clamp-2">
+                                Stattgefunden um {dayjs(event.data.event.event.start).format("HH:mm")}
+                            </p>
+                            <div class="mt-4 flex items-center text-sm text-blue-400 font-medium">
+                                Details <span class="ml-1 transition-transform group-hover:translate-x-1">→</span>
+                            </div>
+                        </Card.Content>
+                    </Card.Root>
+                </a>
+            {/each}
+        </div>
+    </div>
+{/if}

src/components/event/EventPage.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+    import type { ExtendedEvent } from "../types/event";
+    import { Button } from "../ui/button";
+    import { Calendar } from "lucide-svelte";
+    import { List } from "lucide-svelte";
+    import EventList from "./EventList.svelte";
+    import CalendarView from "./Calendar.svelte";
+
+    const { events }: { events: { slug: string; data: { event: ExtendedEvent } }[] } = $props();
+
+    let viewMode = $state<"list" | "calendar">("list");
+</script>
+
+<div class="flex flex-col gap-6">
+    <div class="flex justify-between items-center">
+        <h1 class="text-3xl font-bold text-white">Events</h1>
+    </div>
+
+    <CalendarView {events} />
+    <EventList {events} />
+</div>

src/components/event/EventTeamChip.svelte

@@ -0,0 +1,70 @@
+<script lang="ts">
+    import type { Team } from "@type/team.ts";
+    import { teamHoverService } from "./team-hover.svelte";
+    import { Sheet, SheetContent, SheetTrigger } from "@components/ui/sheet";
+    import TeamInfo from "./TeamInfo.svelte";
+    import type { ExtendedEvent } from "@components/types/event";
+
+    const {
+        team,
+        event,
+        score = "",
+        time = false,
+        showWinner = false,
+        isWinner = false,
+        noWinner = false,
+        id,
+        disabled = false,
+    }: {
+        team: Team;
+        event: ExtendedEvent;
+        score?: string;
+        time?: boolean;
+        showWinner?: boolean;
+        isWinner?: boolean;
+        noWinner?: boolean;
+        id?: string;
+        disabled?: boolean;
+    } = $props();
+
+    let hoverService = $teamHoverService;
+
+    type StringAnyRecord = Record<string, any>;
+</script>
+
+{#if !disabled}
+    <Sheet>
+        <SheetTrigger>
+            {#snippet child({ props })}
+                {@render teamButton({ props })}
+            {/snippet}
+        </SheetTrigger>
+        <SheetContent>
+            <TeamInfo {team} {event} />
+        </SheetContent>
+    </Sheet>
+{:else}
+    {@render teamButton({ props: {} })}
+{/if}
+
+{#snippet teamButton({ props }: { props: StringAnyRecord })}
+    <button
+        {...props}
+        class="flex justify-between px-2 w-full team-chip text-left border-b border-b-gray-700 last:border-b-0 {time ? 'py-1 hover:bg-gray-800' : 'py-3 cursor-pointer'} team-{disabled
+            ? -1
+            : team.id} {hoverService.currentHover === team.id ? 'bg-gray-800' : ''} {showWinner ? 'border-l-4' : ''} {showWinner && isWinner ? 'border-l-yellow-500' : 'border-l-gray-950'}"
+        onmouseenter={() => team.id === -1 || hoverService.setHover(team.id)}
+        onmouseleave={() => team.id === -1 || hoverService.clearHover()}
+        {id}
+    >
+        <div class="flex">
+            <div class="w-12 {time ? 'font-bold' : ''}">
+                {team.kuerzel}
+            </div>
+            <span class={time ? "font-mono" : "font-bold"}>{team.name}</span>
+        </div>
+        <div class="{showWinner && isWinner && 'font-bold'} {isWinner ? 'text-yellow-400' : ''} {noWinner ? 'font-bold' : ''}">
+            {score}
+        </div>
+    </button>
+{/snippet}

src/components/event/GroupDisplay.svelte

@@ -0,0 +1,97 @@
+<script lang="ts">
+    import type { EventFight, ExtendedEvent, ResponseGroups } from "@type/event.ts";
+    import type { GroupViewConfig } from "./types";
+    import EventCard from "./EventCard.svelte";
+    import EventCardOutline from "./EventCardOutline.svelte";
+    import EventTeamChip from "./EventTeamChip.svelte";
+    import EventFightChip from "./EventFightChip.svelte";
+    import { teamHoverService } from "./team-hover.svelte";
+
+    const {
+        event,
+        config,
+    }: {
+        event: ExtendedEvent;
+        config: GroupViewConfig;
+    } = $props();
+
+    // Groups fights into rounds: a round starts at the first fight's start;
+    // all fights starting within 10 minutes (600_000 ms) of that are in the same round.
+    function detectRounds(fights: EventFight[]): EventFight[][] {
+        if (!fights || fights.length === 0) return [];
+
+        const TEN_MIN_MS = 10 * 60 * 1000;
+        const sorted = [...fights].sort((a, b) => a.start - b.start);
+
+        const rounds: EventFight[][] = [];
+        let currentRound: EventFight[] = [];
+        let roundStart = sorted[0].start;
+
+        for (const fight of sorted) {
+            if (fight.start - roundStart <= TEN_MIN_MS) {
+                currentRound.push(fight);
+            } else {
+                if (currentRound.length) rounds.push(currentRound);
+                currentRound = [fight];
+                roundStart = fight.start;
+            }
+        }
+
+        if (currentRound.length) rounds.push(currentRound);
+        return rounds;
+    }
+
+    function chunkIntoRows<T>(items: T[], rowCount: number): T[][] {
+        if (!items || items.length === 0) return [];
+
+        const rows = Math.max(1, Math.floor(rowCount || 1));
+        const perRow = Math.ceil(items.length / rows);
+
+        const chunked: T[][] = [];
+        for (let i = 0; i < rows; i++) {
+            const slice = items.slice(i * perRow, (i + 1) * perRow);
+            if (slice.length) chunked.push(slice);
+        }
+        return chunked;
+    }
+
+    const hover = $teamHoverService;
+</script>
+
+{#each config.groups as groupId}
+    {@const group = event.groups.find((g) => g.id === groupId)!!}
+    {@const fights = event.fights.filter((f) => f.group?.id === groupId)}
+    {@const rounds = detectRounds(fights)}
+    {@const roundRows = config.roundRows ?? 1}
+    {@const roundRowsChunked = chunkIntoRows(rounds, roundRows)}
+    <div class="flex">
+        <div>
+            <EventCard title={group.name}>
+                <EventCardOutline>
+                    {#each Object.entries(group.points ?? {}).sort((v1, v2) => v2[1] - v1[1]) as points}
+                        {@const [teamId, point] = points}
+                        {@const team = event.teams.find((t) => t.id.toString() === teamId)!!}
+                        <EventTeamChip {team} {event} score={point.toString()} />
+                    {/each}
+                </EventCardOutline>
+            </EventCard>
+        </div>
+        <div class="flex flex-col">
+            {#each roundRowsChunked as row}
+                <div class="flex">
+                    {#each row as round, index (round)}
+                        {@const roundIndex = rounds.indexOf(round)}
+                        {@const teams = Array.from(new Set(round.flatMap((f) => [f.redTeam, f.blueTeam])))}
+                        <div class="{hover.currentHover && !teams.some((t) => t?.id === hover.currentHover) ? 'opacity-30' : ''} transition-opacity">
+                            <EventCard title="Runde {roundIndex + 1}">
+                                {#each round as fight}
+                                    <EventFightChip {event} {fight} {group} />
+                                {/each}
+                            </EventCard>
+                        </div>
+                    {/each}
+                </div>
+            {/each}
+        </div>
+    </div>
+{/each}

src/components/event/TeamInfo.svelte

@@ -0,0 +1,79 @@
+<script lang="ts">
+    import { dataRepo } from "@components/repo/data";
+    import type { ExtendedEvent, ResponseTeam } from "@components/types/event";
+    import EventFightChip from "./EventFightChip.svelte";
+    import SheetHeader from "@components/ui/sheet/sheet-header.svelte";
+    import { SheetDescription, SheetTitle } from "@components/ui/sheet";
+
+    const { event, team }: { event: ExtendedEvent; team: ResponseTeam } = $props();
+
+    let members = $derived.by(() => {
+        return fetchMembers(team.id);
+    });
+    let recentFights = $derived.by(() => {
+        return event.fights
+            .filter((f) => f.hasFinished && (f.blueTeam.id === team.id || f.redTeam.id === team.id))
+            .sort((a, b) => b.start - a.start)
+            .slice(0, 5);
+    });
+
+    async function fetchMembers(teamId: number) {
+        return await $dataRepo.queryPlayers(undefined, undefined, [teamId], 50, 0, false, false);
+    }
+</script>
+
+<SheetHeader>
+    <SheetTitle
+        >{team.name}
+        <span class="text-sm text-gray-400">{team.kuerzel}</span></SheetTitle
+    >
+    <SheetDescription>Statistiken des Teams</SheetDescription>
+</SheetHeader>
+
+<div class="mt-8 space-y-8">
+    <section>
+        <h3 class="text-lg font-semibold mb-4 border-b border-slate-800 pb-2 text-blue-400">Teammitglieder</h3>
+        {#await members}
+            <p class="text-slate-500 italic text-sm">Lade Mitglieder...</p>
+        {:then member}
+            <div class="grid grid-cols-2 gap-2">
+                {#each member.entries as p (p.uuid)}
+                    <div class="bg-slate-800/50 p-2 rounded border border-slate-700 flex items-center gap-2">
+                        <div class="w-6 h-6 rounded-full bg-slate-700 flex items-center justify-center text-[10px]">
+                            {p.name.charAt(0)}
+                        </div>
+                        <span class="truncate text-sm">{p.name}</span>
+                    </div>
+                {/each}
+            </div>
+        {/await}
+    </section>
+
+    <section>
+        <h3 class="text-lg font-semibold mb-4 border-b border-slate-800 pb-2 text-green-400">Letzte 5 Kämpfe</h3>
+        {#if recentFights.length > 0}
+            <div class="space-y-3">
+                {#each recentFights as fight}
+                    <div class="scale-90 origin-left">
+                        <EventFightChip
+                            {event}
+                            disabled={true}
+                            {fight}
+                            group={fight.group ?? {
+                                id: -1,
+                                name: "Event",
+                                pointsPerWin: 0,
+                                pointsPerLoss: 0,
+                                pointsPerDraw: 0,
+                                type: "GROUP_STAGE",
+                                points: null,
+                            }}
+                        />
+                    </div>
+                {/each}
+            </div>
+        {:else}
+            <p class="text-slate-500 italic text-sm">Keine beendeten Kämpfe in diesem Event.</p>
+        {/if}
+    </section>
+</div>

src/components/event/TeamList.svelte

@@ -0,0 +1,64 @@
+<script lang="ts">
+    import { onMount } from "svelte";
+    import type { ExtendedEvent } from "@components/types/event";
+    import type { Team } from "@components/types/team";
+    import { eventRepo } from "@components/repo/event";
+
+    const {
+        event,
+    }: {
+        event: ExtendedEvent;
+    } = $props();
+
+    let teams: Team[] = $state(event.teams);
+
+    const colorMap: Record<string, string> = {
+        "0": "#000000",
+        "1": "#0000AA",
+        "2": "#00AA00",
+        "3": "#00AAAA",
+        "4": "#AA0000",
+        "5": "#AA00AA",
+        "6": "#FFAA00",
+        "7": "#AAAAAA",
+        "8": "#555555",
+        "9": "#5555FF",
+        a: "#55FF55",
+        b: "#55FFFF",
+        c: "#FF5555",
+        d: "#FF55FF",
+        e: "#FFFF55",
+        f: "#FFFFFF",
+    };
+
+    onMount(async () => {
+        teams = await $eventRepo.listTeams(event.event.id.toString());
+    });
+</script>
+
+<div class="py-2 border-t border-t-gray-600">
+    <h1 class="text-2xl font-bold mb-4">Angemeldete Teams</h1>
+    <div
+        class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-2"
+    >
+        {#each teams as team}
+            <button
+                class="bg-neutral-800 p-2 rounded-md border border-neutral-700 border-l-4 flex flex-row items-center gap-2 cursor-pointer hover:bg-neutral-700 transition-colors w-full text-left"
+                style="border-left-color: {colorMap[team.color] || '#FFFFFF'}"
+            >
+                <span
+                    class="text-sm font-mono text-neutral-400 shrink-0 w-8 text-center"
+                    >{team.kuerzel}</span
+                >
+                <span class="font-bold truncate" title={team.name}>
+                    {team.name}
+                </span>
+            </button>
+        {/each}
+        {#if teams.length === 0}
+            <p class="col-span-full text-center text-neutral-400">
+                Keine Teams angemeldet.
+            </p>
+        {/if}
+    </div>
+</div>

src/components/event/connections.svelte.ts

@@ -0,0 +1,55 @@
+import { readonly, writable } from "svelte/store";
+
+class FightConnection {
+    constructor(
+        public readonly fromElement: HTMLElement,
+        public readonly toElement: HTMLElement,
+        public readonly color: string = "white",
+        public readonly background: boolean,
+        public readonly offset: number = 0
+    ) {}
+}
+
+export class FightConnector {
+    private connections: FightConnection[] = $state([]);
+
+    get allConnections(): FightConnection[] {
+        return this.connections;
+    }
+
+    get showedConnections(): FightConnection[] {
+        const showBackground = this.connections.some((conn) => !conn.background);
+        return showBackground ? this.connections.filter((conn) => !conn.background) : this.connections;
+    }
+
+    addTeamConnection(teamId: number): void {
+        const teamElements = document.getElementsByClassName(`team-${teamId}`);
+        const teamArray = Array.from(teamElements);
+        teamArray.sort((a, b) => {
+            const rectA = a.getBoundingClientRect();
+            const rectB = b.getBoundingClientRect();
+            return rectA.top - rectB.top || rectA.left - rectB.left;
+        });
+        for (let i = 1; i < teamElements.length; i++) {
+            const fromElement = teamElements[i - 1] as HTMLElement;
+            const toElement = teamElements[i] as HTMLElement;
+            this.connections.push(new FightConnection(fromElement, toElement, "white", false));
+        }
+    }
+
+    addConnection(fromElement: HTMLElement, toElement: HTMLElement, color: string = "white", offset: number = 0): void {
+        this.connections.push(new FightConnection(fromElement, toElement, color, true, offset));
+    }
+
+    clearConnections(): void {
+        this.connections = this.connections.filter((conn) => conn.background);
+    }
+
+    clearAllConnections(): void {
+        this.connections = [];
+    }
+}
+
+const fightConnectorInternal = writable(new FightConnector());
+
+export const fightConnector = readonly(fightConnectorInternal);

src/components/event/team-hover.svelte.ts

@@ -0,0 +1,21 @@
+import { get, writable } from "svelte/store";
+import { fightConnector } from "./connections.svelte";
+
+class TeamHoverService {
+    public currentHover = $state<number | undefined>(undefined);
+    private fightConnector = get(fightConnector);
+
+    public disableConnections = $state(false);
+
+    setHover(teamId: number): void {
+        this.currentHover = teamId;
+        if (!this.disableConnections) this.fightConnector.addTeamConnection(teamId);
+    }
+
+    clearHover(): void {
+        this.currentHover = undefined;
+        if (!this.disableConnections) this.fightConnector.clearConnections();
+    }
+}
+
+export const teamHoverService = writable(new TeamHoverService());

src/components/event/types.ts

@@ -0,0 +1,35 @@
+import { z } from "astro:content";
+
+export const GroupViewSchema = z.object({
+    type: z.literal("GROUP"),
+    groups: z.array(z.number()),
+    roundRows: z.number().int().positive().optional().default(1),
+});
+
+export type GroupViewConfig = z.infer<typeof GroupViewSchema>;
+
+export const EleminationViewSchema = z.object({
+    type: z.literal("ELEMINATION"),
+    finalFight: z.number(),
+});
+
+export type EleminationViewConfig = z.infer<typeof EleminationViewSchema>;
+
+// Double elimination config: needs final fight (grand final) and entry fights for winners & losers brackets
+export const DoubleEleminationViewSchema = z.object({
+    type: z.literal("DOUBLE_ELEMINATION"),
+    winnersFinalFight: z.number(), // Final fight of winners bracket (feeds into grand final)
+    losersFinalFight: z.number(), // Final fight of losers bracket (feeds into grand final)
+    grandFinalFight: z.number(), // Grand final fight id
+});
+
+export type DoubleEleminationViewConfig = z.infer<typeof DoubleEleminationViewSchema>;
+
+export const EventViewConfigSchema = z.record(
+    z.object({
+        name: z.string(),
+        view: z.discriminatedUnion("type", [GroupViewSchema, EleminationViewSchema, DoubleEleminationViewSchema]),
+    })
+);
+
+export type EventViewConfig = z.infer<typeof EventViewConfigSchema>;

src/components/moderator/App.svelte

@@ -18,39 +18,38 @@
   -->
 
 <script lang="ts">
-    import type {RouteDefinition} from "svelte-spa-router";
+    import type { RouteDefinition } from "svelte-spa-router";
     import Router from "svelte-spa-router";
     import NavLinks from "@components/moderator/layout/NavLinks.svelte";
-    import {Switch} from "@components/ui/switch";
-    import {Label} from "@components/ui/label";
-    import {navigate} from "astro:transitions/client";
     import Players from "@components/moderator/pages/players/Players.svelte";
     import Events from "@components/moderator/pages/events/Events.svelte";
     import Dashboard from "@components/moderator/pages/dashboard/Dashboard.svelte";
     import Event from "@components/moderator/pages/event/Event.svelte";
+    import Pages from "@components/moderator/pages/pages/Pages.svelte";
+    import Generator from "@components/moderator/pages/generators/Generator.svelte";
+    import AuditLog from "@components/moderator/pages/logs/AuditLog.svelte";
+    import { Tooltip } from "bits-ui";
 
     const routes: RouteDefinition = {
         "/": Dashboard,
         "/events": Events,
         "/players": Players,
-        "/event/:id": Event
+        "/event/:id": Event,
+        "/event/:id/generate": Generator,
+        "/pages": Pages,
+        "/logs": AuditLog,
     };
 </script>
 
 <div class="flex flex-col bg-background min-w-full min-h-screen">
     <div class="border-b">
         <div class="flex h-16 items-center px-4">
-            <a href="/" class="text-sm font-bold transition-colors text-primary">
-                SteamWar
-            </a>
+            <a href="/" class="text-sm font-bold transition-colors text-primary"> SteamWar </a>
             <NavLinks />
-            <div class="ml-auto flex items-center space-x-4">
-                <Switch id="new-ui-switch" checked={true} on:click={() => navigate("/admin")} />
-                <Label for="new-ui-switch">New UI!</Label>
-            </div>
         </div>
     </div>
-    <main class="flex flex-col">
+
+    <Tooltip.Provider>
         <Router {routes} />
-    </main>
-</div>
+    </Tooltip.Provider>
+</div>

src/components/moderator/components/FightEdit.svelte

@@ -0,0 +1,170 @@
+<script lang="ts">
+    import GroupSelector from "./GroupSelector.svelte";
+
+    import type { EventFight, EventFightEdit, ResponseGroups, ResponseRelation, SWEvent } from "@type/event";
+    import { fromAbsolute } from "@internationalized/date";
+    import { Label } from "@components/ui/label";
+    import DateTimePicker from "@components/ui/datetime-picker/DateTimePicker.svelte";
+    import { Popover, PopoverContent, PopoverTrigger } from "@components/ui/popover";
+    import { gamemodes, maps } from "@components/stores/stores";
+    import { CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem, Command } from "@components/ui/command";
+    import { ChevronsUpDown, Check } from "lucide-svelte";
+    import { Button } from "@components/ui/button";
+    import { cn } from "@components/utils";
+    import { Select, SelectContent, SelectItem, SelectTrigger } from "@components/ui/select";
+    import type { Snippet } from "svelte";
+    import { Input } from "@components/ui/input";
+    import TeamSelector from "./TeamSelector.svelte";
+    import type { EventModel } from "../pages/event/eventmodel.svelte";
+
+    let {
+        fight,
+        actions,
+        onSave,
+        data,
+    }: {
+        fight: EventFight | null;
+        actions: Snippet<[boolean, () => void]>;
+        onSave: (fight: EventFightEdit) => void;
+        data: EventModel;
+    } = $props();
+
+    let fightModus = $state(fight?.spielmodus);
+    let fightMap = $state(fight?.map);
+    let fightBlueTeam = $state(fight?.blueTeam);
+    let fightRedTeam = $state(fight?.redTeam);
+    let fightStart = $state(fight?.start ? fromAbsolute(fight.start, "Europe/Berlin") : fromAbsolute(data.event.start, "Europe/Berlin"));
+    let fightErgebnis = $state(fight?.ergebnis ?? 0);
+    let fightSpectatePort = $state(fight?.spectatePort?.toString() ?? null);
+    let fightGroup = $state(fight?.group?.id ?? null);
+
+    let mapsStore = $derived(maps(fightModus ?? "null"));
+    let gamemodeSelectOpen = $state(false);
+    let mapSelectOpen = $state(false);
+
+    let dirty = $derived(
+        fightModus !== fight?.spielmodus ||
+            fightMap !== fight?.map ||
+            fightBlueTeam?.id !== fight?.blueTeam?.id ||
+            fightRedTeam?.id !== fight?.redTeam?.id ||
+            fightStart.toDate().getTime() !== fight?.start ||
+            fightErgebnis !== fight?.ergebnis ||
+            fightSpectatePort !== (fight?.spectatePort?.toString() ?? null) ||
+            fightGroup !== (fight?.group?.id ?? null)
+    );
+
+    let loading = $state(false);
+
+    async function submit() {
+        loading = true;
+        try {
+            await onSave({
+                spielmodus: fightModus!,
+                map: fightMap!,
+                blueTeam: fightBlueTeam!,
+                redTeam: fightRedTeam!,
+                start: fightStart?.toDate().getTime(),
+                ergebnis: fightErgebnis,
+                spectatePort: fightSpectatePort ? +fightSpectatePort : null,
+                group: fightGroup,
+            });
+        } finally {
+            loading = false;
+        }
+    }
+</script>
+
+<div class="flex flex-col gap-2">
+    <Label for="fight-modus">Modus</Label>
+    <Popover bind:open={gamemodeSelectOpen}>
+        <PopoverTrigger>
+            {#snippet child({ props })}
+                <Button variant="outline" class="justify-between" {...props} role="combobox">
+                    {$gamemodes.find((value) => value === fightModus) || fightModus || "Select a modus type..."}
+                    <ChevronsUpDown class="ml-2 size-4 shrink-0 opacity-50" />
+                </Button>
+            {/snippet}
+        </PopoverTrigger>
+        <PopoverContent class="p-0">
+            <Command>
+                <CommandInput placeholder="Search Fight Modus..." />
+                <CommandList>
+                    <CommandEmpty>No fight modus found.</CommandEmpty>
+                    <CommandGroup>
+                        {#each $gamemodes as modus}
+                            <CommandItem
+                                value={modus}
+                                onSelect={() => {
+                                    fightModus = modus;
+                                    gamemodeSelectOpen = false;
+                                }}
+                            >
+                                <Check class={cn("mr-2 size-4", modus !== fightModus && "text-transparent")} />
+                                {modus}
+                            </CommandItem>
+                        {/each}
+                    </CommandGroup>
+                </CommandList>
+            </Command>
+        </PopoverContent>
+    </Popover>
+    <Label for="fight-map">Map</Label>
+    <Popover bind:open={mapSelectOpen}>
+        <PopoverTrigger>
+            {#snippet child({ props })}
+                <Button variant="outline" class="justify-between" {...props} role="combobox">
+                    {$mapsStore.find((value) => value === fightMap) || fightMap || "Select a map..."}
+                    <ChevronsUpDown class="ml-2 size-4 shrink-0 opacity-50" />
+                </Button>
+            {/snippet}
+        </PopoverTrigger>
+        <PopoverContent class="p-0">
+            <Command>
+                <CommandInput placeholder="Search Maps..." />
+                <CommandList>
+                    <CommandEmpty>No map found.</CommandEmpty>
+                    <CommandGroup>
+                        {#each $mapsStore as map}
+                            <CommandItem
+                                value={map}
+                                onSelect={() => {
+                                    fightMap = map;
+                                    mapSelectOpen = false;
+                                }}
+                            >
+                                <Check class={cn("mr-2 size-4", map !== fightMap && "text-transparent")} />
+                                {map}
+                            </CommandItem>
+                        {/each}
+                    </CommandGroup>
+                </CommandList>
+            </Command>
+        </PopoverContent>
+    </Popover>
+    <Label>Blue Team</Label>
+    <TeamSelector bind:selectedTeam={fightBlueTeam} {data} fightId={fight?.id} team="BLUE" />
+    <Label>Red Team</Label>
+    <TeamSelector bind:selectedTeam={fightRedTeam} {data} fightId={fight?.id} team="RED" />
+    <Label>Start</Label>
+    <DateTimePicker bind:value={fightStart} />
+    {#if fight !== null}
+        <Label for="fight-ergebnis">Ergebnis</Label>
+        <Select type="single" value={fightErgebnis?.toString()} onValueChange={(v) => (fightErgebnis = +v)}>
+            <SelectTrigger>
+                {fightErgebnis === 0 ? "Unentschieden" : (fightErgebnis === 1 ? fightBlueTeam?.name : fightRedTeam?.name) + " gewinnt"}
+            </SelectTrigger>
+            <SelectContent>
+                <SelectItem value={"0"}>Unentschieden</SelectItem>
+                <SelectItem value={"1"}>{fightBlueTeam?.name ?? "Team Blau"} gewinnt</SelectItem>
+                <SelectItem value={"2"}>{fightRedTeam?.name ?? "Team Blau"} gewinnt</SelectItem>
+            </SelectContent>
+        </Select>
+    {/if}
+
+    <Label for="fight-group">Gruppe</Label>
+    <GroupSelector event={data.event} bind:value={fightGroup} bind:groups={data.groups}></GroupSelector>
+    <Label for="spectate-port">Spectate Port</Label>
+    <Input id="spectate-port" bind:value={fightSpectatePort} type="number" placeholder="2001" />
+</div>
+
+{@render actions(dirty && !loading, submit)}

src/components/moderator/components/GroupEdit.svelte

@@ -0,0 +1,78 @@
+<script lang="ts">
+    import type { Snippet } from "svelte";
+    import type { ResponseGroups, GroupUpdateEdit } from "@type/event";
+    import { Label } from "@components/ui/label";
+    import { Input } from "@components/ui/input";
+    import { Select, SelectContent, SelectItem, SelectTrigger } from "@components/ui/select";
+
+    const {
+        group,
+        actions,
+        onSave,
+    }: {
+        group: ResponseGroups | null;
+        actions: Snippet<[boolean, () => void]>;
+        onSave: (groupData: GroupUpdateEdit) => void;
+    } = $props();
+
+    let groupName = $state(group?.name ?? "");
+    let groupType = $state(group?.type ?? "GROUP_STAGE");
+    let pointsPerWin = $state(group?.pointsPerWin ?? 3);
+    let pointsPerLoss = $state(group?.pointsPerLoss ?? 0);
+    let pointsPerDraw = $state(group?.pointsPerDraw ?? 1);
+
+    let canSave = $derived(groupName.length > 0 && (groupType === "GROUP_STAGE" || groupType === "ELIMINATION_STAGE") && pointsPerWin !== null && pointsPerLoss !== null && pointsPerDraw !== null);
+
+    let dirty = $derived(
+        groupName !== (group ? group.name : "") ||
+            groupType !== (group ? group.type : "GROUP_STAGE") ||
+            pointsPerWin !== (group ? group.pointsPerWin : 3) ||
+            pointsPerLoss !== (group ? group.pointsPerLoss : 0) ||
+            pointsPerDraw !== (group ? group.pointsPerDraw : 1)
+    );
+
+    function submit() {
+        onSave({
+            name: groupName,
+            type: groupType,
+            pointsPerWin: pointsPerWin,
+            pointsPerLoss: pointsPerLoss,
+            pointsPerDraw: pointsPerDraw,
+        });
+    }
+</script>
+
+<div class="flex flex-col gap-2">
+    <Label for="group-name">Name</Label>
+    <Input id="group-name" bind:value={groupName} placeholder="z.B. Gruppenphase A" />
+
+    <Label for="group-type">Typ</Label>
+    <Select
+        value={groupType}
+        type="single"
+        onValueChange={(v) => {
+            if (v) groupType = v as "GROUP_STAGE" | "ELIMINATION_STAGE";
+        }}
+    >
+        <SelectTrigger id="group-type" placeholder="Wähle einen Gruppentyp">
+            {groupType === "GROUP_STAGE" ? "Gruppenphase" : "Eliminierungsphase"}
+        </SelectTrigger>
+        <SelectContent>
+            <SelectItem value="GROUP_STAGE">Gruppenphase</SelectItem>
+            <SelectItem value="ELIMINATION_STAGE">Eliminierungsphase</SelectItem>
+        </SelectContent>
+    </Select>
+
+    {#if groupType === "GROUP_STAGE" && group !== null}
+        <Label for="points-win">Punkte pro Sieg</Label>
+        <Input id="points-win" type="number" bind:value={pointsPerWin} placeholder="3" />
+
+        <Label for="points-loss">Punkte pro Niederlage</Label>
+        <Input id="points-loss" type="number" bind:value={pointsPerLoss} placeholder="0" />
+
+        <Label for="points-draw">Punkte pro Unentschieden</Label>
+        <Input id="points-draw" type="number" bind:value={pointsPerDraw} placeholder="1" />
+    {/if}
+</div>
+
+{@render actions(group === null ? canSave : dirty, submit)}

src/components/moderator/components/GroupSelector.svelte

@@ -0,0 +1,103 @@
+<script lang="ts">
+    import type { GroupUpdateEdit, ResponseGroups, SWEvent } from "@type/event";
+    import { Popover, PopoverContent, PopoverTrigger } from "@components/ui/popover";
+    import { CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem, Command } from "@components/ui/command";
+    import { ChevronsUpDownIcon, PlusIcon, CheckIcon, MinusIcon } from "lucide-svelte";
+    import { Button } from "@components/ui/button";
+    import { cn } from "@components/utils";
+    import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "@components/ui/dialog";
+    import GroupEdit from "./GroupEdit.svelte";
+    import { eventRepo } from "@components/repo/event";
+
+    let {
+        event,
+        groups = $bindable(),
+        value = $bindable(),
+    }: {
+        event: SWEvent;
+        groups: ResponseGroups[];
+        value: number | null;
+    } = $props();
+
+    let selectedGroup = $derived(groups.find((group) => group.id === value));
+
+    let createOpen = $state(false);
+    let groupSelectOpen = $state(false);
+
+    async function handleGroupSave(group: GroupUpdateEdit) {
+        let g = await $eventRepo.createGroup(event.id, group);
+        groups.push(g);
+        value = g.id;
+        createOpen = false;
+        groupSelectOpen = false;
+    }
+</script>
+
+<Dialog bind:open={createOpen}>
+    <Popover bind:open={groupSelectOpen}>
+        <PopoverTrigger>
+            {#snippet child({ props })}
+                <Button id="fight-group" variant="outline" class="justify-between" {...props} role="combobox">
+                    {selectedGroup?.name || "Keine Gruppe"}
+                    <ChevronsUpDownIcon class="ml-2 size-4 shrink-0 opacity-50" />
+                </Button>
+            {/snippet}
+        </PopoverTrigger>
+        <PopoverContent class="p-0">
+            <Command>
+                <CommandInput placeholder="Gruppe suchen..." />
+                <CommandList>
+                    <CommandGroup>
+                        <CommandItem value={"new"} onSelect={() => (createOpen = true)}>
+                            <PlusIcon class={"mr-2 size-4"} />
+                            Neue Gruppe
+                        </CommandItem>
+
+                        <CommandGroup heading="Gruppen">
+                            <CommandItem
+                                value={"none"}
+                                onSelect={() => {
+                                    value = null;
+                                    groupSelectOpen = false;
+                                }}
+                            >
+                                {#if value === null}
+                                    <CheckIcon class={"mr-2 size-4"} />
+                                {:else}
+                                    <MinusIcon class={"mr-2 size-4"} />
+                                {/if}
+                                Keine Gruppe
+                            </CommandItem>
+
+                            {#each groups as group}
+                                <CommandItem
+                                    value={group.id.toString()}
+                                    onSelect={() => {
+                                        value = group.id;
+                                        groupSelectOpen = false;
+                                    }}
+                                >
+                                    <CheckIcon class={cn("mr-2 size-4", value !== group.id && "text-transparent")} />
+                                    {group.name}
+                                </CommandItem>
+                            {/each}
+                        </CommandGroup>
+                    </CommandGroup>
+                </CommandList>
+            </Command>
+        </PopoverContent>
+    </Popover>
+    <DialogContent>
+        <DialogHeader>
+            <DialogTitle>Neue Gruppe erstellen</DialogTitle>
+            <DialogDescription>Hier kannst du eine neue Gruppe erstellen</DialogDescription>
+        </DialogHeader>
+        <GroupEdit group={null} onSave={handleGroupSave}>
+            {#snippet actions(dirty, submit)}
+                <DialogFooter>
+                    <Button disabled={!dirty} onclick={submit}>Speichern</Button>
+                </DialogFooter>
+            {/snippet}
+        </GroupEdit>
+    </DialogContent>
+</Dialog>

src/components/moderator/components/TeamSelector.svelte

@@ -0,0 +1,253 @@
+<script lang="ts">
+    import type { ResponseRelation } from "@components/types/event";
+    import type { Team } from "@components/types/team";
+    import { Button } from "@components/ui/button";
+    import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "@components/ui/command";
+    import { Popover, PopoverContent, PopoverTrigger } from "@components/ui/popover";
+    import { Tabs, TabsContent, TabsList, TabsTrigger } from "@components/ui/tabs";
+    import { Tooltip, TooltipContent, TooltipTrigger } from "@components/ui/tooltip";
+    import { cn } from "@components/utils";
+    import { Check, ChevronsUpDown, GitPullRequestArrow, Plus } from "lucide-svelte";
+    import type { EventModel } from "../pages/event/eventmodel.svelte";
+    import { Select, SelectContent, SelectItem, SelectTrigger } from "@components/ui/select";
+    import { Label } from "@components/ui/label";
+    import { eventRepo } from "@components/repo/event";
+
+    interface Props {
+        selectedTeam: Team | undefined;
+        open?: boolean;
+        team: "BLUE" | "RED";
+        data: EventModel;
+        fightId?: number;
+        onSelect?: (team: Team) => void;
+    }
+
+    let { selectedTeam = $bindable(), data, team, open = $bindable(false), fightId, onSelect }: Props = $props();
+
+    const currentRelation = $derived(data.relations.find((r) => r.fight === fightId && r.team === team));
+
+    let fromType = $state<"FIGHT" | "GROUP">(currentRelation?.type ?? "FIGHT");
+
+    let fromFight = $state<string | undefined>(currentRelation?.fromFight?.id?.toString());
+
+    let fromFightData = $derived(data.fights.find((f) => f.id.toString() === fromFight));
+
+    let fromGroup = $state<string | undefined>(currentRelation?.fromGroup?.id?.toString());
+
+    let fromGroupData = $derived(data.groups.find((g) => g.id.toString() === fromGroup));
+
+    let fromPlace = $state<string | undefined>(currentRelation?.fromPlace?.toString());
+
+    let relationOpen = $state(false);
+
+    async function saveRelation() {
+        relationOpen = false;
+        if (currentRelation === undefined) {
+            await $eventRepo.createRelation(data.event.id, {
+                fightId: fightId!,
+                team,
+                fromType,
+                fromId: fromType === "FIGHT" ? parseInt(fromFight!) : parseInt(fromGroup!),
+                fromPlace: parseInt(fromPlace!),
+            });
+        } else {
+            await $eventRepo.updateRelation(data.event.id, currentRelation.id, {
+                from: {
+                    fromType,
+                    fromId: fromType === "FIGHT" ? parseInt(fromFight!) : parseInt(fromGroup!),
+                    fromPlace: parseInt(fromPlace!),
+                },
+            });
+        }
+        data.relations = await $eventRepo.listRelations(data.event.id);
+        reset();
+    }
+
+    async function clearRelation() {
+        relationOpen = false;
+        if (currentRelation !== undefined) {
+            await $eventRepo.deleteRelation(data.event.id, currentRelation.id);
+            data.relations = await $eventRepo.listRelations(data.event.id);
+        }
+        reset();
+    }
+
+    function reset() {
+        fromType = currentRelation?.type ?? "FIGHT";
+        fromFight = currentRelation?.fromFight?.id.toString();
+        fromGroup = currentRelation?.fromGroup?.id.toString();
+        fromPlace = currentRelation?.fromPlace.toString();
+    }
+
+    let canSave = $derived(
+        (fromType !== currentRelation?.type ||
+            fromFight !== (currentRelation?.fromFight?.id.toString() ?? "") ||
+            fromGroup !== (currentRelation?.fromGroup?.id.toString() ?? "") ||
+            fromPlace !== (currentRelation?.fromPlace.toString() ?? "")) &&
+            ((fromType === "FIGHT" && fromFight !== "" && fromPlace !== "") || (fromType === "GROUP" && fromGroup !== "" && fromPlace !== ""))
+    );
+</script>
+
+<div class="flex gap-2">
+    <Popover bind:open>
+        <PopoverTrigger>
+            {#snippet child({ props })}
+                <Button variant="outline" class="justify-between flex-1" {...props} role="combobox">
+                    {#if selectedTeam?.id === -1}
+                        ???
+                    {:else if selectedTeam?.id === 0}
+                        PUB
+                    {:else}
+                        {data.teams.find((v) => v.id === selectedTeam?.id)?.name || selectedTeam?.name || "Select a team..."}
+                    {/if}
+
+                    {#if currentRelation !== undefined}
+                        ({#if currentRelation.type === "FIGHT"}
+                            {currentRelation.fromPlace === 0 ? "Gewinner" : "Verlierer"} von {currentRelation.fromFight?.blueTeam.name} vs {currentRelation.fromFight?.redTeam.name} ({new Date(
+                                currentRelation.fromFight?.start ?? 0
+                            ).toLocaleTimeString("de-DE", {
+                                timeStyle: "short",
+                            })})
+                        {:else}
+                            {currentRelation.fromPlace + 1}. Platz von {currentRelation.fromGroup?.name}
+                        {/if})
+                    {/if}
+
+                    <ChevronsUpDown class="ml-2 size-4 shrink-0 opacity-50" />
+                </Button>
+            {/snippet}
+        </PopoverTrigger>
+        <PopoverContent class="p-0">
+            <Command>
+                <CommandInput placeholder="Search Teams..." />
+                <CommandList>
+                    <CommandEmpty>No team found.</CommandEmpty>
+                    <CommandGroup>
+                        <CommandItem
+                            value={"-1"}
+                            onSelect={() => {
+                                selectedTeam = {
+                                    id: -1,
+                                    name: "?",
+                                    color: "7",
+                                    kuerzel: "?",
+                                };
+                                onSelect?.(selectedTeam);
+                                open = false;
+                            }}
+                            keywords={["?"]}>???</CommandItem
+                        >
+                        <CommandItem
+                            value={"0"}
+                            onSelect={() => {
+                                selectedTeam = {
+                                    id: 0,
+                                    name: "Public",
+                                    color: "7",
+                                    kuerzel: "PUB",
+                                };
+                                onSelect?.(selectedTeam);
+                                open = false;
+                            }}
+                            keywords={["PUB", "Public"]}>PUB</CommandItem
+                        >
+                    </CommandGroup>
+                    <CommandGroup heading="Teams">
+                        {#each data.teams as team}
+                            <CommandItem
+                                value={team.name}
+                                onSelect={() => {
+                                    selectedTeam = team;
+                                    onSelect?.(selectedTeam);
+                                    open = false;
+                                }}
+                            >
+                                <Check class={cn("mr-2 size-4", team.id !== selectedTeam?.id && "text-transparent")} />
+                                {team.name}
+                            </CommandItem>
+                        {/each}
+                    </CommandGroup>
+                </CommandList>
+            </Command>
+        </PopoverContent>
+    </Popover>
+    <Popover bind:open={relationOpen}>
+        <PopoverTrigger>
+            {#snippet child({ props })}
+                <Tooltip>
+                    <TooltipTrigger>
+                        <Button {...props} size="icon" variant={currentRelation !== undefined ? "default" : "outline"} disabled={fightId === undefined}>
+                            <GitPullRequestArrow />
+                        </Button>
+                    </TooltipTrigger>
+                    <TooltipContent>Kampfverbindung</TooltipContent>
+                </Tooltip>
+            {/snippet}
+        </PopoverTrigger>
+        <PopoverContent>
+            <Tabs bind:value={fromType}>
+                <TabsList>
+                    <TabsTrigger value="FIGHT">Kampf</TabsTrigger>
+                    <TabsTrigger value="GROUP">Gruppe</TabsTrigger>
+                </TabsList>
+                <TabsContent value="FIGHT">
+                    <Label>Kampf</Label>
+                    <Select bind:value={fromFight} type="single" disabled={data.fights.length === 0}>
+                        <SelectTrigger>
+                            {fromFightData
+                                ? `${new Date(fromFightData.start).toLocaleString("de-DE", { timeStyle: "short" })}: ${fromFightData.blueTeam.kuerzel} vs. ${fromFightData.redTeam.kuerzel}`
+                                : "Kampf auswählen..."}
+                        </SelectTrigger>
+                        <SelectContent>
+                            {#each data.fights.filter((v) => v.id !== fightId) as fight (fight.id)}
+                                <SelectItem value={fight.id.toString()}
+                                    >{new Date(fight.start).toLocaleString("de-DE", {
+                                        timeStyle: "short",
+                                    })}: {fight.blueTeam.kuerzel} vs. {fight.redTeam.kuerzel}</SelectItem
+                                >
+                            {/each}
+                        </SelectContent>
+                    </Select>
+                    <Label>Team</Label>
+                    <Select bind:value={fromPlace} type="single" disabled={data.fights.length === 0}>
+                        <SelectTrigger>
+                            {fromPlace ? (fromPlace === "0" ? "Gewinner" : "Verlierer") : "Platz auswählen..."}
+                        </SelectTrigger>
+                        <SelectContent>
+                            <SelectItem value={"0"}>Gewinner</SelectItem>
+                            <SelectItem value={"1"}>Verlierer</SelectItem>
+                        </SelectContent>
+                    </Select>
+                </TabsContent>
+                <TabsContent value="GROUP">
+                    <Label>Gruppe</Label>
+                    <Select bind:value={fromGroup} type="single" disabled={data.groups.length === 0}>
+                        <SelectTrigger>
+                            {fromGroupData ? fromGroupData.name : "Kampf auswählen..."}
+                        </SelectTrigger>
+                        <SelectContent>
+                            {#each data.groups as group (group.id)}
+                                <SelectItem value={group.id.toString()}>{group.name}</SelectItem>
+                            {/each}
+                        </SelectContent>
+                    </Select>
+                    <Label>Platz</Label>
+                    <Select bind:value={fromPlace} type="single" disabled={data.fights.length === 0}>
+                        <SelectTrigger>
+                            {fromPlace ? `${parseInt(fromPlace) + 1}. Platz` : "Platz auswählen..."}
+                        </SelectTrigger>
+                        <SelectContent>
+                            {#each Array(32) as _, i}
+                                <SelectItem value={i.toString()}>{i + 1}. Platz</SelectItem>
+                            {/each}
+                        </SelectContent>
+                    </Select>
+                </TabsContent>
+            </Tabs>
+            <div class="flex justify-end gap-2 mt-2">
+                <Button onclick={clearRelation} variant="destructive">Löschen</Button>
+                <Button onclick={saveRelation} disabled={!canSave}>Übernehmen</Button>
+            </div>
+        </PopoverContent>
+    </Popover>
+</div>

src/components/moderator/layout/NavLinks.svelte

@@ -18,23 +18,14 @@
   -->
 
 <script lang="ts">
-    import {location} from "svelte-spa-router";
+    import { location } from "svelte-spa-router";
 </script>
 
 <nav class="flex items-center space-x-4 lg:space-x-6 mx-6">
-    <a href="#/" class="hover:text-primary text-sm font-medium transition-colors" class:text-muted={$location !== "/"}>
-        Dashboard
-    </a>
-    <a href="#/events" class="hover:text-primary text-sm font-medium transition-colors" class:text-muted={$location !== "/events"}>
-        Events
-    </a>
-    <a href="#/players" class="hover:text-primary text-sm font-medium transition-colors" class:text-muted={$location !== "/players"}>
-        Players
-    </a>
-    <a href="#/pages" class="hover:text-primary text-sm font-medium transition-colors" class:text-muted={$location !== "/pages"}>
-        Pages
-    </a>
-    <a href="#/schematics" class="hover:text-primary text-sm font-medium transition-colors" class:text-muted={$location !== "/schematics"}>
-        Schematics
-    </a>
-</nav>
+    <a href="#/" class="hover:text-primary text-sm font-medium transition-colors" class:text-muted-foreground={$location !== "/"}> Dashboard </a>
+    <a href="#/events" class="hover:text-primary text-sm font-medium transition-colors" class:text-muted-foreground={!$location.startsWith("/event")}> Events </a>
+    <a href="#/players" class="hover:text-primary text-sm font-medium transition-colors" class:text-muted-foreground={$location !== "/players"}> Players </a>
+    <a href="#/pages" class="hover:text-primary text-sm font-medium transition-colors" class:text-muted-foreground={$location !== "/pages"}> Pages </a>
+    <a href="#/schematics" class="hover:text-primary text-sm font-medium transition-colors" class:text-muted-foreground={$location !== "/schematics"}> Schematics </a>
+    <a href="#/logs" class="hover:text-primary text-sm font-medium transition-colors" class:text-muted-foreground={$location !== "/logs"}> Logs </a>
+</nav>

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}

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

@@ -106,6 +106,15 @@
                 <CommandList>
                     <CommandEmpty>No schematic type found.</CommandEmpty>
                     <CommandGroup>
+                        <CommandItem
+                            value={"null"}
+                            onSelect={() => {
+                                eventSchematicType = null;
+                            }}
+                        >
+                            <Check class={cn("mr-2 size-4", eventSchematicType !== null && "text-transparent")} />
+                            Keinen
+                        </CommandItem>
                         {#each $schemTypes as type}
                             <CommandItem
                                 value={type.db}

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

@@ -18,15 +18,29 @@
   -->
 
 <script lang="ts">
-    import type { ExtendedEvent } from "@type/event";
+    import FightEditRow from "./FightEditRow.svelte";
+
+    import type { EventFightEdit } from "@type/event";
     import { createSvelteTable, FlexRender } from "@components/ui/data-table";
     import { type ColumnFiltersState, getCoreRowModel, getFilteredRowModel, getGroupedRowModel, getSortedRowModel, type RowSelectionState, type SortingState } from "@tanstack/table-core";
     import { columns } from "./columns";
     import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@components/ui/table";
     import { Checkbox } from "@components/ui/checkbox";
-    import { Menubar, MenubarContent, MenubarItem, MenubarGroup, MenubarGroupHeading, MenubarMenu, MenubarSeparator, MenubarTrigger } from "@components/ui/menubar";
+    import { Menubar, MenubarContent, MenubarItem, MenubarGroup, MenubarGroupHeading, MenubarMenu, MenubarTrigger, MenubarSub, MenubarSubTrigger, MenubarSubContent } from "@components/ui/menubar";
+    import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "@components/ui/dialog";
+    import FightEdit from "@components/moderator/components/FightEdit.svelte";
+    import { Button } from "@components/ui/button";
+    import { eventRepo } from "@components/repo/event";
+    import GroupEditDialog from "./GroupEditDialog.svelte";
+    import GroupResultsDialog from "./GroupResultsDialog.svelte";
+    import type { ResponseGroups } from "@type/event";
+    import { EditIcon, GroupIcon, LinkIcon } from "lucide-svelte";
+    import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@components/ui/dropdown-menu";
+    import GroupSelector from "@components/moderator/components/GroupSelector.svelte";
+    import { fightRepo } from "@components/repo/fight";
+    import type { EventModel } from "./eventmodel.svelte";
 
-    let { data }: { data: ExtendedEvent } = $props();
+    let { data = $bindable(), refresh }: { data: EventModel; refresh: () => void } = $props();
 
     let sorting = $state<SortingState>([]);
     let columnFilters = $state<ColumnFiltersState>([]);
@@ -82,30 +96,146 @@
         groupedColumnMode: "remove",
         getRowId: (row) => row.id.toString(),
     });
+
+    let createOpen = $state(false);
+    let editGroupOpen = $state(false);
+    let selectedGroup: ResponseGroups | null = $state(null);
+    let groupResultsOpen = $state(false);
+    let selectedGroupForResults: ResponseGroups | null = $state(null);
+
+    let groupChangeOpen = $state(false);
+    let groupChangeSelected: number | null = $state(null);
+
+    async function handleSave(fight: EventFightEdit) {
+        await $eventRepo.createFight(data.event.id.toString(), {
+            ...fight,
+            blueTeam: fight.blueTeam.id,
+            redTeam: fight.redTeam.id,
+        });
+
+        refresh();
+        createOpen = false;
+    }
+
+    function openGroupEditDialog(group: ResponseGroups) {
+        selectedGroup = group;
+        editGroupOpen = true;
+    }
+
+    function openGroupResultsDialog(group: ResponseGroups) {
+        selectedGroupForResults = group;
+        groupResultsOpen = true;
+    }
 </script>
 
-<div class="w-fit">
+<Dialog bind:open={createOpen}>
+    <DialogContent>
+        <DialogHeader>
+            <DialogTitle>Fight Erstellen</DialogTitle>
+            <DialogDescription>Hier kannst du einen neuen Fight erstellen</DialogDescription>
+        </DialogHeader>
+        <FightEdit fight={null} {data} onSave={handleSave}>
+            {#snippet actions(dirty, submit)}
+                <DialogFooter>
+                    <Button disabled={!dirty} onclick={submit}>Speichern</Button>
+                </DialogFooter>
+            {/snippet}
+        </FightEdit>
+    </DialogContent>
+</Dialog>
+
+{#if selectedGroup}
+    <GroupEditDialog bind:open={editGroupOpen} group={selectedGroup} event={data.event} bind:groups={data.groups} />
+{/if}
+
+{#if selectedGroupForResults}
+    <GroupResultsDialog bind:open={groupResultsOpen} group={selectedGroupForResults} teams={data.teams} fights={data.fights} />
+{/if}
+
+<Dialog bind:open={groupChangeOpen}>
+    <DialogContent>
+        <DialogHeader>
+            <DialogTitle>Gruppe Ändern</DialogTitle>
+            <DialogDescription>Hier kannst du die Gruppe der ausgewählten Kämpfe ändern</DialogDescription>
+        </DialogHeader>
+        <GroupSelector event={data.event} bind:groups={data.groups} bind:value={groupChangeSelected} />
+        <DialogFooter>
+            <Button
+                onclick={async () => {
+                    groupChangeOpen = false;
+                    let group = data.groups.find((g) => g.id === groupChangeSelected);
+                    if (group) {
+                        let selectedGroups = table.getSelectedRowModel().rows.map((row) => row.original);
+                        for (const g of selectedGroups) {
+                            await $fightRepo.updateFight(data.event.id, g.id, {
+                                group: group.id,
+                                spielmodus: null,
+                                map: null,
+                                blueTeam: null,
+                                redTeam: null,
+                                start: null,
+                                spectatePort: null,
+                            });
+                        }
+
+                        refresh();
+                    }
+                }}>Speichern</Button
+            >
+        </DialogFooter>
+    </DialogContent>
+</Dialog>
+
+<div class="flex items-center justify-between">
     <Menubar>
         <MenubarMenu>
             <MenubarTrigger>Mehrfach Bearbeiten</MenubarTrigger>
             <MenubarContent>
-                <MenubarItem disabled>Gruppe Ändern</MenubarItem>
+                <MenubarItem onclick={() => (groupChangeOpen = true)}>Gruppe Ändern</MenubarItem>
                 <MenubarItem disabled>Startzeit Verschieben</MenubarItem>
                 <MenubarItem disabled>Spectate Port Ändern</MenubarItem>
+                <MenubarItem
+                    onclick={async () => {
+                        let selectedGroups = table.getSelectedRowModel().rows.map((row) => row.original);
+                        for (const g of selectedGroups) {
+                            await $fightRepo.deleteFight(data.event.id, g.id);
+                        }
+
+                        refresh();
+                    }}>Kämpfe Löschen</MenubarItem
+                >
             </MenubarContent>
         </MenubarMenu>
         <MenubarMenu>
             <MenubarTrigger>Erstellen</MenubarTrigger>
             <MenubarContent>
-                <MenubarItem disabled>Fight Erstellen</MenubarItem>
+                <MenubarItem onclick={() => (createOpen = true)}>Fight Erstellen</MenubarItem>
                 <MenubarGroup>
                     <MenubarGroupHeading>Generatoren</MenubarGroupHeading>
-                    <MenubarItem disabled>Gruppenphase</MenubarItem>
-                    <MenubarItem disabled>K.O. Phase</MenubarItem>
+                    <a href="#/event/{data.event.id}/generate">
+                        <MenubarItem>Gruppenphase</MenubarItem>
+                    </a>
                 </MenubarGroup>
             </MenubarContent>
         </MenubarMenu>
+        <MenubarMenu>
+            <MenubarTrigger disabled={!data.groups.length}>Gruppen</MenubarTrigger>
+            <MenubarContent>
+                {#each data.groups as group (group.id)}
+                    <MenubarSub>
+                        <MenubarSubTrigger>
+                            {group.name}
+                        </MenubarSubTrigger>
+                        <MenubarSubContent>
+                            <MenubarItem onclick={() => openGroupEditDialog(group)}>Bearbeiten</MenubarItem>
+                            <MenubarItem onclick={() => openGroupResultsDialog(group)}>Gruppen Ergebnisse</MenubarItem>
+                        </MenubarSubContent>
+                    </MenubarSub>
+                {/each}
+            </MenubarContent>
+        </MenubarMenu>
     </Menubar>
+    <Button variant="outline" class="ml-4" onclick={refresh}>Neu laden</Button>
 </div>
 
 <Table>
@@ -119,21 +249,50 @@
                         {/if}
                     </TableHead>
                 {/each}
+                <TableHead></TableHead>
             </TableRow>
         {/each}
     </TableHeader>
     <TableBody>
         {#each table.getRowModel().rows as groupRow (groupRow.id)}
             {#if groupRow.getIsGrouped()}
-                <TableRow class="bg-muted font-bold">
-                    <TableCell colspan={columns.length}>
+                {@const group = data.groups.find((g) => g.id == groupRow.getValue("group"))}
+                <TableRow class="font-bold">
+                    <TableCell colspan={columns.length - 1}>
                         <Checkbox
                             checked={groupRow.getIsSelected()}
                             indeterminate={groupRow.getIsSomeSelected() && !groupRow.getIsSelected()}
                             onCheckedChange={() => groupRow.toggleSelected()}
                             class="mr-4"
                         />
-                        Gruppe: {groupRow.getValue("group") ?? "Keine"}
+                        {group?.name ?? "Keine Gruppe"}
+                    </TableCell>
+                    <TableCell class="text-right">
+                        {#if group}
+                            <Button variant="ghost" size="icon" onclick={() => openGroupEditDialog(group!)}>
+                                <EditIcon />
+                            </Button>
+                            <Button variant="ghost" size="icon" onclick={() => openGroupResultsDialog(group!)}>
+                                <GroupIcon />
+                            </Button>
+                        {/if}
+                        <DropdownMenu>
+                            <DropdownMenuTrigger>
+                                <Button variant="ghost" size="icon">
+                                    <LinkIcon />
+                                </Button>
+                            </DropdownMenuTrigger>
+                            <DropdownMenuContent>
+                                <DropdownMenuItem
+                                    onclick={() => navigator.clipboard.writeText(`<group-table data-event="${data.event.id}"${group ? ` data-group="${group?.id}"` : ""}> </group-table>`)}
+                                    >Punkte Tabelle</DropdownMenuItem
+                                >
+                                <DropdownMenuItem
+                                    onclick={() => navigator.clipboard.writeText(`<fight-table data-event="${data.event.id}"${group ? ` data-group="${group?.id}"` : ""}> </group-table>`)}
+                                    >Kampf Tabelle</DropdownMenuItem
+                                >
+                            </DropdownMenuContent>
+                        </DropdownMenu>
                     </TableCell>
                 </TableRow>
                 {#each groupRow.subRows as row (row.id)}
@@ -143,6 +302,9 @@
                                 <FlexRender content={cell.column.columnDef.cell} context={cell.getContext()} />
                             </TableCell>
                         {/each}
+                        <TableCell class="text-right">
+                            <FightEditRow fight={row.original} {data} onupdate={(update) => (data._fights = data._fights.map((v) => (v.id === update.id ? update : v)))} {refresh}></FightEditRow>
+                        </TableCell>
                     </TableRow>
                 {/each}
             {:else}

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

@@ -18,13 +18,13 @@
   -->
 
 <script lang="ts">
-    import type { ExtendedEvent } from "@type/event.ts";
     import EventEdit from "@components/moderator/pages/event/EventEdit.svelte";
     import EventFightList from "@components/moderator/pages/event/EventFightList.svelte";
     import RefereesList from "@components/moderator/pages/event/RefereesList.svelte";
     import TeamTable from "@components/moderator/pages/event/TeamTable.svelte";
+    import type { EventModel } from "./eventmodel.svelte";
 
-    const { event }: { event: ExtendedEvent } = $props();
+    let { event = $bindable(), refresh }: { event: EventModel; refresh: () => void } = $props();
 </script>
 
 <div class="flex flex-col m-4 p-4 rounded-md border gap-4">
@@ -35,12 +35,12 @@
         </div>
         <div class="md:ml-4 md:pl-4 md:border-l md:w-1/3">
             <h2 class="text-xl font-bold mb-4">Teams</h2>
-            <TeamTable {event} />
+            <TeamTable bind:event />
         </div>
         <div class="md:ml-4 md:pl-4 md:border-l md:w-1/3">
             <h2 class="text-xl font-bold mb-4">Referees</h2>
             <RefereesList {event} />
         </div>
     </div>
-    <EventFightList data={event} />
+    <EventFightList bind:data={event} {refresh} />
 </div>

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

@@ -0,0 +1,90 @@
+<script lang="ts">
+    import type { EventFight, EventFightEdit, ResponseGroups, ResponseRelation, SWEvent } from "@type/event";
+    import { Button } from "@components/ui/button";
+    import { EditIcon, CopyIcon } from "lucide-svelte";
+    import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from "@components/ui/dialog";
+    import FightEdit from "@components/moderator/components/FightEdit.svelte";
+    import type { Team } from "@components/types/team";
+    import { fightRepo } from "@components/repo/fight";
+    import { eventRepo } from "@components/repo/event";
+    import type { EventModel } from "./eventmodel.svelte";
+
+    let { fight, onupdate, refresh, data }: { fight: EventFight; onupdate: (update: EventFight) => void; refresh: () => void; data: EventModel } = $props();
+
+    let editOpen = $state(false);
+    let duplicateOpen = $state(false);
+
+    async function handleSave(fightData: EventFightEdit) {
+        let f = await $fightRepo.updateFight(data.event.id, fight.id, {
+            ...fightData,
+            blueTeam: fightData.blueTeam.id,
+            redTeam: fightData.redTeam.id,
+            group: fightData.group ?? -1,
+        });
+
+        onupdate(f);
+
+        editOpen = false;
+    }
+
+    async function handlyCopy(fightData: EventFightEdit) {
+        await $eventRepo.createFight(data.event.id.toString(), {
+            ...fightData,
+            blueTeam: fightData.blueTeam.id,
+            redTeam: fightData.redTeam.id,
+        });
+
+        refresh();
+
+        duplicateOpen = false;
+    }
+
+    async function handleDelete() {
+        await $fightRepo.deleteFight(data.event.id, fight.id);
+        refresh();
+    }
+</script>
+
+<div>
+    <Dialog bind:open={editOpen}>
+        <DialogTrigger>
+            <Button variant="ghost" size="icon">
+                <EditIcon />
+            </Button>
+        </DialogTrigger>
+        <DialogContent>
+            <DialogHeader>
+                <DialogTitle>Fight bearbeiten</DialogTitle>
+                <DialogDescription>Hier kannst du die Daten des Kampfes bearbeiten.</DialogDescription>
+            </DialogHeader>
+            <FightEdit {fight} {data} onSave={handleSave}>
+                {#snippet actions(dirty, submit)}
+                    <DialogFooter>
+                        <Button variant="destructive" onclick={handleDelete}>Löschen</Button>
+                        <Button disabled={!dirty} onclick={submit}>Speichern</Button>
+                    </DialogFooter>
+                {/snippet}
+            </FightEdit>
+        </DialogContent>
+    </Dialog>
+    <Dialog bind:open={duplicateOpen}>
+        <DialogTrigger>
+            <Button variant="ghost" size="icon">
+                <CopyIcon />
+            </Button>
+        </DialogTrigger>
+        <DialogContent>
+            <DialogHeader>
+                <DialogTitle>Fight duplizieren</DialogTitle>
+                <DialogDescription>Hier kannst du die Daten des duplizierten Fights ändern</DialogDescription>
+            </DialogHeader>
+            <FightEdit {fight} {data} onSave={handlyCopy}>
+                {#snippet actions(dirty, submit)}
+                    <DialogFooter>
+                        <Button onclick={submit}>Speichern</Button>
+                    </DialogFooter>
+                {/snippet}
+            </FightEdit>
+        </DialogContent>
+    </Dialog>
+</div>

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

@@ -0,0 +1,45 @@
+<script lang="ts">
+    import type { GroupUpdateEdit, ResponseGroups, SWEvent } from "@type/event";
+    import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "@components/ui/dialog";
+    import GroupEdit from "@components/moderator/components/GroupEdit.svelte";
+    import { Button } from "@components/ui/button";
+    import { eventRepo } from "@repo/event";
+
+    let { group, groups = $bindable(), open = $bindable(), event }: { group: ResponseGroups; groups: ResponseGroups[]; open?: boolean; event: SWEvent } = $props();
+
+    async function handleSave(groupData: GroupUpdateEdit) {
+        if (!group) return;
+        const updatedGroup = await $eventRepo.updateGroup(event.id.toString(), group.id.toString(), groupData);
+        groups = groups.map((g) => (g.id === updatedGroup.id ? updatedGroup : g));
+        open = false;
+    }
+
+    async function handleDelete() {
+        if (!group) return;
+        await $eventRepo.deleteGroup(event.id.toString(), group.id.toString());
+        groups = groups.filter((g) => g.id !== group.id);
+        open = false;
+    }
+</script>
+
+{#if group}
+    <Dialog bind:open>
+        <DialogContent>
+            <DialogHeader>
+                <DialogTitle>Gruppe Bearbeiten: {group.name}</DialogTitle>
+                <DialogDescription>Hier kannst du die Gruppendetails bearbeiten.</DialogDescription>
+            </DialogHeader>
+            <GroupEdit {group} onSave={handleSave}>
+                {#snippet actions(dirty, submit)}
+                    <DialogFooter class="flex justify-between">
+                        <Button variant="destructive" onclick={handleDelete}>Löschen</Button>
+                        <div class="flex gap-2">
+                            <Button variant="outline" onclick={() => (open = false)}>Abbrechen</Button>
+                            <Button disabled={!dirty} onclick={submit}>Speichern</Button>
+                        </div>
+                    </DialogFooter>
+                {/snippet}
+            </GroupEdit>
+        </DialogContent>
+    </Dialog>
+{/if}

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

@@ -0,0 +1,48 @@
+<script lang="ts">
+    import type { EventFight, ExtendedEvent, ResponseGroups, ResponseTeam } from "@type/event";
+    import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "@components/ui/dialog";
+    import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@components/ui/table";
+    import { Button } from "@components/ui/button";
+    import type { Team } from "@components/types/team";
+
+    let { open = $bindable(), group, teams, fights }: { open?: boolean; group: ResponseGroups; teams: Team[]; fights: EventFight[] } = $props();
+</script>
+
+<Dialog bind:open>
+    <DialogContent class="sm:max-w-[600px]">
+        <DialogHeader>
+            <DialogTitle>Ergebnisse: {group?.name}</DialogTitle>
+            <DialogDescription>
+                Punkte: Sieg: {group?.pointsPerWin}, Unentschieden: {group?.pointsPerDraw}, Niederlage: {group?.pointsPerLoss}
+            </DialogDescription>
+        </DialogHeader>
+        {#if group.points !== null}
+            <Table>
+                <TableHeader>
+                    <TableRow>
+                        <TableHead>Team</TableHead>
+                        <TableHead class="text-right">Spiele</TableHead>
+                        <TableHead class="text-right">Punkte</TableHead>
+                    </TableRow>
+                </TableHeader>
+                <TableBody>
+                    {#each Object.entries(group.points).toSorted((a, b) => b[1] - a[1]) as [teamIdString, points] (teamIdString)}
+                        {@const teamId = Number(teamIdString)}
+                        {@const team = teams.find((t) => t.id === teamId) as ResponseTeam | undefined}
+                        {@const playedGames = fights.filter((f) => f.hasFinished && f.group?.id === group.id && (f.blueTeam.id === teamId || f.redTeam.id === teamId)).length}
+                        <TableRow>
+                            <TableCell>{team?.name ?? "?"} ({team?.kuerzel ?? "?"})</TableCell>
+                            <TableCell class="text-right">{playedGames}</TableCell>
+                            <TableCell class="text-right font-bold">{points}</TableCell>
+                        </TableRow>
+                    {/each}
+                </TableBody>
+            </Table>
+        {:else}
+            <p class="text-center py-4">Noch keine Ergebnisse für diese Gruppe vorhanden oder keine Spiele zugeordnet.</p>
+        {/if}
+        <DialogFooter>
+            <Button variant="outline" onclick={() => (open = false)}>Schließen</Button>
+        </DialogFooter>
+    </DialogContent>
+</Dialog>

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

@@ -19,34 +19,24 @@
 
 <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();
 
-    let referees = $state(event.event.referees);
+    let referees = $state(event.referees);
 
     async function addReferee(value: string) {
-        referees = (
-            await $eventRepo.updateEvent(event.event.id.toString(), {
-                addReferee: [value],
-            })
-        ).referees;
+        await $eventRepo.updateReferees(event.event.id.toString(), [value]);
+        referees = await $eventRepo.listReferees(event.event.id.toString());
     }
 
     async function removeReferee(value: string) {
-        referees = (
-            await $eventRepo.updateEvent(event.event.id.toString(), {
-                removeReferee: [value],
-            })
-        ).referees;
+        await $eventRepo.deleteReferees(event.event.id.toString(), [value]);
+        referees = await $eventRepo.listReferees(event.event.id.toString());
     }
-
-    let playerSearch = $state("");
 </script>
 
 <Table>
@@ -61,32 +51,12 @@
             <TableRow>
                 <TableCell>{referee.name}</TableCell>
                 <TableCell>
-                    <Button onclick={() => removeReferee(referee.uuid)}>Remove</Button>
+                    <Button onclick={() => removeReferee(referee.uuid)} variant="outline" size="sm">{referee.name} entfernen</Button>
                 </TableCell>
             </TableRow>
         {/each}
     </TableBody>
-    <Popover>
-        <TableCaption>
-            <PopoverTrigger>
-                <Button>Add</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.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>
+    <TableCaption>
+        <PlayerSelector placeholder="Hinzufügen" onSelect={(player) => addReferee(player.uuid)} />
+    </TableCaption>
 </Table>

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

@@ -20,15 +20,28 @@
 <script lang="ts">
     import { Button } from "@components/ui/button";
     import { Table, TableHeader, TableRow, TableHead, TableBody, TableCell, TableCaption } from "@components/ui/table";
-    import type { ExtendedEvent } from "@type/event.ts";
+    import { eventRepo } from "@repo/event";
+    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 { EventModel } from "./eventmodel.svelte";
 
-    const { event }: { event: ExtendedEvent } = $props();
+    let { event = $bindable() }: { event: EventModel } = $props();
+
+    async function addTeam(value: number) {
+        await $eventRepo.updateTeams(event.event.id.toString(), [value]);
+        event.teams = await $eventRepo.listTeams(event.event.id.toString());
+    }
+
+    async function removeTeam(value: number) {
+        await $eventRepo.deleteTeams(event.event.id.toString(), [value]);
+        event.teams = await $eventRepo.listTeams(event.event.id.toString());
+    }
+
+    let teamSearch = $state("");
 </script>
 
 <Table>
-    <TableCaption>
-        <Button disabled>Add Team</Button>
-    </TableCaption>
     <TableHeader>
         <TableRow>
             <TableHead>Team</TableHead>
@@ -37,12 +50,12 @@
         </TableRow>
     </TableHeader>
     <TableBody>
-        {#each event.teams as team (team.id)}
+        {#each event.teams as t (t.id)}
             <TableRow>
-                <TableCell>{team.kuerzel}</TableCell>
-                <TableCell>{team.name}</TableCell>
+                <TableCell>{t.kuerzel}</TableCell>
+                <TableCell>{t.name}</TableCell>
                 <TableCell>
-                    <Button disabled>Remove</Button>
+                    <Button onclick={() => removeTeam(t.id)} variant="outline" size="sm">{t.name} abmelden</Button>
                 </TableCell>
             </TableRow>
         {/each}
@@ -52,4 +65,27 @@
             </TableRow>
         {/if}
     </TableBody>
+    <Popover>
+        <TableCaption>
+            <PopoverTrigger>
+                <Button>Team Anmelden</Button>
+            </PopoverTrigger>
+        </TableCaption>
+        <PopoverContent class="p-0">
+            <Command shouldFilter={false}>
+                <CommandInput bind:value={teamSearch} placeholder="Search teams..." />
+                <CommandList>
+                    <CommandEmpty>No teams found :(</CommandEmpty>
+                    <CommandGroup heading="Teams">
+                        {#each $teams
+                            .filter((v) => v.name.includes(teamSearch))
+                            .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}
+                    </CommandGroup>
+                </CommandList>
+            </Command>
+        </PopoverContent>
+    </Popover>
 </Table>

src/components/moderator/pages/event/columns.ts

@@ -20,9 +20,9 @@
 import { Checkbox } from "@components/ui/checkbox";
 import { renderComponent } from "@components/ui/data-table";
 import type { ColumnDef } from "@tanstack/table-core";
-import type { EventFight } from "@type/event.ts";
+import type { EventFightModel } from "./eventmodel.svelte";
 
-export const columns: ColumnDef<EventFight> = [
+export const columns: ColumnDef<EventFightModel>[] = [
     {
         id: "auswahl",
         header: ({ table }) => {
@@ -32,7 +32,7 @@ export const columns: ColumnDef<EventFight> = [
                 onCheckedChange: () => {
                     if (!table.getIsSomeRowsSelected() && !table.getIsAllRowsSelected()) {
                         const now = new Date();
-                        const rows = table.getRowModel().rows.filter((row) => new Date(row.original.date) > now);
+                        const rows = table.getRowModel().rows.filter((row) => new Date(row.original.start) > now);
 
                         if (rows.length > 0) {
                             rows.forEach((row) => {
@@ -57,13 +57,13 @@ export const columns: ColumnDef<EventFight> = [
         },
     },
     {
-        accessorFn: (r) => r.blueTeam.name + " vs " + r.redTeam.name,
+        accessorFn: (r) => r.blueTeam.nameWithRelation + " vs " + r.redTeam.nameWithRelation,
         id: "begegnung",
         header: "Begegnung",
     },
     {
         header: "Gruppe",
-        accessorKey: "group",
+        accessorKey: "group.id",
         id: "group",
     },
     {
@@ -77,4 +77,28 @@ export const columns: ColumnDef<EventFight> = [
             });
         },
     },
+    {
+        header: "Spielmodus",
+        accessorKey: "spielmodus",
+    },
+    {
+        header: "Map",
+        accessorKey: "map",
+    },
+    {
+        header: "Ergebnis",
+        accessorKey: "ergebnis",
+        cell: ({ row }) => {
+            const fight = row.original;
+            if (!fight.hasFinished) {
+                return "Noch nicht gespielt";
+            } else if (fight.ergebnis === 1) {
+                return fight.blueTeam.name + " hat gewonnen";
+            } else if (fight.ergebnis === 2) {
+                return fight.redTeam.name + " hat gewonnen";
+            } else {
+                return "Unentschieden";
+            }
+        },
+    },
 ];

src/components/moderator/pages/event/eventmodel.svelte.ts

@@ -0,0 +1,68 @@
+import type { ResponseUser } from "@components/repo/event";
+import type { EventFight, ExtendedEvent, ResponseGroups, ResponseRelation, SWEvent } from "@components/types/event";
+import type { Team } from "@components/types/team";
+import { derived } from "svelte/store";
+
+export class EventModel {
+    public event: SWEvent = $state({} as SWEvent);
+    public teams: Array<Team> = $state([]);
+    public groups: Array<ResponseGroups> = $state([]);
+    public _fights: Array<EventFight> = $state([]);
+    public referees: Array<ResponseUser> = $state([]);
+    public relations: Array<ResponseRelation> = $state([]);
+
+    public fights = $derived(this.remapFights(this._fights, this.relations));
+
+    constructor(data: ExtendedEvent) {
+        this.event = data.event;
+        this.relations = data.relations;
+        this.teams = data.teams;
+        this.groups = data.groups;
+        this._fights = data.fights;
+        this.referees = data.referees;
+    }
+
+    private remapFights(v: Array<EventFight>, rels: Array<ResponseRelation>) {
+        return v.map((fight) => {
+            let f = JSON.parse(JSON.stringify(fight)) as EventFight;
+
+            let blueTeamRelation = "";
+            let redTeamRelation = "";
+
+            let relations = rels.filter((relation) => relation.fight === f.id);
+
+            relations.forEach((relation) => {
+                let str = "";
+                if (relation.type === "FIGHT") {
+                    str = `${relation.fromPlace === 0 ? "Gewinner" : "Verlierer"} von ${relation.fromFight?.blueTeam.name} vs ${relation.fromFight?.redTeam.name} (${new Date(
+                        relation.fromFight?.start ?? 0
+                    ).toLocaleTimeString("de-DE", {
+                        timeStyle: "short",
+                    })})`;
+                } else {
+                    str = `${relation.fromPlace + 1}. Platz von ${relation.fromGroup?.name}`;
+                }
+
+                if (relation.team === "BLUE") {
+                    blueTeamRelation = str;
+                } else {
+                    redTeamRelation = str;
+                }
+            });
+
+            return {
+                ...f,
+                blueTeam: {
+                    ...f.blueTeam,
+                    nameWithRelation: blueTeamRelation ? `${f.blueTeam.name} (${blueTeamRelation})` : f.blueTeam.name,
+                },
+                redTeam: {
+                    ...f.redTeam,
+                    nameWithRelation: redTeamRelation ? `${f.redTeam.name} (${redTeamRelation})` : f.redTeam.name,
+                },
+            };
+        });
+    }
+}
+
+export type EventFightModel = (typeof EventModel.prototype.fights)[number];

src/components/moderator/pages/events/Events.svelte

@@ -20,12 +20,136 @@
 <script lang="ts">
     import { eventRepo } from "@repo/event.ts";
     import EventCard from "@components/moderator/components/EventCard.svelte";
+    import { Button } from "@components/ui/button/index.js";
+    import { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from "@components/ui/dialog/index.js";
+    import { Input } from "@components/ui/input/index.js";
+    import { Label } from "@components/ui/label/index.js";
+    import DateTimePicker from "@components/ui/datetime-picker/DateTimePicker.svelte";
+    import { PlusIcon } from "lucide-svelte";
+    import dayjs from "dayjs";
+    import { fromAbsolute, now, ZonedDateTime } from "@internationalized/date";
 
     let eventsFuture = $state($eventRepo.listEvents());
     let millis = Date.now();
+
+    let createOpen = $state(false);
+    let newEventName = $state("");
+    let newEventStart: ZonedDateTime = $state(now("Europe/Berlin"));
+    let newEventEnd: ZonedDateTime = $state(
+        now("Europe/Berlin").add({
+            days: 1,
+        })
+    );
+    let isSubmitting = $state(false);
+    let errorMsg = $state("");
+
+    function resetFormFields() {
+        newEventName = "";
+        newEventStart = now("Europe/Berlin");
+        newEventEnd = now("Europe/Berlin").add({
+            days: 1,
+        });
+        errorMsg = "";
+        isSubmitting = false;
+    }
+
+    $effect(() => {
+        if (createOpen) {
+            resetFormFields();
+        }
+    });
+
+    const canSubmit = $derived(
+        newEventName.trim() !== "" &&
+            newEventStart &&
+            newEventEnd &&
+            dayjs(newEventStart.toDate()).isValid() &&
+            dayjs(newEventEnd.toDate()).isValid() &&
+            newEventStart.toDate() < newEventEnd.toDate() &&
+            !isSubmitting
+    );
+
+    async function submitCreateEvent() {
+        if (!canSubmit) return;
+
+        isSubmitting = true;
+        errorMsg = "";
+
+        const payload = {
+            name: newEventName.trim(),
+            start: dayjs(newEventStart.toDate()),
+            end: dayjs(newEventEnd.toDate()),
+        };
+
+        try {
+            await $eventRepo.createEvent(payload);
+            eventsFuture = $eventRepo.listEvents(); // Refresh the list
+            createOpen = false;
+        } catch (e: any) {
+            errorMsg = e.message || "Failed to create event. Please try again.";
+            console.error("Failed to create event:", e);
+        } finally {
+            isSubmitting = false;
+        }
+    }
 </script>
 
-<div class="p-4">
+<div class="p-4 min-h-screen">
+    <div class="flex justify-between items-center mb-6">
+        <h1 class="text-3xl font-semibold">Events</h1>
+        <Dialog bind:open={createOpen}>
+            <DialogTrigger>
+                {#snippet child({ props })}
+                    <Button variant="outline" {...props}>
+                        <PlusIcon class="mr-2" />
+                        Create Event
+                    </Button>
+                {/snippet}
+            </DialogTrigger>
+            <DialogContent class="sm:max-w-[425px]">
+                <DialogHeader>
+                    <DialogTitle>Create New Event</DialogTitle>
+                    <DialogDescription>Fill in the details for the new event. Click create when you're done.</DialogDescription>
+                </DialogHeader>
+                <div class="grid gap-4 py-4">
+                    <div class="grid grid-cols-4 items-center gap-4">
+                        <Label for="eventName" class="text-right">Name</Label>
+                        <Input id="eventName" bind:value={newEventName} class="col-span-3" placeholder="Event Name" />
+                    </div>
+                    <div class="grid grid-cols-4 items-center gap-4">
+                        <Label for="eventStart" class="text-right">Start</Label>
+                        <div class="col-span-3">
+                            <DateTimePicker bind:value={newEventStart} />
+                        </div>
+                    </div>
+                    <div class="grid grid-cols-4 items-center gap-4">
+                        <Label for="eventEnd" class="text-right">End</Label>
+                        <div class="col-span-3">
+                            <DateTimePicker bind:value={newEventEnd} />
+                        </div>
+                    </div>
+                    {#if errorMsg}
+                        <p class="col-span-4 text-sm text-red-600 dark:text-red-500 text-center">{errorMsg}</p>
+                    {/if}
+                </div>
+                <DialogFooter>
+                    <DialogClose>
+                        {#snippet child({ props })}
+                            <Button variant="outline" {...props}>Cancel</Button>
+                        {/snippet}
+                    </DialogClose>
+                    <Button onclick={submitCreateEvent} disabled={!canSubmit}>
+                        {#if isSubmitting}
+                            Creating...
+                        {:else}
+                            Create Event
+                        {/if}
+                    </Button>
+                </DialogFooter>
+            </DialogContent>
+        </Dialog>
+    </div>
+
     {#await eventsFuture}
         <p>Loading...</p>
     {:then events}
@@ -45,7 +169,5 @@
                 </a>
             {/each}
         </div>
-    {:catch e}
-
     {/await}
-</div>
+</div>

src/components/moderator/pages/generators/FightsGenerator.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+    import type { ExtendedEvent } from "@components/types/event";
+    import { Tabs, TabsList, TabsTrigger, TabsContent } from "@components/ui/tabs";
+    import GroupPhaseGenerator from "./gens/group/GroupPhaseGenerator.svelte";
+    import SingleEliminationGenerator from "./gens/elimination/SingleEliminationGenerator.svelte";
+    import DoubleEliminationGenerator from "./gens/elimination/DoubleEliminationGenerator.svelte";
+    let {
+        data,
+    }: {
+        data: ExtendedEvent;
+    } = $props();
+</script>
+
+<div class="m-4">
+    <Tabs value="group">
+        <TabsList class="mb-4">
+            <TabsTrigger value="group">Gruppenphase</TabsTrigger>
+            <TabsTrigger value="ko">K.O. Phase</TabsTrigger>
+            <TabsTrigger value="double">Double Elimination</TabsTrigger>
+        </TabsList>
+        <TabsContent value="group">
+            <GroupPhaseGenerator {data} />
+        </TabsContent>
+        <TabsContent value="ko">
+            <SingleEliminationGenerator {data} />
+        </TabsContent>
+        <TabsContent value="double">
+            <DoubleEliminationGenerator {data} />
+        </TabsContent>
+    </Tabs>
+</div>

src/components/moderator/pages/generators/Generator.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+    import { eventRepo } from "@components/repo/event";
+    import FightsGenerator from "./FightsGenerator.svelte";
+
+    interface Props {
+        params: { id: number };
+    }
+
+    let { params }: Props = $props();
+
+    let id = params.id;
+
+    let future = $eventRepo.getEvent(id.toString());
+</script>
+
+{#await future}
+    <p>Loading...</p>
+{:then event}
+    <FightsGenerator data={event} />
+{:catch error}
+    <p class="text-red-500">Error loading event: {error.message}</p>
+{/await}

src/components/moderator/pages/generators/gens/elimination/DoubleEliminationGenerator.svelte

@@ -0,0 +1,515 @@
+<script lang="ts">
+    import type { ExtendedEvent } from "@components/types/event";
+    import type { Team } from "@components/types/team";
+    import { eventRepo } from "@components/repo/event";
+    import { fightRepo } from "@components/repo/fight";
+    import { gamemodes, maps } from "@components/stores/stores";
+    import { Button } from "@components/ui/button";
+    import { Card } from "@components/ui/card";
+    import DateTimePicker from "@components/ui/datetime-picker/DateTimePicker.svelte";
+    import { Label } from "@components/ui/label";
+    import { Select, SelectContent, SelectItem, SelectTrigger } from "@components/ui/select";
+    import { Slider } from "@components/ui/slider";
+    import { fromAbsolute } from "@internationalized/date";
+    import dayjs from "dayjs";
+    import { Plus, Shuffle } from "lucide-svelte";
+    import { replace } from "svelte-spa-router";
+
+    let { data }: { data: ExtendedEvent } = $props();
+
+    // Seed model (reuse from single elimination)
+    interface SeedTeamSlot {
+        kind: "TEAM";
+        id: number;
+    }
+    interface SeedGroupSlot {
+        kind: "GROUP";
+        groupId: number;
+        place: number;
+    }
+    interface SeedFightSlot {
+        kind: "FIGHT";
+        fightId: number;
+        place: 0 | 1;
+    }
+    type SeedSlot = SeedTeamSlot | SeedGroupSlot | SeedFightSlot;
+
+    let seedSlots = $state<SeedSlot[]>(data.teams.map((t) => ({ kind: "TEAM", id: t.id })));
+    const teams = $derived(new Map<number, Team>(data.teams.map((t) => [t.id, t])));
+    function shuffleTeams() {
+        const teamIndices = seedSlots.map((v, i) => ({ v, i })).filter((x) => x.v.kind === "TEAM");
+        const shuffledIds = teamIndices.map((x) => (x.v as SeedTeamSlot).id).sort(() => Math.random() - 0.5);
+        let p = 0;
+        seedSlots = seedSlots.map((slot) => (slot.kind === "TEAM" ? { kind: "TEAM", id: shuffledIds[p++] } : slot));
+    }
+    function moveSlot(index: number, dir: -1 | 1) {
+        const ni = index + dir;
+        if (ni < 0 || ni >= seedSlots.length) return;
+        const copy = [...seedSlots];
+        const [item] = copy.splice(index, 1);
+        copy.splice(ni, 0, item);
+        seedSlots = copy;
+    }
+    function removeSlot(index: number) {
+        seedSlots = seedSlots.filter((_, i) => i !== index);
+    }
+    function addUnknown() {
+        seedSlots = [...seedSlots, { kind: "TEAM", id: -1 }];
+    }
+    let selectedAddTeam = $state<number>(data.teams[0]?.id ?? 0);
+    function addTeam() {
+        if (selectedAddTeam !== undefined) seedSlots = [...seedSlots, { kind: "TEAM", id: selectedAddTeam }];
+    }
+    let selectedGroup = $state<number | null>(data.groups[0]?.id ?? null);
+    let selectedGroupPlace = $state<number>(0);
+    function addGroupPlace() {
+        if (selectedGroup != null) seedSlots = [...seedSlots, { kind: "GROUP", groupId: selectedGroup, place: selectedGroupPlace }];
+    }
+    let selectedFight = $state<number | null>(data.fights[0]?.id ?? null);
+    let selectedFightPlace = $state<0 | 1>(0);
+    function addFightPlace() {
+        if (selectedFight != null) seedSlots = [...seedSlots, { kind: "FIGHT", fightId: selectedFight, place: selectedFightPlace }];
+    }
+
+    // Config
+    let startTime = $state(fromAbsolute(data.event.start, "Europe/Berlin"));
+    let roundTime = $state(30);
+    let startDelay = $state(30);
+    let gamemode = $state("");
+    let map = $state("");
+    let selectableGamemodes = $derived($gamemodes.map((g) => ({ name: g, value: g })).sort((a, b) => a.name.localeCompare(b.name)));
+    let mapsStore = $derived(maps(gamemode));
+    let selectableMaps = $derived($mapsStore.map((m) => ({ name: m, value: m })).sort((a, b) => a.name.localeCompare(b.name)));
+
+    // Build winners bracket rounds (same as single elimination seeding)
+    interface BracketFightPreview {
+        blue: SeedSlot;
+        red: SeedSlot;
+    }
+    type BracketRoundPreview = BracketFightPreview[];
+    function buildWinnersRounds(order: SeedSlot[]): BracketRoundPreview[] {
+        const n = order.length;
+        if (n < 2) return [];
+        if ((n & (n - 1)) !== 0) return []; // power of two required
+        const rounds: BracketRoundPreview[] = [];
+        let round: BracketRoundPreview = [];
+        for (let i = 0; i < order.length; i += 2) round.push({ blue: order[i], red: order[i + 1] });
+        rounds.push(round);
+        let prevWinners = round.map((f) => f.blue);
+        while (prevWinners.length > 1) {
+            const next: BracketRoundPreview = [];
+            for (let i = 0; i < prevWinners.length; i += 2) next.push({ blue: prevWinners[i], red: prevWinners[i + 1] });
+            rounds.push(next);
+            prevWinners = next.map((f) => f.blue);
+        }
+        return rounds;
+    }
+    let winnersRounds = $derived(buildWinnersRounds(seedSlots));
+
+    // Losers bracket structure: each losers round takes losers from previous winners round or previous losers round.
+    // Simplified pairing: For each winners round except final, collect losers and pair them sequentially; then advance until one remains for losers final.
+    function buildLosersTemplate(wRounds: BracketRoundPreview[]): BracketRoundPreview[] {
+        const losersRounds: BracketRoundPreview[] = [];
+        if (wRounds.length < 2) return losersRounds;
+        // Round 1 losers (from winners round 1)
+        const firstLosersPairs: BracketRoundPreview = [];
+        wRounds[0].forEach((f) => firstLosersPairs.push({ blue: f.blue, red: f.red })); // placeholders (will label as losers)
+        losersRounds.push(firstLosersPairs);
+        // Subsequent losers rounds shrink similarly
+        let remaining = firstLosersPairs.length; // number of fights that feed losers next stage
+        while (remaining > 1) {
+            const next: BracketRoundPreview = [];
+            for (let i = 0; i < remaining; i += 2) next.push(firstLosersPairs[i]); // placeholder reuse
+            losersRounds.push(next);
+            remaining = next.length;
+        }
+        return losersRounds;
+    }
+    let losersRounds = $derived(buildLosersTemplate(winnersRounds));
+
+    let generateDisabled = $derived(gamemode !== "" && map !== "" && winnersRounds.length > 0 && seedSlots.length >= 4);
+
+    // Type helpers
+    function slotLabel(slot: SeedSlot): string {
+        if (slot.kind === "TEAM") return teams.get(slot.id)?.name ?? "???";
+        if (slot.kind === "GROUP") {
+            const gname = data.groups.find((g) => g.id === slot.groupId)?.name ?? "?";
+            return `(Grp ${gname} Platz ${slot.place + 1})`;
+        }
+        if (slot.kind === "FIGHT") {
+            const f = data.fights.find((x) => x.id === slot.fightId);
+            const when = f ? new Date(f.start).toLocaleTimeString("de-DE", { timeStyle: "short" }) : "?";
+            const vs = f ? `${f.blueTeam.kuerzel} vs. ${f.redTeam.kuerzel}` : "Kampf";
+            return `${slot.place === 0 ? "Gewinner" : "Verlierer"} von ${vs} (${when})`;
+        }
+        return "???";
+    }
+
+    async function generateDouble() {
+        if (!generateDisabled) return;
+        const eventId = data.event.id;
+        // Create two groups: winners & losers + grand final group (optional combine winners)
+        const winnersGroup = await $eventRepo.createGroup(eventId, { name: "Winners", type: "ELIMINATION_STAGE" });
+        const losersGroup = await $eventRepo.createGroup(eventId, { name: "Losers", type: "ELIMINATION_STAGE" });
+        const finalGroup = await $eventRepo.createGroup(eventId, { name: "Final", type: "ELIMINATION_STAGE" });
+
+        function fallbackTeamId(slot: SeedSlot): number {
+            if (slot.kind === "GROUP" || slot.kind === "FIGHT") return -1;
+            if (slot.kind === "TEAM") return slot.id;
+            return data.teams[0].id;
+        }
+
+        const winnersFightIdsByRound: number[][] = [];
+        for (let r = 0; r < winnersRounds.length; r++) {
+            const round = winnersRounds[r];
+            const ids: number[] = [];
+            for (let i = 0; i < round.length; i++) {
+                let finalMap = map;
+                if (finalMap === "%random%" && selectableMaps.length > 0) finalMap = selectableMaps[Math.floor(Math.random() * selectableMaps.length)].value;
+                const f = await $fightRepo.createFight(eventId, {
+                    blueTeam: fallbackTeamId(round[i].blue),
+                    redTeam: fallbackTeamId(round[i].red),
+                    group: winnersGroup.id,
+                    map: finalMap,
+                    spectatePort: null,
+                    spielmodus: gamemode,
+                    start: dayjs(
+                        startTime
+                            .copy()
+                            .add({ minutes: roundTime * r })
+                            .add({ seconds: startDelay * i })
+                            .toDate()
+                    ),
+                });
+                // Attach relations for GROUP/FIGHT seeds
+                const pair = round[i];
+                if (pair.blue.kind === "GROUP") await $eventRepo.createRelation(eventId, { fightId: f.id, team: "BLUE", fromType: "GROUP", fromId: pair.blue.groupId, fromPlace: pair.blue.place });
+                if (pair.red.kind === "GROUP") await $eventRepo.createRelation(eventId, { fightId: f.id, team: "RED", fromType: "GROUP", fromId: pair.red.groupId, fromPlace: pair.red.place });
+                if (pair.blue.kind === "FIGHT") await $eventRepo.createRelation(eventId, { fightId: f.id, team: "BLUE", fromType: "FIGHT", fromId: pair.blue.fightId, fromPlace: pair.blue.place });
+                if (pair.red.kind === "FIGHT") await $eventRepo.createRelation(eventId, { fightId: f.id, team: "RED", fromType: "FIGHT", fromId: pair.red.fightId, fromPlace: pair.red.place });
+                ids.push(f.id);
+            }
+            winnersFightIdsByRound.push(ids);
+        }
+
+        // Progression in winners bracket
+        for (let r = 1; r < winnersFightIdsByRound.length; r++) {
+            const prev = winnersFightIdsByRound[r - 1];
+            const curr = winnersFightIdsByRound[r];
+            for (let i = 0; i < curr.length; i++) {
+                const target = curr[i];
+                const srcA = prev[i * 2];
+                const srcB = prev[i * 2 + 1];
+                await $eventRepo.createRelation(eventId, { fightId: target, team: "BLUE", fromType: "FIGHT", fromId: srcA, fromPlace: 0 });
+                await $eventRepo.createRelation(eventId, { fightId: target, team: "RED", fromType: "FIGHT", fromId: srcB, fromPlace: 0 });
+            }
+        }
+
+        // Losers bracket (canonical pattern):
+        // L1: losers of WBR1 paired; then for r=2..(k-1):
+        //   Major: winners of previous L vs losers of WBRr
+        //   Minor: winners of that major paired (except after last WBR where we go to LB final vs WB final loser)
+        const losersFightIdsByRound: number[][] = [];
+        let losersRoundIndex = 0;
+        const k = winnersFightIdsByRound.length; // number of winners rounds
+
+        // L1 from WBR1 losers
+        {
+            const wb1 = winnersFightIdsByRound[0];
+            const ids: number[] = [];
+            for (let i = 0; i < wb1.length; i += 2) {
+                let finalMap = map;
+                if (finalMap === "%random%" && selectableMaps.length > 0) finalMap = selectableMaps[Math.floor(Math.random() * selectableMaps.length)].value;
+                const lf = await $fightRepo.createFight(eventId, {
+                    blueTeam: -1,
+                    redTeam: -1,
+                    group: losersGroup.id,
+                    map: finalMap,
+                    spectatePort: null,
+                    spielmodus: gamemode,
+                    start: dayjs(
+                        startTime
+                            .copy()
+                            .add({ minutes: roundTime * (k + losersRoundIndex) })
+                            .add({ seconds: startDelay * (i / 2) })
+                            .toDate()
+                    ),
+                });
+                await $eventRepo.createRelation(eventId, { fightId: lf.id, team: "BLUE", fromType: "FIGHT", fromId: wb1[i], fromPlace: 1 });
+                await $eventRepo.createRelation(eventId, { fightId: lf.id, team: "RED", fromType: "FIGHT", fromId: wb1[i + 1], fromPlace: 1 });
+                ids.push(lf.id);
+            }
+            losersFightIdsByRound.push(ids);
+            losersRoundIndex++;
+        }
+
+        // For each subsequent winners round except the final
+        for (let wr = 1; wr < k - 1; wr++) {
+            const prevLBRound = losersFightIdsByRound[losersFightIdsByRound.length - 1];
+
+            // Major: winners of prevLBRound vs losers of current WBR (wr)
+            {
+                const ids: number[] = [];
+                for (let j = 0; j < winnersFightIdsByRound[wr].length; j++) {
+                    let finalMap = map;
+                    if (finalMap === "%random%" && selectableMaps.length > 0) finalMap = selectableMaps[Math.floor(Math.random() * selectableMaps.length)].value;
+                    const lf = await $fightRepo.createFight(eventId, {
+                        blueTeam: -1,
+                        redTeam: -1,
+                        group: losersGroup.id,
+                        map: finalMap,
+                        spectatePort: null,
+                        spielmodus: gamemode,
+                        start: dayjs(
+                            startTime
+                                .copy()
+                                .add({ minutes: roundTime * (k + losersRoundIndex) })
+                                .add({ seconds: startDelay * j })
+                                .toDate()
+                        ),
+                    });
+                    await $eventRepo.createRelation(eventId, { fightId: lf.id, team: "BLUE", fromType: "FIGHT", fromId: prevLBRound[j], fromPlace: 0 });
+                    await $eventRepo.createRelation(eventId, { fightId: lf.id, team: "RED", fromType: "FIGHT", fromId: winnersFightIdsByRound[wr][j], fromPlace: 1 });
+                    ids.push(lf.id);
+                }
+                losersFightIdsByRound.push(ids);
+                losersRoundIndex++;
+            }
+
+            // Minor: pair winners of last LBRound among themselves (if more than 1)
+            {
+                const last = losersFightIdsByRound[losersFightIdsByRound.length - 1];
+                if (last.length > 1) {
+                    const ids: number[] = [];
+                    for (let j = 0; j < last.length; j += 2) {
+                        let finalMap = map;
+                        if (finalMap === "%random%" && selectableMaps.length > 0) finalMap = selectableMaps[Math.floor(Math.random() * selectableMaps.length)].value;
+                        const lf = await $fightRepo.createFight(eventId, {
+                            blueTeam: -1,
+                            redTeam: -1,
+                            group: losersGroup.id,
+                            map: finalMap,
+                            spectatePort: null,
+                            spielmodus: gamemode,
+                            start: dayjs(
+                                startTime
+                                    .copy()
+                                    .add({ minutes: roundTime * (k + losersRoundIndex) })
+                                    .add({ seconds: startDelay * (j / 2) })
+                                    .toDate()
+                            ),
+                        });
+                        await $eventRepo.createRelation(eventId, { fightId: lf.id, team: "BLUE", fromType: "FIGHT", fromId: last[j], fromPlace: 0 });
+                        await $eventRepo.createRelation(eventId, { fightId: lf.id, team: "RED", fromType: "FIGHT", fromId: last[j + 1], fromPlace: 0 });
+                        ids.push(lf.id);
+                    }
+                    losersFightIdsByRound.push(ids);
+                    losersRoundIndex++;
+                }
+            }
+        }
+
+        // Final losers round: winners of last LBRound vs loser of Winners Final (last WBR)
+        const winnersFinal = winnersFightIdsByRound[k - 1][0];
+        const lastLBRound = losersFightIdsByRound[losersFightIdsByRound.length - 1];
+        let losersFinal: number | undefined = undefined;
+        if (lastLBRound && lastLBRound.length >= 1) {
+            let finalMap2 = map;
+            if (finalMap2 === "%random%" && selectableMaps.length > 0) finalMap2 = selectableMaps[Math.floor(Math.random() * selectableMaps.length)].value;
+            const lf = await $fightRepo.createFight(eventId, {
+                blueTeam: -1,
+                redTeam: -1,
+                group: losersGroup.id,
+                map: finalMap2,
+                spectatePort: null,
+                spielmodus: gamemode,
+                start: dayjs(
+                    startTime
+                        .copy()
+                        .add({ minutes: roundTime * (k + losersRoundIndex) })
+                        .toDate()
+                ),
+            });
+            await $eventRepo.createRelation(eventId, { fightId: lf.id, team: "BLUE", fromType: "FIGHT", fromId: lastLBRound[lastLBRound.length - 1], fromPlace: 0 });
+            await $eventRepo.createRelation(eventId, { fightId: lf.id, team: "RED", fromType: "FIGHT", fromId: winnersFinal, fromPlace: 1 });
+            losersFinal = lf.id;
+            losersFightIdsByRound.push([lf.id]);
+            losersRoundIndex++;
+        }
+
+        // Grand Final
+        let finalMap = map;
+        if (finalMap === "%random%" && selectableMaps.length > 0) finalMap = selectableMaps[Math.floor(Math.random() * selectableMaps.length)].value;
+        const grandFinal = await $fightRepo.createFight(eventId, {
+            blueTeam: -1,
+            redTeam: -1,
+            group: finalGroup.id,
+            map: finalMap,
+            spectatePort: null,
+            spielmodus: gamemode,
+            start: dayjs(
+                startTime
+                    .copy()
+                    .add({ minutes: roundTime * (k + losersRoundIndex) })
+                    .toDate()
+            ),
+        });
+        await $eventRepo.createRelation(eventId, { fightId: grandFinal.id, team: "BLUE", fromType: "FIGHT", fromId: winnersFinal, fromPlace: 0 });
+        if (losersFinal !== undefined) await $eventRepo.createRelation(eventId, { fightId: grandFinal.id, team: "RED", fromType: "FIGHT", fromId: losersFinal, fromPlace: 0 });
+
+        await replace("#/event/" + eventId);
+    }
+</script>
+
+<Card class="p-4 mb-4">
+    <div class="flex justify-between items-center mb-4">
+        <h2 class="text-xl font-bold">Double Elimination Bracket</h2>
+        <div class="flex gap-2">
+            <Button onclick={shuffleTeams} aria-label="Shuffle Teams"><Shuffle size={16} /> Shuffle</Button>
+        </div>
+    </div>
+    {#if seedSlots.length < 4}
+        <p class="text-gray-400">Mindestens vier Seeds benötigt.</p>
+    {:else if winnersRounds.length === 0}
+        <p class="text-yellow-400">Seedanzahl muss eine Zweierpotenz sein. Aktuell: {seedSlots.length}</p>
+    {/if}
+    <div class="grid lg:grid-cols-3 gap-6">
+        <div class="space-y-4">
+            <Label>Seeds</Label>
+            <ul class="mt-2 space-y-1">
+                {#each seedSlots as slot, i (i)}
+                    <li class="flex items-center gap-2 text-sm">
+                        <span class="w-6 text-right">{i + 1}.</span>
+                        <span class="flex-1 truncate">{slotLabel(slot)}</span>
+                        <div class="flex gap-1">
+                            <Button size="sm" onclick={() => moveSlot(i, -1)} disabled={i === 0}>↑</Button>
+                            <Button size="sm" onclick={() => moveSlot(i, 1)} disabled={i === seedSlots.length - 1}>↓</Button>
+                            <Button size="sm" variant="destructive" onclick={() => removeSlot(i)}>✕</Button>
+                        </div>
+                    </li>
+                {/each}
+            </ul>
+            <div class="space-y-2">
+                <Label>Hinzufügen</Label>
+                <div class="flex flex-col gap-2">
+                    <div class="flex flex-wrap gap-2 items-center">
+                        <select class="bg-gray-800 border border-gray-700 rounded px-2 py-1" bind:value={selectedAddTeam}>
+                            {#each data.teams as t}<option value={t.id}>{t.name}</option>{/each}
+                        </select>
+                        <Button size="sm" onclick={addTeam}>Team</Button>
+                        <Button size="sm" onclick={addUnknown}>???</Button>
+                    </div>
+                    {#if data.groups.length > 0}
+                        <div class="flex flex-wrap gap-2 items-center">
+                            <select class="bg-gray-800 border border-gray-700 rounded px-2 py-1" bind:value={selectedGroup}>
+                                {#each data.groups as g}<option value={g.id}>{g.name}</option>{/each}
+                            </select>
+                            <select class="bg-gray-800 border border-gray-700 rounded px-2 py-1" bind:value={selectedGroupPlace}>
+                                {#each Array(16) as _, idx}<option value={idx}>{idx + 1}. Platz</option>{/each}
+                            </select>
+                            <Button size="sm" onclick={addGroupPlace}>Gruppenplatz</Button>
+                        </div>
+                    {/if}
+                    {#if data.fights.length > 0}
+                        <div class="flex flex-wrap gap-2 items-center">
+                            <select class="bg-gray-800 border border-gray-700 rounded px-2 py-1" bind:value={selectedFight}>
+                                {#each data.fights as f}
+                                    <option value={f.id}>{new Date(f.start).toLocaleTimeString("de-DE", { timeStyle: "short" })}: {f.blueTeam.kuerzel} vs. {f.redTeam.kuerzel}</option>
+                                {/each}
+                            </select>
+                            <select class="bg-gray-800 border border-gray-700 rounded px-2 py-1" bind:value={selectedFightPlace}>
+                                <option value={0}>Gewinner</option>
+                                <option value={1}>Verlierer</option>
+                            </select>
+                            <Button size="sm" onclick={addFightPlace}>Kampfplatz</Button>
+                        </div>
+                    {/if}
+                </div>
+            </div>
+        </div>
+        <div>
+            <Label>Konfiguration</Label>
+            <DateTimePicker bind:value={startTime} />
+            <div class="mt-4">
+                <Label>Rundenzeit: {roundTime}m</Label>
+                <Slider type="single" bind:value={roundTime} step={5} min={5} max={60} />
+            </div>
+            <div class="mt-4">
+                <Label>Startverzögerung: {startDelay}s</Label>
+                <Slider type="single" bind:value={startDelay} step={5} min={0} max={60} />
+            </div>
+            <div class="mt-4">
+                <Label>Spielmodus</Label>
+                <Select type="single" bind:value={gamemode}>
+                    <SelectTrigger>{gamemode}</SelectTrigger>
+                    <SelectContent>
+                        {#each selectableGamemodes as gm}<SelectItem value={gm.value}>{gm.name}</SelectItem>{/each}
+                    </SelectContent>
+                </Select>
+            </div>
+            <div class="mt-4">
+                <Label>Map</Label>
+                <Select type="single" bind:value={map}>
+                    <SelectTrigger>{map}</SelectTrigger>
+                    <SelectContent>
+                        <SelectItem value="%random%">Zufällige Map</SelectItem>
+                        {#each selectableMaps as mp}<SelectItem value={mp.value}>{mp.name}</SelectItem>{/each}
+                    </SelectContent>
+                </Select>
+            </div>
+        </div>
+        <div class="space-y-6">
+            <div>
+                <Label>Winners Bracket Vorschau</Label>
+                {#if winnersRounds.length > 0}
+                    <div class="flex gap-6 overflow-x-auto mt-2">
+                        {#each winnersRounds as round, r}
+                            <div>
+                                <h3 class="font-semibold mb-2">W Runde {r + 1}</h3>
+                                <ul class="space-y-1">
+                                    {#each round as fight, i}
+                                        <li class="p-2 border border-gray-700 rounded text-xs">
+                                            <span class="text-gray-400"
+                                                >{new Intl.DateTimeFormat("de-DE", { hour: "2-digit", minute: "2-digit" }).format(
+                                                    startTime
+                                                        .copy()
+                                                        .add({ minutes: roundTime * r, seconds: startDelay * i })
+                                                        .toDate()
+                                                )}</span
+                                            >
+                                            : {slotLabel(fight.blue)} vs. {slotLabel(fight.red)}
+                                        </li>
+                                    {/each}
+                                </ul>
+                            </div>
+                        {/each}
+                    </div>
+                {/if}
+            </div>
+            <div>
+                <Label>Losers Bracket (vereinfachte Vorschau)</Label>
+                {#if losersRounds.length > 0}
+                    <div class="flex gap-6 overflow-x-auto mt-2">
+                        {#each losersRounds as round, r}
+                            <div>
+                                <h3 class="font-semibold mb-2">L Runde {r + 1}</h3>
+                                <ul class="space-y-1">
+                                    {#each round as fight, i}
+                                        <li class="p-2 border border-gray-700 rounded text-xs">
+                                            Verlierer Paar {i + 1} (aus W Runde {r + 1})
+                                        </li>
+                                    {/each}
+                                </ul>
+                            </div>
+                        {/each}
+                    </div>
+                {/if}
+            </div>
+        </div>
+    </div>
+    <Button class="!p-4 fixed bottom-4 right-4" disabled={!generateDisabled} onclick={generateDouble} aria-label="Double Bracket generieren">
+        <Plus />
+    </Button>
+</Card>
+
+<!-- minimal styles only -->

src/components/moderator/pages/generators/gens/elimination/SingleEliminationGenerator.svelte

@@ -0,0 +1,364 @@
+<script lang="ts">
+    import type { ExtendedEvent } from "@components/types/event";
+    import type { Team } from "@components/types/team";
+    import { eventRepo } from "@components/repo/event";
+    import { fightRepo } from "@components/repo/fight";
+    import { gamemodes, maps } from "@components/stores/stores";
+    import { Button } from "@components/ui/button";
+    import { Card } from "@components/ui/card";
+    import DateTimePicker from "@components/ui/datetime-picker/DateTimePicker.svelte";
+    import { Label } from "@components/ui/label";
+    import { Select, SelectContent, SelectItem, SelectTrigger } from "@components/ui/select";
+    import { Slider } from "@components/ui/slider";
+    import { fromAbsolute } from "@internationalized/date";
+    import dayjs from "dayjs";
+    import { Plus, Shuffle } from "lucide-svelte";
+    import { replace } from "svelte-spa-router";
+
+    let { data }: { data: ExtendedEvent } = $props();
+
+    // --- Seeding model: support teams, group results, unknown placeholders ---
+    interface SeedTeamSlot {
+        kind: "TEAM";
+        id: number;
+    }
+    interface SeedGroupSlot {
+        kind: "GROUP";
+        groupId: number;
+        place: number;
+    }
+    interface SeedUnknownSlot {
+        kind: "UNKNOWN";
+        uid: number;
+    }
+    interface SeedFightSlot {
+        kind: "FIGHT";
+        fightId: number;
+        place: 0 | 1;
+    } // 0 winner, 1 loser
+    type SeedSlot = SeedTeamSlot | SeedGroupSlot | SeedUnknownSlot | SeedFightSlot;
+
+    let seedSlots = $state<SeedSlot[]>(data.teams.map((t) => ({ kind: "TEAM", id: t.id })));
+    const teams = $derived(new Map<number, Team>(data.teams.map((t) => [t.id, t])));
+    let unknownCounter = 1;
+
+    function shuffleTeams() {
+        const teamIndices = seedSlots.map((v, i) => ({ v, i })).filter((x) => x.v.kind === "TEAM");
+        const shuffledIds = teamIndices.map((x) => (x.v as SeedTeamSlot).id).sort(() => Math.random() - 0.5);
+        let p = 0;
+        seedSlots = seedSlots.map((slot) => (slot.kind === "TEAM" ? { kind: "TEAM", id: shuffledIds[p++] } : slot));
+    }
+
+    function moveSlot(index: number, dir: -1 | 1) {
+        const newIndex = index + dir;
+        if (newIndex < 0 || newIndex >= seedSlots.length) return;
+        const copy = [...seedSlots];
+        const [item] = copy.splice(index, 1);
+        copy.splice(newIndex, 0, item);
+        seedSlots = copy;
+    }
+    function removeSlot(index: number) {
+        seedSlots = seedSlots.filter((_, i) => i !== index);
+    }
+    function addUnknown() {
+        seedSlots = [...seedSlots, { kind: "UNKNOWN", uid: unknownCounter++ }];
+    }
+    let selectedAddTeam = $state<number>(data.teams[0]?.id ?? 0);
+    function addTeam() {
+        if (selectedAddTeam !== undefined) seedSlots = [...seedSlots, { kind: "TEAM", id: selectedAddTeam }];
+    }
+    let selectedGroup = $state<number | null>(data.groups[0]?.id ?? null);
+    let selectedGroupPlace = $state<number>(0);
+    function addGroupPlace() {
+        if (selectedGroup != null) seedSlots = [...seedSlots, { kind: "GROUP", groupId: selectedGroup, place: selectedGroupPlace }];
+    }
+
+    // Fight seed selection
+    let selectedFight = $state<number | null>(data.fights[0]?.id ?? null);
+    let selectedFightPlace = $state<0 | 1>(0);
+    function addFightPlace() {
+        if (selectedFight != null) seedSlots = [...seedSlots, { kind: "FIGHT", fightId: selectedFight, place: selectedFightPlace }];
+    }
+
+    // Config inputs
+    let startTime = $state(fromAbsolute(data.event.start, "Europe/Berlin"));
+    let roundTime = $state(30); // minutes per round
+    let startDelay = $state(30); // seconds between fights inside round
+    let gamemode = $state("");
+    let map = $state("");
+
+    // Gamemode / Map selection stores
+    let selectableGamemodes = $derived($gamemodes.map((g) => ({ name: g, value: g })).sort((a, b) => a.name.localeCompare(b.name)));
+    let mapsStore = $derived(maps(gamemode));
+    let selectableMaps = $derived($mapsStore.map((m) => ({ name: m, value: m })).sort((a, b) => a.name.localeCompare(b.name)));
+
+    // Derived: bracket rounds preview
+    interface BracketFightPreview {
+        blue: SeedSlot;
+        red: SeedSlot;
+    }
+    type BracketRoundPreview = BracketFightPreview[];
+
+    function buildBracketSeeds(order: SeedSlot[]): BracketRoundPreview[] {
+        const n = order.length;
+        if (n < 2) return [];
+        // Require power of two for now; simplest implementation
+        if ((n & (n - 1)) !== 0) return [];
+        let rounds: BracketRoundPreview[] = [];
+        let round: BracketRoundPreview = [];
+        for (let i = 0; i < order.length; i += 2) round.push({ blue: order[i], red: order[i + 1] });
+        rounds.push(round);
+        // Higher rounds placeholders using first team from each prior pairing as seed representative
+        let prevWinners = round.map((fight) => fight.blue);
+        while (prevWinners.length > 1) {
+            const nextRound: BracketRoundPreview = [];
+            for (let i = 0; i < prevWinners.length; i += 2) {
+                nextRound.push({ blue: prevWinners[i], red: prevWinners[i + 1] });
+            }
+            rounds.push(nextRound);
+            prevWinners = nextRound.map((f) => f.blue);
+        }
+        return rounds;
+    }
+
+    let bracketRounds = $derived(buildBracketSeeds(seedSlots));
+
+    let generateDisabled = $derived(gamemode !== "" && map !== "" && bracketRounds.length > 0 && seedSlots.length >= 2);
+
+    async function generateBracket() {
+        if (!generateDisabled) return;
+        const eventId = data.event.id;
+        // create elimination group
+        const group = await $eventRepo.createGroup(eventId, { name: "Elimination", type: "ELIMINATION_STAGE" });
+
+        // Create fights round by round & keep ids for relation wiring
+        const fightIdsByRound: number[][] = [];
+        function fallbackTeamId(slot: SeedSlot): number {
+            // If this seed is a relation (GROUP or FIGHT), use -1 as requested
+            if (slot.kind === "GROUP" || slot.kind === "FIGHT") return -1;
+            if (slot.kind === "TEAM") return slot.id;
+            // UNKNOWN stays as a concrete placeholder team or -1? Keep concrete team to avoid backend errors.
+            return data.teams[0].id;
+        }
+        for (let r = 0; r < bracketRounds.length; r++) {
+            const round = bracketRounds[r];
+            const ids: number[] = [];
+            for (let i = 0; i < round.length; i++) {
+                const pair = round[i];
+                let finalMap = map;
+                if (finalMap === "%random%" && selectableMaps.length > 0) finalMap = selectableMaps[Math.floor(Math.random() * selectableMaps.length)].value;
+                const fight = await $fightRepo.createFight(eventId, {
+                    blueTeam: fallbackTeamId(pair.blue),
+                    redTeam: fallbackTeamId(pair.red),
+                    group: group.id,
+                    map: finalMap,
+                    spectatePort: null,
+                    spielmodus: gamemode,
+                    start: dayjs(
+                        startTime
+                            .copy()
+                            .add({ minutes: roundTime * r })
+                            .add({ seconds: startDelay * i })
+                            .toDate()
+                    ),
+                });
+                if (pair.blue.kind === "GROUP") await $eventRepo.createRelation(eventId, { fightId: fight.id, team: "BLUE", fromType: "GROUP", fromId: pair.blue.groupId, fromPlace: pair.blue.place });
+                if (pair.red.kind === "GROUP") await $eventRepo.createRelation(eventId, { fightId: fight.id, team: "RED", fromType: "GROUP", fromId: pair.red.groupId, fromPlace: pair.red.place });
+                if (pair.blue.kind === "FIGHT") await $eventRepo.createRelation(eventId, { fightId: fight.id, team: "BLUE", fromType: "FIGHT", fromId: pair.blue.fightId, fromPlace: pair.blue.place });
+                if (pair.red.kind === "FIGHT") await $eventRepo.createRelation(eventId, { fightId: fight.id, team: "RED", fromType: "FIGHT", fromId: pair.red.fightId, fromPlace: pair.red.place });
+                ids.push(fight.id);
+            }
+            fightIdsByRound.push(ids);
+        }
+
+        // Wire relations: for each fight in rounds >0, reference winners of two source fights from previous round
+        for (let r = 1; r < fightIdsByRound.length; r++) {
+            const prev = fightIdsByRound[r - 1];
+            const current = fightIdsByRound[r];
+            for (let i = 0; i < current.length; i++) {
+                const targetFightId = current[i];
+                const srcA = prev[i * 2];
+                const srcB = prev[i * 2 + 1];
+                // Winner assumed place 1
+                await $eventRepo.createRelation(eventId, {
+                    fightId: targetFightId,
+                    team: "BLUE",
+                    fromType: "FIGHT",
+                    fromId: srcA,
+                    fromPlace: 1,
+                });
+                await $eventRepo.createRelation(eventId, {
+                    fightId: targetFightId,
+                    team: "RED",
+                    fromType: "FIGHT",
+                    fromId: srcB,
+                    fromPlace: 1,
+                });
+            }
+        }
+
+        // Redirect back to event view
+        await replace("#/event/" + eventId);
+    }
+
+    // Helpers for template rendering with TS type guards
+    function isTeam(slot: SeedSlot): slot is SeedTeamSlot {
+        return slot.kind === "TEAM";
+    }
+    function isGroup(slot: SeedSlot): slot is SeedGroupSlot {
+        return slot.kind === "GROUP";
+    }
+    function slotLabel(slot: SeedSlot): string {
+        if (isTeam(slot)) return teams.get(slot.id)?.name ?? "Team";
+        if (isGroup(slot)) {
+            const gname = data.groups.find((g) => g.id === slot.groupId)?.name ?? "?";
+            return `(Grp ${gname} Platz ${slot.place + 1})`;
+        }
+        if (slot.kind === "FIGHT") {
+            const f = data.fights.find((x) => x.id === slot.fightId);
+            const when = f ? new Date(f.start).toLocaleTimeString("de-DE", { timeStyle: "short" }) : "?";
+            const vs = f ? `${f.blueTeam.kuerzel} vs. ${f.redTeam.kuerzel}` : "Kampf";
+            return `${slot.place === 0 ? "Gewinner" : "Verlierer"} von ${vs} (${when})`;
+        }
+        return "???";
+    }
+</script>
+
+<Card class="p-4 mb-4">
+    <div class="flex justify-between items-center mb-4">
+        <h2 class="text-xl font-bold">Single Elimination Bracket</h2>
+        <div class="flex gap-2">
+            <Button onclick={shuffleTeams} aria-label="Shuffle Teams"><Shuffle size={16} /> Shuffle</Button>
+        </div>
+    </div>
+    {#if seedSlots.length < 2}
+        <p class="text-gray-400">Mindestens zwei Seeds benötigt.</p>
+    {:else if bracketRounds.length === 0}
+        <p class="text-yellow-400">Anzahl der Seeds muss eine Zweierpotenz sein (2,4,8,16,...). Aktuell: {seedSlots.length}</p>
+    {/if}
+    <div class="grid md:grid-cols-2 gap-4">
+        <div class="space-y-4">
+            <div>
+                <Label>Seeds / Reihenfolge</Label>
+                <ul class="mt-2 space-y-1">
+                    {#each seedSlots as slot, i (i)}
+                        <li class="flex items-center gap-2 text-sm">
+                            <span class="w-6 text-right">{i + 1}.</span>
+                            <span class="flex-1 truncate">{slotLabel(slot)}</span>
+                            <div class="flex gap-1">
+                                <Button size="sm" onclick={() => moveSlot(i, -1)} disabled={i === 0}>↑</Button>
+                                <Button size="sm" onclick={() => moveSlot(i, 1)} disabled={i === seedSlots.length - 1}>↓</Button>
+                                <Button size="sm" variant="destructive" onclick={() => removeSlot(i)}>✕</Button>
+                            </div>
+                        </li>
+                    {/each}
+                </ul>
+            </div>
+            <div class="space-y-2">
+                <Label>Seed hinzufügen</Label>
+                <div class="flex flex-col gap-2">
+                    <div class="flex flex-wrap gap-2 items-center">
+                        <select class="bg-gray-800 border border-gray-700 rounded px-2 py-1" bind:value={selectedAddTeam}>
+                            {#each data.teams as t}<option value={t.id}>{t.name}</option>{/each}
+                        </select>
+                        <Button size="sm" onclick={addTeam}>Team</Button>
+                        <Button size="sm" onclick={addUnknown}>???</Button>
+                    </div>
+                    <div class="flex flex-wrap gap-2 items-center">
+                        {#if data.groups.length > 0}
+                            <select class="bg-gray-800 border border-gray-700 rounded px-2 py-1" bind:value={selectedGroup}>
+                                {#each data.groups as g}<option value={g.id}>{g.name}</option>{/each}
+                            </select>
+                            <select class="bg-gray-800 border border-gray-700 rounded px-2 py-1" bind:value={selectedGroupPlace}>
+                                {#each Array(16) as _, idx}<option value={idx}>{idx + 1}. Platz</option>{/each}
+                            </select>
+                            <Button size="sm" onclick={addGroupPlace}>Gruppenplatz</Button>
+                        {/if}
+                    </div>
+                    <div class="flex flex-wrap gap-2 items-center">
+                        {#if data.fights.length > 0}
+                            <select class="bg-gray-800 border border-gray-700 rounded px-2 py-1" bind:value={selectedFight}>
+                                {#each data.fights as f}
+                                    <option value={f.id}>{new Date(f.start).toLocaleTimeString("de-DE", { timeStyle: "short" })}: {f.blueTeam.kuerzel} vs. {f.redTeam.kuerzel}</option>
+                                {/each}
+                            </select>
+                            <select class="bg-gray-800 border border-gray-700 rounded px-2 py-1" bind:value={selectedFightPlace}>
+                                <option value={0}>Gewinner</option>
+                                <option value={1}>Verlierer</option>
+                            </select>
+                            <Button size="sm" onclick={addFightPlace}>Kampfplatz</Button>
+                        {/if}
+                    </div>
+                </div>
+                <p class="text-xs text-gray-500">Gruppen- oder Kampfplätze erzeugen Relationen beim Generieren. ??? bleibt Platzhalter.</p>
+            </div>
+        </div>
+        <div>
+            <Label>Startzeit</Label>
+            <DateTimePicker bind:value={startTime} />
+            <div class="mt-4">
+                <Label>Rundenzeit: {roundTime}m</Label>
+                <Slider type="single" bind:value={roundTime} step={5} min={5} max={60} />
+            </div>
+            <div class="mt-4">
+                <Label>Startverzögerung: {startDelay}s</Label>
+                <Slider type="single" bind:value={startDelay} step={5} min={0} max={60} />
+            </div>
+            <div class="mt-4">
+                <Label>Spielmodus</Label>
+                <Select type="single" bind:value={gamemode}>
+                    <SelectTrigger>{gamemode}</SelectTrigger>
+                    <SelectContent>
+                        {#each selectableGamemodes as gm}
+                            <SelectItem value={gm.value}>{gm.name}</SelectItem>
+                        {/each}
+                    </SelectContent>
+                </Select>
+            </div>
+            <div class="mt-4">
+                <Label>Map</Label>
+                <Select type="single" bind:value={map}>
+                    <SelectTrigger>{map}</SelectTrigger>
+                    <SelectContent>
+                        <SelectItem value="%random%">Zufällige Map</SelectItem>
+                        {#each selectableMaps as mp}
+                            <SelectItem value={mp.value}>{mp.name}</SelectItem>
+                        {/each}
+                    </SelectContent>
+                </Select>
+            </div>
+        </div>
+    </div>
+    <div class="mt-6">
+        <Label>Vorschau</Label>
+        {#if bracketRounds.length > 0}
+            <div class="flex gap-8 overflow-x-auto mt-2">
+                {#each bracketRounds as round, r}
+                    <div>
+                        <h3 class="font-semibold mb-2">Runde {r + 1}</h3>
+                        <ul class="space-y-1">
+                            {#each round as fight, i}
+                                <li class="p-2 border border-gray-700 rounded text-sm">
+                                    <span class="text-gray-400"
+                                        >{new Intl.DateTimeFormat("de-DE", { hour: "2-digit", minute: "2-digit" }).format(
+                                            startTime
+                                                .copy()
+                                                .add({ minutes: roundTime * r, seconds: startDelay * i })
+                                                .toDate()
+                                        )}</span
+                                    >
+                                    : {slotLabel(fight.blue)} &nbsp;vs.&nbsp; {slotLabel(fight.red)}
+                                </li>
+                            {/each}
+                        </ul>
+                    </div>
+                {/each}
+            </div>
+        {/if}
+    </div>
+    <Button class="!p-4 fixed bottom-4 right-4" disabled={!generateDisabled} onclick={generateBracket} aria-label="Bracket generieren">
+        <Plus />
+    </Button>
+</Card>
+
+<!-- no component-scoped styles needed -->

src/components/moderator/pages/generators/gens/group/GroupPhaseGenerator.svelte

@@ -0,0 +1,306 @@
+<script lang="ts">
+    import DragAcceptor from "@components/admin/pages/generate/DragAcceptor.svelte";
+    import TeamChip from "@components/admin/pages/generate/TeamChip.svelte";
+    import { eventRepo } from "@components/repo/event";
+    import { fightRepo } from "@components/repo/fight";
+    import { gamemodes, maps } from "@components/stores/stores";
+    import type { ExtendedEvent } from "@components/types/event";
+    import type { Team } from "@components/types/team";
+    import { Button } from "@components/ui/button";
+    import { Card } from "@components/ui/card";
+    import DateTimePicker from "@components/ui/datetime-picker/DateTimePicker.svelte";
+    import { Dialog } from "@components/ui/dialog";
+    import { Input } from "@components/ui/input";
+    import { Label } from "@components/ui/label";
+    import { Select, SelectContent, SelectItem, SelectTrigger } from "@components/ui/select";
+    import { Slider } from "@components/ui/slider";
+    import { fromAbsolute, fromDate, parseDateTime, parseDuration } from "@internationalized/date";
+    import dayjs from "dayjs";
+    import { Plus } from "lucide-svelte";
+    import { replace } from "svelte-spa-router";
+    let {
+        data,
+    }: {
+        data: ExtendedEvent;
+    } = $props();
+
+    let teams = $derived(new Map<number, Team>(data.teams.map((team) => [team.id, team])));
+
+    let groups: number[][] = $state([]);
+    let teamsNotInGroup = $derived(data.teams.filter((team) => !groups.flat().includes(team.id)));
+
+    function dragToNewGroup(event: DragEvent) {
+        event.preventDefault();
+        let teamId = parseInt(event.dataTransfer!.getData("team"));
+        groups = [...groups.map((value) => value.filter((value1) => value1 != teamId)), [teamId]].filter((value) => value.length > 0);
+    }
+
+    function teamDragStart(ev: DragEvent, team: Team) {
+        ev.dataTransfer!.setData("team", team.id.toString());
+    }
+
+    let resetDragOver = $state(false);
+
+    function resetDragOverEvent(ev: DragEvent) {
+        resetDragOver = true;
+        ev.preventDefault();
+    }
+
+    function dropReset(ev: DragEvent) {
+        ev.preventDefault();
+        let teamId = parseInt(ev.dataTransfer!.getData("team"));
+        groups = groups.map((group) => group.filter((team) => team !== teamId)).filter((group) => group.length > 0);
+        resetDragOver = false;
+    }
+
+    function dropGroup(ev: DragEvent, groupIndex: number) {
+        ev.preventDefault();
+        let teamId = parseInt(ev.dataTransfer!.getData("team"));
+        groups = groups.map((group, i) => (i === groupIndex ? [...group.filter((value) => value != teamId), teamId] : group.filter((value) => value != teamId))).filter((group) => group.length > 0);
+    }
+
+    let startTime = $state(fromAbsolute(data.event.start, "Europe/Berlin"));
+    let gamemode = $state("");
+    let map = $state("");
+
+    let selectableGamemodes = $derived(
+        $gamemodes
+            .map((gamemode) => {
+                return {
+                    name: gamemode,
+                    value: gamemode,
+                };
+            })
+            .sort((a, b) => a.name.localeCompare(b.name))
+    );
+
+    let mapsStore = $derived(maps(gamemode));
+    let selectableMaps = $derived(
+        $mapsStore
+            .map((map) => {
+                return {
+                    name: map,
+                    value: map,
+                };
+            })
+            .sort((a, b) => a.name.localeCompare(b.name))
+    );
+
+    let roundTime = $state(30);
+    let startDelay = $state(30);
+
+    let showAutoGrouping = $state(false);
+    let groupCount = $state(Math.floor(data.teams.length / 2));
+
+    function createGroups() {
+        let teams = data.teams.map((team) => team.id).sort(() => Math.random() - 0.5);
+        groups = [];
+        for (let i = 0; i < groupCount; i++) {
+            groups.push([]);
+        }
+        while (teams.length > 0) {
+            groups[teams.length % groupCount].push(teams.pop() as number);
+        }
+        showAutoGrouping = false;
+        groups = groups.filter((group) => group.length > 0);
+    }
+
+    function generateGroups(groups: number[][]): number[][][][] {
+        const groupFights: number[][][][] = [];
+        groups.forEach((group) => {
+            let round = group.length + (group.length % 2) - 1;
+            let groupFight = [];
+            for (let i = 0; i < round; i++) {
+                let availableTeams = [...group];
+                if (group.length % 2 === 1) {
+                    availableTeams = availableTeams.filter((team, index) => index !== i);
+                }
+                let roundFights = [];
+                while (availableTeams.length > 0) {
+                    let team1 = availableTeams.pop() as number;
+                    let team2 = availableTeams.at(i % availableTeams.length) as number;
+                    availableTeams = availableTeams.filter((team) => team !== team2);
+                    let fight = [team1, team2];
+                    fight.sort(() => Math.random() - 0.5);
+                    roundFights.push(fight);
+                }
+                groupFight.push(roundFights);
+            }
+            groupFights.push(groupFight);
+        });
+        return groupFights;
+    }
+
+    let groupsFights = $derived(generateGroups(groups));
+
+    let generateDisabled = $derived(groupsFights.length > 0 && groupsFights.every((value) => value.every((value1) => value1.length > 0)) && gamemode !== "" && map !== "");
+
+    async function generateFights() {
+        groupsFights.forEach((group, i) => {
+            $eventRepo
+                .createGroup(data.event.id, {
+                    name: "Gruppe " + (i + 1),
+                    type: "GROUP_STAGE",
+                })
+                .then((v) => {
+                    group.forEach((round, j) => {
+                        round.forEach(async (fight, k) => {
+                            const blueTeam = teams.get(fight[0])!;
+                            const redTeam = teams.get(fight[1])!;
+
+                            let karte = map;
+
+                            if (karte === "%random%") {
+                                karte = selectableMaps[Math.floor(Math.random() * selectableMaps.length)].value;
+                            }
+
+                            await $fightRepo.createFight(data.event.id, {
+                                blueTeam: blueTeam.id,
+                                redTeam: redTeam.id,
+                                group: v.id,
+                                map: karte,
+                                spectatePort: null,
+                                spielmodus: gamemode,
+                                start: dayjs(
+                                    startTime
+                                        .copy()
+                                        .add({
+                                            minutes: roundTime * j,
+                                        })
+                                        .add({
+                                            seconds: startDelay * (k + i * round.length),
+                                        })
+                                        .toDate()
+                                ),
+                            });
+                        });
+                    });
+                });
+        });
+
+        await replace("#/event/" + data.event.id);
+    }
+</script>
+
+<div class="flex justify-between">
+    <Card
+        id="reseter"
+        class="flex w-fit p-2 border border-gray-700 rounded h-20 pt-6 relative {resetDragOver ? 'border-white' : ''}"
+        ondragover={resetDragOverEvent}
+        ondragleave={() => (resetDragOver = false)}
+        ondrop={dropReset}
+        role="group"
+    >
+        {#each teamsNotInGroup as team (team.id)}
+            <TeamChip {team} ondragstart={(ev) => teamDragStart(ev, team)} />
+        {/each}
+    </Card>
+
+    <div class="flex items-center mr-4">
+        <Button onclick={() => (showAutoGrouping = true)}>Automatische Gruppen</Button>
+    </div>
+</div>
+
+<div class="flex mt-4 gap-4 border-b border-gray-700 pb-4">
+    {#each groups as group, i (i)}
+        <DragAcceptor ondrop={(ev) => dropGroup(ev, i)}>
+            <h1>Gruppe {i + 1} ({group.length})</h1>
+            {#each group as teamId (teamId)}
+                <TeamChip team={teams.get(teamId)!} ondragstart={(ev) => teamDragStart(ev, teams.get(teamId)!)} />
+            {/each}
+        </DragAcceptor>
+    {/each}
+    <DragAcceptor ondrop={dragToNewGroup}>
+        <h1>Neue Gruppe</h1>
+    </DragAcceptor>
+</div>
+
+<div class="border-b mt-4 border-gray-700 pb-4">
+    <Label for="event-end">Startzeit</Label>
+    <DateTimePicker bind:value={startTime} />
+    <div class="mt-2">
+        <Label for="event-roundtime">Rundenzeit: {roundTime}m</Label>
+        <Slider id="event-roundtime" type="single" bind:value={roundTime} step={1} min={5} max={60} />
+    </div>
+    <div class="mt-2">
+        <Label for="event-member">Startverzögerung: {startDelay}</Label>
+        <Slider id="event-member" type="single" bind:value={startDelay} step={1} min={0} max={30} />
+    </div>
+    <div class="mt-2">
+        <Label for="fight-gamemode">Spielmodus</Label>
+        <Select type="single" bind:value={gamemode}>
+            <SelectTrigger id="fight-gamemode">{gamemode}</SelectTrigger>
+            <SelectContent>
+                {#each selectableGamemodes as gamemodeOption}
+                    <SelectItem value={gamemodeOption.value}>{gamemodeOption.name}</SelectItem>
+                {/each}
+            </SelectContent>
+        </Select>
+    </div>
+    <div class="mt-2">
+        <Label for="fight-maps">Map</Label>
+        <Select type="single" bind:value={map}>
+            <SelectTrigger id="fight-maps">{map}</SelectTrigger>
+            <SelectContent>
+                <SelectItem value="%random%">Zufällige Map</SelectItem>
+                {#each selectableMaps as mapOption}
+                    <SelectItem value={mapOption.value}>{mapOption.name}</SelectItem>
+                {/each}
+            </SelectContent>
+        </Select>
+    </div>
+</div>
+
+<div class="text-center mx-2">
+    {#each groupsFights as fightsGroup, i}
+        <div>
+            <h1 class="text-4xl">Gruppe: {i + 1}</h1>
+            {#each fightsGroup as fightsRound, j}
+                <div class="border-b border-gray-700">
+                    <h1 class="text-2xl">Runde: {j + 1}</h1>
+                    {#each fightsRound as fightTeams, k}
+                        <div class="text-left p-4">
+                            <span class="p-2 border border-gray-700 rounded"
+                                >{new Intl.DateTimeFormat("de-DE", {
+                                    day: "2-digit",
+                                    month: "2-digit",
+                                    year: "2-digit",
+
+                                    hour: "2-digit",
+                                    minute: "2-digit",
+                                    second: "2-digit",
+                                }).format(
+                                    startTime
+                                        .copy()
+                                        .add({
+                                            minutes: roundTime * j,
+                                            seconds: startDelay * (k + i * fightsRound.length),
+                                        })
+                                        .toDate()
+                                )}</span
+                            >
+                            {teams.get(fightTeams[0])!.name} vs. {teams.get(fightTeams[1])!.name}
+                        </div>
+                    {/each}
+                </div>
+            {/each}
+        </div>
+    {/each}
+</div>
+
+<Button class="!p-4 fixed bottom-4 right-4" disabled={!generateDisabled} onclick={generateFights}>
+    <Plus />
+</Button>
+
+<style lang="scss">
+    :global(#reseter::before) {
+        content: "Reset";
+        position: absolute;
+        top: 0;
+        color: white;
+    }
+
+    :global(#reseter) {
+        min-width: 14rem;
+    }
+</style>

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

@@ -0,0 +1,191 @@
+<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 { auditLog } from "@components/repo/auditlog";
+    import { now, ZonedDateTime } from "@internationalized/date";
+    import { AuditLogEntrySchema, type AuditLogEntry } from "@components/types/auditlog";
+    import { Button } from "@components/ui/button";
+    import { Select, SelectContent, SelectItem, SelectTrigger } from "@components/ui/select";
+    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 { 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) => {
+        clearTimeout(debounceTimer);
+        debounceTimer = setTimeout(() => {
+            func(value);
+        }, 300);
+    };
+
+    let actionText = $state("");
+    let serverText = $state("");
+    let fullText = $state("");
+    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<number[]>([]);
+    let velocity = $state(false);
+    let sorting = $state("DESC");
+
+    let pagination = $state<PaginationState>({
+        pageIndex: 0,
+        pageSize: 25,
+    });
+
+    let data = $state<AuditLogEntry[]>([]);
+    let rows = $state(0);
+
+    $effect(() => {
+        $auditLog
+            .get(
+                actionText || undefined,
+                serverText || undefined,
+                fullText || undefined,
+                actors.length > 0 ? actors : undefined,
+                actionTypes.length > 0 ? actionTypes : undefined,
+                timeGreater ? timeGreater.toDate().getTime() : undefined,
+                timeLess ? timeLess.toDate().getTime() : undefined,
+                serverOwner.length > 0 ? serverOwner : undefined,
+                velocity,
+                pagination.pageIndex,
+                pagination.pageSize,
+                sorting || undefined
+            )
+            .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;
+        },
+    });
+
+    let playerSearch = $state("");
+    let ownerSearch = $state("");
+</script>
+
+<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="Suchen..."
+            value={fullText}
+            onchange={(e) =>
+                debounce(e.currentTarget.value, (v) => {
+                    fullText = v;
+                })}
+            oninput={(e) =>
+                debounce(e.currentTarget.value, (v) => {
+                    fullText = v;
+                })}
+        />
+        <Select type="multiple" value={actionTypes} onValueChange={(e) => (actionTypes = e)}>
+            <SelectTrigger class="w-48 mr-2" placeholder="Aktionstypen auswählen...">Aktionstypen ({actionTypes.length})</SelectTrigger>
+            <SelectContent>
+                {#each ["JOIN", "LEAVE", "COMMAND", "SENSITIVE_COMMAND", "CHAT", "GUI_OPEN", "GUI_CLOSE", "GUI_CLICK"] as option}
+                    <SelectItem value={option}>{option}</SelectItem>
+                {/each}
+            </SelectContent>
+        </Select>
+
+        <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>
+        <div class="mr-2">
+            <DateTimePicker bind:value={timeLess} />
+        </div>
+        <Select type="single" value={sorting} onValueChange={(e) => (sorting = e)}>
+            <SelectTrigger class="w-48 mr-2">{sorting === "ASC" ? "Aufsteigend" : "Absteigend"}</SelectTrigger>
+            <SelectContent>
+                <SelectItem value="ASC">Aufsteigend</SelectItem>
+                <SelectItem value="DESC">Absteigend</SelectItem>
+            </SelectContent>
+        </Select>
+    </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">Keine Einträge gefunden.</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/logs/columns.ts

@@ -0,0 +1,35 @@
+import type { AuditLogEntry } from "@components/types/auditlog";
+import type { ColumnDef } from "@tanstack/table-core";
+
+export const columns: ColumnDef<AuditLogEntry>[] = [
+    {
+        accessorKey: "id",
+        header: "ID",
+    },
+    {
+        accessorKey: "time",
+        header: "Time",
+        cell: (info) => new Date(info.getValue<number>()).toLocaleString(),
+    },
+    {
+        accessorKey: "server",
+        header: "Server",
+    },
+    {
+        accessorKey: "serverOwner",
+        header: "Server Owner",
+        cell: (info) => info.getValue<string | null>() || "N/A",
+    },
+    {
+        accessorKey: "actor",
+        header: "Spieler",
+    },
+    {
+        accessorKey: "actionType",
+        header: "Action Type",
+    },
+    {
+        accessorKey: "actionText",
+        header: "Action Text",
+    },
+];

src/components/moderator/pages/pages/EditorWithTabs.svelte

@@ -0,0 +1,116 @@
+<script lang="ts">
+    import { Separator } from "@components/ui/separator";
+    import { manager, OpenEditPage } from "./page.svelte";
+    import { File, X } from "lucide-svelte";
+    import { onMount } from "svelte";
+    import { EditorView } from "@codemirror/view";
+    import { basicSetup } from "codemirror";
+    import EasyMDE from "easymde";
+    import "easymde/dist/easymde.min.css";
+    import { json } from "@codemirror/lang-json";
+    import { materialDark } from "@ddietr/codemirror-themes/theme/material-dark";
+    import FrontmatterEditor from "./FrontmatterEditor.svelte";
+    import { slide } from "svelte/transition";
+    import { Button } from "@components/ui/button";
+
+    let codemirrorParent: HTMLElement | undefined = $state();
+    let easyMdeParent: HTMLElement | undefined = $state();
+    let easyMdeWrapper: HTMLElement | undefined = $state();
+
+    let easyMde: EasyMDE | null = $state(null);
+    let view: EditorView | null = $state(null);
+
+    $effect(() => {
+        switch (manager.selectedPage?.fileType) {
+            case "md":
+            case "mdx":
+                easyMdeWrapper?.classList.remove("hidden");
+                codemirrorParent?.classList.add("hidden");
+                break;
+            case "json":
+                easyMdeWrapper?.classList.add("hidden");
+                codemirrorParent?.classList.remove("hidden");
+                break;
+            default:
+                easyMdeWrapper?.classList.add("hidden");
+                codemirrorParent?.classList.add("hidden");
+        }
+    });
+
+    function updatePage(page: OpenEditPage | undefined) {
+        if (page) {
+            easyMde?.value(page.content || "");
+            view?.dispatch({
+                changes: { from: 0, to: view.state.doc.length, insert: page.content || "" },
+            });
+        }
+    }
+
+    $effect(() => updatePage(manager.selectedPage));
+
+    onMount(() => {
+        view = new EditorView({
+            doc: manager.selectedPage?.content || "",
+            parent: codemirrorParent,
+            extensions: [basicSetup, json(), materialDark],
+        });
+        easyMde = new EasyMDE({
+            element: easyMdeParent,
+            spellChecker: false,
+            initialValue: manager.selectedPage?.content || "",
+        });
+
+        easyMde.codemirror.on("change", () => {
+            if (manager.selectedPage?.content !== easyMde?.value()) {
+                manager.selectedPage!.dirty = true;
+            }
+
+            manager.selectedPage!.content = easyMde?.value() || "";
+        });
+    });
+</script>
+
+<div class="flex flex-col h-full w-full">
+    <div class="h-8 flex">
+        {#each manager.pages as tab, index}
+            {@const isActive = manager.openPageIndex === index}
+            <button
+                class="flex pl-4 border-r group items-center hover:bg-neutral-800 transition-colors cursor-pointer h-full {isActive
+                    ? 'text-primary bg-neutral-900'
+                    : 'text-muted-foreground'} {tab.dirty ? 'italic' : ''}"
+                onclick={() => (manager.openPageIndex = index)}
+            >
+                <File class="h-4 w-4 mr-2" />
+                {tab.pageTitle}
+                <span
+                    class="mx-4 hover:bg-neutral-700 transition-all rounded {isActive ? '' : 'opacity-0'} group-hover:opacity-100 cursor-pointer"
+                    onclick={(e) => {
+                        e.stopPropagation();
+                        manager.closePage(index);
+                    }}><X /></span
+                >
+            </button>
+        {/each}
+    </div>
+    <Separator />
+    <div class="flex-1 flex flex-col">
+        {#if manager.selectedPage}
+            <div class="flex items-center justify-end p-2">
+                <Button disabled={!(manager.selectedPage?.dirty ?? false)} onclick={() => manager.selectedPage?.save()}>Speichern</Button>
+            </div>
+            <div class="flex gap-2 items-center">
+                {#if manager.selectedPage.path.startsWith("src/content/announcements/")}
+                    <div class="border-b flex-1" transition:slide>
+                        <FrontmatterEditor />
+                    </div>
+                {/if}
+            </div>
+        {/if}
+        <div class="flex-1">
+            <div bind:this={codemirrorParent} class="hidden h-full"></div>
+            <div bind:this={easyMdeWrapper} class="hidden h-full">
+                <textarea bind:this={easyMdeParent}></textarea>
+            </div>
+        </div>
+    </div>
+</div>

src/components/moderator/pages/pages/FrontmatterEditor.svelte

@@ -0,0 +1,122 @@
+<script lang="ts">
+    import { X } from "lucide-svelte";
+    import { manager } from "./page.svelte";
+    import { slide } from "svelte/transition";
+</script>
+
+<details class="group">
+    <summary class="flex items-center justify-between p-3 cursor-pointer hover:bg-neutral-800">
+        <span class="font-medium">Frontmatter</span>
+        <svg class="w-4 h-4 transition-transform group-open:rotate-180" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
+        </svg>
+    </summary>
+    <div class="p-3 border-t bg-neutral-900">
+        {#each Object.entries(manager.selectedPage?.frontmatter || {}) as [key, value]}
+            <div class="flex flex-col gap-2 mb-3 p-2 border rounded bg-neutral-800">
+                <div class="flex items-center gap-2">
+                    <input
+                        type="text"
+                        value={key}
+                        onchange={(e) => {
+                            const newKey = (e.target as HTMLInputElement).value;
+                            if (newKey !== key) {
+                                manager.selectedPage!.frontmatter[newKey] = manager.selectedPage!.frontmatter[key];
+                                delete manager.selectedPage?.frontmatter[key];
+                                manager.selectedPage!.dirty = true;
+                            }
+                        }}
+                        class="px-2 py-1 border rounded text-sm flex-shrink-0 w-32 bg-neutral-900"
+                        placeholder="Key"
+                    />
+                    <span>:</span>
+                    {#if Array.isArray(value)}
+                        <span class="text-xs text-muted-foreground">Array ({value.length} items)</span>
+                    {:else if value instanceof Date || key === "created"}
+                        <input
+                            type="date"
+                            value={value instanceof Date ? value.toISOString().split("T")[0] : typeof value === "string" ? value : ""}
+                            onchange={(e) => {
+                                const dateValue = (e.target as HTMLInputElement).value;
+                                manager.selectedPage!.frontmatter[key] = dateValue ? new Date(dateValue) : "";
+                                manager.selectedPage!.dirty = true;
+                            }}
+                            class="px-2 py-1 border rounded text-sm flex-1 bg-neutral-900"
+                        />
+                    {:else}
+                        <input
+                            type="text"
+                            bind:value={manager.selectedPage!.frontmatter[key]}
+                            onchange={() => (manager.selectedPage!.dirty = true)}
+                            class="px-2 py-1 border rounded text-sm flex-1 bg-neutral-900"
+                            placeholder="Value"
+                        />
+                    {/if}
+                    <button
+                        onclick={() => {
+                            delete manager.selectedPage!.frontmatter[key];
+                            manager.selectedPage!.dirty = true;
+                        }}
+                        class="text-red-500 hover:text-red-700 p-1"
+                    >
+                        <X class="w-4 h-4" />
+                    </button>
+                </div>
+                {#if Array.isArray(value)}
+                    <div class="ml-4 space-y-1">
+                        {#each value as item, index}
+                            <div class="flex items-center gap-2">
+                                <span class="text-xs text-muted-foreground w-6">[{index}]</span>
+                                <input
+                                    type="text"
+                                    bind:value={manager.selectedPage!.frontmatter[key][index]}
+                                    onchange={() => (manager.selectedPage!.dirty = true)}
+                                    class="px-2 py-1 border rounded text-sm flex-1 bg-neutral-900"
+                                    placeholder="Array item"
+                                />
+                                <button
+                                    onclick={() => {
+                                        manager.selectedPage!.frontmatter[key].splice(index, 1);
+                                        manager.selectedPage!.dirty = true;
+                                    }}
+                                    class="text-red-500 hover:text-red-700 p-1"
+                                >
+                                    <X class="w-3 h-3" />
+                                </button>
+                            </div>
+                        {/each}
+                        <button
+                            onclick={() => {
+                                manager.selectedPage!.frontmatter[key].push("");
+                                manager.selectedPage!.dirty = true;
+                            }}
+                            class="text-xs text-blue-500 hover:text-blue-700 ml-8"
+                        >
+                            + Add item
+                        </button>
+                    </div>
+                {/if}
+            </div>
+        {/each}
+        <div class="flex gap-2">
+            <button
+                onclick={() => {
+                    manager.selectedPage!.frontmatter[`new_key_${Object.keys(manager.selectedPage!.frontmatter).length}`] = "";
+                    manager.selectedPage!.dirty = true;
+                }}
+                class="text-sm text-blue-500 hover:text-blue-700"
+            >
+                + Add field
+            </button>
+            <button
+                onclick={() => {
+                    manager.selectedPage!.frontmatter[`new_array_${Object.keys(manager.selectedPage!.frontmatter).length}`] = [];
+                    manager.selectedPage!.dirty = true;
+                }}
+                class="text-sm text-green-500 hover:text-green-700"
+            >
+                + Add array
+            </button>
+        </div>
+    </div>
+</details>

src/components/moderator/pages/pages/Pages.svelte

@@ -0,0 +1,155 @@
+<script lang="ts">
+    import { ResizablePane, ResizablePaneGroup } from "@components/ui/resizable";
+    import { Separator } from "@components/ui/separator";
+    import { manager } from "./page.svelte";
+    import ResizableHandle from "@components/ui/resizable/resizable-handle.svelte";
+    import PagesList from "./PagesList.svelte";
+    import EditorWithTabs from "./EditorWithTabs.svelte";
+    import { Popover, PopoverContent, PopoverTrigger } from "@components/ui/popover";
+    import { Button } from "@components/ui/button";
+    import { Check, ChevronsUpDown, RefreshCw, FileImage, Plus } from "lucide-svelte";
+    import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "@components/ui/command";
+    import { cn } from "@components/utils";
+    import { pageRepo } from "@components/repo/page";
+
+    let branchSelectOpen = $state(false);
+    let imageSelectOpen = $state(false);
+
+    let fileInput: HTMLInputElement | undefined = $state();
+</script>
+
+<div class="flex-grow flex flex-col">
+    <ResizablePaneGroup direction="horizontal" class="flex-grow">
+        <ResizablePane defaultSize={20}>
+            <div class="overflow-y-scroll">
+                <div class="flex p-2 gap-2">
+                    <Popover bind:open={branchSelectOpen}>
+                        <PopoverTrigger>
+                            {#snippet child({ props })}
+                                <Button variant="outline" class="justify-between flex-1" {...props} role="combobox">
+                                    {manager.branch}
+                                    <ChevronsUpDown class="ml-2 size-4 shrink-0 opacity-50" />
+                                </Button>
+                            {/snippet}
+                        </PopoverTrigger>
+                        <PopoverContent class="p-0">
+                            <Command>
+                                <CommandInput placeholder="Search Branches..." />
+                                <CommandList>
+                                    <CommandEmpty>No Branches Found.</CommandEmpty>
+                                    <CommandGroup>
+                                        {#each manager.branches as branch}
+                                            <CommandItem
+                                                value={branch}
+                                                onSelect={() => {
+                                                    if (manager.anyUnsavedChanges()) {
+                                                        if (!confirm("You have unsaved changes. Are you sure you want to switch branches?")) {
+                                                            return;
+                                                        }
+                                                    }
+
+                                                    manager.branch = branch;
+                                                    manager.pages = [];
+                                                    branchSelectOpen = false;
+                                                }}
+                                            >
+                                                <Check class={cn("mr-2 size-4", branch !== manager.branch && "text-transparent")} />
+                                                {branch}
+                                            </CommandItem>
+                                        {/each}
+                                    </CommandGroup>
+                                </CommandList>
+                            </Command>
+                        </PopoverContent>
+                    </Popover>
+                    <Button size="icon" variant="outline" onclick={() => manager.reloadImages()}>
+                        <RefreshCw />
+                    </Button>
+                    <Popover bind:open={imageSelectOpen}>
+                        <PopoverTrigger>
+                            {#snippet child({ props })}
+                                <Button size="icon" variant="outline" {...props}>
+                                    <FileImage />
+                                </Button>
+                            {/snippet}
+                        </PopoverTrigger>
+                        <PopoverContent side="right" class="w-[1000px] h-screen overflow-y-auto">
+                            {#await manager.imagesLoad}
+                                <p>Loading images...</p>
+                            {:then images}
+                                <div class="flex flex-col gap-2">
+                                    <div class="p-2">
+                                        <input
+                                            type="file"
+                                            accept="image/*"
+                                            class="hidden"
+                                            bind:this={fileInput}
+                                            onchange={async (e) => {
+                                                const file = e.target?.files?.[0];
+                                                if (!file) return;
+
+                                                const reader = new FileReader();
+                                                reader.onload = async (event) => {
+                                                    const base64 = event.target?.result?.toString().split(",")[1];
+                                                    if (base64) {
+                                                        await $pageRepo.createImage(file.name, base64, manager.branch);
+                                                        manager.reloadImages();
+                                                    }
+                                                };
+                                                reader.readAsDataURL(file);
+                                            }}
+                                        />
+                                        <Button onclick={() => fileInput?.click()} class="w-full">
+                                            <Plus class="mr-2 size-4" />
+                                            Upload Image
+                                        </Button>
+                                    </div>
+                                    <div class="grid grid-cols-4 gap-2 p-2">
+                                        {#each images as image}
+                                            <button
+                                                onclick={() => {
+                                                    const backs = (manager.selectedPage?.path?.match(/\//g)?.length || 1) - 1;
+
+                                                    const path = [...Array(backs).fill(".."), image.path.replace("src/", "")].join("/");
+
+                                                    navigator.clipboard.writeText(path);
+                                                    imageSelectOpen = false;
+                                                }}
+                                            >
+                                                <img src={image.downloadUrl} alt={image.name} class="w-full h-auto object-cover" />
+                                            </button>
+                                        {/each}
+                                    </div>
+                                </div>
+                            {/await}
+                        </PopoverContent>
+                    </Popover>
+                    <Button
+                        size="icon"
+                        onclick={async () => {
+                            const branchName = prompt("Enter branch name:");
+                            if (branchName) {
+                                await $pageRepo.createBranch(branchName);
+                                manager.reloadBranches();
+                            }
+                        }}
+                    >
+                        <Plus />
+                    </Button>
+                </div>
+                <Separator />
+                {#await manager.pagesLoad}
+                    <p>Loading pages...</p>
+                {:then pages}
+                    {#each Object.values(pages.dirs) as page}
+                        <PagesList {page} path={page.name + "/"} />
+                    {/each}
+                {/await}
+            </div>
+        </ResizablePane>
+        <ResizableHandle />
+        <ResizablePane defaultSize={80}>
+            <EditorWithTabs />
+        </ResizablePane>
+    </ResizablePaneGroup>
+</div>

src/components/moderator/pages/pages/PagesList.svelte

@@ -0,0 +1,116 @@
+<script lang="ts">
+    import { ChevronDown, ChevronRight, Folder, FolderPlus, FileJson, FileText, File, FilePlus } from "lucide-svelte";
+    import type { DirTree } from "./page.svelte";
+    import PagesList from "./PagesList.svelte";
+    import { slide } from "svelte/transition";
+    import Button from "@components/ui/button/button.svelte";
+    import { manager } from "./page.svelte";
+
+    const { page, depth = 0, path }: { page: DirTree; depth?: number; path: string } = $props();
+
+    let open = $state(false);
+    let newPage = $state(false);
+    let newPageName = $state("");
+
+    let newPageInput: HTMLInputElement | undefined = $state();
+
+    function startNewPageCreate(e: Event) {
+        e.stopPropagation();
+        newPage = true;
+        newPageName = "";
+        open = true;
+
+        setTimeout(() => {
+            newPageInput?.focus();
+        }, 1);
+    }
+
+    function createNewPage(e: Event) {
+        e.preventDefault();
+        e.stopPropagation();
+
+        if (newPageName.trim() === "") {
+            alert("Page name cannot be empty");
+            return;
+        }
+
+        if (!newPageName.match(/^[a-zA-Z0-9_\-\.]+$/)) {
+            alert("Invalid page name. Only alphanumeric characters, underscores, dashes, and dots are allowed.");
+            return;
+        }
+
+        if (!newPageName.endsWith(".json") && !newPageName.endsWith(".md") && !newPageName.endsWith(".mdx")) {
+            newPageName += ".md";
+        }
+
+        manager
+            .createPage(path + newPageName, newPageName)
+            .then(() => {
+                newPage = false;
+                newPageName = "";
+            })
+            .catch((error) => {
+                alert("Error creating page: " + error.message);
+            });
+    }
+</script>
+
+<button class={`group flex flex-row justify-between h-full w-full hover:bg-neutral-700 pl-${4 * depth}`} onclick={() => (open = !open)}>
+    <div class="flex flex-row items-center">
+        {#if open}
+            <ChevronDown class="w-6 h-6" />
+        {:else}
+            <ChevronRight class="w-6 h-6" />
+        {/if}
+        <Folder class="mr-2 w-4 h-4" />
+        {page.name}/
+    </div>
+    <div class="flex-row items-center hidden group-hover:flex">
+        <Button variant="ghost" size="sm" class="p-0 m-0 h-6 w-6" onclick={startNewPageCreate}>
+            <FilePlus class="w-3 h-3" />
+        </Button>
+    </div>
+</button>
+
+{#if open}
+    <div transition:slide={{ duration: 200, axis: "y" }}>
+        <div>
+            {#if newPage}
+                <button class={`flex flex-row items-center h-full py-1 w-full hover:bg-neutral-700 pl-${4 * (depth + 1)}`}>
+                    {#if newPageName.endsWith(".json")}
+                        <FileJson class="mr-2 w-4 h-4" />
+                    {:else if newPageName.endsWith(".md") || newPageName.endsWith(".mdx")}
+                        <FileText class="mr-2 w-4 h-4" />
+                    {:else}
+                        <File class="mr-2 w-4 h-4" />
+                    {/if}
+                    <form onsubmit={createNewPage}>
+                        <input
+                            type="text"
+                            bind:value={newPageName}
+                            bind:this={newPageInput}
+                            onblur={() => (newPage = false)}
+                            placeholder="New page name"
+                            class="flex-grow bg-transparent border-none outline-none text-white"
+                        />
+                    </form>
+                </button>
+            {/if}
+            {#each Object.values(page.dirs) as subPage (subPage.name)}
+                <PagesList page={subPage} depth={depth + 1} path={path + subPage.name + "/"} />
+            {/each}
+            {#each Object.values(page.files) as file (file.id)}
+                <button class={`flex flex-row items-center h-full py-1 w-full hover:bg-neutral-700 pl-${4 * (depth + 1)}`} onclick={() => manager.openPage(file.id)}>
+                    {#if file.name.endsWith(".json")}
+                        <FileJson class="mr-2 w-4 h-4" />
+                    {:else if file.name.endsWith(".md") || file.name.endsWith(".mdx")}
+                        <FileText class="mr-2 w-4 h-4" />
+                    {:else}
+                        <File class="mr-2 w-4 h-4" />
+                    {/if}
+                    {file.name}
+                </button>
+            {/each}
+        </div>
+    </div>
+{/if}

src/components/moderator/pages/pages/page.svelte.ts

@@ -0,0 +1,226 @@
+import { base64ToBytes } from "@components/admin/util";
+import { pageRepo } from "@components/repo/page";
+import type { ListPage, PageList } from "@components/types/page";
+import { get } from "svelte/store";
+import yaml from "js-yaml";
+
+export class OpenEditPage {
+    public content: string = "";
+    public frontmatter: { [key: string]: string | string[] | Date } = $state({});
+    public dirty: boolean = $state(false);
+
+    public readonly fileType: string;
+
+    public constructor(
+        private manager: PageManager,
+        public readonly pageId: number,
+        public readonly pageTitle: string,
+        public readonly sha: string,
+        public readonly originalContent: string,
+        public readonly path: string
+    ) {
+        this.fileType = this.path.split(".").pop() || "md";
+
+        this.content = this.removeFrontmatter(originalContent);
+        this.frontmatter = this.parseFrontmatter(originalContent);
+    }
+
+    public async save(): Promise<void> {
+        if (!this.dirty) {
+            return;
+        }
+
+        let contentToSave = "";
+        if (this.frontmatter) {
+            contentToSave += "---\n";
+            contentToSave += yaml.dump(this.frontmatter);
+            contentToSave += "---\n\n";
+        }
+        contentToSave += this.content;
+
+        await get(pageRepo).updatePage(this.pageId, contentToSave, this.sha, prompt("Was hast du geändert?", `Updated ${this.pageTitle}`) ?? `Updated ${this.pageTitle}`, this.manager.branch);
+        this.dirty = false;
+        this.manager.reloadImages();
+    }
+
+    public focus(): boolean {
+        let index = this.manager.pages.indexOf(this);
+
+        if (index === this.manager.openPageIndex) {
+            return true;
+        }
+
+        this.manager.openPageIndex = this.manager.pages.indexOf(this);
+        return false;
+    }
+
+    private parseFrontmatter(content: string): { [key: string]: string | string[] | Date } {
+        const lines = content.split("\n");
+        let inFrontmatter = false;
+        const frontmatterLines: string[] = [];
+
+        for (const line of lines) {
+            if (line.trim() === "---") {
+                if (inFrontmatter) {
+                    break; // End of frontmatter
+                }
+                inFrontmatter = true;
+                continue;
+            }
+            if (inFrontmatter) {
+                frontmatterLines.push(line);
+            }
+        }
+
+        if (frontmatterLines.length === 0) {
+            return {};
+        }
+
+        try {
+            // You'll need to install js-yaml: npm install js-yaml @types/js-yaml
+            return (yaml.load(frontmatterLines.join("\n")) || {}) as { [key: string]: string | string[] | Date };
+        } catch (error) {
+            console.error("Failed to parse YAML frontmatter:", error);
+            return {};
+        }
+    }
+
+    private removeFrontmatter(content: string): string {
+        const lines = content.split("\n");
+        let inFrontmatter = false;
+        const result: string[] = [];
+
+        for (const line of lines) {
+            if (line.trim() === "---") {
+                inFrontmatter = !inFrontmatter;
+                continue;
+            }
+            if (!inFrontmatter) {
+                result.push(line);
+            }
+        }
+
+        return result.join("\n").trim();
+    }
+}
+
+export interface DirTree {
+    name: string;
+    dirs: { [key: string]: DirTree };
+    files: { [key: string]: ListPage };
+}
+
+export class PageManager {
+    public reloadImages() {
+        this.updater = this.updater + 1;
+    }
+    public branch: string = $state("master");
+    public pages: OpenEditPage[] = $state([]);
+    public branches: string[] = $state([]);
+
+    constructor() {
+        this.reloadBranches();
+    }
+
+    public reloadBranches() {
+        get(pageRepo)
+            .getBranches()
+            .then((branches) => {
+                this.branches = branches;
+            });
+    }
+
+    private updater = $state(0);
+
+    public openPageIndex: number = $state(-1);
+    public pagesLoad = $derived(get(pageRepo).listPages(this.branch).then(this.convertToTree).then(this._t(this.updater)));
+    public imagesLoad = $derived(get(pageRepo).listImages(this.branch).then(this._t(this.updater)));
+
+    private _t<T>(n: number): (v: T) => T {
+        return (v: T) => v;
+    }
+
+    public selectedPage = $derived(this.openPageIndex >= 0 ? this.pages[this.openPageIndex] : undefined);
+
+    private convertToTree(pages: PageList): DirTree {
+        const tree: DirTree = { dirs: {}, files: {}, name: "/" };
+
+        pages.forEach((page) => {
+            const pathParts = page.path.split("/").filter((part) => part !== "");
+            let current = tree;
+
+            // Navigate/create directory structure
+            for (let i = 0; i < pathParts.length - 1; i++) {
+                const dir = pathParts[i];
+                if (!current.dirs[dir]) {
+                    current.dirs[dir] = { dirs: {}, files: {}, name: dir };
+                }
+                current = current.dirs[dir];
+            }
+
+            // Add file to the final directory
+            const fileName = pathParts[pathParts.length - 1];
+            current.files[fileName] = page;
+        });
+
+        return tree;
+    }
+
+    public async openPage(pageId: number) {
+        const existingPage = this.existingPage(pageId);
+        if (existingPage) {
+            existingPage.focus();
+            return;
+        }
+
+        let r = await get(pageRepo).getPage(pageId, this.branch);
+        if (!r) {
+            return;
+        }
+
+        const newPage = new OpenEditPage(this, pageId, r.name, r.sha, new TextDecoder().decode(base64ToBytes(r.content)), r.path);
+        this.pages.push(newPage);
+        newPage.focus();
+    }
+
+    public existingPage(pageId: number): OpenEditPage | undefined {
+        return this.pages.find((page) => page.pageId === pageId);
+    }
+
+    public closePage(index: number) {
+        if (index < 0 || index >= this.pages.length) {
+            return;
+        }
+
+        const page = this.pages[index];
+        if (page.dirty) {
+            if (!confirm(`The page "${page.pageTitle}" has unsaved changes. Are you sure you want to close it?`)) {
+                return;
+            }
+        }
+
+        this.pages.splice(index, 1);
+        if (this.openPageIndex >= index) {
+            this.openPageIndex = Math.max(0, this.openPageIndex - 1);
+        }
+
+        if (this.openPageIndex < 0 && this.pages.length > 0) {
+            this.openPageIndex = 0;
+        }
+
+        if (this.pages.length === 0) {
+            this.openPageIndex = -1;
+        }
+    }
+
+    public async createPage(path: string, newPageName: string): Promise<void> {
+        await get(pageRepo).createFile(path, this.branch, newPageName, newPageName);
+        this.branch = this.branch;
+    }
+
+    public anyUnsavedChanges() {
+        return this.pages.some((page) => page.dirty);
+    }
+}
+
+export const manager = $state(new PageManager());

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

@@ -18,24 +18,27 @@
   -->
 
 <script lang="ts">
-    import {permissions, players} 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";
+    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";
 
-    const {
-        perms, uuid
-    }: { perms: string[], uuid: string } = $props();
+    const { perms, uuid }: { perms: string[]; uuid: string } = $props();
 
     let value = $state(perms);
     let prevValue = $state(perms);
 
+    $effect(() => {
+        value = perms;
+        prevValue = perms;
+    });
+
     function onChange(change: string[]) {
-        $permissions.perms.forEach(perm => {
+        $permissions.perms.forEach((perm) => {
             if (prevValue.includes(perm) && !change.includes(perm)) {
-                $permsRepo.removePerm(uuid, perm)
+                $permsRepo.removePerm(uuid, perm);
             } else if (!prevValue.includes(perm) && change.includes(perm)) {
-                $permsRepo.addPerm(uuid, perm)
+                $permsRepo.addPerm(uuid, perm);
             }
         });
 
@@ -53,4 +56,4 @@
             <SelectItem value={permission}>{permission}</SelectItem>
         {/each}
     </SelectContent>
-</Select>
+</Select>

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, false).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/PrefixDropdown.svelte

@@ -18,16 +18,18 @@
   -->
 
 <script lang="ts">
-    import {Select, SelectContent, SelectItem, SelectTrigger} from "@components/ui/select";
-    import {permissions} from "@stores/stores.ts";
-    import {permsRepo} from "@repo/perms.ts";
+    import { Select, SelectContent, SelectItem, SelectTrigger } from "@components/ui/select";
+    import { permissions } from "@stores/stores.ts";
+    import { permsRepo } from "@repo/perms.ts";
 
-    const {
-        prefix, uuid
-    }: { prefix: string, uuid: string } = $props();
+    const { prefix, uuid }: { prefix: string; uuid: string } = $props();
 
     let value = $state(prefix);
 
+    $effect(() => {
+        value = prefix;
+    });
+
     function onChange(change: string) {
         $permsRepo.setPrefix(uuid, change);
 
@@ -44,4 +46,4 @@
             <SelectItem value={prefix[0]}>{prefix[1].chatPrefix === "" ? "None" : prefix[1].chatPrefix}</SelectItem>
         {/each}
     </SelectContent>
-</Select>
+</Select>

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>

src/components/moderator/pages/players/columns.ts

@@ -17,8 +17,8 @@
  *   along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
 
-import type {ColumnDef} from "@tanstack/table-core";
-import type {Player} from "@type/data.ts";
+import type { ColumnDef } from "@tanstack/table-core";
+import type { Player } from "@type/data.ts";
 import { renderComponent } from "@components/ui/data-table";
 import PermissionsDropdown from "@components/moderator/pages/players/PermissionsDropdown.svelte";
 import PrefixDropdown from "@components/moderator/pages/players/PrefixDropdown.svelte";
@@ -36,25 +36,20 @@ export const columns: ColumnDef<Player[]> = [
         accessorKey: "prefix",
         header: "Prefix",
         cell: ({ row }) => {
-            return renderComponent(
-                PrefixDropdown, {
-                    prefix: row.getValue("prefix"),
-                    uuid: row.getValue("uuid"),
-                },
-            );
+            return renderComponent(PrefixDropdown, {
+                prefix: row.getValue("prefix"),
+                uuid: row.getValue("uuid"),
+            });
         },
     },
     {
         accessorKey: "perms",
         header: "Permissions",
         cell: ({ row }) => {
-            return renderComponent(
-                PermissionsDropdown,
-                {
-                    perms: row.getValue("perms"),
-                    uuid: row.getValue("uuid"),
-                },
-            );
+            return renderComponent(PermissionsDropdown, {
+                perms: row.getValue("perms"),
+                uuid: row.getValue("uuid"),
+            });
         },
     },
-];
+];

src/components/repo/auditlog.ts

@@ -0,0 +1,40 @@
+import { derived } from "svelte/store";
+import { fetchWithToken, tokenStore } from "./repo";
+import { PagedAutidLogSchema } from "@components/types/auditlog";
+
+export class AuditLogRepo {
+    async get(
+        actionText: string | undefined,
+        serverText: string | undefined,
+        fullText: string | undefined,
+        actor: number[] | undefined,
+        actionType: string[] | undefined,
+        timeFrom: number | undefined,
+        timeTo: number | undefined,
+        serverOwner: number[] | undefined,
+        velocity: boolean | undefined,
+        page: number,
+        pageSize: number,
+        sorting: string | undefined
+    ) {
+        const params = new URLSearchParams();
+        if (actionText) params.append("actionText", actionText);
+        if (serverText) params.append("serverText", serverText);
+        if (fullText) params.append("fullText", fullText);
+        if (actor) actor.forEach((a) => params.append("actor", a.toString()));
+        if (actionType) actionType.forEach((a) => params.append("actionType", a));
+        if (timeFrom) params.append("timeGreater", timeFrom.toString());
+        if (timeTo) params.append("timeLess", timeTo.toString());
+        if (serverOwner) serverOwner.forEach((s) => params.append("serverOwner", s.toString()));
+        if (velocity !== undefined) params.append("velocity", velocity.toString());
+        params.append("page", page.toString());
+        params.append("limit", pageSize.toString());
+        if (sorting) params.append("sorting", sorting);
+
+        return await fetchWithToken("", `/auditlog?${params.toString()}`)
+            .then((value) => value.json())
+            .then((data) => PagedAutidLogSchema.parse(data));
+    }
+}
+
+export const auditLog = derived(tokenStore, ($token) => new AuditLogRepo());

src/components/repo/authv2.ts

@@ -1,7 +1,7 @@
 /*
  *   This file is a part of the SteamWar software.
  *
- *   Copyright (C) 2025 SteamWar.de-Serverteam
+ *   Copyright (C) 2026 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
@@ -17,49 +17,34 @@
  *   along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
 
-import {readable, writable} from "svelte/store";
-import dayjs, {type Dayjs} from "dayjs";
-import {type AuthToken, AuthTokenSchema} from "@type/auth.ts";
+import { readable, writable } from "svelte/store";
+import { PlayerSchema } from "@components/types/data";
 
 export class AuthV2Repo {
-    private accessToken: string | undefined;
-    private accessTokenExpires: Dayjs | undefined;
-    private refreshToken: string | undefined;
-    private refreshTokenExpires: Dayjs | undefined;
-
     constructor() {
-        if (typeof localStorage === "undefined") {
-            return;
-        }
-
-        this.accessToken = localStorage.getItem("sw-access-token") ?? undefined;
-        if (this.accessToken) {
-            this.accessTokenExpires = dayjs(localStorage.getItem("sw-access-token-expires") ?? "");
-        }
-
-        this.refreshToken = localStorage.getItem("sw-refresh-token") ?? undefined;
-        if (this.refreshToken) {
-            loggedIn.set(true);
-            this.refreshTokenExpires = dayjs(localStorage.getItem("sw-refresh-token-expires") ?? "");
-        }
+        this.request("/data/me").then((value) => {
+            if (value.ok) {
+                loggedIn.set(true);
+            } else {
+                loggedIn.set(false);
+            }
+        });
     }
 
     async login(name: string, password: string) {
-        if (this.accessToken !== undefined || this.refreshToken !== undefined) {
-            throw new Error("Already logged in");
-        }
-
         try {
-            const login = await this.request("/auth", {
+            await this.request("/auth", {
                 method: "POST",
                 body: JSON.stringify({
                     name,
                     password,
                     keepLoggedIn: true,
                 }),
-            }).then(value => value.json()).then(value => AuthTokenSchema.parse(value));
+            })
+                .then((value) => value.json())
+                .then((value) => PlayerSchema.parse(value));
 
-            this.setLoginState(login);
+            loggedIn.set(true);
 
             return true;
         } catch (e) {
@@ -67,118 +52,43 @@ export class AuthV2Repo {
         }
     }
 
-    async logout() {
-        if (this.accessToken === undefined) {
-            return;
+    async loginDiscord(token: string) {
+        try {
+            await this.request("/auth/discord", {
+                method: "POST",
+                body: token,
+                headers: {
+                    "Content-Type": "text/plain",
+                },
+            })
+                .then((value) => value.json())
+                .then((value) => PlayerSchema.parse(value));
+            loggedIn.set(true);
+            return true;
+        } catch (e) {
+            return false;
         }
+    }
 
+    async logout() {
         await this.request("/auth", {
             method: "DELETE",
         });
-
-        this.resetAccessToken();
-        this.resetRefreshToken();
-    }
-
-    private setLoginState(tokens: AuthToken) {
-        this.setAccessToken(tokens.accessToken.token, dayjs(tokens.accessToken.expires));
-        this.setRefreshToken(tokens.refreshToken.token, dayjs(tokens.refreshToken.expires));
-        loggedIn.set(true);
-    }
-
-    private setAccessToken(token: string, expires: Dayjs) {
-        this.accessToken = token;
-        this.accessTokenExpires = expires;
-        localStorage.setItem("sw-access-token", token);
-        localStorage.setItem("sw-access-token-expires", expires.toString());
-    }
-
-    private resetAccessToken() {
-        if (this.accessToken === undefined) {
-            return;
-        }
-        this.accessToken = undefined;
-        this.accessTokenExpires = undefined;
-        localStorage.removeItem("sw-access-token");
-        localStorage.removeItem("sw-access-token-expires");
-    }
-
-    private setRefreshToken(token: string, expires: Dayjs) {
-        this.refreshToken = token;
-        this.refreshTokenExpires = expires;
-        localStorage.setItem("sw-refresh-token", token);
-        localStorage.setItem("sw-refresh-token-expires", expires.toString());
-    }
-
-    private resetRefreshToken() {
-        if (this.refreshToken === undefined) {
-            return;
-        }
-        this.refreshToken = undefined;
-        this.refreshTokenExpires = undefined;
-        localStorage.removeItem("sw-refresh-token");
-        localStorage.removeItem("sw-refresh-token-expires");
-
         loggedIn.set(false);
     }
 
-    private async refresh() {
-        if (this.refreshToken === undefined || this.refreshTokenExpires === undefined || this.refreshTokenExpires.isBefore(dayjs().add(10, "seconds"))) {
-            this.resetRefreshToken();
-            this.resetAccessToken();
-
-            return;
-        }
-
-        const response = await this.requestWithToken(this.refreshToken!, "/auth", {
-            method: "PUT",
-        }).then(value => {
-            if (value.status === 401) {
-                this.resetRefreshToken();
-                this.resetAccessToken();
-
-                return undefined;
-            }
-
-            return value.json();
-        }).then(value => AuthTokenSchema.parse(value));
-
-        this.setLoginState(response);
-    }
-
-    async request(url: string, params: RequestInit = {}, retryCount: number = 0) {
-        if (this.accessToken !== undefined && this.accessTokenExpires !== undefined && this.accessTokenExpires.isBefore(dayjs().add(10, "seconds"))) {
-            await this.refresh();
-        }
-
-        return this.requestWithToken(this.accessToken ?? "", url, params, retryCount);
-    }
-
-    private async requestWithToken(token: string, url: string, params: RequestInit = {}, retryCount: number = 0): Promise<Response> {
-        if (retryCount >= 3) {
-            throw new Error("Too many retries");
-        }
-
-        return fetch(`${import.meta.env.PUBLIC_API_SERVER}${url}`, {...params,
+    async request(url: string, params: RequestInit = {}) {
+        return fetch(`${import.meta.env.PUBLIC_API_SERVER}${url}`, {
+            ...params,
+            credentials: "include",
             headers: {
-                ...(token !== "" ? {"Authorization": "Bearer " + (token)} : {}),
-                "Content-Type": "application/json", ...params.headers,
+                "Content-Type": "application/json",
+                ...params.headers,
             },
-        })
-            .then(async value => {
-                if (value.status === 401 && url !== "/auth") {
-                    try {
-                        await this.refresh();
-                        // eslint-disable-next-line @typescript-eslint/no-unused-vars
-                    } catch (_e) { /* empty */ }
-
-                    return this.request(url, params, retryCount + 1);
-                }
-                return value;
-            });
+        });
     }
 }
 
-export const loggedIn = writable(false);
+export const loggedIn = writable<boolean | undefined>(undefined);
 
-export const authV2Repo = readable(new AuthV2Repo());
+export const authV2Repo = readable(new AuthV2Repo());

src/components/repo/data.ts

@@ -17,26 +17,56 @@
  *   along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
 
-import type {Player, Server} from "@type/data.ts";
-import {PlayerSchema, ServerSchema} from "@type/data.ts";
-import {fetchWithToken, tokenStore} from "./repo.ts";
-import {derived, get} from "svelte/store";
+import type { Player, PlayerList, Server } from "@type/data.ts";
+import { PlayerListSchema, PlayerSchema, ServerSchema } from "@type/data.ts";
+import { fetchWithToken, tokenStore } from "./repo.ts";
+import { derived, get } from "svelte/store";
+import { TeamSchema, type Team } from "@components/types/team.ts";
 
 export class DataRepo {
-    constructor(private token: string) {
-    }
+    constructor(private token: string) {}
 
     public async getServer(): Promise<Server> {
-        return await fetchWithToken(this.token, "/data/server").then(value => value.json()).then(ServerSchema.parse);
+        return await fetchWithToken(this.token, "/data/server")
+            .then((value) => value.json())
+            .then(ServerSchema.parse);
     }
 
     public async getMe(): Promise<Player> {
-        return await fetchWithToken(this.token, "/data/me").then(value => value.json()).then(PlayerSchema.parse);
+        return await fetchWithToken(this.token, "/data/me")
+            .then((value) => value.json())
+            .then(PlayerSchema.parse);
     }
 
-    public async getPlayers(): Promise<Player[]> {
-        return await fetchWithToken(get(tokenStore), "/data/admin/users").then(value => value.json()).then(PlayerSchema.array().parse);
+    public async queryPlayers(
+        name: string | undefined,
+        uuid: string | undefined,
+        team: number[] | undefined,
+        limit: number | undefined,
+        page: number | undefined,
+        includePerms: boolean | undefined,
+        includeId: boolean | undefined
+    ): Promise<PlayerList> {
+        let query = new URLSearchParams();
+
+        if (name) query.append("name", name);
+        if (uuid) query.append("uuid", uuid);
+        if (team) team.forEach((t) => query.append("team", t.toString()));
+        if (limit) query.append("limit", limit.toString());
+        if (page) query.append("page", page.toString());
+        if (includePerms !== undefined) query.append("includePerms", includePerms.toString());
+        if (includeId !== undefined) query.append("includeId", includeId.toString());
+
+        return await fetchWithToken(this.token, "/data/admin/users?" + query.toString())
+            .then((value) => value.json())
+            .then(PlayerListSchema.parse);
+    }
+
+    public async getTeams(): Promise<Team[]> {
+        return await fetchWithToken(get(tokenStore), "/data/admin/teams")
+            .then((value) => value.json())
+            .then(TeamSchema.array().parse);
     }
 }
 
-export const dataRepo = derived(tokenStore, ($token) => new DataRepo($token));
+export const dataRepo = derived(tokenStore, ($token) => new DataRepo($token));

src/components/repo/event.ts

@@ -17,12 +17,26 @@
  *   along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
 
-import type {ExtendedEvent, ShortEvent, SWEvent} from "@type/event";
-import {fetchWithToken, tokenStore} from "./repo";
-import {ExtendedEventSchema, ShortEventSchema, SWEventSchema} from "@type/event.js";
-import {z} from "zod";
-import type {Dayjs} from "dayjs";
-import {derived} from "svelte/store";
+import type { ExtendedEvent, ShortEvent, SWEvent, EventFight, ResponseGroups, ResponseRelation, ResponseTeam } from "@type/event";
+import { fetchWithToken, tokenStore } from "./repo";
+import {
+    ExtendedEventSchema,
+    ShortEventSchema,
+    SWEventSchema,
+    EventFightSchema,
+    ResponseGroupsSchema,
+    ResponseRelationSchema,
+    ResponseTeamSchema,
+    CreateEventGroupSchema,
+    UpdateEventGroupSchema,
+    CreateEventRelationSchema,
+    UpdateEventRelationSchema,
+} from "@type/event.js";
+import type { CreateEventGroup, UpdateEventGroup, CreateEventRelation, UpdateEventRelation } from "@type/event.js";
+import { z } from "zod";
+import type { Dayjs } from "dayjs";
+import { derived } from "svelte/store";
+import { PlayerSchema, type Player } from "@components/types/data";
 
 export interface CreateEvent {
     name: string;
@@ -42,19 +56,25 @@ export interface UpdateEvent {
     removeReferee?: string[] | null;
 }
 
+export interface ResponseUser {
+    name: string;
+    uuid: string;
+    prefix: string;
+    perms: string[];
+}
+
 export class EventRepo {
-    constructor(private token: string) {
-    }
+    constructor(private token: string) {}
 
     public async listEvents(): Promise<ShortEvent[]> {
         return await fetchWithToken(this.token, "/events")
-            .then(value => value.json())
-            .then(value => z.array(ShortEventSchema).parse(value));
+            .then((value) => value.json())
+            .then((value) => z.array(ShortEventSchema).parse(value));
     }
 
     public async getEvent(id: string): Promise<ExtendedEvent> {
         return await fetchWithToken(this.token, `/events/${id}`)
-            .then(value => value.json())
+            .then((value) => value.json())
             .then(ExtendedEventSchema.parse);
     }
 
@@ -66,7 +86,8 @@ export class EventRepo {
                 start: +event.start,
                 end: +event.end,
             }),
-        }).then(value => value.json())
+        })
+            .then((value) => value.json())
             .then(SWEventSchema.parse);
     }
 
@@ -87,7 +108,8 @@ export class EventRepo {
             headers: {
                 "Content-Type": "application/json",
             },
-        }).then(value => value.json())
+        })
+            .then((value) => value.json())
             .then(SWEventSchema.parse);
     }
 
@@ -98,6 +120,154 @@ export class EventRepo {
 
         return res.ok;
     }
+
+    // Fights
+    public async listFights(eventId: string): Promise<EventFight[]> {
+        return await fetchWithToken(this.token, `/events/${eventId}/fights`)
+            .then((value) => value.json())
+            .then((value) => z.array(EventFightSchema).parse(value));
+    }
+    public async createFight(eventId: string, fight: any): Promise<EventFight> {
+        delete fight.ergebnis;
+        return await fetchWithToken(this.token, `/events/${eventId}/fights`, {
+            method: "POST",
+            body: JSON.stringify(fight),
+            headers: { "Content-Type": "application/json" },
+        })
+            .then((value) => value.json())
+            .then(EventFightSchema.parse);
+    }
+    public async deleteFight(eventId: string, fightId: string): Promise<boolean> {
+        const res = await fetchWithToken(this.token, `/events/${eventId}/fights/${fightId}`, {
+            method: "DELETE",
+        });
+        return res.ok;
+    }
+
+    // Groups
+    public async listGroups(eventId: string): Promise<ResponseGroups[]> {
+        return await fetchWithToken(this.token, `/events/${eventId}/groups`)
+            .then((value) => value.json())
+            .then((value) => z.array(ResponseGroupsSchema).parse(value));
+    }
+    public async createGroup(eventId: number, group: CreateEventGroup): Promise<ResponseGroups> {
+        CreateEventGroupSchema.parse(group);
+        return await fetchWithToken(this.token, `/events/${eventId}/groups`, {
+            method: "POST",
+            body: JSON.stringify({
+                name: group.name,
+                type: group.type,
+            }),
+            headers: { "Content-Type": "application/json" },
+        })
+            .then((value) => value.json())
+            .then(ResponseGroupsSchema.parse);
+    }
+    public async getGroup(eventId: string, groupId: string): Promise<ResponseGroups> {
+        return await fetchWithToken(this.token, `/events/${eventId}/groups/${groupId}`)
+            .then((value) => value.json())
+            .then(ResponseGroupsSchema.parse);
+    }
+    public async updateGroup(eventId: string, groupId: string, group: UpdateEventGroup): Promise<ResponseGroups> {
+        UpdateEventGroupSchema.parse(group);
+        return await fetchWithToken(this.token, `/events/${eventId}/groups/${groupId}`, {
+            method: "PUT",
+            body: JSON.stringify(group),
+            headers: { "Content-Type": "application/json" },
+        })
+            .then((value) => value.json())
+            .then(ResponseGroupsSchema.parse);
+    }
+    public async deleteGroup(eventId: string, groupId: string): Promise<boolean> {
+        const res = await fetchWithToken(this.token, `/events/${eventId}/groups/${groupId}`, {
+            method: "DELETE",
+        });
+        return res.ok;
+    }
+
+    // Relations
+    public async listRelations(eventId: number): Promise<ResponseRelation[]> {
+        return await fetchWithToken(this.token, `/events/${eventId}/relations`)
+            .then((value) => value.json())
+            .then((value) => z.array(ResponseRelationSchema).parse(value));
+    }
+    public async createRelation(eventId: number, relation: CreateEventRelation): Promise<ResponseRelation> {
+        CreateEventRelationSchema.parse(relation);
+        return await fetchWithToken(this.token, `/events/${eventId}/relations`, {
+            method: "POST",
+            body: JSON.stringify(relation),
+            headers: { "Content-Type": "application/json" },
+        })
+            .then((value) => value.json())
+            .then(ResponseRelationSchema.parse);
+    }
+    public async getRelation(eventId: string, relationId: string): Promise<ResponseRelation> {
+        return await fetchWithToken(this.token, `/events/${eventId}/relations/${relationId}`)
+            .then((value) => value.json())
+            .then(ResponseRelationSchema.parse);
+    }
+    public async updateRelation(eventId: number, relationId: number, relation: UpdateEventRelation): Promise<ResponseRelation> {
+        UpdateEventRelationSchema.parse(relation);
+        return await fetchWithToken(this.token, `/events/${eventId}/relations/${relationId}`, {
+            method: "PUT",
+            body: JSON.stringify(relation),
+            headers: { "Content-Type": "application/json" },
+        })
+            .then((value) => value.json())
+            .then(ResponseRelationSchema.parse);
+    }
+    public async deleteRelation(eventId: number, relationId: number): Promise<boolean> {
+        const res = await fetchWithToken(this.token, `/events/${eventId}/relations/${relationId}`, {
+            method: "DELETE",
+        });
+        return res.ok;
+    }
+
+    // Teams
+    public async listTeams(eventId: string): Promise<ResponseTeam[]> {
+        return await fetchWithToken(this.token, `/events/${eventId}/teams`)
+            .then((value) => value.json())
+            .then((value) => z.array(ResponseTeamSchema).parse(value));
+    }
+    public async updateTeams(eventId: string, teams: number[]): Promise<boolean> {
+        const res = await fetchWithToken(this.token, `/events/${eventId}/teams`, {
+            method: "PUT",
+            body: JSON.stringify(teams),
+            headers: { "Content-Type": "application/json" },
+        });
+        return res.ok;
+    }
+    public async deleteTeams(eventId: string, teams: number[]): Promise<boolean> {
+        const res = await fetchWithToken(this.token, `/events/${eventId}/teams`, {
+            method: "DELETE",
+            body: JSON.stringify(teams),
+            headers: { "Content-Type": "application/json" },
+        });
+        return res.ok;
+    }
+
+    // Referees
+    public async listReferees(eventId: string): Promise<Player[]> {
+        return await fetchWithToken(this.token, `/events/${eventId}/referees`)
+            .then((value) => value.json())
+            .then((value) => z.array(PlayerSchema).parse(value));
+    }
+    public async updateReferees(eventId: string, refereeUuids: string[]): Promise<boolean> {
+        const res = await fetchWithToken(this.token, `/events/${eventId}/referees`, {
+            method: "PUT",
+            body: JSON.stringify(refereeUuids),
+            headers: { "Content-Type": "application/json" },
+        });
+        return res.status === 204;
+    }
+    public async deleteReferees(eventId: string, refereeUuids: string[]): Promise<boolean> {
+        const res = await fetchWithToken(this.token, `/events/${eventId}/referees`, {
+            method: "DELETE",
+            body: JSON.stringify(refereeUuids),
+            headers: { "Content-Type": "application/json" },
+        });
+        return res.status === 204;
+    }
 }
 
 export const eventRepo = derived(tokenStore, ($token) => new EventRepo($token));

src/components/repo/fight.ts

@@ -17,12 +17,12 @@
  *   along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
 
-import type {EventFight} from "@type/event.js";
-import {fetchWithToken, tokenStore} from "./repo";
-import {z} from "zod";
-import {EventFightSchema} from "@type/event.js";
-import type {Dayjs} from "dayjs";
-import {derived} from "svelte/store";
+import type { EventFight } from "@type/event.js";
+import { fetchWithToken, tokenStore } from "./repo";
+import { z } from "zod";
+import { EventFightSchema } from "@type/event.js";
+import type { Dayjs } from "dayjs";
+import { derived } from "svelte/store";
 
 export interface CreateFight {
     spielmodus: string;
@@ -31,7 +31,7 @@ export interface CreateFight {
     redTeam: number;
     start: Dayjs;
     spectatePort: number | null;
-    group: string | null;
+    group: number | null;
 }
 
 export interface UpdateFight {
@@ -39,26 +39,24 @@ export interface UpdateFight {
     map: string | null;
     blueTeam: number | null;
     redTeam: number | null;
-    start: Dayjs | null;
+    start: number | null;
     spectatePort: number | null;
-    group: string | null;
+    group: number | null;
 }
 
 export class FightRepo {
-    constructor(private token: string) {
-    }
+    constructor(private token: string) {}
 
     public async listFights(eventId: number): Promise<EventFight[]> {
         return await fetchWithToken(this.token, `/events/${eventId}/fights`)
-            .then(value => value.json())
-            .then(value => z.array(EventFightSchema).parse(value));
+            .then((value) => value.json())
+            .then((value) => z.array(EventFightSchema).parse(value));
     }
 
     public async createFight(eventId: number, fight: CreateFight): Promise<EventFight> {
-        return await fetchWithToken(this.token, "/fights", {
+        return await fetchWithToken(this.token, `/events/${eventId}/fights`, {
             method: "POST",
             body: JSON.stringify({
-                event: eventId,
                 spielmodus: fight.spielmodus,
                 map: fight.map,
                 blueTeam: fight.blueTeam,
@@ -67,28 +65,25 @@ export class FightRepo {
                 spectatePort: fight.spectatePort,
                 group: fight.group,
             }),
-        }).then(value => value.json())
+        })
+            .then((value) => value.json())
             .then(EventFightSchema.parse);
     }
 
-    public async updateFight(fightId: number, fight: UpdateFight): Promise<EventFight> {
-        return await fetchWithToken(this.token, `/fights/${fightId}`, {
+    public async updateFight(eventId: number, fightId: number, fight: UpdateFight): Promise<EventFight> {
+        return await fetchWithToken(this.token, `/events/${eventId}/fights/${fightId}`, {
             method: "PUT",
             body: JSON.stringify({
-                spielmodus: fight.spielmodus,
-                map: fight.map,
-                blueTeam: fight.blueTeam,
-                redTeam: fight.redTeam,
+                ...fight,
                 start: fight.start?.valueOf(),
-                spectatePort: fight.spectatePort,
-                group: fight.group,
             }),
-        }).then(value => value.json())
+        })
+            .then((value) => value.json())
             .then(EventFightSchema.parse);
     }
 
-    public async deleteFight(fightId: number): Promise<void> {
-        const res = await fetchWithToken(this.token, `/fights/${fightId}`, {
+    public async deleteFight(eventId: number, fightId: number): Promise<void> {
+        const res = await fetchWithToken(this.token, `/events/${eventId}/fights/${fightId}`, {
             method: "DELETE",
         });
 

src/components/repo/page.ts

@@ -17,27 +17,26 @@
  *   along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
 
-import type {Page, PageList} from "@type/page.ts";
-import {fetchWithToken, tokenStore} from "./repo.ts";
-import {PageListSchema, PageSchema} from "@type/page.ts";
-import {bytesToBase64} from "../admin/util.ts";
-import {z} from "zod";
-import {derived} from "svelte/store";
+import type { Page, PageList } from "@type/page.ts";
+import { fetchWithToken, tokenStore } from "./repo.ts";
+import { PageListSchema, PageSchema } from "@type/page.ts";
+import { bytesToBase64 } from "../admin/util.ts";
+import { z } from "zod";
+import { derived } from "svelte/store";
 
 export class PageRepo {
-    constructor(private token: string) {
-    }
+    constructor(private token: string) {}
 
     public async listPages(branch: string = "master"): Promise<PageList> {
         return await fetchWithToken(this.token, `/page?branch=${branch}`)
-            .then(value => value.json())
+            .then((value) => value.json())
             .then(PageListSchema.parse)
-            .then(value => value.map(value1 => ({...value1, path: value1.path.replace("src/content/", "")})));
+            .then((value) => value.map((value1) => ({ ...value1, path: value1.path.replace("src/content/", "") })));
     }
 
     public async getPage(id: number, branch: string = "master"): Promise<Page> {
         return await fetchWithToken(this.token, `/page/${id}?branch=${branch}`)
-            .then(value => value.json())
+            .then((value) => value.json())
             .then(PageSchema.parse);
     }
 
@@ -46,42 +45,57 @@ export class PageRepo {
             method: "PUT",
             body: JSON.stringify({
                 content: bytesToBase64(new TextEncoder().encode(content)),
-                sha, message,
+                sha,
+                message,
             }),
         });
     }
 
     public async getBranches(): Promise<string[]> {
         return await fetchWithToken(this.token, "/page/branch")
-            .then(value => value.json())
-            .then(value => z.array(z.string()).parse(value));
+            .then((value) => value.json())
+            .then((value) => z.array(z.string()).parse(value));
     }
 
     public async createBranch(branch: string): Promise<void> {
-        await fetchWithToken(this.token, "/page/branch", {method: "POST", body: JSON.stringify({branch})});
+        await fetchWithToken(this.token, "/page/branch", { method: "POST", body: JSON.stringify({ branch }) });
     }
 
     public async deleteBranch(branch: string): Promise<void> {
-        await fetchWithToken(this.token, "/page/branch", {method: "DELETE", body: JSON.stringify({branch})});
+        await fetchWithToken(this.token, "/page/branch", { method: "DELETE", body: JSON.stringify({ branch }) });
     }
 
     public async createFile(path: string, branch: string = "master", slug: string | null = null, title: string | null = null): Promise<void> {
-        await fetchWithToken(this.token, `/page?branch=${branch}`, {method: "POST", body: JSON.stringify({path, slug, title})});
+        await fetchWithToken(this.token, `/page?branch=${branch}`, { method: "POST", body: JSON.stringify({ path, slug, title }) });
     }
 
     public async merge(branch: string, message: string): Promise<void> {
         await fetchWithToken(this.token, "/page/branch/merge", {
             method: "POST",
-            body: JSON.stringify({branch, message}),
+            body: JSON.stringify({ branch, message }),
         });
     }
 
     public async deletePage(id: number, message: string, sha: string, branch: string = "master"): Promise<void> {
         await fetchWithToken(this.token, `/page/${id}?branch=${branch}`, {
             method: "DELETE",
-            body: JSON.stringify({message, sha}),
+            body: JSON.stringify({ message, sha }),
+        });
+    }
+
+    public async listImages(branch: string = "master"): Promise<PageList> {
+        return await fetchWithToken(this.token, `/page/images?branch=${branch}`)
+            .then((value) => value.json())
+            .then(PageListSchema.parse)
+            .then((value) => value.map((value1) => ({ ...value1, path: value1.path.replace("src/content/", "") })));
+    }
+
+    public async createImage(name: string, data: string, branch: string = "master"): Promise<void> {
+        await fetchWithToken(this.token, `/page/images?branch=${branch}`, {
+            method: "POST",
+            body: JSON.stringify({ name, data }),
         });
     }
 }
 
-export const pageRepo = derived(tokenStore, ($token) => new PageRepo($token));
+export const pageRepo = derived(tokenStore, ($token) => new PageRepo($token));

src/components/stores/cached.ts

@@ -17,20 +17,31 @@
  *   along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
 
-import {readonly, writable} from "svelte/store";
+import { readonly, writable } from "svelte/store";
 
-import type {Readable, Subscriber, Unsubscriber} from "svelte/store";
+import type { Readable, Subscriber, Unsubscriber } from "svelte/store";
 
 export interface Cached<T> extends Readable<T> {
     reload: () => void;
+    future: Promise<T>;
 }
 
 export function cached<T>(normal: T, init: () => Promise<T>): Cached<T> {
     const store = writable<T>(normal);
+    const future = new Promise<T>((resolve) => {
+        let f = false;
+        store.subscribe((value) => {
+            if (f) {
+                resolve(value);
+            } else {
+                f = true;
+            }
+        });
+    });
     let first = true;
 
     const reload = () => {
-        init().then(data => {
+        init().then((data) => {
             store.set(data);
         });
     };
@@ -45,6 +56,7 @@ export function cached<T>(normal: T, init: () => Promise<T>): Cached<T> {
             return store.subscribe(run, invalidate);
         },
         reload,
+        future,
     };
 }
 
@@ -58,7 +70,7 @@ export function cachedFamily<T, K>(normal: K, init: (arg0: T) => Promise<K>): (a
             let first = true;
 
             const reload = () => {
-                init(arg).then(data => {
+                init(arg).then((data) => {
                     store.set(data);
                 });
             };

src/components/stores/stores.ts

@@ -17,33 +17,33 @@
  *   along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
 
-import type {Player, SchematicType} from "@type/data";
-import {PlayerSchema} from "@type/data.ts";
-import {cached, cachedFamily} from "./cached";
-import type {Team} from "@type/team.ts";
-import {TeamSchema} from "@type/team";
-import {derived, get, writable} from "svelte/store";
-import {z} from "zod";
-import {fetchWithToken, tokenStore} from "@repo/repo.ts";
-import {pageRepo} from "@repo/page.ts";
-import {dataRepo} from "@repo/data.ts";
-import {permsRepo} from "@repo/perms.ts";
+import type { Player, SchematicType } from "@type/data";
+import { PlayerSchema } from "@type/data.ts";
+import { cached, cachedFamily } from "./cached";
+import type { Team } from "@type/team.ts";
+import { TeamSchema } from "@type/team";
+import { derived, get, writable } from "svelte/store";
+import { z } from "zod";
+import { fetchWithToken, tokenStore } from "@repo/repo.ts";
+import { pageRepo } from "@repo/page.ts";
+import { dataRepo } from "@repo/data.ts";
+import { permsRepo } from "@repo/perms.ts";
 
-export const schemTypes = cached<SchematicType[]>([], () =>
-    fetchWithToken(get(tokenStore), "/data/admin/schematicTypes")
-        .then(res => res.json()));
+export const schemTypes = cached<SchematicType[]>([], () => fetchWithToken(get(tokenStore), "/data/admin/schematicTypes").then((res) => res.json()));
 
-export const players = cached<Player[]>([], async () => {
-    const res = await fetchWithToken(get(tokenStore), "/data/admin/users");
-    return z.array(PlayerSchema).parse(await res.json());
+export const teams = cached<Team[]>([], async () => {
+    return get(dataRepo).getTeams();
 });
 
-export const permissions = cached({
-    perms: [],
-    prefixes: {},
-}, async () => {
-    return get(permsRepo).listPerms();
-});
+export const permissions = cached(
+    {
+        perms: [],
+        prefixes: {},
+    },
+    async () => {
+        return get(permsRepo).listPerms();
+    }
+);
 
 export const gamemodes = cached<string[]>([], async () => {
     const res = await fetchWithToken(get(tokenStore), "/data/admin/gamemodes");
@@ -51,7 +51,7 @@ export const gamemodes = cached<string[]>([], async () => {
 });
 
 export const maps = cachedFamily<string, string[]>([], async (gamemode) => {
-    if (get(gamemodes).every(value => value !== gamemode)) return [];
+    if ((await gamemodes.future).every((value) => value !== gamemode)) return [];
 
     const res = await fetchWithToken(get(tokenStore), `/data/admin/gamemodes/${gamemode}/maps`);
     if (!res.ok) {
@@ -66,17 +66,12 @@ export const groups = cached<string[]>([], async () => {
     return z.array(z.string()).parse(await res.json());
 });
 
-export const teams = cached<Team[]>([], async () => {
-    const res = await fetchWithToken(get(tokenStore), "/team");
-    return z.array(TeamSchema).parse(await res.json());
-});
-
 export const branches = cached<string[]>([], async () => {
     const res = await get(pageRepo).getBranches();
     return z.array(z.string()).parse(res);
 });
 
-export const server = derived(dataRepo, $dataRepo => $dataRepo.getServer());
+export const server = derived(dataRepo, ($dataRepo) => $dataRepo.getServer());
 
 export const isWide = writable(typeof window !== "undefined" && window.innerWidth >= 640);
 

src/components/types/auditlog.ts

@@ -0,0 +1,19 @@
+import { z } from "zod";
+
+export const AuditLogEntrySchema = z.object({
+    id: z.number(),
+    time: z.number(),
+    server: z.string(),
+    serverOwner: z.string().nullable(),
+    actor: z.string(),
+    actionType: z.enum(["JOIN", "LEAVE", "COMMAND", "SENSITIVE_COMMAND", "CHAT", "GUI_OPEN", "GUI_CLOSE", "GUI_CLICK"]),
+    actionText: z.string(),
+});
+
+export const PagedAutidLogSchema = z.object({
+    entries: z.array(AuditLogEntrySchema),
+    rows: z.number(),
+});
+
+export type AuditLogEntry = z.infer<typeof AuditLogEntrySchema>;
+export type PagedAuditLog = z.infer<typeof PagedAutidLogSchema>;

src/components/types/data.ts

@@ -17,7 +17,7 @@
  *   along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
 
-import {z} from "zod";
+import { z } from "zod";
 
 export const SchematicTypeSchema = z.object({
     name: z.string(),
@@ -29,12 +29,20 @@ export type SchematicType = z.infer<typeof SchematicTypeSchema>;
 export const PlayerSchema = z.object({
     name: z.string(),
     uuid: z.string(),
-    prefix: z.string(),
-    perms: z.array(z.string()),
+    prefix: z.string().nullable(),
+    perms: z.array(z.string()).nullable(),
+    id: z.number().nullable(),
 });
 
 export type Player = z.infer<typeof PlayerSchema>;
 
+export const PlayerListSchema = z.object({
+    entries: z.array(PlayerSchema),
+    rows: z.number(),
+});
+
+export type PlayerList = z.infer<typeof PlayerListSchema>;
+
 export const ServerSchema = z.object({
     description: z.any(),
     players: z.object({
@@ -57,3 +65,12 @@ export const ResponseErrorSchema = z.object({
 });
 
 export type ResponseError = z.infer<typeof ResponseErrorSchema>;
+
+export const ResponseUserSchema = z.object({
+    name: z.string(),
+    uuid: z.string(),
+    prefix: z.string(),
+    perms: z.array(z.string()),
+});
+
+export type ResponseUser = z.infer<typeof ResponseUserSchema>;

src/components/types/event.ts

@@ -17,9 +17,58 @@
  *   along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
 
-import {z} from "zod";
-import {TeamSchema} from "./team.js";
-import {PlayerSchema} from "./data.js";
+import { z } from "zod";
+import { TeamSchema } from "./team.js";
+import { PlayerSchema } from "./data.js";
+
+export const ResponseGroupsSchema = z.object({
+    id: z.number(),
+    name: z.string(),
+    pointsPerWin: z.number(),
+    pointsPerLoss: z.number(),
+    pointsPerDraw: z.number(),
+    type: z.enum(["GROUP_STAGE", "ELIMINATION_STAGE"]),
+    points: z.record(z.string(), z.number()).nullable(),
+});
+
+export const EventFightSchema = z.object({
+    id: z.number(),
+    spielmodus: z.string(),
+    map: z.string(),
+    blueTeam: TeamSchema,
+    redTeam: TeamSchema,
+    start: z.number(),
+    ergebnis: z.number(),
+    spectatePort: z.number().nullable(),
+    group: ResponseGroupsSchema.nullable(),
+    hasFinished: z.boolean(),
+});
+
+export type EventFight = z.infer<typeof EventFightSchema>;
+
+export const EventFightEditSchema = EventFightSchema.omit({
+    id: true,
+    group: true,
+    hasFinished: true,
+}).extend({
+    group: z.number().nullable(),
+});
+
+export type EventFightEdit = z.infer<typeof EventFightEditSchema>;
+
+export type ResponseGroups = z.infer<typeof ResponseGroupsSchema>;
+
+export const ResponseRelationSchema = z.object({
+    id: z.number(),
+    fight: z.number(),
+    team: z.enum(["RED", "BLUE"]),
+    type: z.enum(["FIGHT", "GROUP"]),
+    fromFight: EventFightSchema.optional(),
+    fromGroup: ResponseGroupsSchema.optional(),
+    fromPlace: z.number(),
+});
+
+export type ResponseRelation = z.infer<typeof ResponseRelationSchema>;
 
 export const ShortEventSchema = z.object({
     id: z.number(),
@@ -35,29 +84,69 @@ export const SWEventSchema = ShortEventSchema.extend({
     maxTeamMembers: z.number(),
     schemType: z.string().nullable(),
     publicSchemsOnly: z.boolean(),
-    referees: z.array(PlayerSchema),
 });
 
 export type SWEvent = z.infer<typeof SWEventSchema>;
 
-export const EventFightSchema = z.object({
-    id: z.number(),
-    spielmodus: z.string(),
-    map: z.string(),
-    blueTeam: TeamSchema,
-    redTeam: TeamSchema,
-    start: z.number(),
-    ergebnis: z.number(),
-    spectatePort: z.number().nullable(),
-    group: z.string().nullable(),
-});
-
-export type EventFight = z.infer<typeof EventFightSchema>;
-
 export const ExtendedEventSchema = z.object({
     event: SWEventSchema,
     teams: z.array(TeamSchema),
+    groups: z.array(ResponseGroupsSchema),
     fights: z.array(EventFightSchema),
+    referees: z.array(PlayerSchema),
+    relations: z.array(ResponseRelationSchema),
 });
 
 export type ExtendedEvent = z.infer<typeof ExtendedEventSchema>;
+
+export const ResponseTeamSchema = z.object({
+    id: z.number(),
+    name: z.string(),
+    kuerzel: z.string(),
+    color: z.string(),
+});
+
+export type ResponseTeam = z.infer<typeof ResponseTeamSchema>;
+
+export const CreateEventGroupSchema = z.object({
+    name: z.string(),
+    type: z.enum(["GROUP_STAGE", "ELIMINATION_STAGE"]),
+});
+export type CreateEventGroup = z.infer<typeof CreateEventGroupSchema>;
+
+export const UpdateEventGroupSchema = z.object({
+    name: z.string().nullable().optional(),
+    type: z.enum(["GROUP_STAGE", "ELIMINATION_STAGE"]).nullable().optional(),
+    pointsPerWin: z.number().nullable().optional(),
+    pointsPerLoss: z.number().nullable().optional(),
+    pointsPerDraw: z.number().nullable().optional(),
+});
+export type UpdateEventGroup = z.infer<typeof UpdateEventGroupSchema>;
+
+export const GroupEditSchema = ResponseGroupsSchema.omit({
+    id: true,
+    points: true,
+});
+export type GroupUpdateEdit = z.infer<typeof GroupEditSchema>;
+
+export const CreateEventRelationSchema = z.object({
+    fightId: z.number(),
+    team: z.enum(["RED", "BLUE"]),
+    fromType: z.enum(["FIGHT", "GROUP"]),
+    fromId: z.number(),
+    fromPlace: z.number(),
+});
+export type CreateEventRelation = z.infer<typeof CreateEventRelationSchema>;
+
+export const UpdateFromRelationSchema = z.object({
+    fromType: z.enum(["FIGHT", "GROUP"]),
+    fromId: z.number(),
+    fromPlace: z.number(),
+});
+export type UpdateFromRelation = z.infer<typeof UpdateFromRelationSchema>;
+
+export const UpdateEventRelationSchema = z.object({
+    team: z.enum(["RED", "BLUE"]).nullable().optional(),
+    from: UpdateFromRelationSchema.nullable().optional(),
+});
+export type UpdateEventRelation = z.infer<typeof UpdateEventRelationSchema>;

src/components/types/perms.ts

@@ -17,11 +17,11 @@
  *   along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
 
-import {z} from "zod";
+import { z } from "zod";
 
 export const PrefixSchema = z.object({
     name: z.string().startsWith("PREFIX_"),
-    colorCode: z.string().length(2).startsWith("§"),
+    colorCode: z.string().startsWith("§"),
     chatPrefix: z.string(),
 });
 

src/components/types/team.ts

@@ -17,12 +17,12 @@
  *   along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
 
-import {z} from "zod";
+import { z } from "zod";
 
 export const TeamSchema = z.object({
     id: z.number(),
     name: z.string(),
-    kuerzel: z.string().min(1).max(4),
+    kuerzel: z.string().min(1).max(16),
     color: z.string().max(1),
 });
 

src/components/ui/PlayerSelector.svelte

@@ -0,0 +1,122 @@
+<script lang="ts">
+    import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "@components/ui/command";
+    import { Popover, PopoverContent, PopoverTrigger } from "@components/ui/popover";
+    import { Button } from "@components/ui/button";
+    import { Check, ChevronsUpDown } from "lucide-svelte";
+    import { cn } from "@components/utils";
+    import { dataRepo } from "@repo/data";
+    import type { Player } from "@type/data";
+
+    let {
+        value = $bindable(null),
+        multiple = false,
+        placeholder = "Select player...",
+        onSelect,
+    }: {
+        value?: number | number[] | null;
+        multiple?: boolean;
+        placeholder?: string;
+        onSelect?: (player: Player) => void;
+    } = $props();
+
+    let open = $state(false);
+    let search = $state("");
+    let players: Player[] = $state([]);
+    let loading = $state(false);
+
+    let debounceTimer: NodeJS.Timeout;
+
+    function fetchPlayers(searchTerm: string) {
+        clearTimeout(debounceTimer);
+        debounceTimer = setTimeout(async () => {
+            loading = true;
+            try {
+                const res = await $dataRepo.queryPlayers(searchTerm || undefined, undefined, undefined, 50, 0, false, true);
+                players = res.entries;
+            } finally {
+                loading = false;
+            }
+        }, 300);
+    }
+
+    $effect(() => {
+        fetchPlayers(search);
+    });
+
+    function handleSelect(player: Player) {
+        if (onSelect) {
+            onSelect(player);
+        }
+
+        if (multiple) {
+            if (Array.isArray(value)) {
+                if (value.includes(player.id!)) {
+                    value = value.filter((v) => v !== player.id);
+                } else {
+                    value = [...value, player.id!];
+                }
+            } else {
+                value = [player.id!];
+            }
+        } else {
+            if (value === player.id) {
+                value = null; // Deselect
+            } else {
+                value = player.id;
+                open = false;
+            }
+        }
+    }
+
+    function isSelected(id: number) {
+        if (multiple) {
+            return Array.isArray(value) && value.includes(id);
+        }
+        return value === id;
+    }
+
+    let triggerLabel = $derived.by(() => {
+        if (multiple) {
+            if (Array.isArray(value) && value.length > 0) {
+                return `${placeholder} (${value.length})`;
+            }
+            return placeholder;
+        } else {
+            // We might need to fetch the selected player's name if it's not in the current list
+            // For now, let's just show the placeholder or "Selected"
+            // Ideally we would have a way to resolve the name from the UUID if it's not in `players`
+            // But `players` only contains search results.
+            // If we want to show the name, we might need to fetch it or pass it in.
+            // Given the context of AuditLog, it shows "Spieler Filter (count)".
+            // Given RefereesList, it's a button "Hinzufügen".
+            return placeholder;
+        }
+    });
+</script>
+
+<Popover bind:open>
+    <PopoverTrigger>
+        {#snippet child({ props })}
+            <Button variant="outline" class={cn("justify-between", Array.isArray(value) && !value?.length && "text-muted-foreground")} {...props} role="combobox" aria-expanded={open}>
+                {triggerLabel}
+                <ChevronsUpDown class="ml-2 size-4 shrink-0 opacity-50" />
+            </Button>
+        {/snippet}
+    </PopoverTrigger>
+    <PopoverContent class="p-0">
+        <Command shouldFilter={false}>
+            <CommandInput bind:value={search} placeholder="Search players..." />
+            <CommandList>
+                <CommandEmpty>No players found.</CommandEmpty>
+                <CommandGroup>
+                    {#each players as player (player.uuid)}
+                        <CommandItem value={player.id?.toString()} onSelect={() => handleSelect(player)}>
+                            <Check class={cn("mr-2 size-4", isSelected(player.id!) ? "opacity-100" : "opacity-0")} />
+                            {player.name}
+                        </CommandItem>
+                    {/each}
+                </CommandGroup>
+            </CommandList>
+        </Command>
+    </PopoverContent>
+</Popover>

src/components/ui/datetime-picker/DateTimePicker.svelte

@@ -24,14 +24,15 @@
     import { ScrollArea } from "$lib/components/ui/scroll-area";
     import { CalendarIcon } from "lucide-svelte";
     import { cn } from "@components/utils";
-    import type {ZonedDateTime} from "@internationalized/date";
+    import { fromDate, type ZonedDateTime } from "@internationalized/date";
+    import Input from "../input/input.svelte";
 
     let {
         value = $bindable(),
-        onChange
+        onChange,
     }: {
-        value: ZonedDateTime
-        onChange?: ((date: ZonedDateTime | undefined) => void) | undefined
+        value: ZonedDateTime;
+        onChange?: ((date: ZonedDateTime | undefined) => void) | undefined;
     } = $props();
 
     let isOpen = $state(false);
@@ -63,13 +64,7 @@
 
 <Popover bind:open={isOpen}>
     <PopoverTrigger>
-        <Button
-                variant="outline"
-                class={cn(
-                "w-full justify-start text-left font-normal",
-                !value && "text-muted-foreground"
-            )}
-        >
+        <Button variant="outline" class={cn("w-full justify-start text-left font-normal", !value && "text-muted-foreground")}>
             <CalendarIcon class="mr-2 h-4 w-4" />
             {#if value}
                 {new Intl.DateTimeFormat("de-DE", {
@@ -86,23 +81,14 @@
     </PopoverTrigger>
 
     <PopoverContent class="w-auto p-0">
+        <Input type="datetime-local" value={value.toString().slice(0, 16)} onchange={(e) => handleDateSelect(fromDate(e.target.valueAsDate, "Europe/Berlin"))} />
         <div class="sm:flex">
-            <Calendar
-                    mode="single"
-                    bind:value
-                    onValueChange={(date) => handleDateSelect(date)}
-                    initialFocus
-            />
+            <Calendar mode="single" bind:value onValueChange={(date) => handleDateSelect(date)} initialFocus />
             <div class="flex flex-col sm:flex-row sm:h-[300px] divide-y sm:divide-y-0 sm:divide-x">
                 <ScrollArea class="w-64 sm:w-auto">
                     <div class="flex sm:flex-col p-2">
                         {#each [...hours].reverse() as hour}
-                            <Button
-                                    size="icon"
-                                    variant={value && value.hour === hour ? "default" : "ghost"}
-                                    class="sm:w-full shrink-0 aspect-square"
-                                    onclick={() => handleTimeChange("hour", hour)}
-                            >
+                            <Button size="icon" variant={value && value.hour === hour ? "default" : "ghost"} class="sm:w-full shrink-0 aspect-square" onclick={() => handleTimeChange("hour", hour)}>
                                 {hour}
                             </Button>
                         {/each}
@@ -113,12 +99,12 @@
                     <div class="flex sm:flex-col p-2">
                         {#each Array.from({ length: 60 }, (_, i) => i) as minute}
                             <Button
-                                    size="icon"
-                                    variant={value && value.minute === minute ? "default" : "ghost"}
-                                    class="sm:w-full shrink-0 aspect-square"
-                                    onclick={() => handleTimeChange("minute", minute)}
+                                size="icon"
+                                variant={value && value.minute === minute ? "default" : "ghost"}
+                                class="sm:w-full shrink-0 aspect-square"
+                                onclick={() => handleTimeChange("minute", minute)}
                             >
-                                {minute.toString().padStart(2, '0')}
+                                {minute.toString().padStart(2, "0")}
                             </Button>
                         {/each}
                     </div>

src/components/ui/input/index.ts

@@ -1,29 +1,6 @@
 import Root from "./input.svelte";
-
-export type FormInputEvent<T extends Event = Event> = T & {
-	currentTarget: EventTarget & HTMLInputElement;
-};
-export type InputEvents = {
-	blur: FormInputEvent<FocusEvent>;
-	change: FormInputEvent<Event>;
-	click: FormInputEvent<MouseEvent>;
-	focus: FormInputEvent<FocusEvent>;
-	focusin: FormInputEvent<FocusEvent>;
-	focusout: FormInputEvent<FocusEvent>;
-	keydown: FormInputEvent<KeyboardEvent>;
-	keypress: FormInputEvent<KeyboardEvent>;
-	keyup: FormInputEvent<KeyboardEvent>;
-	mouseover: FormInputEvent<MouseEvent>;
-	mouseenter: FormInputEvent<MouseEvent>;
-	mouseleave: FormInputEvent<MouseEvent>;
-	mousemove: FormInputEvent<MouseEvent>;
-	paste: FormInputEvent<ClipboardEvent>;
-	input: FormInputEvent<InputEvent>;
-	wheel: FormInputEvent<WheelEvent>;
-};
-
 export {
-	Root,
-	//
-	Root as Input,
+    Root,
+    //
+    Root as Input,
 };

src/components/ui/input/input.svelte

@@ -1,42 +1,39 @@
 <script lang="ts">
-	import type { HTMLInputAttributes } from "svelte/elements";
-	import type { InputEvents } from "./index.js";
-	import { cn } from "$lib/components/utils.js";
-
-	type $$Props = HTMLInputAttributes;
-	type $$Events = InputEvents;
-
-	let className: $$Props["class"] = undefined;
-	export let value: $$Props["value"] = undefined;
-	export { className as class };
-
-	// Workaround for https://github.com/sveltejs/svelte/issues/9305
-	// Fixed in Svelte 5, but not backported to 4.x.
-	export let readonly: $$Props["readonly"] = undefined;
+    import type { HTMLInputAttributes, HTMLInputTypeAttribute } from "svelte/elements";
+    import { cn } from "@components/utils";
+    import { type WithElementRef } from "bits-ui";
+    type InputType = Exclude<HTMLInputTypeAttribute, "file">;
+    type Props = WithElementRef<Omit<HTMLInputAttributes, "type"> & ({ type: "file"; files?: FileList } | { type?: InputType; files?: undefined })>;
+    let { ref = $bindable(null), value = $bindable(), type, files = $bindable(), class: className, ...restProps }: Props = $props();
 </script>
 
-<input
-	class={cn(
-		"border-input bg-background ring-offset-background placeholder:text-muted-foreground focus-visible:ring-ring flex h-10 w-full rounded-md border px-3 py-2 text-sm file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
-		className
-	)}
-	bind:value
-	{readonly}
-	on:blur
-	on:change
-	on:click
-	on:focus
-	on:focusin
-	on:focusout
-	on:keydown
-	on:keypress
-	on:keyup
-	on:mouseover
-	on:mouseenter
-	on:mouseleave
-	on:mousemove
-	on:paste
-	on:input
-	on:wheel|passive
-	{...$$restProps}
-/>
+{#if type === "file"}
+    <input
+        bind:this={ref}
+        data-slot="input"
+        class={cn(
+            "selection:bg-primary dark:bg-input/30 selection:text-primary-foreground border-input ring-offset-background placeholder:text-muted-foreground shadow-xs flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 pt-1.5 text-sm font-medium outline-none transition-[color,box-shadow] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+            "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+            "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+            className
+        )}
+        type="file"
+        bind:files
+        bind:value
+        {...restProps}
+    />
+{:else}
+    <input
+        bind:this={ref}
+        data-slot="input"
+        class={cn(
+            "border-input bg-background selection:bg-primary dark:bg-input/30 selection:text-primary-foreground ring-offset-background placeholder:text-muted-foreground shadow-xs flex h-9 w-full min-w-0 rounded-md border px-3 py-1 text-base outline-none transition-[color,box-shadow] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+            "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+            "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+            className
+        )}
+        {type}
+        bind:value
+        {...restProps}
+    />
+{/if}

src/components/ui/sheet/index.ts

@@ -1,7 +1,4 @@
 import { Dialog as SheetPrimitive } from "bits-ui";
-import { type VariantProps, tv } from "tailwind-variants";
-
-import Portal from "./sheet-portal.svelte";
 import Overlay from "./sheet-overlay.svelte";
 import Content from "./sheet-content.svelte";
 import Header from "./sheet-header.svelte";
@@ -12,6 +9,7 @@ import Description from "./sheet-description.svelte";
 const Root = SheetPrimitive.Root;
 const Close = SheetPrimitive.Close;
 const Trigger = SheetPrimitive.Trigger;
+const Portal = SheetPrimitive.Portal;
 
 export {
 	Root,
@@ -36,71 +34,3 @@ export {
 	Title as SheetTitle,
 	Description as SheetDescription,
 };
-
-export const sheetVariants = tv({
-	base: "bg-background fixed z-50 gap-4 p-6 shadow-lg",
-	variants: {
-		side: {
-			top: "inset-x-0 top-0 border-b",
-			bottom: "inset-x-0 bottom-0 border-t",
-			left: "inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm",
-			right: "inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm",
-		},
-	},
-	defaultVariants: {
-		side: "right",
-	},
-});
-
-export const sheetTransitions = {
-	top: {
-		in: {
-			y: "-100%",
-			duration: 500,
-			opacity: 1,
-		},
-		out: {
-			y: "-100%",
-			duration: 300,
-			opacity: 1,
-		},
-	},
-	bottom: {
-		in: {
-			y: "100%",
-			duration: 500,
-			opacity: 1,
-		},
-		out: {
-			y: "100%",
-			duration: 300,
-			opacity: 1,
-		},
-	},
-	left: {
-		in: {
-			x: "-100%",
-			duration: 500,
-			opacity: 1,
-		},
-		out: {
-			x: "-100%",
-			duration: 300,
-			opacity: 1,
-		},
-	},
-	right: {
-		in: {
-			x: "100%",
-			duration: 500,
-			opacity: 1,
-		},
-		out: {
-			x: "100%",
-			duration: 300,
-			opacity: 1,
-		},
-	},
-};
-
-export type Side = VariantProps<typeof sheetVariants>["side"];

src/components/ui/sheet/sheet-content.svelte

@@ -1,47 +1,53 @@
-<script lang="ts">
-	import { Dialog as SheetPrimitive } from "bits-ui";
-	import X from "lucide-svelte/icons/x";
-	import { fly } from "svelte/transition";
-	import {
-		SheetOverlay,
-		SheetPortal,
-		type Side,
-		sheetTransitions,
-		sheetVariants,
-	} from "./index.js";
-	import { cn } from "$lib/components/utils.js";
+<script lang="ts" module>
+	import { tv, type VariantProps } from "tailwind-variants";
+	export const sheetVariants = tv({
+		base: "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 gap-4 p-6 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
+		variants: {
+			side: {
+				top: "data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 border-b",
+				bottom: "data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 border-t",
+				left: "data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm",
+				right: "data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm",
+			},
+		},
+		defaultVariants: {
+			side: "right",
+		},
+	});
 
-	type $$Props = SheetPrimitive.ContentProps & {
-		side?: Side;
-	};
-
-	let className: $$Props["class"] = undefined;
-	export let side: $$Props["side"] = "right";
-	export { className as class };
-	export let inTransition: $$Props["inTransition"] = fly;
-	export let inTransitionConfig: $$Props["inTransitionConfig"] =
-		sheetTransitions[side ?? "right"].in;
-	export let outTransition: $$Props["outTransition"] = fly;
-	export let outTransitionConfig: $$Props["outTransitionConfig"] =
-		sheetTransitions[side ?? "right"].out;
+	export type Side = VariantProps<typeof sheetVariants>["side"];
 </script>
 
-<SheetPortal>
+<script lang="ts">
+	import { Dialog as SheetPrimitive, type WithoutChildrenOrChild } from "bits-ui";
+	import X from "@lucide/svelte/icons/x";
+	import type { Snippet } from "svelte";
+	import SheetOverlay from "./sheet-overlay.svelte";
+	import { cn } from "$lib/components/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		side = "right",
+		portalProps,
+		children,
+		...restProps
+	}: WithoutChildrenOrChild<SheetPrimitive.ContentProps> & {
+		portalProps?: SheetPrimitive.PortalProps;
+		side?: Side;
+		children: Snippet;
+	} = $props();
+</script>
+
+<SheetPrimitive.Portal {...portalProps}>
 	<SheetOverlay />
-	<SheetPrimitive.Content
-		{inTransition}
-		{inTransitionConfig}
-		{outTransition}
-		{outTransitionConfig}
-		class={cn(sheetVariants({ side }), className)}
-		{...$$restProps}
-	>
-		<slot />
+	<SheetPrimitive.Content bind:ref class={cn(sheetVariants({ side }), className)} {...restProps}>
+		{@render children?.()}
 		<SheetPrimitive.Close
 			class="ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none"
 		>
-			<X class="h-4 w-4" />
+			<X class="size-4" />
 			<span class="sr-only">Close</span>
 		</SheetPrimitive.Close>
 	</SheetPrimitive.Content>
-</SheetPortal>
+</SheetPrimitive.Portal>

src/components/ui/sheet/sheet-description.svelte

@@ -2,12 +2,15 @@
 	import { Dialog as SheetPrimitive } from "bits-ui";
 	import { cn } from "$lib/components/utils.js";
 
-	type $$Props = SheetPrimitive.DescriptionProps;
-
-	let className: $$Props["class"] = undefined;
-	export { className as class };
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: SheetPrimitive.DescriptionProps = $props();
 </script>
 
-<SheetPrimitive.Description class={cn("text-muted-foreground text-sm", className)} {...$$restProps}>
-	<slot />
-</SheetPrimitive.Description>
+<SheetPrimitive.Description
+	bind:ref
+	class={cn("text-muted-foreground text-sm", className)}
+	{...restProps}
+/>

src/components/ui/sheet/sheet-footer.svelte

@@ -1,16 +1,20 @@
 <script lang="ts">
+	import type { WithElementRef } from "bits-ui";
 	import type { HTMLAttributes } from "svelte/elements";
 	import { cn } from "$lib/components/utils.js";
 
-	type $$Props = HTMLAttributes<HTMLDivElement>;
-
-	let className: $$Props["class"] = undefined;
-	export { className as class };
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
 </script>
 
 <div
+	bind:this={ref}
 	class={cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className)}
-	{...$$restProps}
+	{...restProps}
 >
-	<slot />
+	{@render children?.()}
 </div>

src/components/ui/sheet/sheet-header.svelte

@@ -1,13 +1,20 @@
 <script lang="ts">
 	import type { HTMLAttributes } from "svelte/elements";
+	import type { WithElementRef } from "bits-ui";
 	import { cn } from "$lib/components/utils.js";
 
-	type $$Props = HTMLAttributes<HTMLDivElement>;
-
-	let className: $$Props["class"] = undefined;
-	export { className as class };
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
 </script>
 
-<div class={cn("flex flex-col space-y-2 text-center sm:text-left", className)} {...$$restProps}>
-	<slot />
+<div
+	bind:this={ref}
+	class={cn("flex flex-col space-y-2 text-center sm:text-left", className)}
+	{...restProps}
+>
+	{@render children?.()}
 </div>

src/components/ui/sheet/sheet-overlay.svelte

@@ -1,21 +1,21 @@
 <script lang="ts">
 	import { Dialog as SheetPrimitive } from "bits-ui";
-	import { fade } from "svelte/transition";
 	import { cn } from "$lib/components/utils.js";
 
-	type $$Props = SheetPrimitive.OverlayProps;
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: SheetPrimitive.OverlayProps = $props();
 
-	let className: $$Props["class"] = undefined;
-	export let transition: $$Props["transition"] = fade;
-	export let transitionConfig: $$Props["transitionConfig"] = {
-		duration: 150,
-	};
 	export { className as class };
 </script>
 
 <SheetPrimitive.Overlay
-	{transition}
-	{transitionConfig}
-	class={cn("bg-background/80 fixed inset-0 z-50 backdrop-blur-sm ", className)}
-	{...$$restProps}
+	bind:ref
+	class={cn(
+		"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0  fixed inset-0 z-50 bg-black/80",
+		className
+	)}
+	{...restProps}
 />

src/components/ui/sheet/sheet-portal.svelte

@@ -1,13 +0,0 @@
-<script lang="ts">
-	import { Dialog as SheetPrimitive } from "bits-ui";
-	import { cn } from "$lib/components/utils.js";
-
-	type $$Props = SheetPrimitive.PortalProps;
-
-	let className: $$Props["class"] = undefined;
-	export { className as class };
-</script>
-
-<SheetPrimitive.Portal class={cn(className)} {...$$restProps}>
-	<slot />
-</SheetPrimitive.Portal>

src/components/ui/sheet/sheet-title.svelte

@@ -2,15 +2,15 @@
 	import { Dialog as SheetPrimitive } from "bits-ui";
 	import { cn } from "$lib/components/utils.js";
 
-	type $$Props = SheetPrimitive.TitleProps;
-
-	let className: $$Props["class"] = undefined;
-	export { className as class };
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: SheetPrimitive.TitleProps = $props();
 </script>
 
 <SheetPrimitive.Title
+	bind:ref
 	class={cn("text-foreground text-lg font-semibold", className)}
-	{...$$restProps}
->
-	<slot />
-</SheetPrimitive.Title>
+	{...restProps}
+/>

src/content/announcements/de/2025-halloween.md

@@ -0,0 +1,45 @@
+---
+title: WarShip Halloween Event 2025
+key: 2025-halloween
+description: Das WarShip Halloween Event 2025 für die Community
+created: 2025-10-27T00:00:00.000Z
+tags:
+  - event
+  - warship
+---
+
+Ahoi Community,
+das diesjährige Halloween-Event nähert sich, die Tage werden langsam kürzer und die Nächte länger. Es geht auf dem Herbst zu und erinnert daran, dass das Jahr wieder halb vorbei ist. Dieses Mal im Spielmodus Warship. Das im Format 6 gegen 6 ausgetragen wird. Neben dem eigentlichen Turnier wird das Außendesign bewertet. Die Bewertung des Außendedigns wird zu 70% Das SW Builderteam übernehmen und 30% die Userbewertung. Die prozentuale Bewertung soll dazu dienen, dass große Teams Ihr eigenes Design nicht hoch puschen können.
+
+Das Event findet am 08.11.2025 in der Version 1.21 mit dem aktuellen Regelwerk statt.
+
+~~Anmelde + Einsendeschluss 03.11.2025~~
+
+**Neue Fristen**:
+
+Einsendeschluss: 06.11.2025 23:59 Uhr  
+Hotfixschluss: 07.11.2025 23:59 Uhr  
+Der Anmeldeschluss bleibt der 03.11.2025
+
+zusätzlich wird es mit einem Designcontest begleitet.
+
+Design Regel: Halloween
+Arena: Lucifus
+
+Design Bewertung
+
+- Userbewertung (30%) wird über den Discord Community Server von SW organisiert. (Bilder vom Außendesign werden gepostet und per Abstimmung ausgelost)
+- Builderbewertung (70%) läuft nach folgende Kriterien ab.
+- Form des WS
+- Farbgestaltung
+- Muster
+- Thematisierung: Thema Halloween / Grusel
+
+Es wird also 3 Sieges- Plätze geben welch wie Folgt ermittelt wird.
+
+- Gesamtsieger: Höchste Fight Platzierung und Design Platzierung im Durchschnitt
+- Event- Sieger : Höchste Fight Platzierung
+- Designsieger: Bestes Design
+
+Das Warshipdesign vom Gesamtsieger wird bis zum nächsten Halloween in der Lobby ausgestellt. Wir freuen uns auf zahlreiche Anmeldungen und sind gespannt, welche Designs uns erwarten!
+Das Serverteam

src/content/announcements/de/SC-Eventplan.md

@@ -0,0 +1,39 @@
+---
+title: SpaceCraft Eventplan
+description: Der Kampfplan für das SpaceCraft Event am 29.6.
+key: SC-Eventplan
+created: 2025-06-28T00:00:00.000Z
+tags:
+  - SpaceCraft
+  - Event
+image: ../../../images/SpaceCraftWinners3.png
+---
+
+### Infos:
+Eventleitung: TheBreadBeard  
+
+Sollten fights zu schnell vorbei sein, ist eine vorverschiebung der folgenden fights möglich. In diesem Fall wird eine Pause von 10 Minuten garantiert.
+
+
+## Gruppen
+
+<group-table data-event="72" data-group="2"> </group-table>
+
+<group-table data-event="72" data-group="3"> </group-table>
+
+## Tabelle
+
+![](https://cdn.discordapp.com/attachments/690535200865910794/1388779302782501014/SPaceship_Eventplan.png?ex=68623904&is=6860e784&hm=5f32d5f34449aee7e2b58b9c16d657f0d3b08e2cd5b341a7b31559a1b1b30f27&)
+## Fights
+
+### Gruppenphase
+
+**Gruppe 1**
+<fight-table data-event="72" data-group="2"> </group-table>
+
+**Gruppe 2**
+<fight-table data-event="72" data-group="3"> </group-table>
+
+### KO-Phase
+
+<fight-table data-event="72" data-group="4"> </group-table>

src/content/announcements/de/mwgl.md

@@ -0,0 +1,25 @@
+---
+title: MiniWarGearLiga Ankündigung
+description: Die MiniWargear-Liga 2025 findet am 27./28. September statt.
+key: mwgl
+created: 2025-07-28T00:00:00.000Z
+tags:
+  - event
+  - miniwargear
+image: ../../../images/generated-image(8).png
+---
+
+**Ahoi Liebe Community,**
+
+Es ist wieder so weit – die MiniWargear-Liga findet auch dieses Jahr wieder statt.
+
+Infos zum Event:
+
+* Die MWGL findet am Wochenende des **27./28.09.2025** um **16 Uhr** statt.
+* Einsendeschluss ist der **22.09.2025** um 23:59 Uhr – bis dahin muss ein MWG gemäß Regelwerk vorhanden sein.
+* Hotfixes (geringe Änderungen wie z.B. das Fixen von Läufen usw.) dürfen bis zum **25.09.2025** um 23:59 Uhr nachgereicht werden.
+* Max. **4 Kämpfer** pro Team
+* Normales SW-MWG-Regelwerk mit automatischen Kanonen
+* Es wird einen eigenen Schem-Typ geben.
+* Der Schem-Name muss mit dem Teamkürzel enden.
+* Gefightet wird mit getrenntem Spectate- und Fightserver (wie bei der WGS)

src/content/announcements/de/mwgl_eventplan.md

@@ -0,0 +1,98 @@
+---
+title: MiniWarGearLiga Eventplan
+description: Der Eventplan für die MiniWargear-Liga 2025
+key: mwgl
+created: 2025-09-27T00:00:00.000Z
+tags:
+  - event
+  - miniwargear
+image: ../../../images/generated-image(8).png
+---
+
+## Spieltag 27.09.2025
+
+### Gruppenphase 1
+
+##### Gruppen
+
+| Gruppe 1 | Gruppe 2 | Gruppe 3 |
+|----------|----------|----------|
+| BF       | Borg     | MLT!     |
+| KT       | EXO      | Salo     |
+| ED       | PL       | FK       |
+
+In nachfolgenden Tabellen wird `W` für `Winner`/`Gewinner` stehen und `L` für `Loser`/`Verlierer`.
+
+| 27.09.2025 | Arena 1  | Ergebnis | Arena 2     | Ergebnis | Arena 3      | Ergebnis |
+|------------|----------|:--------:|-------------|:--------:|--------------|:--------:|
+| 16:00      | BF vs KT |    BF    | Borg vs EXO |   Borg   | MLT! vs Salo |   MLT!   |
+| 16:30      | BF vs ED |    ED    | Borg vs PL  |   Borg   | MLT! vs FK   |    FK    |
+| 17:00      | KT vs BF |    BF    | EXO vs PL   |    PL    | Salo vs MLT! |   Salo   |
+| 17:30      | ED vs BF |    BF    | Borg vs PL  |   Borg   | FK vs Salo   |   Salo   |
+
+### Gruppenphase 2
+
+##### Gruppen
+
+| Gruppe 1 | Gruppe 2 | Gruppe 3 |
+|----------|----------|----------|
+| BF       | ED       | MLT!     |
+| Borg     | PL       | EXO      |
+| Salo     | FK       | KT       |
+
+In nachfolgender Tabelle steht `Gr.` für `Gruppe` und das Wort `Platz` wird weggelassen.
+
+| 27.09.2025 | Arena 1      | Ergebnis | Arena 2  | Ergebnis | Arena 3     | Ergebnis |
+|------------|--------------|:--------:|----------|:--------:|-------------|:--------:|
+| 18:00      | BF vs Borg   |   Borg   | ED vs PL |    PL    | EXO vs KT   |   EXO    |
+| 18:30      | Borg vs Salo |   Borg   | PL vs FK |    FK    | EXO vs MLT! |   MLT!   |
+| 19:00      | BF vs Salo   |   Salo   | ED vs PL |    PL    | KT vs EXO   |   EXO    |
+| 19:30      | Borg vs Salo |   Salo   | FK vs PL |    FK    | MLT! vs EXO |   EXO    |
+
+KT wird disqualifiziert und tritt morgen nicht mehr an. Das Team belegt somit den 9. und damit letzten Platz.
+
+## Spieltag 28.09.2025
+
+### Leiter
+
+Die fights werden auf 5 Minuten an den vorherigen vorgezogen.
+
+| 28.09.2025 |             | Ergebnis |
+|------------|-------------|:--------:|
+| 16:00      | MLT! vs EXO |   EXO    |
+| 16:15      | EXO vs ED   |    ED    |
+| 16:25      | ED vs PL    |    PL    |
+| 16:40      | PL vs FK    |    FK    |
+| 16:55      | FK vs BF    |    FK    |
+
+### Spiel um Platz 3
+
+| 28.09.2025 |            | Ergebnis |
+|------------|------------|:--------:|
+| 17:15      | FK vs Borg |   Borg   |
+| 17:25      | FK vs Borg |   Borg   |
+| Entfällt   | FK vs Borg |    /     |
+
+### Spiel um Platz 2 und 1
+
+| 28.09.2025 |              | Ergebnis |
+|------------|--------------|:--------:|
+| 17:45      | Borg vs Salo |   Salo   |
+| 18:00      | Borg vs Salo |   Borg   |
+| 18:10      | Borg vs Salo |   Borg   |
+| 18:20      | Borg vs Salo |   Borg   |
+| entfällt   | Borg vs Salo |    /     |
+
+## Endplatzierung
+
+| Platz | Team |
+|-------|------|
+| 1.    | Borg |
+| 2.    | Salo |
+| 3.    | FK   |
+| 4.    | BF   |
+| 5.    | PL   |
+| 6.    | ED   |
+| 7.    | EXO  |
+| 8.    | MLT! |
+| 9.    | KT   |

src/content/announcements/de/spacheship-event-ankündigung-und-regelwerk.md

@@ -0,0 +1,164 @@
+---
+title: Spaceship Event Ankündigung und Regelwerk
+description: Alle Infos, Regeln und Termine zum ersten Spaceship-Event am 19.06.2025 – jetzt mit neuer TNT-Physik und ohne Gravitation!
+tags: 
+  - spaceship
+  - event
+created: 2025-05-25
+key: spaceship-event-ankuendigung-und-regelwerk
+---
+
+**Ahoi Community**
+
+Am 29.06. findet des erste Spaceship Event statt. Dieser Modus soll Airship ersetzen und hat die Besonderheit, dass TNT (und Sand) keine Gravitation hat. Gezündetes, ungebremstes TNT fliegt durch den typischen Sprung bei der Zündung zum Beispiel mit gleichbleibender Geschwindigkeit schräg nach oben.
+
+Die neue Physik nutzt ihr mit ***/nogravity*** auf dem Bau
+
+### Alle Infos zum Event:
+
+- Die Technik und das Design der Publics werden nochmal seperat Public gestellt. So könnt ihr, wenn ihr keine oder weniger eigene Technik bauen wollt, einfacher die Public technik verwenden.
+- Das Event findet am 29.06.2025 um 16 Uhr statt
+- Es gibt kein Entern
+- Kits können wie bei WG und MWG selbst erstellt werden
+- es wird Redstone TKO verwendet
+- Das Event findet in der 1.20 statt
+
+- **Einsendeschluss** am 24.06.2025 23:59 Uhr
+	- Bis zu diesem Zeitpunkt muss eine **dem Modus entsprechende Kampfmaschine** vorhanden sein
+- Bis zum 27.06.2025 23:59 Uhr **Hotfix-Phase**
+	- In dieser Phase dürfen lediglich Hotfixes eingesendet werden. Das bedeutet: Die Kampfmaschine darf **keine signifikanten Änderungen** erfahren. Es dürfen z. B. keine ganzen Kanonen ausgetauscht oder die Aufstellung verändert werden.
+- Die Teams ernennen jeweils einen Repräsentanten der das jeweilige Team vertritt und **gut erreichbar** ist
+- Es dürfen Maximal 2 Spieler pro Team an einem fight teilnehmen
+
+### RW Änderungen:
+
+- Es dürfen keine Blöcke über die Grenze des Designbereiches bewegt werden
+	- Das hat zur Folge: Kein slime und honey Limit
+- Wasser darf in Kanonen verwendet werden
+	- Dadurch könnt ihr TNT einfacher komprimieren. Wasser muss nicht mehr den Zweck erfüllen, die Kanone vor eigenem Schaden zu bewahren
+- 32 Projektile pro Seite
+- Unterpunkt: Crossbows
+- Es gibt keinen Techhider
+# Regelwerk für das Event:
+
+## Definitionen
+
+Ein AirShip ist eine beidseitig bewaffnete Struktur in Minecraft 1.20 und sieht flugfähig aus.
+
+## Maße
+
+
+**Technikbereich**:
+- 70 lang
+- 35 breit
+- 24 hoch
+
+**Designbereich**:
+- 130 lang
+- 51 breit
+- 32 hoch
+
+Technik, welche für die Funktion der Kanonen nicht relevant ist, darf sich in maßen auch im Design-Bereich befinden.
+
+Entfernung von Mitte zu Mitte des Gegners: 100 Block
+
+Es dürfen keine Blöcke über die Grenze des Designbereiches bewegt werden
+
+Panzerung darf nur im Technikbereich verbaut werden.
+
+## Projektile
+
+Ein Projektil ist ein gezündetes TNT, welches in die gegnerische Hälfte wechselt. Eine Kanone ist eine Vorrichtung zum Beschleunigen von Projektilen. Es ist verboten, mehrere Kanonen als eine Einzige auszugeben.
+
+Jeder Seite stehen bis zu 32 Projektile zur Verfügung. Sie müssen auf der dem Gegner zugewandten Seite oder, wenn beidseitig, in der Mitte gezündet werden
+
+## Crossbows
+
+Kanonen, welche, ohne nachgeladen werden zu müssen, mehrere Schüsse abgeben können, Müssen: 
+- Jeden Schuss das TNT an den selben Punkten zünden.
+- Für jedes Projektil das die Kanone für einen Schuss maximal zünden könnte, mindestens 1,5 Redstone Tick zwischen den Schüssen warten.
+
+##### Beispiele
+
+| Projektile | Ticks |
+|-------|------------|
+| 1 | 1,5 |
+| 2 | 3 |
+| 3 | 4,5 |
+| 4 | 6 |
+| ... | ... |
+| 8 | 12 |
+| 12 |  18 |
+| 16 | 24 |
+| ... | ... |
+| 32 | 48 |
+
+## Siegesbedingung
+
+- Ein AirShip wird zu 60% (nach prozentualer Redstonekomponenten) zerstört.
+- Alle Kämpfer eines AirShips sind tot.
+- Nach 10 Minuten wird ein Unentschieden eingeleitet.
+- Der Kampfleiter entscheidet.
+
+## Blöcke
+
+Es dürfen maximal je 32 TNT und 32 Werfer verbaut werden. Verbaute Blöcke dürfen einen TNT-Widerstand von maximal 6 haben. Ausgenommen davon ist Wasser, welches ausschließlich in Kanonen verbaut werden darf.
+
+Inventar-Blöcke dürfen nur mit Blumen, Honigflaschen und Pferderüstungen gefüllt sein. Zusätzlich dürfen sich in Kisten und Fässern TNT sowie in Werfern 2·64 Feuerbälle, 2·64 reguläre Pfeile oder 1 Eimer zum Aufheben von powdered Snow befinden.
+
+Zusätzlich verboten: Monster Spawner, Eis, Nether Portal, Silberfischsteine, Leuchtfeuer, unsichtbare Blöcke (Ausnahme: structure_void) Das Duplizieren von Blöcken und Entities ist verboten.
+Blöcke aus dem eigenen AS dürfen nicht in großer Menge entfernt werden.
+Bug-Using ist nicht erwünscht.
+
+# Versteckte Blöcke (Ersetzt durch Stein)
+
+- WATER
+- NOTE_BLOCK
+- POWERED_RAIL
+- DETECTOR_RAIL
+- PISTON
+- PISTON_HEAD
+- STICKY_PISTON
+- TNT
+- CHEST
+- TRAPPED_CHEST
+- REDSTONE_WIRE
+- STONE_PRESSURE_PLATE
+- IRON_DOOR
+- OAK_PRESSURE_PLATE
+- SPRUCE_PRESSURE_PLATE
+- BIRCH_PRESSURE_PLATE
+- JUNGLE_PRESSURE_PLATE
+- ACACIA_PRESSURE_PLATE
+- DARK_OAK_PRESSURE_PLATE
+- REDSTONE_TORCH
+- REDSTONE_WALL_TORCH
+- REPEATER
+- BREWING_STAND
+- TRIPWIRE_HOOK
+- TRIPWIRE
+- HEAVY_WEIGHTED_PRESSURE_PLATE
+- LIGHT_WEIGHTED_PRESSURE_PLATE
+- COMPARATOR
+- REDSTONE_BLOCK
+- HOPPER
+- ACTIVATOR_RAIL
+- DROPPER
+- SLIME_BLOCK
+- OBSERVER
+- HONEY_BLOCK
+- LEVER
+
+# Zusatzinhalte folgender Blöcke (z.B. Text, Inhalt von Inventaren) werden mit versteckt:
+
+- SIGN
+- DISPENSER
+- CHEST
+- TRAPPED_CHEST
+- FURNACE
+- BREWING_STAND
+- HOPPER
+- DROPPER
+- SHULKER_BOX
+- JUKEBOX
+- COMPARATOR