src/content/rules/de/warship.md aktualisiert

Updated miniwargear.md
2026-06-10 20:58:59 +02:00 · 2026-06-10 20:49:51 +02:00 · 2026-06-04 13:18:24 +02:00 · 2026-06-03 23:55:49 +02:00 · 2026-05-30 22:55:23 +02:00 · 2026-05-30 22:54:17 +02:00
170 changed files with 9870 additions and 1073 deletions
@@ -0,0 +1,88 @@
+name: SteamWar CI
+
+on:
+  push:
+    branches:
+      - master
+  pull_request:
+  workflow_dispatch:
+
+env:
+  PUBLIC_API_SERVER: https://api.steamwar.de
+
+jobs:
+  build:
+    name: Build
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v4
+        with:
+          version: 8.14.0
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 22
+          cache: pnpm
+
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+
+      - name: Write production environment
+        run: echo "PUBLIC_API_SERVER=${PUBLIC_API_SERVER}" > .env
+
+      - name: Compile i18n files
+        run: pnpm run i18n:compile
+
+      - name: Build website
+        run: pnpm run build
+
+      - name: Upload website artifact
+        uses: actions/upload-artifact@v3
+        with:
+          name: steamwar-website
+          path: dist/
+
+  deploy:
+    name: Deploy
+    runs-on: ubuntu-latest
+    needs: build
+    if: github.event_name == 'push' && github.ref == 'refs/heads/master'
+
+    steps:
+      - name: Download website artifact
+        uses: actions/download-artifact@v3
+        with:
+          name: steamwar-website
+          path: dist
+
+      - name: Upload website with scp
+        shell: bash
+        env:
+          DEPLOY_HOST: ${{ secrets.DEPLOY_HOST }}
+          DEPLOY_USER: ${{ secrets.DEPLOY_USER }}
+          DEPLOY_PORT: ${{ secrets.DEPLOY_PORT }}
+          DEPLOY_SSH_KEY: ${{ secrets.DEPLOY_SSH_KEY }}
+          DEPLOY_PATH: /var/www/html
+        run: |
+          set -euo pipefail
+
+          : "${DEPLOY_HOST:?Missing DEPLOY_HOST secret}"
+          : "${DEPLOY_USER:?Missing DEPLOY_USER secret}"
+          : "${DEPLOY_SSH_KEY:?Missing DEPLOY_SSH_KEY secret}"
+
+          port="${DEPLOY_PORT:-22}"
+
+          mkdir -p ~/.ssh
+          chmod 700 ~/.ssh
+          echo "$DEPLOY_SSH_KEY" > ~/.ssh/deploy_key
+          chmod 600 ~/.ssh/deploy_key
+          ssh-keyscan -p "$port" "$DEPLOY_HOST" >> ~/.ssh/known_hosts
+
+          ssh -i ~/.ssh/deploy_key -p "$port" "${DEPLOY_USER}@${DEPLOY_HOST}" "mkdir -p '$DEPLOY_PATH' && find '$DEPLOY_PATH' -mindepth 1 -maxdepth 1 -exec rm -rf {} +"
+          scp -i ~/.ssh/deploy_key -P "$port" -r dist/* "${DEPLOY_USER}@${DEPLOY_HOST}:$DEPLOY_PATH/"
@@ -19,11 +19,9 @@ pnpm-debug.log*

 # macOS-specific files
 .DS_Store
-/.astro-i18n/
 /bun.lockb
 /src/pages/de/
+/src/pages/en/
 /steamwar-website.zip
 /src/env.d.ts
-/src/pages/en/
 /.idea
-pnpm-lock.yaml
@@ -7,7 +7,7 @@
 - [Tailwind CSS](https://tailwindcss.com/)
 - [Day.js](https://day.js.org/)
 - [Chart.js](https://www.chartjs.org/)
- [astro-i18n](https://github.com/Alexandre-Fernandez/astro-i18n)
+- [Paraglide JS](https://inlang.com/m/gerre34r/library-inlang-paraglideJs)
 - [Flowbite Svelte](https://flowbite-svelte.com/)

 ## Building
@@ -28,8 +28,8 @@ pnpm run dev
 pnpm run build
 ```

-### i18n-sync
+### i18n Compile

 ```bash
-pnpm run i18n:sync
+pnpm run i18n:compile
 ```
@@ -1,40 +0,0 @@
-import type { AstroIntegration } from "astro";
-import { mkdir, access, constants, copyFile, rename } from "node:fs/promises";
-
-const locales = [
-    "en",
-    "de",
-];
-
-export default function configureI18n(): AstroIntegration {
-    return {
-        name: "astro-i18n-renamer",
-        hooks: {
-            "astro:build:done": async ({pages, dir, logger, routes}) => {
-                for (const page of pages) {
-                    const [locale, ...rest] = page.pathname.split("/");
-                    if (locales.includes(locale)) {
-                        const path = rest.join("/");
-                        const oldPath = `${dir.pathname}${page.pathname}`;
-                        const newPath = `${dir.pathname}${path}`;
-                        try {
-                            await access(cutPrefix(newPath), constants.R_OK | constants.W_OK);
-                        } catch (e) {
-                            await mkdir(cutPrefix(newPath), {recursive: true});
-                        }
-
-                        await copyFile(`${cutPrefix(oldPath)}index.html`, `${cutPrefix(newPath)}index.html.${locale}`);
-                        logger.info(`Copied ${oldPath}index.html to ${newPath}index.html.${locale}`);
-                    } else {
-                        const oldPath = cutPrefix(`${dir.pathname}${page.pathname}`);
-                        await rename(`${oldPath}index.html`, `${oldPath}index.html.de`);
-                    }
-                }
-            },
-        },
-    };
-}
-
-function cutPrefix(path: string): string {
-    return process.platform === "win32" ? path.substring(1) : path;
-}
@@ -1,27 +0,0 @@
-import { defineAstroI18nConfig } from "astro-i18n";
-
-export default defineAstroI18nConfig({
-    primaryLocale: "de",
-    secondaryLocales: ["en"],
-    fallbackLocale: "de",
-    trailingSlash: "never",
-    run: "client+server",
-    showPrimaryLocale: false,
-    translationLoadingRules: [],
-    translationDirectory: {},
-    translations: {},
-    routes: {
-        en: {
-            "jetzt-spielen": "join",
-            impressum: "imprint",
-            verhaltensrichtlinien: "code-of-conduct",
-            regeln: "rules",
-            rangliste: "ranked",
-            "haeufige-fragen": "faq",
-            statistiken: "stats",
-            ankuendigungen: "announcements",
-            datenschutzerklaerung: "privacy-policy",
-            "passwort-setzen": "set-password",
-        },
-    },
-});
@@ -1,8 +1,8 @@
-import { defineConfig, sharpImageService } from "astro/config";
+import { defineConfig, fontProviders, sharpImageService } from "astro/config";
 import svelte from "@astrojs/svelte";
-import tailwind from "@astrojs/tailwind";
-import configureI18n from "./astro-i18n.adapter";
+import tailwindcss from "@tailwindcss/vite";
 import sitemap from "@astrojs/sitemap";
+import { paraglideVitePlugin } from "@inlang/paraglide-js";

 import robotsTxt from "astro-robots-txt";
 import path from "node:path";
@@ -12,7 +12,68 @@ import starlight from "@astrojs/starlight";

 // https://astro.build/config
 export default defineConfig({
+    fonts: [{
+        provider: fontProviders.google(),
+        name: "Roboto",
+        cssVariable: "--font-roboto",
+    }, {
+        provider: fontProviders.local(),
+        name: "Barlow Condensed",
+        cssVariable: "--font-barlow-condensed",
+        options: {
+            variants: [
+                {
+                    src: ["./src/assets/fonts/barlow-condensed/barlow-condensed-regular.woff2"],
+                    weight: "400",
+                    style: "normal",
+                }, {
+                    src: ["./src/assets/fonts/barlow-condensed/barlow-condensed-medium.woff2"],
+                    weight: "500",
+                    style: "normal"
+                }, {
+                    src: ["./src/assets/fonts/barlow-condensed/barlow-condensed-bold.woff2"],
+                    weight: "700",
+                    style: "normal"
+                }, {
+                    src: ["./src/assets/fonts/barlow-condensed/barlow-condensed-italic.woff2"],
+                    weight: "400",
+                    style: "italic"
+                }, {
+                    src: ["./src/assets/fonts/barlow-condensed/barlow-condensed-medium-italic.woff2"],
+                    weight: "500",
+                    style: "italic"
+                }, {
+                    src: ["./src/assets/fonts/barlow-condensed/barlow-condensed-bold-italic.woff2"],
+                    weight: "700",
+                    style: "italic"
+                }, {
+                    src: ["./src/assets/fonts/barlow-condensed/barlow-condensed-black.woff2"],
+                    weight: "900",
+                    style: "normal"
+                }, {
+                    src: ["./src/assets/fonts/barlow-condensed/barlow-condensed-black-italic.woff2"],
+                    weight: "900",
+                    style: "italic"
+                }, {
+                    src: ["./src/assets/fonts/barlow-condensed/barlow-condensed-light.woff2"],
+                    weight: "300",
+                    style: "normal"
+                }, {
+                    src: ["./src/assets/fonts/barlow-condensed/barlow-condensed-light-italic.woff2"],
+                    weight: "300",
+                    style: "italic"
+                }
+            ]
+        }
+    }],
    output: "static",
+    i18n: {
+        defaultLocale: "de",
+        locales: ["de", "en"],
+        routing: {
+            prefixDefaultLocale: false,
+        },
+    },
    image: {
        service: sharpImageService(),
    },
@@ -43,13 +104,9 @@ export default defineConfig({
                baseUrl: "https://git.steamwar.de/SteamWar/Website/src/branch/master/",
            },
        }),
-        tailwind({
-            configFile: "./tailwind.config.js",
-            applyBaseStyles: false,
-        }),
        sitemap({
            i18n: {
-                defaultLocale: "en",
+                defaultLocale: "de",
                locales: {
                    en: "en-US",
                    de: "de-DE",
@@ -82,6 +139,15 @@ export default defineConfig({
        mdx(),
    ],
    vite: {
+        plugins: [
+            paraglideVitePlugin({
+                project: "./project.inlang",
+                outdir: "./src/paraglide",
+                strategy: ["url", "globalVariable", "baseLocale"],
+                emitTsDeclarations: true,
+            }),
+            tailwindcss(),
+        ],
        resolve: {
            alias: {
                "@components": path.resolve("./src/components"),
@@ -3,87 +3,80 @@
    "type": "module",
    "version": "0.0.1",
    "scripts": {
-        "dev": "astro dev",
-        "start": "astro dev",
-        "build": "astro build",
+        "dev": "pnpm run i18n:generate:pages && astro dev",
+        "start": "pnpm run dev",
+        "build": "pnpm run i18n:generate:pages && 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",
+        "i18n:generate:pages": "node scripts/generate-en-pages.mjs",
+        "i18n:compile": "paraglide-js compile --project ./project.inlang --outdir ./src/paraglide --strategy url globalVariable baseLocale --emit-ts-declarations && pnpm run i18n:generate:pages",
        "clean:dist": "rm -rf dist",
        "clean:node_modules": "rm -rf node_modules",
-        "ci": "pnpm install && pnpm run i18n:sync && pnpm run build"
+        "ci": "pnpm install && 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",
+        "@astrojs/svelte": "^8.1.1",
+        "@internationalized/date": "^3.12.1",
+        "@lucide/svelte": "^1.16.0",
+        "@tailwindcss/vite": "^4.3.0",
+        "@types/color": "^4.2.1",
        "@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",
+        "@types/node": "^25.9.0",
+        "@types/three": "^0.184.1",
+        "@typescript-eslint/eslint-plugin": "^8.59.4",
+        "@typescript-eslint/parser": "^8.59.4",
+        "autoprefixer": "^10.5.0",
+        "bits-ui": "2.18.1",
        "clsx": "^2.1.1",
-        "cmdk-sv": "^0.0.18",
-        "cssnano": "^7.0.7",
+        "cssnano": "^8.0.1",
        "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"
+        "esbuild": "^0.28.0",
+        "eslint": "^10.4.0",
+        "eslint-plugin-astro": "^1.7.0",
+        "eslint-plugin-svelte": "^3.17.1",
+        "formsnap": "2.0.1",
+        "mode-watcher": "^1.1.0",
+        "paneforge": "^1.0.2",
+        "postcss-nesting": "^14.0.0",
+        "sass": "^1.99.0",
+        "svelte": "^5.55.8",
+        "svelte-sonner": "^1.1.1",
+        "tailwind-merge": "^3.6.0",
+        "tailwind-variants": "^3.2.2",
+        "tailwindcss": "^4.3.0",
+        "three": "^0.184.0",
+        "typescript": "^6.0.3",
+        "zod": "^4.4.3"
    },
    "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",
+        "@astrojs/mdx": "^5.0.6",
+        "@astrojs/sitemap": "^3.7.2",
+        "@astrojs/starlight": "^0.39.2",
+        "@astrojs/starlight-tailwind": "^5.0.0",
+        "@codemirror/commands": "^6.10.3",
+        "@codemirror/lang-json": "^6.0.2",
+        "@codemirror/view": "^6.43.0",
+        "@ddietr/codemirror-themes": "^1.5.2",
+        "@inlang/paraglide-js": "^2.18.0",
        "@tanstack/table-core": "^8.21.3",
-        "astro": "5.7.14",
-        "astro-i18n": "^2.2.4",
+        "astro": "6.3.5",
        "astro-robots-txt": "^1.0.0",
-        "astro-seo": "^0.8.4",
-        "chart.js": "^4.4.9",
+        "astro-seo": "^1.1.0",
+        "chart.js": "^4.5.1",
        "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",
+        "codemirror": "^6.0.2",
+        "color": "^5.0.3",
+        "dayjs": "^1.11.20",
+        "easymde": "^2.21.0",
+        "flowbite": "^4.0.2",
+        "flowbite-svelte": "^1.33.1",
+        "flowbite-svelte-icons": "^3.1.0",
+        "js-yaml": "^4.1.1",
+        "qs": "^6.15.2",
+        "sharp": "^0.34.5",
        "svelte-awesome": "^3.3.5",
-        "svelte-spa-router": "^4.0.1"
+        "svelte-spa-router": "^5.1.0"
    },
    "pnpm": {
        "onlyBuiltDependencies": [
@@ -4,6 +4,6 @@ module.exports = {
    plugins: [
        require('autoprefixer'),
        require('cssnano'),
-        require("tailwindcss/nesting"),
+        require("postcss-nesting"),
    ]
 };
@@ -0,0 +1,11 @@
+{
+    "$schema": "https://inlang.com/schema/project-settings",
+    "baseLocale": "de",
+    "locales": ["de", "en"],
+    "modules": [
+        "https://cdn.jsdelivr.net/npm/@inlang/plugin-message-format@latest/dist/index.js"
+    ],
+    "plugin.inlang.messageFormat": {
+        "pathPattern": "./src/i18n/common/{locale}.json"
+    }
+}
@@ -1,145 +0,0 @@
-/* barlow-condensed-thin */
-@font-face {
-	font-family: Barlow Condensed;
-	font-style: normal;
-	font-weight: 100;
-	src: local("Barlow Condensed Thin"), local("BarlowCondensed-Thin"), url(barlow-condensed-thin.woff2) format("woff2");
-	font-display: swap;
-}
-/* barlow-condensed-thin-italic */
-@font-face {
-	font-family: Barlow Condensed;
-	font-style: italic;
-	font-weight: 100;
-	src: local("Barlow Condensed Thin Italic"), local("BarlowCondensed-ThinItalic"), url(barlow-condensed-thin-italic.woff2) format("woff2");
-	font-display: swap;
-}
-/* barlow-condensed-extralight */
-@font-face {
-	font-family: Barlow Condensed;
-	font-style: normal;
-	font-weight: 400;
-	src: local("Barlow Condensed ExtraLight"), local("BarlowCondensed-ExtraLight"), url(barlow-condensed-extralight.woff2) format("woff2");
-	font-display: swap;
-}
-/* barlow-condensed-extralight-italic */
-@font-face {
-	font-family: Barlow Condensed;
-	font-style: italic;
-	font-weight: 400;
-	src: local("Barlow Condensed ExtraLight Italic"), local("BarlowCondensed-ExtraLightItalic"), url(barlow-condensed-extralight-italic.woff2) format("woff2");
-	font-display: swap;
-}
-/* barlow-condensed-light */
-@font-face {
-	font-family: Barlow Condensed;
-	font-style: normal;
-	font-weight: 300;
-	src: local("Barlow Condensed Light"), local("BarlowCondensed-Light"), url(barlow-condensed-light.woff2) format("woff2");
-	font-display: swap;
-}
-/* barlow-condensed-light-italic */
-@font-face {
-	font-family: Barlow Condensed;
-	font-style: italic;
-	font-weight: 300;
-	src: local("Barlow Condensed Light Italic"), local("BarlowCondensed-LightItalic"), url(barlow-condensed-light-italic.woff2) format("woff2");
-	font-display: swap;
-}
-/* barlow-condensed-regular */
-@font-face {
-	font-family: Barlow Condensed;
-	font-style: normal;
-	font-weight: 400;
-	src: local("Barlow Condensed Regular"), local("BarlowCondensed-Regular"), url(barlow-condensed-regular.woff2) format("woff2");
-	font-display: swap;
-}
-/* barlow-condensed-italic */
-@font-face {
-	font-family: Barlow Condensed;
-	font-style: italic;
-	font-weight: 400;
-	src: local("Barlow Condensed Italic"), local("BarlowCondensed-Italic"), url(barlow-condensed-italic.woff2) format("woff2");
-	font-display: swap;
-}
-/* barlow-condensed-medium */
-@font-face {
-	font-family: Barlow Condensed;
-	font-style: normal;
-	font-weight: 500;
-	src: local("Barlow Condensed Medium"), local("BarlowCondensed-Medium"), url(barlow-condensed-medium.woff2) format("woff2");
-	font-display: swap;
-}
-/* barlow-condensed-medium-italic */
-@font-face {
-	font-family: Barlow Condensed;
-	font-style: italic;
-	font-weight: 500;
-	src: local("Barlow Condensed Medium Italic"), local("BarlowCondensed-MediumItalic"), url(barlow-condensed-medium-italic.woff2) format("woff2");
-	font-display: swap;
-}
-/* barlow-condensed-semibold */
-@font-face {
-	font-family: Barlow Condensed;
-	font-style: normal;
-	font-weight: 400;
-	src: local("Barlow Condensed SemiBold"), local("BarlowCondensed-SemiBold"), url(barlow-condensed-semibold.woff2) format("woff2");
-	font-display: swap;
-}
-/* barlow-condensed-semibold-italic */
-@font-face {
-	font-family: Barlow Condensed;
-	font-style: italic;
-	font-weight: 400;
-	src: local("Barlow Condensed SemiBold Italic"), local("BarlowCondensed-SemiBoldItalic"), url(barlow-condensed-semibold-italic.woff2) format("woff2");
-	font-display: swap;
-}
-/* barlow-condensed-bold */
-@font-face {
-	font-family: Barlow Condensed;
-	font-style: normal;
-	font-weight: 700;
-	src: local("Barlow Condensed Bold"), local("BarlowCondensed-Bold"), url(barlow-condensed-bold.woff2) format("woff2");
-	font-display: swap;
-}
-/* barlow-condensed-bold-italic */
-@font-face {
-	font-family: Barlow Condensed;
-	font-style: italic;
-	font-weight: 700;
-	src: local("Barlow Condensed Bold Italic"), local("BarlowCondensed-BoldItalic"), url(barlow-condensed-bold-italic.woff2) format("woff2");
-	font-display: swap;
-}
-/* barlow-condensed-extrabold */
-@font-face {
-	font-family: Barlow Condensed;
-	font-style: normal;
-	font-weight: 400;
-	src: local("Barlow Condensed ExtraBold"), local("BarlowCondensed-ExtraBold"), url(barlow-condensed-extrabold.woff2) format("woff2");
-	font-display: swap;
-}
-/* barlow-condensed-extrabold-italic */
-@font-face {
-	font-family: Barlow Condensed;
-	font-style: italic;
-	font-weight: 400;
-	src: local("Barlow Condensed ExtraBold Italic"), local("BarlowCondensed-ExtraBoldItalic"), url(barlow-condensed-extrabold-italic.woff2) format("woff2");
-	font-display: swap;
-}
-/* barlow-condensed-black */
-@font-face {
-	font-family: Barlow Condensed;
-	font-style: normal;
-	font-weight: 900;
-	src: local("Barlow Condensed Black"), local("BarlowCondensed-Black"), url(barlow-condensed-black.woff2) format("woff2");
-	font-display: swap;
-}
-/* barlow-condensed-black-italic */
-@font-face {
-	font-family: Barlow Condensed;
-	font-style: italic;
-	font-weight: 900;
-	src: local("Barlow Condensed Black Italic"), local("BarlowCondensed-BlackItalic"), url(barlow-condensed-black-italic.woff2) format("woff2");
-	font-display: swap;
-}
-
@@ -1,108 +0,0 @@
-/*
- *   This file is a part of the SteamWar software.
- *
- *   Copyright (C) 2024 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/>.
- */
-
-/*
-This file was generated by font-facer from the font files in the dir:
-.
-*/
-
-@font-face {
-    font-family: "Roboto";
-    font-weight: 100;
-    font-style: normal;
-    src: url('./Roboto-Thin.ttf');
-}
-
-@font-face {
-    font-family: "Roboto";
-    font-weight: 100;
-    font-style: italic;
-    src: url('./Roboto-ThinItalic.ttf');
-}
-
-@font-face {
-    font-family: "Roboto";
-    font-weight: 300;
-    font-style: normal;
-    src: url('./Roboto-Light.ttf');
-}
-
-@font-face {
-    font-family: "Roboto";
-    font-weight: 300;
-    font-style: italic;
-    src: url('./Roboto-LightItalic.ttf');
-}
-
-@font-face {
-    font-family: "Roboto";
-    font-weight: 400;
-    font-style: normal;
-    src: url('./Roboto-Regular.ttf');
-}
-
-@font-face {
-    font-family: "Roboto";
-    font-weight: 400;
-    font-style: italic;
-    src: url('./Roboto-Italic.ttf');
-}
-
-@font-face {
-    font-family: "Roboto";
-    font-weight: 500;
-    font-style: normal;
-    src: url('./Roboto-Medium.ttf');
-}
-
-@font-face {
-    font-family: "Roboto";
-    font-weight: 500;
-    font-style: italic;
-    src: url('./Roboto-MediumItalic.ttf');
-}
-
-@font-face {
-    font-family: "Roboto";
-    font-weight: 700;
-    font-style: normal;
-    src: url('./Roboto-Bold.ttf');
-}
-
-@font-face {
-    font-family: "Roboto";
-    font-weight: 700;
-    font-style: italic;
-    src: url('./Roboto-BoldItalic.ttf');
-}
-
-@font-face {
-    font-family: "Roboto";
-    font-weight: 900;
-    font-style: normal;
-    src: url('./Roboto-Black.ttf');
-}
-
-@font-face {
-    font-family: "Roboto";
-    font-weight: 900;
-    font-style: italic;
-    src: url('./Roboto-BlackItalic.ttf');
-}
-
@@ -0,0 +1,111 @@
+import { mkdir, rm, writeFile, readFile } from "node:fs/promises";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+
+const root = path.resolve(path.dirname(fileURLToPath(import.meta.url)), "..");
+const pagesDir = path.join(root, "src", "pages");
+const locale = "en";
+const outputDir = path.join(pagesDir, locale);
+
+const routeTranslations = new Map([
+    ["jetzt-spielen", "join"],
+    ["impressum", "imprint"],
+    ["verhaltensrichtlinien", "code-of-conduct"],
+    ["regeln", "rules"],
+    ["rangliste", "ranked"],
+    ["haeufige-fragen", "faq"],
+    ["statistiken", "stats"],
+    ["ankuendigungen", "announcements"],
+    ["datenschutzerklaerung", "privacy-policy"],
+    ["passwort-setzen", "set-password"],
+]);
+
+const pages = await collectAstroPages(pagesDir);
+
+await rm(outputDir, { recursive: true, force: true });
+
+for (const page of pages) {
+    const relativePage = path.relative(pagesDir, page);
+    const segments = relativePage.split(path.sep);
+
+    if (segments[0] === locale || segments[0] === "de") {
+        continue;
+    }
+
+    const outputSegments = translateSegments(segments);
+    const outFile = path.join(outputDir, ...outputSegments);
+    const source = await readFile(page, "utf8");
+    const hasGetStaticPaths = /\bexport\s+(?:const|async\s+function|function)\s+getStaticPaths\b/.test(source);
+
+    await mkdir(path.dirname(outFile), { recursive: true });
+    await writeFile(outFile, createProxyPage(page, outFile, hasGetStaticPaths));
+}
+
+function translateSegments(segments) {
+    const translated = [...segments];
+
+    if (translated[0] !== "index.astro" && !translated[0].startsWith("[")) {
+        translated[0] = routeTranslations.get(translated[0]) ?? translated[0];
+    }
+
+    const file = translated.pop();
+    const name = file.slice(0, -".astro".length);
+
+    if (name !== "index") {
+        translated.push(name);
+    }
+
+    translated.push("index.astro");
+    return translated;
+}
+
+function createProxyPage(sourceFile, outFile, hasGetStaticPaths) {
+    const outDir = path.dirname(outFile);
+    const importPath = normalizeImportPath(path.relative(outDir, sourceFile));
+    const lines = [
+        "---",
+        `import Page from "${importPath}";`,
+    ];
+
+    if (hasGetStaticPaths) {
+        lines.push(
+            `import { getStaticPaths as proxyGetStaticPaths } from "${importPath}";`,
+            `export const getStaticPaths = (props) => proxyGetStaticPaths({ ...props, astroI18n: { locale: "${locale}" } });`,
+        );
+    }
+
+    lines.push(
+        "const { props } = Astro;",
+        "---",
+        "",
+        "<Page {...props} />",
+        "",
+    );
+
+    return lines.join("\n");
+}
+
+function normalizeImportPath(importPath) {
+    const normalized = importPath.split(path.sep).join("/");
+    return normalized.startsWith(".") ? normalized : `./${normalized}`;
+}
+
+async function collectAstroPages(dir) {
+    const entries = await import("node:fs/promises").then(({ readdir }) => readdir(dir, { withFileTypes: true }));
+    const files = [];
+
+    for (const entry of entries) {
+        const fullPath = path.join(dir, entry.name);
+
+        if (entry.isDirectory()) {
+            files.push(...await collectAstroPages(fullPath));
+            continue;
+        }
+
+        if (entry.isFile() && entry.name.endsWith(".astro")) {
+            files.push(fullPath);
+        }
+    }
+
+    return files;
+}
@@ -66,14 +66,21 @@
        transition: scale 300ms cubic-bezier(0.2, 3, 0.67, 0.6);

        :global(h1) {
-            @apply text-xl font-bold mt-4;
+            margin-top: 1rem;
+            font-size: 1.25rem;
+            line-height: 1.75rem;
+            font-weight: 700;
            font-family: "Barlow Condensed", sans-serif;
            letter-spacing: 0.06em;
        }

        :global(svg) {
            color: #f59e0b;
-            @apply transition-transform duration-300 ease-in-out hover:scale-110;
+            transition: transform 300ms ease-in-out;
+        }
+
+        :global(svg:hover) {
+            transform: scale(1.1);
        }
    }

