feat(account): nostr login

package.json

@@ -60,6 +60,7 @@
 		"localforage": "^1.10.0",
 		"maplibre-gl": "^4.7.1",
 		"marked": "^18.0.0",
+		"nostr-tools": "^2.23.3",
 		"opening_hours": "^3.12.0",
 		"qrcode": "^1.5.4",
 		"svelte-i18n": "^4.0.1",

src/components/Icon.svelte

@@ -20,7 +20,8 @@ const materialExceptions: Record<string, string> = {
 	currency_bitcoin: "material-symbols:currency-bitcoin",
 	close_round: "ic:round-close",
 	my_location: "material-symbols:my-location-rounded",
-	bookmark_filled: "ic:baseline-bookmark",
+	bookmark_filled: "ic:baseline-bookmark-added",
+	account_circle_filled: "ic:baseline-account-circle",
 };
 
 const faBrandIcons = ["x-twitter", "instagram", "facebook", "twitter"];

src/components/SaveButton.svelte

@@ -3,7 +3,7 @@ import Icon from "$components/Icon.svelte";
 import api from "$lib/axios";
 import { _ } from "$lib/i18n";
 import { session } from "$lib/session";
-import { errToast } from "$lib/utils";
+import { errToast, successToast } from "$lib/utils";
 
 // The numeric ID of the item to save/unsave.
 export let id: number;
@@ -56,6 +56,7 @@ async function toggle() {
 		let current = previousSession;
 		if (!current) {
 			current = await session.signUp();
+			successToast($_("save.accountCreated"));
 		}
 
 		const nextSaved =

src/components/auth/BackupModal.svelte

@@ -0,0 +1,115 @@
+<script lang="ts">
+import { createEventDispatcher } from "svelte";
+
+import Icon from "$components/Icon.svelte";
+import { _ } from "$lib/i18n";
+import { session } from "$lib/session";
+import { successToast } from "$lib/utils";
+
+const dispatch = createEventDispatcher();
+
+let showPassword = false;
+
+async function copyToClipboard(text: string) {
+	try {
+		await navigator.clipboard.writeText(text);
+		successToast($_("backup.copied"));
+	} catch (err) {
+		console.error("Clipboard write failed", err);
+	}
+}
+</script>
+
+<svelte:window on:keydown={(e) => e.key === "Escape" && dispatch("close")} />
+
+<div
+	role="presentation"
+	class="fixed inset-0 z-[100] flex items-center justify-center bg-black/50"
+	on:click|self={() => dispatch("close")}
+>
+	<div class="mx-4 w-full max-w-sm rounded-xl bg-white p-6 shadow-xl dark:bg-dark">
+		<div class="mb-4 flex items-center justify-between">
+			<h2 class="text-xl font-semibold text-primary dark:text-white">
+				{$_("backup.title")}
+			</h2>
+			<button
+				type="button"
+				on:click={() => dispatch("close")}
+				class="text-body transition-colors hover:text-primary dark:text-white/50 dark:hover:text-white"
+			>
+				<Icon type="material" icon="close" w="20" h="20" />
+			</button>
+		</div>
+
+		<p class="mb-4 text-sm text-body dark:text-white/70">
+			{$_("backup.description")}
+		</p>
+
+		{#if $session}
+			<div class="space-y-3">
+				<div>
+					<label for="backup-username" class="mb-1 block text-xs font-semibold text-body dark:text-white/70">
+						{$_("backup.username")}
+					</label>
+					<div class="flex items-center gap-2">
+						<input
+							id="backup-username"
+							type="text"
+							readonly
+							value={$session.username}
+							class="w-full rounded-lg border border-gray-300 bg-gray-50 px-3 py-2 text-sm text-primary dark:border-white/20 dark:bg-white/5 dark:text-white"
+						/>
+						<button
+							on:click={() => copyToClipboard($session?.username ?? "")}
+							class="shrink-0 rounded-lg border border-gray-300 p-2 transition-colors hover:bg-gray-100 dark:border-white/20 dark:hover:bg-white/10"
+							title={$_("backup.copy")}
+						>
+							<Icon type="material" icon="content_copy" w="16" h="16" class="text-primary dark:text-white" />
+						</button>
+					</div>
+				</div>
+
+				<div>
+					<label for="backup-password" class="mb-1 block text-xs font-semibold text-body dark:text-white/70">
+						{$_("backup.password")}
+					</label>
+					<div class="flex items-center gap-2">
+						<input
+							id="backup-password"
+							type={showPassword ? "text" : "password"}
+							readonly
+							value={$session.password || $_("backup.unavailable")}
+							class="w-full rounded-lg border border-gray-300 bg-gray-50 px-3 py-2 text-sm text-primary dark:border-white/20 dark:bg-white/5 dark:text-white"
+						/>
+						<button
+							on:click={() => (showPassword = !showPassword)}
+							class="shrink-0 rounded-lg border border-gray-300 p-2 transition-colors hover:bg-gray-100 dark:border-white/20 dark:hover:bg-white/10"
+							title={showPassword ? $_("backup.hide") : $_("backup.show")}
+						>
+							<Icon
+								type="material"
+								icon={showPassword ? "visibility_off" : "visibility"}
+								w="16"
+								h="16"
+								class="text-primary dark:text-white"
+							/>
+						</button>
+						{#if $session.password}
+							<button
+								on:click={() => copyToClipboard($session?.password ?? "")}
+								class="shrink-0 rounded-lg border border-gray-300 p-2 transition-colors hover:bg-gray-100 dark:border-white/20 dark:hover:bg-white/10"
+								title={$_("backup.copy")}
+							>
+								<Icon type="material" icon="content_copy" w="16" h="16" class="text-primary dark:text-white" />
+							</button>
+						{/if}
+					</div>
+				</div>
+			</div>
+
+			<p class="mt-4 text-xs text-body dark:text-white/50">
+				{$_("backup.warning")}
+			</p>
+		{/if}
+	</div>
+</div>