feat(frontend): store pending profile changes in sessionStorage

Foxnouns.Frontend/src/lib/components/editor/LinksEditor.svelte

@@ -2,14 +2,16 @@
 	import type { RawApiError } from "$api/error";
 	import IconButton from "$components/IconButton.svelte";
 	import { t } from "$lib/i18n";
+	import ephemeralState from "$lib/state.svelte";
 	import FormStatusMarker from "./FormStatusMarker.svelte";
 
 	type Props = {
+		stateKey: string;
 		currentLinks: string[];
 		save(links: string[]): Promise<void>;
 		form: { ok: boolean; error: RawApiError | null } | null;
 	};
-	let { currentLinks, save, form }: Props = $props();
+	let { stateKey, currentLinks, save, form }: Props = $props();
 
 	let links = $state(currentLinks);
 	let newEntry = $state("");
@@ -37,6 +39,12 @@
 		links = [...links, newEntry];
 		newEntry = "";
 	};
+
+	ephemeralState(
+		stateKey,
+		() => links,
+		(data) => (links = data),
+	);
 </script>
 
 <h4>

Foxnouns.Frontend/src/lib/components/editor/ProfileFlagsEditor.svelte

@@ -4,16 +4,18 @@
 	import FlagSearch from "$components/editor/FlagSearch.svelte";
 	import IconButton from "$components/IconButton.svelte";
 	import { t } from "$lib/i18n";
+	import ephemeralState from "$lib/state.svelte";
 	import FlagButton from "./FlagButton.svelte";
 	import FormStatusMarker from "./FormStatusMarker.svelte";
 
 	type Props = {
+		stateKey: string;
 		profileFlags: PrideFlag[];
 		allFlags: PrideFlag[];
 		save(flags: string[]): Promise<void>;
 		form: { ok: boolean; error: RawApiError | null } | null;
 	};
-	let { profileFlags, allFlags, save, form }: Props = $props();
+	let { stateKey, profileFlags, allFlags, save, form }: Props = $props();
 
 	let flags = $state(profileFlags);
 
@@ -40,6 +42,12 @@
 	};
 
 	const saveChanges = () => save(flags.map((f) => f.id));
+
+	ephemeralState(
+		stateKey,
+		() => flags,
+		(data) => (flags = data),
+	);
 </script>
 
 <div class="row">

Foxnouns.Frontend/src/lib/state.svelte.ts

@@ -0,0 +1,37 @@
+import { onMount, onDestroy } from "svelte";
+import { browser } from "$app/environment";
+import log from "./log";
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import type { Snapshot } from "@sveltejs/kit";
+
+/**
+ * Store ephemeral state in sessionStorage to persist between navigations.
+ * Similar to {@link Snapshot}, but doesn't attach it to a history entry.
+ * @param key Unique key to use for this state.
+ * @param capture Function that returns the state to store.
+ * @param restore Function that takes the state that was stored previously and assigns it back to component variables.
+ */
+export default function ephemeralState<T>(
+	key: string,
+	capture: () => T,
+	restore: (data: T) => void,
+): void {
+	if (!browser) return;
+
+	onMount(() => {
+		if (!("sessionStorage" in window)) return;
+		const rawData = sessionStorage.getItem("ephemeral-" + key);
+		if (!rawData) return;
+
+		log.debug("Restoring data %s from session storage", key);
+		const data = JSON.parse(rawData) as T;
+		restore(data);
+	});
+
+	onDestroy(() => {
+		if (!("sessionStorage" in window)) return;
+
+		log.debug("Saving data %s to session storage", key);
+		sessionStorage.setItem("ephemeral-" + key, JSON.stringify(capture()));
+	});
+}