@@ -18,7 +18,7 @@
  -->

 <script lang="ts">
-    import {t} from "astro-i18n"
+    import {t} from "$lib/i18n"
    import UserInfo from "./dashboard/UserInfo.svelte";
    import {dataRepo} from "@repo/data.ts";
    import UploadModal from "@components/dashboard/UploadModal.svelte";
@@ -18,7 +18,7 @@
  -->

 <script lang="ts">
-    import {t} from "astro-i18n";
+    import {t} from "$lib/i18n";
    import {statsRepo} from "@repo/stats.ts";
    import "@styles/table.css"

@@ -19,7 +19,7 @@

 <script lang="ts">
    import FightStatsChart from "./FightStatsChart.svelte";
-    import { t } from "astro-i18n";
+    import { t } from "$lib/i18n";
    import { statsRepo } from "@repo/stats.ts";

    let request = getStats();
@@ -20,7 +20,7 @@

 <script lang="ts">
    import { window } from "./utils.ts";
-    import { astroI18n, t } from "astro-i18n";
+    import { astroI18n, t } from "$lib/i18n";
    import type { EventFight, ExtendedEvent } from "@type/event";
    import "@styles/table.css";

@@ -20,7 +20,7 @@

 <script lang="ts">
    import { window } from "./utils.ts";
