From 084ee855127a3be21b0ca56458574b639c651325 Mon Sep 17 00:00:00 2001
From: Sabine Maennel <5292683+sabinem@users.noreply.github.com>
Date: Fri, 9 Oct 2026 07:08:45 +0200
Subject: [PATCH 1/3] feat(frontend): keep unsaved team changes in view and ask
 before leaving

Following an in-app link off Manage Teams dropped unsaved changes without
a word, because only closing the tab was guarded. A beforeNavigate guard
now asks first. A sticky bar with the change summary, Discard and Save
appears while anything is unsaved, so Save stays in reach however far
down the projects one scrolls, and it repeats a failed save's message.
---
 CHANGELOG.md                                  |  3 +
 .../hackathon/[id]/teams/manage/+page.svelte  | 63 ++++++++++++++-----
 2 files changed, 49 insertions(+), 17 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 066e6266..95edcd06 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -18,6 +18,9 @@ written while it was being built. See [RELEASING.md](RELEASING.md).
 
 ### Added
 
+- Manage Teams makes unsaved changes hard to lose: a bar at the bottom of the
+  screen shows them with Save and Discard while you scroll, and following a link
+  away from the page asks first.
 - Manage Teams fixes the teams once a team has a submission or teams are
   published: a notice says why, and uploading, adding and deleting teams are
   disabled. People can still be moved between teams or to Unassigned by hand,
diff --git a/components/frontend/src/routes/(app)/my/hackathon/[id]/teams/manage/+page.svelte b/components/frontend/src/routes/(app)/my/hackathon/[id]/teams/manage/+page.svelte
index a48e1635..c03615df 100644
--- a/components/frontend/src/routes/(app)/my/hackathon/[id]/teams/manage/+page.svelte
+++ b/components/frontend/src/routes/(app)/my/hackathon/[id]/teams/manage/+page.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
     import { enhance } from '$app/forms';
+    import { beforeNavigate } from '$app/navigation';
     import { resolve } from '$app/paths';
     import {
         Check,
@@ -567,6 +568,17 @@
         );
         saveForm.requestSubmit();
     }
+
+    // A link inside the app leaves without unloading the page, so the window's
+    // `beforeunload` below never hears of it — and the workspace goes with the
+    // component, silently. Closing or reloading the tab (`leave`) is the
+    // browser's own prompt's job, which cannot be replaced by a `confirm`.
+    beforeNavigate((navigation) => {
+        if (changes.total === 0 || navigation.type === 'leave') return;
+        if (!confirm(`You have unsaved changes (${changes.summary}). Leave without saving?`)) {
+            navigation.cancel();
+        }
+    });
 </script>
 
 <svelte:window
@@ -768,28 +780,14 @@
             How assignment works
         </button>
 
