From 4fdf8b57c93689d3288ab3ee8e969f7de4b40291 Mon Sep 17 00:00:00 2001
From: Danny Morabito <danny@arx-ccn.com>
Date: Fri, 29 Nov 2024 00:03:40 +0100
Subject: [PATCH] tentative fix for caching issues (#3), plus ux cleanup

---
 src/components/MailboxFolderItems.svelte | 97 +++++++++++++-----------
 src/components/NostrIdentifier.svelte    |  2 +-
 src/lib/letter.ts                        |  9 ---
 3 files changed, 52 insertions(+), 56 deletions(-)

diff --git a/src/components/MailboxFolderItems.svelte b/src/components/MailboxFolderItems.svelte
index 7a60191..7af8a0c 100644
--- a/src/components/MailboxFolderItems.svelte
+++ b/src/components/MailboxFolderItems.svelte
@@ -6,6 +6,7 @@
 	import Dialog from './Dialog.svelte';
 	import Select from './Select.svelte';
 	import type { Letter } from '$lib/letter';
+	import { slide } from 'svelte/transition';
 
 	let {
 		letters,
@@ -112,36 +113,38 @@
 {#snippet letterGroup(letters)}
 	<div class="letter-group">
 		{#each letters as letter}
-			<a class="letter-item" href="/letters/{letter.id}">
-				<div class="subject-line">
-					<div class="letter-subject">
-						<Icon icon="mdi:letter-outline" /> {letter.subject}
-					</div>
-					{#if letter.stamps}
-						<div class="stamps-count">
-							<Icon icon="emojione-v1:stamped-envelope" />
-							{letter.stamps} sats
+			{#key letter.id}
+				<a in:slide out:slide class="letter-item" href="/letters/{letter.id}">
+					<div class="subject-line">
+						<div class="letter-subject">
+							<Icon icon="mdi:letter-outline" /> {letter.subject}
 						</div>
-					{/if}
-				</div>
-				<div class="letter-from">
-					{#if folder.id === 'sent'}
-						{#each letter.recipients as recipient}
-							<NostrIdentifier user={recipient.npub} />
-						{/each}
-					{:else}
-						<NostrIdentifier user={letter.from.npub} emailAddress={letter.emailAddress} />
-					{/if}
-				</div>
-				<div class="letter-meta">
-					<Icon icon="mdi:calendar" />
-					{getReadableDate(letter.date)}
-					&nbsp;
-					<Icon icon="mdi:clock-outline" />
-					{getReadableTime(letter.date)}
-				</div>
-				<div class="letter-preview">{letter.preview}</div>
-			</a>
+						{#if letter.stamps}
+							<div class="stamps-count">
+								<Icon icon="emojione-v1:stamped-envelope" />
+								{letter.stamps} sats
+							</div>
+						{/if}
+					</div>
+					<div class="letter-from">
+						{#if folder.id === 'sent'}
+							{#each letter.recipients as recipient}
+								<NostrIdentifier user={recipient.npub} />
+							{/each}
+						{:else}
+							<NostrIdentifier user={letter.from.npub} emailAddress={letter.emailAddress} />
+						{/if}
+					</div>
+					<div class="letter-meta">
+						<Icon icon="mdi:calendar" />
+						{getReadableDate(letter.date)}
+						&nbsp;
+						<Icon icon="mdi:clock-outline" />
+						{getReadableTime(letter.date)}
+					</div>
+					<div class="letter-preview">{letter.preview}</div>
+				</a>
+			{/key}
 		{/each}
 	</div>
 {/snippet}
@@ -161,25 +164,27 @@
 	<div class="letter-list">
 		<div class="letter-group">
 			{#each letters as letter}
-				<div class="letter-item"
-						 onclick={() => clickedLetter(letter)}
-						 class:selected={selectedLetters.includes(letter.id)}
-				>
-					<div class="subject-line">
-						<div class="letter-subject">
-							<Icon icon="mdi:letter-outline" /> {letter.subject}
-						</div>
-						{#if letter.stamps}
-							<div class="stamps-count">
-								<Icon icon="emojione-v1:stamped-envelope" />
-								{letter.stamps} sats
+				{#key letter.id}
+					<div class="letter-item"
+							 onclick={() => clickedLetter(letter)}
+							 class:selected={selectedLetters.includes(letter.id)}
+					>
+						<div class="subject-line">
+							<div class="letter-subject">
+								<Icon icon="mdi:letter-outline" /> {letter.subject}
 							</div>
-						{/if}
+							{#if letter.stamps}
+								<div class="stamps-count">
+									<Icon icon="emojione-v1:stamped-envelope" />
+									{letter.stamps} sats
+								</div>
+							{/if}
+						</div>
+						<div class="letter-from">
+							<NostrIdentifier user={letter.from.npub} emailAddress={letter.emailAddress} />
+						</div>
 					</div>
-					<div class="letter-from">
-						<NostrIdentifier user={letter.from.npub} emailAddress={letter.emailAddress} />
-					</div>
-				</div>
+				{/key}
 			{/each}
 		</div>
 	</div>
diff --git a/src/components/NostrIdentifier.svelte b/src/components/NostrIdentifier.svelte
index 8b7c5b8..6380e0c 100644
--- a/src/components/NostrIdentifier.svelte
+++ b/src/components/NostrIdentifier.svelte
@@ -111,7 +111,7 @@
 			<Icon icon="ph:user" />
 		{/if}
 	</div>
-	{#if npub !== displayString}
+	{#if npub !== displayString && !emailAddress}
 		<Tooltip position="bottom" content={npub}>
 			<span class="user-text">{displayString}</span>
 		</Tooltip>
diff --git a/src/lib/letter.ts b/src/lib/letter.ts
index 8a512cc..5ae1703 100644
--- a/src/lib/letter.ts
+++ b/src/lib/letter.ts
@@ -5,15 +5,6 @@ import { TokenInfoWithMailSubscriptionDuration } from '@arx/utils';
 function parseTextPlainContent(mimeMessage: string) {
 	const boundary = mimeMessage.split('\n')[0];
 
-	// --7408fffb1a494ae39c2dde2c60878849
-	// Content-Type: text/plain
-	// Content-Transfer-Encoding: 7bit
-	//
-	// test
-	// --7408fffb1a494ae39c2dde2c60878849
-	// Content-Type: text/html
-	// Content-Transfer-Encoding: 7bit
-
 	const boundaries = mimeMessage.split(boundary + '\n');
 	boundaries.shift();