-    import { t } from "astro-i18n";
+    import { t } from "$lib/i18n";
    import type { ExtendedEvent } from "@type/event.ts";
    import "@styles/table.css";

@@ -1,5 +1,5 @@
 ---
-import { t } from "astro-i18n";
+import { t } from "$lib/i18n";
 ---

 <div class="border-l-2 border-amber-500 bg-amber-500/5 p-4" role="alert">
@@ -20,7 +20,7 @@
 <script lang="ts">
    import { preventDefault } from "svelte/legacy";
    import { l } from "@utils/util.ts";
-    import { t } from "astro-i18n";
+    import { t } from "$lib/i18n";
    import { get } from "svelte/store";
    import { navigate } from "astro:transitions/client";
    import { onMount } from "svelte";
@@ -20,10 +20,10 @@
 <script lang="ts">
    import "../styles/button.css";
    import { CaretDownOutline, GlobeOutline } from "flowbite-svelte-icons";
-    import { t, l } from "astro-i18n";
+    import { t, l } from "$lib/i18n";
    import { onMount } from "svelte";
    import { loggedIn } from "@repo/authv2.ts";
-    import { astroI18n } from "astro-i18n";
+    import { astroI18n } from "$lib/i18n";
    interface Props {
        logo?: import("svelte").Snippet;
    }
@@ -1,7 +1,7 @@
 ---
 import type { CollectionEntry } from "astro:content";
 import { l } from "../util/util";
-import { astroI18n } from "astro-i18n";
+import { astroI18n, stripLocaleFromPath } from "$lib/i18n";
 import { Image } from "astro:assets";
 import TagComponent from "./TagComponent.astro";
 import P from "./P.astro";
@@ -19,7 +19,7 @@ const {
    slim: boolean;
 } = Astro.props as Props;

-const postUrl = l(`/announcements/${post.slug.split("/").slice(1).join("/")}`);
+const postUrl = l(`/announcements/${stripLocaleFromPath(post.id)}`);
 ---

 <Card extraClasses={`w-full items-start mx-0 ${slim ? "m-0 p-2 backdrop-blur-xl bg-transparent border-0" : "border-t-2 border-t-amber-500/30"}`} hoverEffect={false}>
@@ -18,7 +18,7 @@
  -->

 <script lang="ts">
