Refactor event and fight repositories to use numeric IDs for groups; update datetime picker input handling; add new generator components for event fights and group phases.

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

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

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

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