1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
|
<script>
import { run } from 'svelte/legacy';
import { t } from "$lib/translations";
import Avatar from "$comp/Avatar.svelte";
import { event as e, password } from "$lib/store";
import { browser } from "$app/environment";
import { decrypt } from "$lib/nostr";
let { data } = $props();
let { messages, notes, invoices, sent, received, subject, user } =
$state(data);
let refresh = (d) =>
({ messages, notes, invoices, sent, received, subject, user } = d);
let keys = new Set();
let latest = $state([]);
let ready;
e.subscribe(async (event) => {
if (!(browser && event && ready)) return;
if (
event.recipient?.id === user.id &&
!~latest.findIndex((m) => m.id === event.id)
) {
event.content = await decrypt({ event, user });
let i = latest.findIndex((m) => m.pubkey === event.pubkey);
let popped;
if (~i) popped = latest.splice(i, 1);
else popped = latest.pop();
latest.unshift(event);
latest = latest;
}
});
let initialize = async (p) => {
let i = 0;
ready = false;
if (!(browser && user)) return;
while (i < messages.length) {
let event = messages[i];
i++;
if (!(event.author && event.recipient)) continue;
let k =
event.author.id === user.id
? event.recipient?.pubkey
: event.author.pubkey;
if (!keys.has(k)) {
keys.add(k);
event.content = await decrypt({ event, user });
if (event.content) latest.push(event);
}
}
latest = latest;
ready = true;
};
run(() => {
refresh(data);
});
run(() => {
initialize($password);
});
</script>
<div class="container w-full mx-auto text-lg px-4 max-w-xl space-y-5">
<h1 class="px-3 md:px-0 text-center text-3xl md:text-4xl font-semibold mb-10">
{$t("user.messages")}
</h1>
{#if latest.length && user?.id === subject.id}
<div class="relative">
{#each latest as { content, pubkey, author, recipient }}
{@const u = author.id === user.id ? recipient : author}
<a href={`/messages/${u.username}`}>
<div class="flex hover:bg-gray-100 p-4 rounded-2xl">
<div class="my-auto">
<Avatar user={u} size={"20"} disabled={true} />
</div>
<div class="my-auto truncate">
<div class="my-auto ml-1 text-lg font-bold">{u.username}</div>
<div class="my-auto ml-1 text-secondary text-lg truncate">
{content}
</div>
</div>
</div>
</a>
{/each}
</div>
{:else}
<div class="text-center">{$t("user.noMessages")}</div>
{/if}
</div>
|
