- implement stamps.

- fix #2

src/components/AnimatedQRCode.svelte

@@ -0,0 +1,41 @@
+<script lang="ts">
+	import { UR, UREncoder } from '@gandlaf21/bc-ur';
+	import { onDestroy, onMount } from 'svelte';
+	import { Buffer } from 'buffer';
+	import * as qr from 'qrcode';
+
+	let { value } = $props();
+
+	const ur = UR.fromBuffer(Buffer.from(value));
+
+	const encoder = new UREncoder(ur, 200, 0);
+
+	let displayedData = $state('');
+
+	let timeout = $state(0);
+
+	async function nextSegment() {
+		let nextPart = encoder.nextPart();
+		displayedData = await qr.toDataURL(nextPart);
+		timeout = setTimeout(nextSegment, 1000 / 15);
+	}
+
+	onMount(() => {
+		nextSegment();
+	});
+
+	onDestroy(() => {
+		if (timeout)
+			clearTimeout(timeout);
+	});
+</script>
+
+{#if displayedData}
+	<img src={displayedData} alt="QR Code" />
+{/if}
+
+<style>
+  img {
+    place-self: center;
+  }
+</style>

src/components/Dialog.svelte

@@ -4,7 +4,8 @@
 	let {
 		open = $bindable<boolean>(false),
 		children,
-		onClose = $bindable(() => console.log('Closed'))
+		onClose = $bindable(() => {
+		})
 	} = $props();
 
 	let dialog: HTMLDialogElement;
@@ -15,7 +16,7 @@
 <dialog
 	bind:this={dialog}
 	class="glass"
-	onclose={() => onClose()}
+	onclose={() => { open = false; onClose(); }}
 	use:appendToBody
 >
 	<div class="dialog-content">
@@ -62,6 +63,31 @@
     width: 100%;
     padding: var(--spacing-md);
 
+    > :global(.title) {
+      position: fixed;
+      display: flex;
+      width: calc(100% + 2 * var(--spacing-md));
+      margin: calc(var(--spacing-md) * -1);
+      padding: var(--spacing-md);
+      background: color-mix(in oklab, black 50%, var(--accent));
+      z-index: 99999;
+
+      > :global(.close-button) {
+        position: absolute;
+        top: var(--spacing-md);
+        right: calc(
+            var(--spacing-md) * 2 + 1.5rem
+        );
+      }
+
+      :global(& + *) {
+        margin-top: calc(
+            1.5rem +
+            var(--spacing-md) * 3
+        );
+      }
+    }
+
     > :global(*:not(:last-child)) {
       margin-bottom: var(--spacing-sm);
     }

src/components/MailboxFolderItems.svelte

@@ -119,7 +119,7 @@
 					</div>
 					{#if letter.stamps}
 						<div class="stamps-count">
-							<Icon icon='icon-park-twotone:stamp' />
+							<Icon icon="emojione-v1:stamped-envelope" />
 							{letter.stamps} sats
 						</div>
 					{/if}
@@ -148,7 +148,6 @@
 
 <Dialog
 	bind:open={moveFolderDialogOpen}
-	onClose={() => moveFolderDialogOpen = false}
 >
 	<h3>Move Letters to Folder</h3>
 	<p class="text-secondary">Select a folder to move the selected letters to:</p>
@@ -172,7 +171,7 @@
 						</div>
 						{#if letter.stamps}
 							<div class="stamps-count">
-								<Icon icon='icon-park-twotone:stamp' />
+								<Icon icon="emojione-v1:stamped-envelope" />
 								{letter.stamps} sats
 							</div>
 						{/if}

src/components/Tooltip.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { onDestroy, onMount } from 'svelte';
+	import '$lib/base.css';
 
 	export let content: string;
 	export let position: 'top' | 'bottom' | 'left' | 'right' = 'top';