+        <!-- Status only: Save and Discard live in the bar at the bottom, which
+             appears with the first change and stays in view while scrolling. -->
         <div class="ml-auto flex items-center gap-3">
             {#if changes.total > 0}
-                <span class="text-xs text-ink-2">Unsaved: {changes.summary}</span>
+                <span class="text-xs text-warning-ink">Unsaved: {changes.summary}</span>
             {:else}
                 <span class="text-xs text-ink-3">No unsaved changes</span>
             {/if}
-            <button
-                type="button"
-                class="btn btn-sm btn-ghost"
-                disabled={pending || changes.total === 0}
-                onclick={discard}
-            >
-                Discard
-            </button>
-            <button
-                type="button"
-                class="btn btn-sm"
-                disabled={pending || changes.total === 0}
-                onclick={save}
-            >
-                Save
-            </button>
         </div>
     </div>
 
@@ -1314,4 +1312,35 @@
             {/if}
         </section>
     </div>
+
+    <!-- Up only while something is unsaved, and sticky so it is in view
+         however far down the projects the organizer has scrolled: the toolbar
+         is long gone by project fifteen. Warning, not accent — unsaved is a
+         state. It repeats a failed save's message, which otherwise sits at the
+         top of the page, out of sight. -->
+    {#if changes.total > 0}
+        <div
+            class="sticky bottom-0 z-10 flex flex-wrap items-center gap-3 rounded-card border
+                   border-warning bg-raised px-3 py-2 text-xs"
+            role="status"
+        >
+            <span class="flex-1 text-warning-ink">
+                {pending ? 'Saving…' : `Unsaved changes: ${changes.summary}`}
+            </span>
+            {#if form?.message && !pending}
+                <span class="text-danger-ink">{form.message}</span>
+            {/if}
+            <button
+                type="button"
+                class="btn btn-sm btn-ghost"
+                disabled={pending}
+                onclick={discard}
+            >
+                Discard
+            </button>
+            <button type="button" class="btn btn-sm btn-solid" disabled={pending} onclick={save}>
+                Save
+            </button>
+        </div>
+    {/if}
 </div>

From 99a3555cd6031d7458009997314c316d0f382223 Mon Sep 17 00:00:00 2001
From: Sabine Maennel <5292683+sabinem@users.noreply.github.com>
Date: Fri, 9 Oct 2026 07:29:49 +0200
Subject: [PATCH 2/3] feat(frontend): mark unsaved team changes and keep Save
 at the top
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The save bar moves to the top, sticks below the nav bar and is always
there — quiet while everything is saved, warning-colored once anything
is not — so Save is in one place. People whose team changed and teams
that are new or renamed carry the same warning color until saved, so
the page shows what the bar is counting.
---
 CHANGELOG.md                                  |   5 +-
 .../hackathon/[id]/teams/manage/+page.svelte  | 129 +++++++++++-------
 2 files changed, 81 insertions(+), 53 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 95edcd06..1942eab4 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -18,8 +18,9 @@ written while it was being built. See [RELEASING.md](RELEASING.md).
 
 ### Added
 
-- Manage Teams makes unsaved changes hard to lose: a bar at the bottom of the
-  screen shows them with Save and Discard while you scroll, and following a link
+- Manage Teams makes unsaved changes hard to lose: a bar at the top stays in
+  view while you scroll and shows what is unsaved with Save and Discard, the
+  people and teams that changed are marked until saved, and following a link
   away from the page asks first.
 - Manage Teams fixes the teams once a team has a submission or teams are
   published: a notice says why, and uploading, adding and deleting teams are
diff --git a/components/frontend/src/routes/(app)/my/hackathon/[id]/teams/manage/+page.svelte b/components/frontend/src/routes/(app)/my/hackathon/[id]/teams/manage/+page.svelte
index c03615df..494a7011 100644
--- a/components/frontend/src/routes/(app)/my/hackathon/[id]/teams/manage/+page.svelte
+++ b/components/frontend/src/routes/(app)/my/hackathon/[id]/teams/manage/+page.svelte
@@ -372,28 +372,38 @@
         const kept = locked ? teams : teams.filter((t) => t.memberIds.length > 0);
         const alive = new Set(kept.map((t) => t.key));
 
-        const added = kept.filter((t) => t.id === null).length;
+        const addedKeys = kept.filter((t) => t.id === null).map((t) => t.key);
         const removed = base.filter((t) => !alive.has(t.key)).length;
-        const renamed = kept.filter(
-            (t) => t.id !== null && nameBefore.get(t.key) !== t.name
-        ).length;
+        const renamedKeys = kept
+            .filter((t) => t.id !== null && nameBefore.get(t.key) !== t.name)
+            .map((t) => t.key);
 
         const teamOf = (list: WorkTeam[]) =>
             new Map(list.flatMap((t) => t.memberIds.map((m) => [m, t.key] as const)));
         const before = teamOf(base);
         const after = teamOf(teams);
-        let moved = 0;
-        for (const id of new Set([...before.keys(), ...after.keys()])) {
-            if (before.get(id) !== after.get(id)) moved++;
-        }
+        const movedIds = [...new Set([...before.keys(), ...after.keys()])].filter(
+            (id) => before.get(id) !== after.get(id)
+        );
 
+        const added = addedKeys.length;
+        const renamed = renamedKeys.length;
+        const moved = movedIds.length;
         const parts: string[] = [];
         if (added > 0) parts.push(`${added} new ${added === 1 ? 'team' : 'teams'}`);
         if (removed > 0) parts.push(`${removed} deleted`);
         if (renamed > 0) parts.push(`${renamed} renamed`);
         if (moved > 0) parts.push(`${moved} ${moved === 1 ? 'move' : 'moves'}`);
 
-        return { total: added + removed + renamed + moved, summary: parts.join(', ') };
+        return {
+            total: added + removed + renamed + moved,
+            summary: parts.join(', '),
+            // What to mark on the page until it is saved: the people whose team
+            // changed, and the teams that are new or renamed. A deleted team is
+            // gone from the page and has nothing left to mark.
+            movedIds: new Set(movedIds),
+            changedTeamKeys: new Set([...addedKeys, ...renamedKeys])
+        };
     });
 
     function startEdit(key: string, name: string) {
@@ -611,14 +621,20 @@
 )}
     {@const matches = projectId !== null && person.preferredProjectIds.includes(projectId)}
     {@const answers = answersFor(person)}
