Refactor FightTable and GroupTable components to use numeric group identifiers; enhance event handling in FightEdit and EventFightList; add new Pages management UI with editor tabs; improve event data handling and display logic; update event types to include hasFinished status; optimize announcement page rendering and structure.

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

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