-    import { t } from "astro-i18n"
+    import { t } from "$lib/i18n"
    import {server} from "./stores/stores.ts";

    function generateVersionString(version: string): string {
@@ -116,6 +116,6 @@

 <style>
    li {
-        @apply py-2;
+        padding-block: 0.5rem;
    }
 </style>
@@ -18,7 +18,7 @@
  -->

 <script lang="ts">
-    import {astroI18n, t} from "astro-i18n";
+    import {astroI18n, t} from "$lib/i18n";
    import {CheckSolid, XCircleOutline} from "flowbite-svelte-icons";
    import type {SchematicInfo} from "@type/schem.ts";
    import {createEventDispatcher} from "svelte";
@@ -20,7 +20,7 @@
 <script lang="ts">
  import { preventDefault } from 'svelte/legacy';

-    import {t} from "astro-i18n";
+    import {t} from "$lib/i18n";
    import {
        ChevronDoubleRightOutline,
        FolderOutline,
@@ -143,15 +143,32 @@

 <style lang="postcss">
  table {
-    @apply w-full;
+    width: 100%;
  }

  tr {
-    @apply transition-colors cursor-pointer border-b
-        dark:hover:bg-gray-800 hover:bg-gray-300;
+    cursor: pointer;
+    border-bottom: 1px solid #e5e7eb;
+    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
+    transition-duration: 150ms;
+  }
+
+  tr:hover {
+    background-color: #d1d5db;
+  }
+
+  :global(.dark) tr:hover {
+    background-color: #1f2937;
  }

  th {
-    @apply text-left py-4 md:px-2;
+    padding-block: 1rem;
+    text-align: left;
+  }
+
+  @media (min-width: 768px) {
+    th {
+      padding-inline: 0.5rem;
+    }
  }
 </style>
@@ -21,7 +21,7 @@
  import { createBubbler, preventDefault } from 'svelte/legacy';

  const bubble = createBubbler();
-    import {astroI18n, t} from "astro-i18n";
+    import {astroI18n, t} from "$lib/i18n";
    import {CheckSolid, FileOutline, FolderOutline, XCircleOutline} from "flowbite-svelte-icons";
    import type {Schematic} from "@type/schem.ts";
    import type {Player} from "@type/data.ts";
@@ -82,11 +82,32 @@

 <style lang="scss">
    tr {
-        @apply transition-colors cursor-pointer border-b border-gray-300
-            dark:hover:bg-gray-800 hover:bg-gray-300 dark:border-neutral-700;
+        cursor: pointer;
+        border-bottom: 1px solid #d1d5db;
+        transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
+        transition-duration: 150ms;
+    }
+
+    tr:hover {
+        background-color: #d1d5db;
+    }
+
+    :global(.dark) tr {
+        border-bottom-color: #404040;
+    }
+
+    :global(.dark) tr:hover {
+        background-color: #1f2937;
    }

    th {
-        @apply text-left py-4 md:px-2;
+        padding-block: 1rem;
+        text-align: left;
+    }
+
+    @media (min-width: 768px) {
+        th {
+            padding-inline: 0.5rem;
+        }
    }
 </style>
@@ -19,7 +19,7 @@

 <script lang="ts">
    import type {Player} from "@type/data.ts";
-    import {astroI18n, t} from "astro-i18n"
+    import {astroI18n, t} from "$lib/i18n"
    import {statsRepo} from "@repo/stats.ts";

  interface Props {
@@ -21,7 +21,7 @@
    import {createEventDispatcher} from "svelte";
    import {schemRepo} from "@repo/schem.ts";
    import SWModal from "@components/styled/SWModal.svelte";
-    import {t} from "astro-i18n";
+    import {t} from "$lib/i18n";

    const dispatch = createEventDispatcher();

@@ -18,7 +18,7 @@
  -->

 <script lang="ts">
-    import { t } from "astro-i18n";
+    import { t } from "$lib/i18n";
    import type { Player } from "@type/data.ts";
    import { l } from "@utils/util.ts";
    import Statistics from "./Statistics.svelte";
@@ -3,7 +3,7 @@
    import "dayjs/locale/de";
    import type { ExtendedEvent } from "../types/event";
    import { Button } from "../ui/button";
-    import { ChevronLeft, ChevronRight } from "lucide-svelte";
+    import { ChevronLeft, ChevronRight } from "@lucide/svelte";
    import * as Card from "../ui/card";
    import EventCard from "./EventCard.svelte";
    import SWButton from "@components/styled/SWButton.svelte";
@@ -1,8 +1,8 @@
 <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 { Calendar } from "@lucide/svelte";
+    import { List } from "@lucide/svelte";
    import EventList from "./EventList.svelte";
    import CalendarView from "./Calendar.svelte";

@@ -15,12 +15,10 @@
        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[][] {
+    function detectRounds(fights: EventFight[], groupingTimeMinutes: number): EventFight[][] {
        if (!fights || fights.length === 0) return [];

-        const TEN_MIN_MS = 10 * 60 * 1000;
+        const groupingTimeMs = Math.max(1, Math.floor(groupingTimeMinutes || 10)) * 60 * 1000;
        const sorted = [...fights].sort((a, b) => a.start - b.start);

        const rounds: EventFight[][] = [];
@@ -28,7 +26,7 @@
        let roundStart = sorted[0].start;

        for (const fight of sorted) {
-            if (fight.start - roundStart <= TEN_MIN_MS) {
+            if (fight.start - roundStart <= groupingTimeMs) {
                currentRound.push(fight);
            } else {
                if (currentRound.length) rounds.push(currentRound);
@@ -61,8 +59,9 @@
 {#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 rounds = detectRounds(fights, config.roundGroupingTimeMinutes ?? 10)}
    {@const roundRows = config.roundRows ?? 1}
+    {@const roundPrefix = config.roundPrefix ?? "Runde"}
    {@const roundRowsChunked = chunkIntoRows(rounds, roundRows)}
    <div class="flex">
        <div>
@@ -83,7 +82,7 @@
                        {@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}">
+                            <EventCard title={`${roundPrefix} ${roundIndex + 1}`}>
                                {#each round as fight}
                                    <EventFightChip {event} {fight} {group} />
                                {/each}
@@ -4,6 +4,8 @@ export const GroupViewSchema = z.object({
    type: z.literal("GROUP"),
    groups: z.array(z.number()),
    roundRows: z.number().int().positive().optional().default(1),
+    roundGroupingTimeMinutes: z.number().int().positive().optional().default(10),
+    roundPrefix: z.enum(["Runde", "Tag"]).optional().default("Runde"),
 });

 export type GroupViewConfig = z.infer<typeof GroupViewSchema>;
@@ -8,7 +8,7 @@
    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 { 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";
@@ -2,7 +2,7 @@
    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 { 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";
@@ -7,7 +7,7 @@
    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 { 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";
@@ -18,14 +18,14 @@
  -->

 <script lang="ts">
-    import { location } from "svelte-spa-router";
+    import { router } 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-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>
+    <a href="#/" class="hover:text-primary text-sm font-medium transition-colors" class:text-muted-foreground={router.location !== "/"}> Dashboard </a>
+    <a href="#/events" class="hover:text-primary text-sm font-medium transition-colors" class:text-muted-foreground={!router.location.startsWith("/event")}> Events </a>
+    <a href="#/players" class="hover:text-primary text-sm font-medium transition-colors" class:text-muted-foreground={router.location !== "/players"}> Players </a>
+    <a href="#/pages" class="hover:text-primary text-sm font-medium transition-colors" class:text-muted-foreground={router.location !== "/pages"}> Pages </a>
+    <a href="#/schematics" class="hover:text-primary text-sm font-medium transition-colors" class:text-muted-foreground={router.location !== "/schematics"}> Schematics </a>
+    <a href="#/logs" class="hover:text-primary text-sm font-medium transition-colors" class:text-muted-foreground={router.location !== "/logs"}> Logs </a>
 </nav>
@@ -25,10 +25,10 @@
    import DateTimePicker from "@components/ui/datetime-picker/DateTimePicker.svelte";
    import { fromAbsolute } from "@internationalized/date";
    import { Button, buttonVariants } from "@components/ui/button";
-    import { ChevronsUpDown } from "lucide-svelte";
+    import { ChevronsUpDown } from "@lucide/svelte";
    import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "@components/ui/command";
    import { schemTypes } from "@stores/stores.ts";
-    import Check from "lucide-svelte/icons/check";
+    import Check from "@lucide/svelte/icons/check";
    import { cn } from "@components/utils.ts";
    import { Switch } from "@components/ui/switch";
    import { eventRepo } from "@repo/event.ts";
@@ -34,7 +34,7 @@
    import GroupEditDialog from "./GroupEditDialog.svelte";
    import GroupResultsDialog from "./GroupResultsDialog.svelte";
    import type { ResponseGroups } from "@type/event";
-    import { EditIcon, GroupIcon, LinkIcon } from "lucide-svelte";
+    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";
@@ -1,7 +1,7 @@
 <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 { 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";
@@ -25,7 +25,7 @@
    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 { PlusIcon } from "@lucide/svelte";
    import dayjs from "dayjs";
    import { fromAbsolute, now, ZonedDateTime } from "@internationalized/date";

@@ -12,7 +12,7 @@
    import { Slider } from "@components/ui/slider";
    import { fromAbsolute } from "@internationalized/date";
    import dayjs from "dayjs";
-    import { Plus, Shuffle } from "lucide-svelte";
+    import { Plus, Shuffle } from "@lucide/svelte";
    import { replace } from "svelte-spa-router";

    let { data }: { data: ExtendedEvent } = $props();
@@ -12,7 +12,7 @@
    import { Slider } from "@components/ui/slider";
    import { fromAbsolute } from "@internationalized/date";
    import dayjs from "dayjs";
-    import { Plus, Shuffle } from "lucide-svelte";
+    import { Plus, Shuffle } from "@lucide/svelte";
    import { replace } from "svelte-spa-router";

    let { data }: { data: ExtendedEvent } = $props();
@@ -16,7 +16,7 @@
    import { Slider } from "@components/ui/slider";
    import { fromAbsolute, fromDate, parseDateTime, parseDuration } from "@internationalized/date";
    import dayjs from "dayjs";
-    import { Plus } from "lucide-svelte";
+    import { Plus } from "@lucide/svelte";
    import { replace } from "svelte-spa-router";
    let {
        data,
@@ -11,7 +11,7 @@
    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 { 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";
@@ -1,7 +1,6 @@
 <script lang="ts">
-    import { Separator } from "@components/ui/separator";
    import { manager, OpenEditPage } from "./page.svelte";
-    import { File, X } from "lucide-svelte";
+    import { File, FileCode2, FileText, Save, X } from "@lucide/svelte";
    import { onMount } from "svelte";
    import { EditorView } from "@codemirror/view";
    import { basicSetup } from "codemirror";
@@ -61,56 +60,144 @@
        });

        easyMde.codemirror.on("change", () => {
-            if (manager.selectedPage?.content !== easyMde?.value()) {
-                manager.selectedPage!.dirty = true;
+            if (!manager.selectedPage) {
+                return;
            }

-            manager.selectedPage!.content = easyMde?.value() || "";
+            if (manager.selectedPage.content !== easyMde?.value()) {
+                manager.selectedPage.dirty = true;
+            }
+
+            manager.selectedPage.content = easyMde?.value() || "";
        });
+
+        return () => {
+            view?.destroy();
+            easyMde?.toTextArea();
+        };
    });
 </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
+<div class="flex h-full min-h-0 w-full flex-col bg-neutral-950">
+    <div class="flex h-11 shrink-0 items-end overflow-x-auto border-b border-neutral-800 bg-neutral-950 px-2">
+        {#if manager.pages.length === 0}
+            <div class="flex h-full items-center px-2 text-sm text-muted-foreground">No file open</div>
+        {:else}
+            {#each manager.pages as tab, index}
+                {@const isActive = manager.openPageIndex === index}
+                <button
+                    class="group flex h-9 max-w-64 items-center gap-2 rounded-t-md border border-b-0 px-3 text-sm transition-colors {isActive
+                        ? 'border-neutral-800 bg-neutral-900 text-foreground'
+                        : 'border-transparent text-muted-foreground hover:bg-neutral-900/70'} {tab.dirty ? 'italic' : ''}"
+                    onclick={() => (manager.openPageIndex = index)}
                >
-            </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 tab.fileType === "json"}
+                        <FileCode2 class="size-4 shrink-0" />
+                    {:else if tab.fileType === "md" || tab.fileType === "mdx"}
+                        <FileText class="size-4 shrink-0" />
+                    {:else}
+                        <File class="size-4 shrink-0" />
+                    {/if}
+                    <span class="truncate">{tab.pageTitle}</span>
+                    {#if tab.dirty}
+                        <span class="size-1.5 shrink-0 rounded-full bg-primary"></span>
+                    {/if}
+                    <span
+                        class="ml-1 rounded p-0.5 opacity-0 transition-opacity hover:bg-neutral-800 group-hover:opacity-100 {isActive ? 'opacity-100' : ''}"
+                        onclick={(e) => {
+                            e.stopPropagation();
+                            manager.closePage(index);
+                        }}><X class="size-4" /></span
+                    >
+                </button>
+            {/each}
        {/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 class="flex min-h-0 flex-1 flex-col">
+        {#if manager.selectedPage}
+            <header class="flex shrink-0 items-center justify-between gap-4 border-b border-neutral-800 bg-neutral-900/70 px-4 py-3">
+                <div class="min-w-0">
+                    <div class="flex items-center gap-2">
+                        <h2 class="truncate text-base font-semibold">{manager.selectedPage.pageTitle}</h2>
+                        {#if manager.selectedPage.dirty}
+                            <span class="rounded-full border border-primary/40 bg-primary/10 px-2 py-0.5 text-xs text-primary">Unsaved</span>
+                        {/if}
+                    </div>
+                    <p class="mt-1 truncate text-xs text-muted-foreground">{manager.selectedPage.path}</p>
+                </div>
+                <Button disabled={!(manager.selectedPage?.dirty ?? false)} onclick={() => manager.selectedPage?.save()}>
+                    <Save class="mr-2 size-4" />
+                    Speichern
+                </Button>
+            </header>
+        {/if}
+
+        <div class="grid min-h-0 flex-1 grid-cols-1 xl:grid-cols-[minmax(0,1fr)_26rem]">
+            <main class="min-h-0 overflow-hidden border-r border-neutral-800 bg-neutral-950">
+                <div class="flex h-full min-h-0 flex-col">
+                    <div class="shrink-0 border-b border-neutral-800 px-4 py-2 text-xs font-medium uppercase tracking-wide text-muted-foreground">Content</div>
+                    <div class="relative min-h-0 flex-1 overflow-hidden">
+                        <div bind:this={codemirrorParent} class="hidden h-full"></div>
+                        <div bind:this={easyMdeWrapper} class="hidden h-full">
+                            <textarea bind:this={easyMdeParent}></textarea>
+                        </div>
+
+                        {#if !manager.selectedPage}
+                            <div class="absolute inset-0 flex items-center justify-center bg-neutral-950 p-8">
+                                <div class="max-w-sm text-center">
+                                    <div class="mx-auto mb-4 flex size-12 items-center justify-center rounded-md border border-neutral-800 bg-neutral-900">
+                                        <FileText class="size-6 text-muted-foreground" />
+                                    </div>
+                                    <h2 class="text-lg font-semibold">Select a page</h2>
+                                    <p class="mt-2 text-sm text-muted-foreground">Open a markdown, MDX, or JSON file from the repository tree to start editing.</p>
+                                </div>
+                            </div>
+                        {/if}
+                    </div>
            </div>
+            </main>
+
+            {#if manager.selectedPage?.supportsFrontmatter() && manager.selectedPage.frontmatterSchema}
+                <aside class="min-h-0 overflow-y-auto bg-neutral-950" transition:slide>
+                    <FrontmatterEditor />
+                </aside>
+            {/if}
        </div>
    </div>
 </div>
+
+<style>
+    :global(.EasyMDEContainer) {
+        height: 100%;
+        display: flex;
+        min-height: 0;
+        flex-direction: column;
+        background: rgb(10 10 10);
+    }
+
+    :global(.EasyMDEContainer .CodeMirror) {
+        flex: 1;
+        min-height: 0;
+        height: 100%;
+        border: 0;
+        background: rgb(10 10 10);
+        color: rgb(245 245 245);
+    }
+
+    :global(.EasyMDEContainer .editor-toolbar) {
+        border: 0;
+        border-bottom: 1px solid rgb(38 38 38);
+        background: rgb(23 23 23);
+    }
+
+    :global(.EasyMDEContainer .editor-toolbar button) {
+        color: rgb(212 212 212) !important;
+    }
+
+    :global(.EasyMDEContainer .editor-toolbar button:hover),
+    :global(.EasyMDEContainer .editor-toolbar button.active) {
+        background: rgb(38 38 38);
+        border-color: rgb(64 64 64);
+    }
+</style>
@@ -1,122 +1,309 @@
 <script lang="ts">
-    import { X } from "lucide-svelte";
+    import { Button } from "@components/ui/button";
+    import { Input } from "@components/ui/input";
+    import { Label } from "@components/ui/label";
+    import { Checkbox } from "@components/ui/checkbox";
+    import { Plus, X } from "@lucide/svelte";
+    import yaml from "js-yaml";
    import { manager } from "./page.svelte";
-    import { slide } from "svelte/transition";
+    import type { FrontmatterFieldSchema } from "../../../../content/frontmatter-editor-schemas";
+    import EventSelector from "./frontmatter/EventSelector.svelte";
+    import ImageFrontmatterSelector from "./frontmatter/ImageFrontmatterSelector.svelte";
+    import ViewConfigEditor from "./frontmatter/ViewConfigEditor.svelte";
+
+    function markDirty() {
+        if (manager.selectedPage) {
+            manager.selectedPage.dirty = true;
+        }
+    }
+
+    function setField(key: string, value: unknown) {
+        if (!manager.selectedPage) {
+            return;
+        }
+
+        manager.selectedPage.frontmatter[key] = value;
+        markDirty();
+    }
+
+    function removeField(key: string) {
+        if (!manager.selectedPage) {
+            return;
+        }
+
+        delete manager.selectedPage.frontmatter[key];
+        markDirty();
+    }
+
+    function getFieldValue(field: FrontmatterFieldSchema) {
+        const existingValue = manager.selectedPage?.frontmatter[field.key];
+        if (existingValue !== undefined) {
+            return existingValue;
+        }
+
+        if (field.defaultValue !== undefined) {
+            return field.defaultValue;
+        }
+
+        switch (field.kind) {
+            case "boolean":
+                return false;
+            case "number":
+                return "";
+            case "string-array":
+                return [];
+            case "object":
+                return {};
+            default:
+                return "";
+        }
+    }
+
+    function dateInputValue(value: unknown) {
+        if (value instanceof Date && !Number.isNaN(value.getTime())) {
+            return value.toISOString().split("T")[0];
+        }
+
+        if (typeof value === "string") {
+            return value.split("T")[0];
+        }
+
+        return "";
+    }
+
+    function yamlValue(value: unknown) {
+        if (value === undefined || value === null || value === "") {
+            return "";
+        }
+
+        return yaml.dump(value).trim();
+    }
+
+    function setYamlField(key: string, value: string) {
+        if (!value.trim()) {
+            setField(key, {});
+            return;
+        }
+
+        try {
+            setField(key, yaml.load(value));
+        } catch (error) {
+            alert(`Invalid YAML for ${key}: ${error instanceof Error ? error.message : String(error)}`);
+        }
+    }
+
+    function arrayValue(key: string): string[] {
+        const value = manager.selectedPage?.frontmatter[key];
+        return Array.isArray(value) ? value.map((item) => String(item)) : [];
+    }
+
+    function setArrayItem(key: string, index: number, value: string) {
+        const values = arrayValue(key);
+        values[index] = value;
+        setField(key, values);
+    }
+
+    function addArrayItem(key: string) {
+        setField(key, [...arrayValue(key), ""]);
+    }
+
+    function removeArrayItem(key: string, index: number) {
+        setField(
+            key,
+            arrayValue(key).filter((_, itemIndex) => itemIndex !== index)
+        );
+    }
+
+    function renameCustomField(oldKey: string, newKey: string) {
+        if (!manager.selectedPage || !newKey || newKey === oldKey) {
+            return;
+        }
+
+        if (Object.hasOwn(manager.selectedPage.frontmatter, newKey)) {
+            alert(`A frontmatter field named "${newKey}" already exists.`);
+            return;
+        }
+
+        manager.selectedPage.frontmatter[newKey] = manager.selectedPage.frontmatter[oldKey];
+        delete manager.selectedPage.frontmatter[oldKey];
+        markDirty();
+    }
+
+    function addCustomField() {
+        if (!manager.selectedPage) {
+            return;
+        }
+
+        let index = 1;
+        let key = "customField";
+        while (Object.hasOwn(manager.selectedPage.frontmatter, key)) {
+            index += 1;
+            key = `customField${index}`;
+        }
+
+        setField(key, "");
+    }
+
+    function schemaKeys(schema = manager.selectedPage?.frontmatterSchema) {
+        return new Set(schema?.fields.map((field) => field.key) ?? []);
+    }
 </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;
+{#if manager.selectedPage?.frontmatterSchema}
+    {@const schema = manager.selectedPage.frontmatterSchema}
+    {@const customEntries = Object.entries(manager.selectedPage.frontmatter).filter(([key]) => !schemaKeys(schema).has(key))}
+
+    <details class="group" open>
+        <summary class="sticky top-0 z-10 flex cursor-pointer items-center justify-between border-b border-neutral-800 bg-neutral-950/95 px-4 py-3 backdrop-blur hover:bg-neutral-900">
+            <div>
+                <p class="text-sm font-semibold">{schema.label} Frontmatter</p>
+                <p class="text-xs text-muted-foreground">{schema.collection}</p>
+            </div>
+            <svg class="h-4 w-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="grid grid-cols-1 gap-4 bg-neutral-950 p-4">
+            {#each schema.fields as field (field.key)}
+                {@const value = getFieldValue(field)}
+                <div class="space-y-2">
+                    <div class="flex items-center justify-between gap-3">
+                        <Label for={`frontmatter-${field.key}`} class="text-sm">
+                            {field.label}
+                            {#if field.required}
+                                <span class="text-red-400">*</span>
+                            {/if}
+                        </Label>
+                        {#if field.collection}
+                            <span class="rounded border border-neutral-700 px-2 py-0.5 text-xs text-muted-foreground">{field.collection}</span>
+                        {/if}
+                    </div>
+
+                    {#if field.key === "eventId"}
+                        <EventSelector value={value as number | string | null | undefined} onSelect={(eventId) => setField(field.key, eventId)} />
+                    {:else if field.key === "viewConfig"}
+                        <ViewConfigEditor value={value} eventId={manager.selectedPage.frontmatter.eventId as number | string | null | undefined} onChange={(viewConfig) => setField(field.key, viewConfig)} />
+                    {:else if field.kind === "image"}
+                        <ImageFrontmatterSelector value={String(value ?? "")} onSelect={(path) => setField(field.key, path)} />
+                    {:else if field.kind === "boolean"}
+                        <label class="flex h-9 items-center gap-3 rounded-md border border-neutral-800 bg-neutral-900 px-3">
+                            <Checkbox checked={Boolean(value)} onCheckedChange={(checked) => setField(field.key, checked === true)} />
+                            <span class="text-sm">{Boolean(value) ? "True" : "False"}</span>
+                        </label>
+                    {:else if field.kind === "number"}
+                        <Input
+                            id={`frontmatter-${field.key}`}
+                            type="number"
+                            value={typeof value === "number" ? value : ""}
+                            onchange={(event) => {
+                                const nextValue = (event.currentTarget as HTMLInputElement).value;
+                                setField(field.key, nextValue === "" ? "" : Number(nextValue));
                            }}
-                            class="px-2 py-1 border rounded text-sm flex-1 bg-neutral-900"
                        />
+                    {:else if field.kind === "date"}
+                        <Input
+                            id={`frontmatter-${field.key}`}
+                            type="date"
+                            value={dateInputValue(value)}
+                            onchange={(event) => {
+                                const nextValue = (event.currentTarget as HTMLInputElement).value;
+                                setField(field.key, nextValue ? new Date(`${nextValue}T00:00:00.000Z`) : "");
+                            }}
+                        />
+                    {:else if field.kind === "text"}
+                        <textarea
+                            id={`frontmatter-${field.key}`}
+                            class="min-h-20 w-full rounded-md border border-neutral-800 bg-neutral-900 px-3 py-2 text-sm outline-none focus-visible:ring-2 focus-visible:ring-ring"
+                            maxlength={field.maxLength}
+                            value={String(value ?? "")}
+                            oninput={(event) => setField(field.key, (event.currentTarget as HTMLTextAreaElement).value)}
+                        ></textarea>
+                    {:else if field.kind === "string-array"}
+                        <div class="space-y-2 rounded-md border border-neutral-800 bg-neutral-900 p-2">
+                            {#each arrayValue(field.key) as item, index}
+                                <div class="flex items-center gap-2">
+                                    <Input value={item} oninput={(event) => setArrayItem(field.key, index, (event.currentTarget as HTMLInputElement).value)} />
+                                    <Button type="button" variant="ghost" size="icon" onclick={() => removeArrayItem(field.key, index)}>
+                                        <X class="size-4" />
+                                    </Button>
+                                </div>
+                            {/each}
+                            <Button type="button" variant="outline" size="sm" onclick={() => addArrayItem(field.key)}>
+                                <Plus class="mr-2 size-4" />
+                                Add item
+                            </Button>
+                        </div>
+                    {:else if field.kind === "object"}
+                        <textarea
+                            id={`frontmatter-${field.key}`}
+                            class="min-h-28 w-full rounded-md border border-neutral-800 bg-neutral-900 px-3 py-2 font-mono text-sm outline-none focus-visible:ring-2 focus-visible:ring-ring"
+                            value={yamlValue(value)}
+                            onchange={(event) => setYamlField(field.key, (event.currentTarget as HTMLTextAreaElement).value)}
+                        ></textarea>
                    {:else}
-                        <input
+                        <Input
+                            id={`frontmatter-${field.key}`}
                            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"
+                            maxlength={field.maxLength}
+                            placeholder={field.kind === "reference" ? `Reference to ${field.collection}` : field.kind === "image" ? "Image path" : ""}
+                            value={String(value ?? "")}
+                            oninput={(event) => setField(field.key, (event.currentTarget as HTMLInputElement).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>
+
+                    {#if field.description}
+                        <p class="text-xs text-muted-foreground">{field.description}</p>
+                    {/if}
                </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>
+            {/each}
+
+            {#if customEntries.length > 0}
+                <div class="space-y-3 border-t border-neutral-800 pt-4">
+                    <p class="text-xs font-semibold uppercase tracking-wide text-muted-foreground">Custom fields</p>
+                    {#each customEntries as [key, value] (key)}
+                        <div class="rounded-md border border-neutral-800 bg-neutral-900 p-2">
+                            <div class="grid gap-2">
+                                <Input value={key} onchange={(event) => renameCustomField(key, (event.currentTarget as HTMLInputElement).value)} />
+                                {#if Array.isArray(value)}
+                                    <div class="space-y-2">
+                                        {#each arrayValue(key) as item, index}
+                                            <div class="flex items-center gap-2">
+                                                <Input value={item} oninput={(event) => setArrayItem(key, index, (event.currentTarget as HTMLInputElement).value)} />
+                                                <Button type="button" variant="ghost" size="icon" onclick={() => removeArrayItem(key, index)}>
+                                                    <X class="size-4" />
+                                                </Button>
+                                            </div>
+                                        {/each}
+                                        <Button type="button" variant="outline" size="sm" onclick={() => addArrayItem(key)}>
+                                            <Plus class="mr-2 size-4" />
+                                            Add item
+                                        </Button>
+                                    </div>
+                                {:else if typeof value === "object" && value !== null}
+                                    <textarea
+                                        class="min-h-24 w-full rounded-md border border-neutral-800 bg-neutral-950 px-3 py-2 font-mono text-sm outline-none focus-visible:ring-2 focus-visible:ring-ring"
+                                        value={yamlValue(value)}
+                                        onchange={(event) => setYamlField(key, (event.currentTarget as HTMLTextAreaElement).value)}
+                                    ></textarea>
+                                {:else}
+                                    <Input value={String(value ?? "")} onchange={(event) => setField(key, (event.currentTarget as HTMLInputElement).value)} />
+                                {/if}
+                                <Button type="button" variant="ghost" size="icon" onclick={() => removeField(key)}>
+                                    <X class="size-4" />
+                                </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>
+            {/if}
+
+            <div>
+                <Button type="button" variant="outline" size="sm" onclick={addCustomField}>
+                    <Plus class="mr-2 size-4" />
+                    Add custom field
+                </Button>
            </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>
+    </details>
+{/if}
@@ -1,13 +1,12 @@
 <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 { Check, ChevronsUpDown, RefreshCw, FileImage, Plus, GitBranch, Upload } 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";
@@ -18,16 +17,40 @@
    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">
+<div class="flex min-h-0 flex-grow flex-col bg-neutral-950">
+    <ResizablePaneGroup direction="horizontal" class="min-h-0 flex-grow">
+        <ResizablePane defaultSize={24} minSize={18} maxSize={36}>
+            <aside class="flex h-full min-h-0 flex-col border-r border-neutral-800 bg-neutral-950">
+                <div class="border-b border-neutral-800 p-3">
+                    <div class="mb-3 flex items-center justify-between gap-3">
+                        <div>
+                            <h1 class="text-base font-semibold leading-none">Pages</h1>
+                            <p class="mt-1 text-xs text-muted-foreground">Content repository</p>
+                        </div>
+                        <Button
+                            size="icon"
+                            variant="outline"
+                            onclick={async () => {
+                                const branchName = prompt("Enter branch name:");
+                                if (branchName) {
+                                    await $pageRepo.createBranch(branchName);
+                                    manager.reloadBranches();
+                                }
+                            }}
+                        >
+                            <Plus class="size-4" />
+                        </Button>
+                    </div>
+
+                    <div class="grid grid-cols-[1fr_auto_auto] gap-2">
                    <Popover bind:open={branchSelectOpen}>
                        <PopoverTrigger>
                            {#snippet child({ props })}
-                                <Button variant="outline" class="justify-between flex-1" {...props} role="combobox">
-                                    {manager.branch}
+                                <Button variant="outline" class="min-w-0 justify-between" {...props} role="combobox">
+                                    <span class="flex min-w-0 items-center gap-2">
+                                        <GitBranch class="size-4 shrink-0 text-muted-foreground" />
+                                        <span class="truncate">{manager.branch}</span>
+                                    </span>
                                    <ChevronsUpDown class="ml-2 size-4 shrink-0 opacity-50" />
                                </Button>
                            {/snippet}
@@ -62,23 +85,23 @@
                            </Command>
                        </PopoverContent>
                    </Popover>
-                    <Button size="icon" variant="outline" onclick={() => manager.reloadImages()}>
-                        <RefreshCw />
+                    <Button size="icon" variant="outline" onclick={() => manager.reloadImages()} title="Refresh images">
+                        <RefreshCw class="size-4" />
                    </Button>
                    <Popover bind:open={imageSelectOpen}>
                        <PopoverTrigger>
                            {#snippet child({ props })}
-                                <Button size="icon" variant="outline" {...props}>
-                                    <FileImage />
+                                <Button size="icon" variant="outline" {...props} title="Images">
+                                    <FileImage class="size-4" />
                                </Button>
                            {/snippet}
                        </PopoverTrigger>
-                        <PopoverContent side="right" class="w-[1000px] h-screen overflow-y-auto">
+                        <PopoverContent side="right" class="h-screen w-[960px] max-w-[calc(100vw-2rem)] overflow-y-auto p-0">
                            {#await manager.imagesLoad}
-                                <p>Loading images...</p>
+                                <p class="p-4 text-sm text-muted-foreground">Loading images...</p>
                            {:then images}
                                <div class="flex flex-col gap-2">
-                                    <div class="p-2">
+                                    <div class="sticky top-0 z-10 border-b border-neutral-800 bg-neutral-950/95 p-3 backdrop-blur">
                                        <input
                                            type="file"
                                            accept="image/*"
@@ -100,13 +123,14 @@
                                            }}
                                        />
                                        <Button onclick={() => fileInput?.click()} class="w-full">
-                                            <Plus class="mr-2 size-4" />
+                                            <Upload class="mr-2 size-4" />
                                            Upload Image
                                        </Button>
                                    </div>
-                                    <div class="grid grid-cols-4 gap-2 p-2">
+                                    <div class="grid grid-cols-3 gap-3 p-3 xl:grid-cols-4">
                                        {#each images as image}
                                            <button
+                                                class="overflow-hidden rounded-md border border-neutral-800 bg-neutral-900 text-left transition-colors hover:border-primary"
                                                onclick={() => {
                                                    const backs = (manager.selectedPage?.path?.match(/\//g)?.length || 1) - 1;

@@ -116,7 +140,8 @@
                                                    imageSelectOpen = false;
                                                }}
                                            >
-                                                <img src={image.downloadUrl} alt={image.name} class="w-full h-auto object-cover" />
+                                                <img src={image.downloadUrl} alt={image.name} class="aspect-video w-full object-cover" />
+                                                <div class="truncate px-2 py-1.5 text-xs text-muted-foreground">{image.name}</div>
                                            </button>
                                        {/each}
                                    </div>
@@ -124,31 +149,22 @@
                            {/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>
                </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>
+
+                <div class="min-h-0 flex-1 overflow-y-auto py-2">
+                    {#await manager.pagesLoad}
+                        <p class="px-4 py-3 text-sm text-muted-foreground">Loading pages...</p>
+                    {:then pages}
+                        {#each Object.values(pages.dirs) as page}
+                            <PagesList {page} path={page.name + "/"} />
+                        {/each}
+                    {/await}
+                </div>
+            </aside>
        </ResizablePane>
        <ResizableHandle />
-        <ResizablePane defaultSize={80}>
+        <ResizablePane defaultSize={76}>
            <EditorWithTabs />
        </ResizablePane>
    </ResizablePaneGroup>
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { ChevronDown, ChevronRight, Folder, FolderPlus, FileJson, FileText, File, FilePlus } from "lucide-svelte";
+    import { ChevronDown, ChevronRight, Folder, FileJson, FileText, File, FilePlus } from "@lucide/svelte";
    import type { DirTree } from "./page.svelte";
    import PagesList from "./PagesList.svelte";
    import { slide } from "svelte/transition";
@@ -55,19 +55,23 @@
    }
 </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">
+<button
+    class="group flex h-8 w-full items-center justify-between px-2 text-left text-sm text-neutral-200 transition-colors hover:bg-neutral-900"
+    style={`padding-left: ${0.75 + depth * 0.85}rem`}
+    onclick={() => (open = !open)}
+>
+    <div class="flex min-w-0 flex-row items-center">
        {#if open}
-            <ChevronDown class="w-6 h-6" />
+            <ChevronDown class="mr-1 size-4 shrink-0 text-muted-foreground" />
        {:else}
-            <ChevronRight class="w-6 h-6" />
+            <ChevronRight class="mr-1 size-4 shrink-0 text-muted-foreground" />
        {/if}
-        <Folder class="mr-2 w-4 h-4" />
-        {page.name}/
+        <Folder class="mr-2 size-4 shrink-0 text-amber-400" />
+        <span class="truncate">{page.name}/</span>
    </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" />
+    <div class="hidden flex-row items-center group-hover:flex">
+        <Button variant="ghost" size="sm" class="m-0 size-6 p-0" onclick={startNewPageCreate} title="New page">
+            <FilePlus class="size-3.5" />
        </Button>
    </div>
 </button>
@@ -76,39 +80,43 @@
    <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)}`}>
+                <div class="flex h-8 w-full flex-row items-center bg-neutral-900 px-2 py-1" style={`padding-left: ${0.75 + (depth + 1) * 0.85}rem`}>
                    {#if newPageName.endsWith(".json")}
-                        <FileJson class="mr-2 w-4 h-4" />
+                        <FileJson class="mr-2 size-4 shrink-0 text-sky-400" />
                    {:else if newPageName.endsWith(".md") || newPageName.endsWith(".mdx")}
-                        <FileText class="mr-2 w-4 h-4" />
+                        <FileText class="mr-2 size-4 shrink-0 text-emerald-400" />
                    {:else}
-                        <File class="mr-2 w-4 h-4" />
+                        <File class="mr-2 size-4 shrink-0 text-muted-foreground" />
                    {/if}
-                    <form onsubmit={createNewPage}>
+                    <form onsubmit={createNewPage} class="min-w-0 flex-1">
                        <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"
+                            class="w-full rounded border border-neutral-700 bg-neutral-950 px-2 py-1 text-sm text-white outline-none focus:border-primary"
                        />
                    </form>
-                </button>
+                </div>
            {/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)}>
+                <button
+                    class="flex h-8 w-full min-w-0 flex-row items-center px-2 py-1 text-left text-sm text-muted-foreground transition-colors hover:bg-neutral-900 hover:text-foreground"
+                    style={`padding-left: ${0.75 + (depth + 1) * 0.85}rem`}
+                    onclick={() => manager.openPage(file.id)}
+                >
                    {#if file.name.endsWith(".json")}
-                        <FileJson class="mr-2 w-4 h-4" />
+                        <FileJson class="mr-2 size-4 shrink-0 text-sky-400" />
                    {:else if file.name.endsWith(".md") || file.name.endsWith(".mdx")}
-                        <FileText class="mr-2 w-4 h-4" />
+                        <FileText class="mr-2 size-4 shrink-0 text-emerald-400" />
                    {:else}
-                        <File class="mr-2 w-4 h-4" />
+                        <File class="mr-2 size-4 shrink-0" />
                    {/if}
-                    {file.name}
+                    <span class="truncate">{file.name}</span>
                </button>
            {/each}
        </div>
@@ -0,0 +1,92 @@
+<script lang="ts">
+    import { Button } from "@components/ui/button";
+    import { Popover, PopoverContent, PopoverTrigger } from "@components/ui/popover";
+    import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "@components/ui/command";
+    import { eventRepo } from "@repo/event";
+    import type { ShortEvent } from "@type/event";
+    import { CalendarDays, Check, ChevronsUpDown } from "@lucide/svelte";
+
+    const {
+        value,
+        onSelect,
+    }: {
+        value: number | string | null | undefined;
+        onSelect: (eventId: number) => void;
+    } = $props();
+
+    let open = $state(false);
+    let eventsFuture = $state($eventRepo.listEvents());
+
+    function selectedEvent(events: ShortEvent[]) {
+        const eventId = Number(value);
+        return events.find((event) => event.id === eventId);
+    }
+
+    function formatDate(timestamp: number) {
+        return new Date(timestamp).toLocaleDateString("de-DE", {
+            year: "numeric",
+            month: "2-digit",
+            day: "2-digit",
+        });
+    }
+
+    function sortEvents(events: ShortEvent[]) {
+        return [...events].sort((a, b) => b.start - a.start);
+    }
+</script>
+
+<Popover bind:open>
+    <PopoverTrigger>
+        {#snippet child({ props })}
+            <Button variant="outline" class="w-full justify-between" {...props} role="combobox">
+                {#await eventsFuture}
+                    Loading events...
+                {:then events}
+                    {@const event = selectedEvent(events)}
+                    {#if event}
+                        <span class="truncate">{event.name} #{event.id}</span>
+                    {:else}
+                        <span class="text-muted-foreground">Select event</span>
+                    {/if}
+                {:catch}
+                    <span class="text-red-400">Could not load events</span>
+                {/await}
+                <ChevronsUpDown class="ml-2 size-4 shrink-0 opacity-50" />
+            </Button>
+        {/snippet}
+    </PopoverTrigger>
+    <PopoverContent class="w-[36rem] max-w-[calc(100vw-2rem)] p-0">
+        <Command>
+            <CommandInput placeholder="Search events..." />
+            <CommandList>
+                <CommandEmpty>No events found.</CommandEmpty>
+                <CommandGroup>
+                    {#await eventsFuture}
+                        <div class="p-3 text-sm text-muted-foreground">Loading events...</div>
+                    {:then events}
+                        {#each sortEvents(events) as event (event.id)}
+                            <CommandItem
+                                value={`${event.name} ${event.id}`}
+                                onSelect={() => {
+                                    onSelect(event.id);
+                                    open = false;
+                                }}
+                            >
+                                <Check class="mr-2 size-4 {Number(value) === event.id ? '' : 'text-transparent'}" />
+                                <div class="min-w-0 flex-1">
+                                    <div class="truncate text-sm">{event.name}</div>
+                                    <div class="flex items-center gap-1 text-xs text-muted-foreground">
+                                        <CalendarDays class="size-3" />
+                                        #{event.id} · {formatDate(event.start)}
+                                    </div>
+                                </div>
+                            </CommandItem>
+                        {/each}
+                    {:catch error}
+                        <div class="p-3 text-sm text-red-400">{error instanceof Error ? error.message : "Failed to load events."}</div>
+                    {/await}
+                </CommandGroup>
+            </CommandList>
+        </Command>
+    </PopoverContent>
+</Popover>
@@ -0,0 +1,74 @@
+<script lang="ts">
+    import { Button } from "@components/ui/button";
+    import { Input } from "@components/ui/input";
+    import { Popover, PopoverContent, PopoverTrigger } from "@components/ui/popover";
+    import { Image, Search } from "@lucide/svelte";
+    import { manager } from "../page.svelte";
+
+    const {
+        value,
+        onSelect,
+    }: {
+        value: string | null | undefined;
+        onSelect: (path: string) => void;
+    } = $props();
+
+    let open = $state(false);
+    let search = $state("");
+
+    function imagePath(path: string) {
+        const backs = (manager.selectedPage?.path?.match(/\//g)?.length || 1) - 1;
+        return [...Array(backs).fill(".."), path.replace("src/", "")].join("/");
+    }
+</script>
+
+<div class="flex gap-2">
+    <Input value={value ?? ""} placeholder="Image path" oninput={(event) => onSelect((event.currentTarget as HTMLInputElement).value)} />
+    <Popover bind:open>
+        <PopoverTrigger>
+            {#snippet child({ props })}
+                <Button type="button" variant="outline" size="icon" {...props}>
+                    <Image class="size-4" />
+                </Button>
+            {/snippet}
+        </PopoverTrigger>
+        <PopoverContent class="h-[34rem] w-[56rem] max-w-[calc(100vw-2rem)] overflow-hidden p-0" side="bottom">
+            <div class="flex items-center gap-2 border-b border-neutral-800 p-3">
+                <Search class="size-4 text-muted-foreground" />
+                <Input bind:value={search} placeholder="Search images..." class="border-0 bg-transparent shadow-none focus-visible:ring-0" />
+            </div>
+            <div class="h-[30rem] overflow-y-auto p-3">
+                {#await manager.imagesLoad}
+                    <p class="text-sm text-muted-foreground">Loading images...</p>
+                {:then images}
+                    {@const filteredImages = images.filter((image) => image.name.toLowerCase().includes(search.toLowerCase()) || image.path.toLowerCase().includes(search.toLowerCase()))}
+                    {#if filteredImages.length === 0}
+                        <p class="text-sm text-muted-foreground">No images found.</p>
+                    {:else}
+                        <div class="grid grid-cols-2 gap-3 md:grid-cols-4">
+                            {#each filteredImages as image (image.id)}
+                                {@const path = imagePath(image.path)}
+                                <button
+                                    type="button"
+                                    class="group overflow-hidden rounded-md border border-neutral-800 bg-neutral-900 text-left transition-colors hover:border-primary"
+                                    onclick={() => {
+                                        onSelect(path);
+                                        open = false;
+                                    }}
+                                >
+                                    <img src={image.downloadUrl} alt={image.name} class="aspect-video w-full bg-neutral-950 object-cover" />
+                                    <div class="space-y-1 p-2">
+                                        <div class="truncate text-xs font-medium">{image.name}</div>
+                                        <div class="truncate text-[11px] text-muted-foreground">{path}</div>
+                                    </div>
+                                </button>
+                            {/each}
+                        </div>
+                    {/if}
+                {:catch error}
+                    <p class="text-sm text-red-400">{error instanceof Error ? error.message : "Failed to load images."}</p>
+                {/await}
+            </div>
+        </PopoverContent>
+    </Popover>
+</div>
@@ -0,0 +1,348 @@
+<script lang="ts">
+    import { Button } from "@components/ui/button";
+    import { Input } from "@components/ui/input";
+    import { Label } from "@components/ui/label";
+    import { eventRepo } from "@repo/event";
+    import type { EventFight, ExtendedEvent, ResponseGroups } from "@type/event";
+    import { Plus, Trash2 } from "@lucide/svelte";
+
+    type StageType = "GROUP" | "ELEMINATION" | "DOUBLE_ELEMINATION";
+    type RoundPrefix = "Runde" | "Tag";
+    const roundGroupingTimeOptions = [
+        { label: "10 Minutes", value: 10 },
+        { label: "30 Minutes", value: 30 },
+        { label: "1 Hour", value: 60 },
+        { label: "2 Hours", value: 120 },
+        { label: "12 Hours", value: 720 },
+    ];
+    type StageConfig = {
+        name: string;
+        view:
+            | { type: "GROUP"; groups: number[]; roundRows?: number; roundGroupingTimeMinutes?: number; roundPrefix?: RoundPrefix }
+            | { type: "ELEMINATION"; finalFight: number }
+            | { type: "DOUBLE_ELEMINATION"; winnersFinalFight: number; losersFinalFight: number; grandFinalFight: number };
+    };
+    type ViewConfig = Record<string, StageConfig>;
+
+    const {
+        value,
+        eventId,
+        onChange,
+    }: {
+        value: unknown;
+        eventId: number | string | null | undefined;
+        onChange: (value: ViewConfig) => void;
+    } = $props();
+
+    let eventFuture: Promise<ExtendedEvent> | undefined = $state();
+
+    const config = $derived(normalizeConfig(value));
+    const selectedEventId = $derived(Number(eventId));
+
+    $effect(() => {
+        if (Number.isFinite(selectedEventId) && selectedEventId > 0) {
+            eventFuture = $eventRepo.getEvent(selectedEventId.toString());
+        } else {
+            eventFuture = undefined;
+        }
+    });
+
+    function normalizeConfig(raw: unknown): ViewConfig {
+        if (!raw || typeof raw !== "object" || Array.isArray(raw)) {
+            return {};
+        }
+
+        return raw as ViewConfig;
+    }
+
+    function cloneConfig(value: ViewConfig): ViewConfig {
+        return JSON.parse(JSON.stringify(value)) as ViewConfig;
+    }
+
+    function nextConfig(mutator: (draft: ViewConfig) => void) {
+        const draft = cloneConfig(config);
+        mutator(draft);
+        onChange(draft);
+    }
+
+    function addStage() {
+        nextConfig((draft) => {
+            let index = Object.keys(draft).length + 1;
+            let key = `stage${index}`;
+            while (Object.hasOwn(draft, key)) {
+                index += 1;
+                key = `stage${index}`;
+            }
+
+            draft[key] = {
+                name: "New stage",
+                view: { type: "GROUP", groups: [], roundRows: 1, roundGroupingTimeMinutes: 10, roundPrefix: "Runde" },
+            };
+        });
+    }
+
+    function renameStage(oldKey: string, newKey: string) {
+        const cleanKey = newKey.trim();
+        if (!cleanKey || cleanKey === oldKey) {
+            return;
+        }
+
+        nextConfig((draft) => {
+            if (Object.hasOwn(draft, cleanKey)) {
+                alert(`A view config stage named "${cleanKey}" already exists.`);
+                return;
+            }
+
+            draft[cleanKey] = draft[oldKey];
+            delete draft[oldKey];
+        });
+    }
+
+    function removeStage(key: string) {
+        nextConfig((draft) => {
+            delete draft[key];
+        });
+    }
+
+    function setStageName(key: string, name: string) {
+        nextConfig((draft) => {
+            draft[key].name = name;
+        });
+    }
+
+    function setStageType(key: string, type: StageType, event?: ExtendedEvent) {
+        nextConfig((draft) => {
+            if (type === "GROUP") {
+                draft[key].view = { type, groups: [], roundRows: 1, roundGroupingTimeMinutes: 10, roundPrefix: "Runde" };
+            } else if (type === "ELEMINATION") {
+                draft[key].view = { type, finalFight: event?.fights[0]?.id ?? 0 };
+            } else {
+                draft[key].view = {
+                    type,
+                    winnersFinalFight: event?.fights[0]?.id ?? 0,
+                    losersFinalFight: event?.fights[0]?.id ?? 0,
+                    grandFinalFight: event?.fights[0]?.id ?? 0,
+                };
+            }
+        });
+    }
+
+    function setGroupSelection(key: string, groupId: number, selected: boolean) {
+        nextConfig((draft) => {
+            const view = draft[key].view;
+            if (view.type !== "GROUP") {
+                return;
+            }
+
+            view.groups = selected ? [...new Set([...view.groups, groupId])] : view.groups.filter((id) => id !== groupId);
+        });
+    }
+
+    function setRoundRows(key: string, value: string) {
+        nextConfig((draft) => {
+            const view = draft[key].view;
+            if (view.type === "GROUP") {
+                view.roundRows = Math.max(1, Number(value) || 1);
+            }
+        });
+    }
+
+    function setRoundGroupingTimeMinutes(key: string, value: string) {
+        nextConfig((draft) => {
+            const view = draft[key].view;
+            if (view.type === "GROUP") {
+                view.roundGroupingTimeMinutes = Math.max(1, Math.floor(Number(value) || 10));
+            }
+        });
+    }
+
+    function setRoundPrefix(key: string, value: RoundPrefix) {
+        nextConfig((draft) => {
+            const view = draft[key].view;
+            if (view.type === "GROUP") {
+                view.roundPrefix = value;
+            }
+        });
+    }
+
+    function setFightParam(key: string, param: "finalFight" | "winnersFinalFight" | "losersFinalFight" | "grandFinalFight", fightId: string) {
+        nextConfig((draft) => {
+            const view = draft[key].view as Record<string, unknown>;
+            view[param] = Number(fightId);
+        });
+    }
+
+    function groupLabel(group: ResponseGroups) {
+        return `${group.name} #${group.id}`;
+    }
+
+    function fightLabel(fight: EventFight) {
+        const start = new Date(fight.start).toLocaleTimeString("de-DE", { hour: "2-digit", minute: "2-digit" });
+        return `#${fight.id} ${fight.blueTeam.kuerzel} vs ${fight.redTeam.kuerzel} · ${start}`;
+    }
+</script>
+
+<div class="space-y-3 rounded-md border border-neutral-800 bg-neutral-900 p-3">
+    {#if !selectedEventId}
+        <p class="text-sm text-muted-foreground">Select an eventId first to edit the view config with event groups and fights.</p>
+    {:else if eventFuture}
+        {#await eventFuture}
+            <p class="text-sm text-muted-foreground">Loading event context...</p>
+        {:then event}
+            <div class="flex items-center justify-between gap-3">
+                <div>
+                    <p class="text-sm font-medium">{event.event.name}</p>
+                    <p class="text-xs text-muted-foreground">{event.groups.length} groups · {event.fights.length} fights</p>
+                </div>
+                <Button type="button" variant="outline" size="sm" onclick={addStage}>
+                    <Plus class="mr-2 size-4" />
+                    Add stage
+                </Button>
+            </div>
+
+            {#if Object.entries(config).length === 0}
+                <div class="rounded-md border border-dashed border-neutral-700 p-4 text-sm text-muted-foreground">No stages configured.</div>
+            {/if}
+
+            {#each Object.entries(config) as [key, stage] (key)}
+                <div class="space-y-3 rounded-md border border-neutral-800 bg-neutral-950 p-3">
+                    <div class="flex items-center justify-between gap-3 border-b border-neutral-800 pb-3">
+                        <div class="min-w-0">
+                            <p class="truncate text-sm font-medium">{stage.name || key}</p>
+                            <p class="text-xs text-muted-foreground">{stage.view.type}</p>
+                        </div>
+                        <Button type="button" variant="outline" size="sm" onclick={() => removeStage(key)}>
+                            <Trash2 class="mr-2 size-4" />
+                            Remove stage
+                        </Button>
+                    </div>
+                    <div class="grid gap-2">
+                        <div class="space-y-1">
+                            <Label>Key</Label>
+                            <Input value={key} onchange={(event) => renameStage(key, (event.currentTarget as HTMLInputElement).value)} />
+                        </div>
+                        <div class="space-y-1">
+                            <Label>Name</Label>
+                            <Input value={stage.name} oninput={(event) => setStageName(key, (event.currentTarget as HTMLInputElement).value)} />
+                        </div>
+                        <div class="space-y-1">
+                            <Label>Type</Label>
+                            <select
+                                class="h-9 w-full rounded-md border border-neutral-800 bg-neutral-900 px-3 text-sm outline-none focus-visible:ring-2 focus-visible:ring-ring"
+                                value={stage.view.type}
+                                onchange={(changeEvent) => setStageType(key, (changeEvent.currentTarget as HTMLSelectElement).value as StageType, event)}
+                            >
+                                <option value="GROUP">Group</option>
+                                <option value="ELEMINATION">Elimination</option>
+                                <option value="DOUBLE_ELEMINATION">Double elimination</option>
+                            </select>
+                        </div>
+                    </div>
+
+                    {#if stage.view.type === "GROUP"}
+                        <div class="space-y-2">
+                            <div class="grid gap-2">
+                                <div>
+                                    <Label>Groups</Label>
+                                    <div class="mt-2 grid gap-2">
+                                        {#each event.groups as group (group.id)}
+                                            <label class="flex items-center gap-2 rounded border border-neutral-800 bg-neutral-900 px-3 py-2 text-sm">
+                                                <input
+                                                    type="checkbox"
+                                                    checked={stage.view.groups.includes(group.id)}
+                                                    onchange={(changeEvent) => setGroupSelection(key, group.id, (changeEvent.currentTarget as HTMLInputElement).checked)}
+                                                />
+                                                <span>{groupLabel(group)}</span>
+                                            </label>
+                                        {/each}
+                                    </div>
+                                </div>
+                                <div class="space-y-1">
+                                    <Label>Round rows</Label>
+                                    <Input type="number" min="1" value={stage.view.roundRows ?? 1} onchange={(event) => setRoundRows(key, (event.currentTarget as HTMLInputElement).value)} />
+                                </div>
+                                <div class="space-y-1">
+                                    <Label>Round grouping time (minutes)</Label>
+                                    <select
+                                        class="h-9 w-full rounded-md border border-neutral-800 bg-neutral-900 px-3 text-sm outline-none focus-visible:ring-2 focus-visible:ring-ring"
+                                        value={(stage.view.roundGroupingTimeMinutes ?? 10).toString()}
+                                        onchange={(event) => setRoundGroupingTimeMinutes(key, (event.currentTarget as HTMLSelectElement).value)}
+                                    >
+                                        {#each roundGroupingTimeOptions as option}
+                                            <option value={option.value.toString()}>{option.label}</option>
+                                        {/each}
+                                    </select>
+                                </div>
+                                <div class="space-y-1">
+                                    <Label>Round prefix</Label>
+                                    <select
+                                        class="h-9 w-full rounded-md border border-neutral-800 bg-neutral-900 px-3 text-sm outline-none focus-visible:ring-2 focus-visible:ring-ring"
+                                        value={stage.view.roundPrefix ?? "Runde"}
+                                        onchange={(event) => setRoundPrefix(key, (event.currentTarget as HTMLSelectElement).value as RoundPrefix)}
+                                    >
+                                        <option value="Runde">Runde</option>
+                                        <option value="Tag">Tag</option>
+                                    </select>
+                                </div>
+                            </div>
+                        </div>
+                    {:else if stage.view.type === "ELEMINATION"}
+                        <div class="space-y-1">
+                            <Label>Final fight</Label>
+                            <select
+                                class="h-9 w-full rounded-md border border-neutral-800 bg-neutral-900 px-3 text-sm outline-none focus-visible:ring-2 focus-visible:ring-ring"
+                                value={stage.view.finalFight.toString()}
+                                onchange={(event) => setFightParam(key, "finalFight", (event.currentTarget as HTMLSelectElement).value)}
+                            >
+                                {#each event.fights as fight (fight.id)}
+                                    <option value={fight.id.toString()}>{fightLabel(fight)}</option>
+                                {/each}
+                            </select>
+                        </div>
+                    {:else}
+                        <div class="grid gap-2">
+                            <div class="space-y-1">
+                                <Label>Winners final</Label>
+                                <select
+                                    class="h-9 w-full rounded-md border border-neutral-800 bg-neutral-900 px-3 text-sm outline-none focus-visible:ring-2 focus-visible:ring-ring"
+                                    value={stage.view.winnersFinalFight.toString()}
+                                    onchange={(event) => setFightParam(key, "winnersFinalFight", (event.currentTarget as HTMLSelectElement).value)}
+                                >
+                                    {#each event.fights as fight (fight.id)}
+                                        <option value={fight.id.toString()}>{fightLabel(fight)}</option>
+                                    {/each}
+                                </select>
+                            </div>
+                            <div class="space-y-1">
+                                <Label>Losers final</Label>
+                                <select
+                                    class="h-9 w-full rounded-md border border-neutral-800 bg-neutral-900 px-3 text-sm outline-none focus-visible:ring-2 focus-visible:ring-ring"
+                                    value={stage.view.losersFinalFight.toString()}
+                                    onchange={(event) => setFightParam(key, "losersFinalFight", (event.currentTarget as HTMLSelectElement).value)}
+                                >
+                                    {#each event.fights as fight (fight.id)}
+                                        <option value={fight.id.toString()}>{fightLabel(fight)}</option>
+                                    {/each}
+                                </select>
+                            </div>
+                            <div class="space-y-1">
+                                <Label>Grand final</Label>
+                                <select
+                                    class="h-9 w-full rounded-md border border-neutral-800 bg-neutral-900 px-3 text-sm outline-none focus-visible:ring-2 focus-visible:ring-ring"
+                                    value={stage.view.grandFinalFight.toString()}
+                                    onchange={(event) => setFightParam(key, "grandFinalFight", (event.currentTarget as HTMLSelectElement).value)}
+                                >
+                                    {#each event.fights as fight (fight.id)}
+                                        <option value={fight.id.toString()}>{fightLabel(fight)}</option>
+                                    {/each}
+                                </select>
+                            </div>
+                        </div>
+                    {/if}
+                </div>
+            {/each}
+        {:catch error}
+            <p class="text-sm text-red-400">{error instanceof Error ? error.message : "Failed to load event context."}</p>
+        {/await}
+    {/if}
+</div>
@@ -3,13 +3,18 @@ import { pageRepo } from "@components/repo/page";
 import type { ListPage, PageList } from "@components/types/page";
 import { get } from "svelte/store";
 import yaml from "js-yaml";
+import { getMarkdownFrontmatterSchema, type FrontmatterCollectionSchema } from "../../../../content/frontmatter-editor-schemas";
+
+type FrontmatterValue = string | string[] | number | boolean | Date | Record<string, unknown> | unknown[] | null;

 export class OpenEditPage {
    public content: string = "";
-    public frontmatter: { [key: string]: string | string[] | Date } = $state({});
+    public frontmatter: { [key: string]: FrontmatterValue } = $state({});
    public dirty: boolean = $state(false);

    public readonly fileType: string;
+    public readonly collection: string | undefined;
+    public readonly frontmatterSchema: FrontmatterCollectionSchema | undefined;

    public constructor(
        private manager: PageManager,
@@ -20,6 +25,8 @@ export class OpenEditPage {
        public readonly path: string
    ) {
        this.fileType = this.path.split(".").pop() || "md";
+        this.collection = this.resolveContentCollection();
+        this.frontmatterSchema = getMarkdownFrontmatterSchema(this.collection);

        this.content = this.removeFrontmatter(originalContent);
        this.frontmatter = this.parseFrontmatter(originalContent);
@@ -31,7 +38,7 @@ export class OpenEditPage {
        }

        let contentToSave = "";
-        if (this.frontmatter) {
+        if (this.hasFrontmatter()) {
            contentToSave += "---\n";
            contentToSave += yaml.dump(this.frontmatter);
            contentToSave += "---\n\n";
@@ -54,31 +61,49 @@ export class OpenEditPage {
        return false;
    }

-    private parseFrontmatter(content: string): { [key: string]: string | string[] | Date } {
+    public supportsFrontmatter(): boolean {
+        return (this.fileType === "md" || this.fileType === "mdx") && !!this.collection;
+    }
+
+    private hasFrontmatter(): boolean {
+        return this.supportsFrontmatter() && Object.keys(this.frontmatter).length > 0;
+    }
+
+    private resolveContentCollection(): string | undefined {
+        const match = this.path.match(/^src\/content\/([^/]+)\//);
+        return match?.[1];
+    }
+
+    private parseFrontmatter(content: string): { [key: string]: FrontmatterValue } {
+        if (!this.supportsFrontmatter()) {
+            return {};
+        }
+
        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 (lines[0]?.trim() !== "---") {
+            return {};
        }

-        if (frontmatterLines.length === 0) {
+        for (let i = 1; i < lines.length; i++) {
+            const line = lines[i];
+            if (line.trim() === "---") {
+                inFrontmatter = false;
+                break;
+            }
+
+            inFrontmatter = true;
+            frontmatterLines.push(line);
+        }
+
+        if (inFrontmatter || 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 };
+            return (yaml.load(frontmatterLines.join("\n")) || {}) as { [key: string]: FrontmatterValue };
        } catch (error) {
            console.error("Failed to parse YAML frontmatter:", error);
            return {};
@@ -86,21 +111,21 @@ export class OpenEditPage {
    }

    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);
-            }
+        if (!this.supportsFrontmatter()) {
+            return content;
        }

-        return result.join("\n").trim();
+        const lines = content.split("\n");
+        if (lines[0]?.trim() !== "---") {
+            return content;
+        }
+
+        const endIndex = lines.slice(1).findIndex((line) => line.trim() === "---");
+        if (endIndex === -1) {
+            return content;
+        }
+
+        return lines.slice(endIndex + 2).join("\n").trim();
    }
 }

@@ -136,7 +161,7 @@ export class PageManager {
    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 {
+    private _t<T>(_n: number): (v: T) => T {
        return (v: T) => v;
    }

@@ -2,7 +2,7 @@
    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 { Check, ChevronsUpDown } from "@lucide/svelte";
    import { cn } from "@components/utils";
    import { dataRepo } from "@repo/data";
    import type { Player } from "@type/data";
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { Accordion as AccordionPrimitive } from "bits-ui";
-	import ChevronDown from "lucide-svelte/icons/chevron-down";
+	import ChevronDown from "@lucide/svelte/icons/chevron-down";
 	import { cn } from "$lib/components/utils.js";

 	type $$Props = AccordionPrimitive.TriggerProps;
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import Ellipsis from "lucide-svelte/icons/ellipsis";
+	import Ellipsis from "@lucide/svelte/icons/ellipsis";
 	import type { HTMLAttributes } from "svelte/elements";
 	import { cn } from "$lib/components/utils.js";

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import type { HTMLLiAttributes } from "svelte/elements";
-	import ChevronRight from "lucide-svelte/icons/chevron-right";
+	import ChevronRight from "@lucide/svelte/icons/chevron-right";
 	import { cn } from "$lib/components/utils.js";

 	type $$Props = HTMLLiAttributes & {
@@ -4,7 +4,7 @@
 	import { type VariantProps, tv } from "tailwind-variants";

 	export const buttonVariants = tv({
-		base: "ring-offset-background focus-visible:ring-ring inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+		base: "ring-offset-background focus-visible:ring-ring inline-flex cursor-pointer items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
 		variants: {
 			variant: {
 				default: "bg-primary text-primary-foreground hover:bg-primary/90",
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { Calendar as CalendarPrimitive } from "bits-ui";
-	import ChevronRight from "lucide-svelte/icons/chevron-right";
+	import ChevronRight from "@lucide/svelte/icons/chevron-right";
 	import { buttonVariants } from "$lib/components/ui/button/index.js";
 	import { cn } from "$lib/components/utils.js";

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { Calendar as CalendarPrimitive } from "bits-ui";
-	import ChevronLeft from "lucide-svelte/icons/chevron-left";
+	import ChevronLeft from "@lucide/svelte/icons/chevron-left";
 	import { buttonVariants } from "$lib/components/ui/button/index.js";
 	import { cn } from "$lib/components/utils.js";

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import ArrowRight from "lucide-svelte/icons/arrow-right";
+	import ArrowRight from "@lucide/svelte/icons/arrow-right";
 	import type { VariantProps } from "tailwind-variants";
 	import { getEmblaContext } from "./context.js";
 	import { cn } from "$lib/components/utils.js";
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import ArrowLeft from "lucide-svelte/icons/arrow-left";
+	import ArrowLeft from "@lucide/svelte/icons/arrow-left";
 	import type { VariantProps } from "tailwind-variants";
 	import { getEmblaContext } from "./context.js";
 	import { cn } from "$lib/components/utils.js";
@@ -16,7 +16,7 @@
 <CheckboxPrimitive.Root
 	bind:ref
 	class={cn(
-		"border-primary ring-offset-background focus-visible:ring-ring data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground peer box-content size-4 shrink-0 rounded-sm border focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[disabled=true]:cursor-not-allowed data-[disabled=true]:opacity-50",
+		"border-primary ring-offset-background focus-visible:ring-ring data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground peer box-content size-4 shrink-0 cursor-pointer rounded-sm border focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[disabled=true]:cursor-not-allowed data-[disabled=true]:opacity-50",
 		className
 	)}
 	bind:checked
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { Command as CommandPrimitive } from "bits-ui";
-	import Search from "lucide-svelte/icons/search";
+	import Search from "@lucide/svelte/icons/search";
 	import { cn } from "$lib/components/utils.js";

 	let {
@@ -11,7 +11,7 @@

 <CommandPrimitive.Item
 	class={cn(
-		"aria-selected:bg-accent aria-selected:text-accent-foreground relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+		"aria-selected:bg-accent aria-selected:text-accent-foreground relative flex cursor-pointer select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
 		className
 	)}
 	bind:ref
@@ -11,7 +11,7 @@

 <CommandPrimitive.LinkItem
 	class={cn(
-		"aria-selected:bg-accent aria-selected:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+		"aria-selected:bg-accent aria-selected:text-accent-foreground relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
 		className
 	)}
 	bind:ref
@@ -1,11 +1,9 @@
 <script lang="ts">
 	import { ContextMenu as ContextMenuPrimitive } from "bits-ui";
-	import Check from "lucide-svelte/icons/check";
+	import Check from "@lucide/svelte/icons/check";
 	import { cn } from "$lib/components/utils.js";

 	type $$Props = ContextMenuPrimitive.CheckboxItemProps;
-	type $$Events = ContextMenuPrimitive.CheckboxItemEvents;
-
 	let className: $$Props["class"] = undefined;
 	export let checked: $$Props["checked"] = undefined;
 	export { className as class };
@@ -14,7 +12,7 @@
 <ContextMenuPrimitive.CheckboxItem
 	bind:checked
 	class={cn(
-		"data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+		"data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground relative flex cursor-pointer select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
 		className
 	)}
 	{...$$restProps}
@@ -26,10 +24,12 @@
 	on:pointerleave
 	on:pointermove
 >
-	<span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
-		<ContextMenuPrimitive.CheckboxIndicator>
+	{#snippet children({ checked })}
+		<span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+		{#if checked}
 			<Check class="h-4 w-4" />
-		</ContextMenuPrimitive.CheckboxIndicator>
-	</span>
-	<slot />
+		{/if}
+		</span>
+		<slot />
+	{/snippet}
 </ContextMenuPrimitive.CheckboxItem>
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
YoyoNow	befc69cefc	src/content/rules/de/warship.md aktualisiert SteamWar CI / Build (push) Successful in 1m55s Details SteamWar CI / Deploy (push) Successful in 10s Details	2026-06-10 20:58:59 +02:00
YoyoNow	cdc2ae2432	src/content/rules/de/warship.md aktualisiert SteamWar CI / Build (push) Successful in 1m59s Details SteamWar CI / Deploy (push) Successful in 12s Details	2026-06-10 20:49:51 +02:00
JajaKings	69527cf2e9	Updated miniwargear.md SteamWar CI / Build (push) Successful in 1m53s Details SteamWar CI / Deploy (push) Successful in 11s Details	2026-06-04 13:18:24 +02:00
JajaKings	bca2d6e85e	Updated miniwargear.md SteamWar CI / Build (push) Successful in 1m53s Details SteamWar CI / Deploy (push) Successful in 10s Details	2026-06-03 23:55:49 +02:00
DreamJxnas	53886332f0	Added title numeration SteamWar CI / Build (push) Successful in 1m53s Details SteamWar CI / Deploy (push) Successful in 10s Details	2026-05-30 22:55:23 +02:00
DreamJxnas	1011ab1245	Added title numeration SteamWar CI / Build (push) Successful in 1m56s Details SteamWar CI / Deploy (push) Successful in 10s Details	2026-05-30 22:54:17 +02:00
Chaoscaot	167992769e	Improve localized page path resolution SteamWar CI / Build (push) Successful in 1m53s Details SteamWar CI / Deploy (push) Successful in 10s Details - Resolve page locale from source paths instead of IDs - Deduplicate localized fallback paths and pass page descriptions to layout	2026-05-24 10:55:25 +02:00
Chaoscaot	413c84e293	Add pointer cursor styling to interactive UI primitives SteamWar CI / Build (push) Successful in 1m53s Details SteamWar CI / Deploy (push) Successful in 10s Details - Update buttons, inputs, menus, tabs, sliders, and dialogs to show pointer cursors - Keep disabled states unchanged	2026-05-19 10:19:23 +02:00
Chaoscaot	4c434f8511	Enhance theme variables in app.css for improved styling consistency SteamWar CI / Build (push) Successful in 1m47s Details SteamWar CI / Deploy (push) Successful in 9s Details	2026-05-18 23:36:25 +02:00
Chaoscaot	038c2768e6	Update Website SteamWar CI / Build (push) Successful in 1m55s Details SteamWar CI / Deploy (push) Successful in 10s Details	2026-05-18 23:24:15 +02:00
Chaoscaot	a9260b1ca0	Refactor code structure for improved readability and maintainability SteamWar CI / Build (push) Successful in 1m48s Details SteamWar CI / Deploy (push) Successful in 10s Details	2026-05-15 13:30:24 +02:00
Chaoscaot	9717946784	Merge branch 'master' of https://git.steamwar.de/SteamWar/Website SteamWar CI / Build (push) Failing after 1m6s Details SteamWar CI / Deploy (push) Has been skipped Details	2026-05-15 13:27:07 +02:00
Chaoscaot	46ad3599e8	Add Gitea CI workflow for build and deploy - Move CI config into `.gitea/workflows/steamwarci.yml` - Build with pnpm, sync i18n, and upload `dist/` - Deploy master pushes to `/var/www/html` over SCP	2026-05-15 13:26:54 +02:00
Chaoscaot	e27269ec8b	Updated 2026-wgs.md SteamWarCI Build successful Details	2026-05-09 14:31:00 +02:00
JajaKings	388492cd21	Updated 2026-wgs.md SteamWarCI Build successful Details	2026-05-07 16:32:23 +02:00
Chaoscaot	b98f197d14	Make group round grouping configurable SteamWarCI Build successful Details - Add round grouping time and prefix to group view config - Use the new settings in group display and editor defaults	2026-05-07 16:28:51 +02:00
JajaKings	fc53376c73	Updated 2026-wgs.md SteamWarCI Build successful Details	2026-05-07 16:17:45 +02:00
JajaKings	ae5d232c54	Updated 2026-wgs.md SteamWarCI Build successful Details	2026-05-07 16:11:27 +02:00
Chaoscaot	08e2e37737	Merge pull request 'Add schema-driven frontmatter editor' (#24 ) from feature/frontmatter-schema-editor into master SteamWarCI Build successful Details Reviewed-on: #24 Reviewed-by: D4rkr34lm <dark@steamwar.de>	2026-05-07 16:05:09 +02:00
Chaoscaot	3b7aafd56e	Add schema-driven frontmatter editor SteamWarCI Build successful Details - Render frontmatter fields from content schemas - Add specialized selectors for events, images, and view config - Refresh the pages editor layout and tab bar	2026-05-07 15:56:58 +02:00