+    {@const unsaved = changes.movedIds.has(person.id)}
+    <!-- Warning-tinted while their move is unsaved: the same color as the
+         save bar, so the bar and what it is about read as one thing. -->
     <!-- svelte-ignore a11y_no_static_element_interactions -->
     <div
         draggable="true"
         ondragstart={(e) => startDrag(e, person.id, from)}
         ondragend={endDrag}
-        class="flex cursor-grab items-center gap-1.5 rounded-card border border-line bg-raised
-               px-2 py-1 active:cursor-grabbing"
+        class="flex cursor-grab items-center gap-1.5 rounded-card border px-2 py-1
+               active:cursor-grabbing {unsaved
+            ? 'border-warning bg-warning/10'
+            : 'border-line bg-raised'}"
         class:opacity-40={draggedId === person.id}
+        title={unsaved ? 'Moved — not saved yet' : undefined}
     >
         <GripVertical class="size-3 shrink-0 text-ink-3" />
         <div class="flex min-w-0 flex-1 flex-col">
@@ -695,6 +711,50 @@
         <h2 class="m-0 text-title text-ink">Manage Teams</h2>
     </div>
 
+    <!-- Save lives here, always, and sticks below the nav bar (`top-14`, the
+         same offset the sidebar uses) so it stays in reach however far down
+         the projects the organizer has scrolled. Quiet while everything is
+         saved; warning-colored as soon as anything is not — unsaved is a
+         state, so warning rather than accent, and the same color marks what
+         changed on the page. A failed save's message is repeated here, where
+         it is in view. -->
+    <div
+        class="sticky top-14 z-10 flex flex-wrap items-center gap-3 rounded-card border px-3
+               py-2 text-xs {changes.total > 0
+            ? 'border-warning bg-warning/10'
+            : 'border-line bg-raised'}"
+        role="status"
+    >
+        <span class="flex-1 {changes.total > 0 ? 'text-warning-ink' : 'text-ink-3'}">
+            {#if pending}
+                Saving…
+            {:else if changes.total > 0}
+                Unsaved changes, marked on the page: {changes.summary}
+            {:else}
+                No unsaved changes
+            {/if}
+        </span>
+        {#if form?.message && !pending}
+            <span class="text-danger-ink">{form.message}</span>
+        {/if}
+        <button
+            type="button"
+            class="btn btn-sm btn-ghost"
+            disabled={pending || changes.total === 0}
+            onclick={discard}
+        >
+            Discard
+        </button>
+        <button
+            type="button"
+            class="btn btn-sm btn-solid"
+            disabled={pending || changes.total === 0}
+            onclick={save}
+        >
+            Save
+        </button>
+    </div>
+
     {#if locked}
         <div
             class="flex items-start gap-2 rounded-card border border-warning bg-warning/10 px-3 py-2
@@ -780,15 +840,6 @@
             How assignment works
         </button>
 
-        <!-- Status only: Save and Discard live in the bar at the bottom, which
-             appears with the first change and stays in view while scrolling. -->
-        <div class="ml-auto flex items-center gap-3">
-            {#if changes.total > 0}
-                <span class="text-xs text-warning-ink">Unsaved: {changes.summary}</span>
-            {:else}
-                <span class="text-xs text-ink-3">No unsaved changes</span>
-            {/if}
-        </div>
     </div>
 
     <!-- The rules of the page in one place: what Save does (see the `save`
@@ -1135,6 +1186,13 @@
                                         ondrop={(e) => drop(e, t.key)}
                                         class="card flex w-64 flex-col"
                                         class:border-accent={dropTarget === t.key}
+                                        class:border-warning={dropTarget !== t.key &&
+                                            changes.changedTeamKeys.has(t.key)}
+                                        title={changes.changedTeamKeys.has(t.key)
+                                            ? t.id === null
+                                                ? 'New team — not saved yet'
+                                                : 'Renamed — not saved yet'
+                                            : undefined}
                                     >
                                         <header
                                             class="flex items-center gap-1 border-b border-line px-2 py-1"
@@ -1312,35 +1370,4 @@
             {/if}
         </section>
     </div>
-
-    <!-- Up only while something is unsaved, and sticky so it is in view
-         however far down the projects the organizer has scrolled: the toolbar
-         is long gone by project fifteen. Warning, not accent — unsaved is a
-         state. It repeats a failed save's message, which otherwise sits at the
-         top of the page, out of sight. -->
-    {#if changes.total > 0}
-        <div
-            class="sticky bottom-0 z-10 flex flex-wrap items-center gap-3 rounded-card border
-                   border-warning bg-raised px-3 py-2 text-xs"
-            role="status"
-        >
-            <span class="flex-1 text-warning-ink">
-                {pending ? 'Saving…' : `Unsaved changes: ${changes.summary}`}
-            </span>
-            {#if form?.message && !pending}
-                <span class="text-danger-ink">{form.message}</span>
-            {/if}
-            <button
-                type="button"
-                class="btn btn-sm btn-ghost"
-                disabled={pending}
-                onclick={discard}
-            >
-                Discard
-            </button>
-            <button type="button" class="btn btn-sm btn-solid" disabled={pending} onclick={save}>
-                Save
-            </button>
-        </div>
-    {/if}
 </div>

From 5e90a9e9f45d442ea4d01ce737b37e1d4cab5e09 Mon Sep 17 00:00:00 2001
From: Sabine Maennel <5292683+sabinem@users.noreply.github.com>
Date: Fri, 9 Oct 2026 07:45:58 +0200
Subject: [PATCH 3/3] feat(frontend): ask Manage Teams' questions in the app's
 own dialog

The native confirm() cannot be styled, introduces itself as
"localhost:8081 says" and only offers "OK". A ConfirmDialog component,
built on <dialog> with showModal(), asks instead: themed, with Cancel
focused and a confirm button that names its action. Manage Teams uses it
for replacing teams on upload, deleting a saved team, and leaving with
unsaved changes; the navigation guard cancels, asks, and resumes the
navigation on a "leave".
---
 .../components/layout/ConfirmDialog.svelte    | 73 +++++++++++++++++++
 .../hackathon/[id]/teams/manage/+page.svelte  | 62 +++++++++++++---
 2 files changed, 126 insertions(+), 9 deletions(-)
 create mode 100644 components/frontend/src/lib/components/layout/ConfirmDialog.svelte

diff --git a/components/frontend/src/lib/components/layout/ConfirmDialog.svelte b/components/frontend/src/lib/components/layout/ConfirmDialog.svelte
new file mode 100644
index 00000000..5138ca89
--- /dev/null
+++ b/components/frontend/src/lib/components/layout/ConfirmDialog.svelte
@@ -0,0 +1,73 @@
+<!-- A question that needs an answer before going on — the app's own
+     `confirm()`. The native one cannot be styled, says "localhost:8081 says",
+     and can only offer "OK"; this one names its action ("Delete team") and
+     looks like the rest of the app.
+
+     Built on `<dialog>` opened with `showModal()`, which brings what a modal
+     needs for free: the page behind is inert, focus stays inside, Esc cancels,
+     and screen readers announce it as a dialog. One instance per page; call
+     `ask()` through `bind:this` and await the answer. -->
+<script lang="ts">
+    type Question = {
+        title: string;
+        message: string;
+        /** What the confirming button says — the action, never "OK". */
+        confirmLabel: string;
+        /** Red confirm button, for something that cannot simply be undone. */
+        danger?: boolean;
+    };
+
+    let dialog: HTMLDialogElement;
+    let current: Question | null = $state(null);
+    let settle: ((answer: boolean) => void) | null = null;
+
+    /** Shows the question; resolves `true` on confirm, `false` otherwise. */
+    export function ask(question: Question): Promise<boolean> {
+        // A question still open is answered "no" rather than left hanging.
+        settle?.(false);
+        current = question;
+        dialog.showModal();
+
+        return new Promise((resolve) => (settle = resolve));
+    }
+
+    function answer(confirmed: boolean) {
+        const resolve = settle;
+        settle = null;
+        dialog.close();
+        resolve?.(confirmed);
+    }
+</script>
+
+<!-- `close` fires for Esc too, which is a "no". A click on the backdrop lands
+     on the dialog element itself, never on its content, and is a "no" as well. -->
+<dialog
+    bind:this={dialog}
+    aria-labelledby="confirm-dialog-title"
+    onclose={() => answer(false)}
+    onclick={(e) => {
+        if (e.target === dialog) answer(false);
+    }}
+    class="m-auto w-[min(28rem,calc(100vw-2rem))] rounded-card border border-line bg-surface p-0
+           text-ink shadow-lg backdrop:bg-scrim"
+>
+    {#if current}
+        <div class="flex flex-col gap-3 p-4">
+            <h2 id="confirm-dialog-title" class="m-0 text-section">{current.title}</h2>
+            <p class="m-0 font-sans text-sm text-ink-2">{current.message}</p>
+            <div class="flex justify-end gap-2 pt-1">
+                <!-- First, so it has the focus: a slip of Enter cancels. -->
+                <button type="button" class="btn btn-sm btn-ghost" onclick={() => answer(false)}>
+                    Cancel
+                </button>
+                <button
+                    type="button"
+                    class="btn btn-sm {current.danger ? 'btn-danger-solid' : 'btn-solid'}"
+                    onclick={() => answer(true)}
+                >
+                    {current.confirmLabel}
+                </button>
+            </div>
+        </div>
+    {/if}
+</dialog>
diff --git a/components/frontend/src/routes/(app)/my/hackathon/[id]/teams/manage/+page.svelte b/components/frontend/src/routes/(app)/my/hackathon/[id]/teams/manage/+page.svelte
index 494a7011..191a56e2 100644
--- a/components/frontend/src/routes/(app)/my/hackathon/[id]/teams/manage/+page.svelte
+++ b/components/frontend/src/routes/(app)/my/hackathon/[id]/teams/manage/+page.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
     import { enhance } from '$app/forms';
-    import { beforeNavigate } from '$app/navigation';
+    import { beforeNavigate, goto } from '$app/navigation';
     import { resolve } from '$app/paths';
     import {
         Check,
@@ -15,6 +15,7 @@
         X
     } from 'lucide-svelte';
     import ManageHubBackLink from '$lib/components/hackathon/ManageHubBackLink.svelte';
+    import ConfirmDialog from '$lib/components/layout/ConfirmDialog.svelte';
     import { applyAssignmentCsv, type ImportResult } from '$lib/utils/teamAssignmentCsv';
     import { initialsOf } from '$lib/utils/teamDistribution';
     import {
@@ -306,6 +307,9 @@
     let pending: boolean = $state(false);
 
     let saveForm: HTMLFormElement;
+    // Every question this page asks — replacing teams, deleting one, leaving
+    // with unsaved changes — goes through this one dialog.
+    let confirmDialog: ReturnType<typeof ConfirmDialog>;
     let savePayload: HTMLInputElement;
 
     /** What the last uploaded file did, until it is dismissed or superseded. */
@@ -419,7 +423,7 @@
         editingKey = null;
     }
 
-    function removeTeam(key: string, name: string) {
+    async function removeTeam(key: string, name: string) {
         const team = teams.find((t) => t.key === key);
         if (team === undefined) return;
         // Only a team that exists on the server is a real loss — and deleting it
@@ -427,7 +431,14 @@
         // not yet saved is nothing to lose.
         if (
             team.id !== null &&
-            !confirm(`Delete "${name}" when you save? Its members become unassigned.`)
+            !(await confirmDialog.ask({
+                title: `Delete team "${name}"?`,
+                message:
+                    'Its members become unassigned. The team is deleted when you save, ' +
+                    'together with anything it has submitted.',
+                confirmLabel: 'Delete team',
+                danger: true
+            }))
         ) {
             return;
         }
@@ -524,7 +535,16 @@
         input.value = '';
         if (file === undefined || pending) return;
 
-        if (teams.length > 0 && !confirm('Uploading replaces all current teams. Continue?')) {
+        if (
+            teams.length > 0 &&
+            !(await confirmDialog.ask({
+                title: 'Replace all teams?',
+                message:
+                    'Uploading replaces all current teams with the ones in the file. ' +
+                    'Nothing is saved until you press Save.',
+                confirmLabel: 'Replace teams'
+            }))
+        ) {
             return;
         }
 
@@ -582,12 +602,34 @@
     // A link inside the app leaves without unloading the page, so the window's
     // `beforeunload` below never hears of it — and the workspace goes with the
     // component, silently. Closing or reloading the tab (`leave`) is the
-    // browser's own prompt's job, which cannot be replaced by a `confirm`.
+    // browser's own prompt's job, which no page can replace.
+    //
+    // The guard cannot wait for an answer — it has to cancel or not right
+    // away — so it always cancels, asks, and on a "yes" goes where the
+    // organizer was heading, with `leaving` set so it does not ask twice.
+    let leaving = false;
+
     beforeNavigate((navigation) => {
-        if (changes.total === 0 || navigation.type === 'leave') return;
-        if (!confirm(`You have unsaved changes (${changes.summary}). Leave without saving?`)) {
-            navigation.cancel();
-        }
+        if (leaving || changes.total === 0 || navigation.type === 'leave') return;
+        const target = navigation.to?.url;
+        navigation.cancel();
+        if (!target) return;
+
+        void confirmDialog
+            .ask({
+                title: 'Leave without saving?',
+                message: `You have unsaved changes: ${changes.summary}. They are lost if you leave.`,
+                confirmLabel: 'Leave without saving',
+                danger: true
+            })
+            .then((leave) => {
+                if (!leave) return;
+                leaving = true;
+                // Another site cannot be reached through the router.
+                if (navigation.willUnload) window.location.href = target.href;
+                // eslint-disable-next-line svelte/no-navigation-without-resolve -- the URL SvelteKit was already navigating to, resolved by whatever link started it
+                else void goto(target);
+            });
     });
 </script>
 
@@ -613,6 +655,8 @@
     <input type="hidden" name="teams" bind:this={savePayload} />
 </form>
 
+<ConfirmDialog bind:this={confirmDialog} />
+
 {#snippet personRow(
     person: Person,
     from: string,