···

       
24
       
 
       
}

     

       
25
       
 
       


     

       
26
       
 
       
@utility single-line-input {

     

       
27
       
-
       
	@apply w-full rounded-sm border-2 px-3 py-2 font-medium transition-all focus:scale-[1.02] focus:shadow-lg focus:outline-none;

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
28
       
 
       
}

     

       
29
       
 
       


     

       
30
       
 
       
@utility action-button {

     
···

       
46
       
 
       


     

       
47
       
 
       
button {

     

       
48
       
 
       
	@apply hover:cursor-pointer;

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
49
       
 
       
}

     

       
50
       
 
       


     

       
51
       
 
       
.grain:before {

     

···

       
24
       
 
       
}

     

       
25
       
 
       


     

       
26
       
 
       
@utility single-line-input {

     

       
27
       
+
       
	@apply w-full rounded-sm border-2 border-(--nucleus-accent)/40 bg-(--nucleus-accent)/3 px-3 py-2 font-medium transition-all;

     

       
28
       
+
       
	&:focus {

     

       
29
       
+
       
		@apply scale-[1.02] border-(--nucleus-accent)/80 bg-(--nucleus-accent)/10 [box-shadow:none] outline-none;

     

       
30
       
+
       
	}

     

       
31
       
 
       
}

     

       
32
       
 
       


     

       
33
       
 
       
@utility action-button {

     
···

       
49
       
 
       


     

       
50
       
 
       
button {

     

       
51
       
 
       
	@apply hover:cursor-pointer;

     

       
52
       
+
       
}

     

       
53
       
+
       


     

       
54
       
+
       
a {

     

       
55
       
+
       
	&:hover {

     

       
56
       
+
       
		@apply cursor-pointer underline;

     

       
57
       
+
       
	}

     

       
58
       
 
       
}

     

       
59
       
 
       


     

       
60
       
 
       
.grain:before {

     

···

       
93
       
 
       
<Dropdown

     

       
94
       
 
       
	class="min-w-52 rounded-sm border-2 border-(--nucleus-accent) bg-(--nucleus-bg) shadow-2xl"

     

       
95
       
 
       
	bind:isOpen={isDropdownOpen}

     

       
0
       
 
       

     

       
96
       
 
       
>

     

       
97
       
 
       
	{#snippet trigger()}

     

       
98
       
 
       
		<button

     

···

       
93
       
 
       
<Dropdown

     

       
94
       
 
       
	class="min-w-52 rounded-sm border-2 border-(--nucleus-accent) bg-(--nucleus-bg) shadow-2xl"

     

       
95
       
 
       
	bind:isOpen={isDropdownOpen}

     

       
96
       
+
       
	placement="top-start"

     

       
97
       
 
       
>

     

       
98
       
 
       
	{#snippet trigger()}

     

       
99
       
 
       
		<button

     

···

       
1
       
 
       
<script lang="ts">

     

       
2
       
 
       
	import { type AtpClient } from '$lib/at/client';

     

       
3
       
 
       
	import {

     

       
0
       
 
       

     

       
4
       
 
       
		AppBskyEmbedExternal,

     

       
5
       
 
       
		AppBskyEmbedImages,

     

       
6
       
 
       
		AppBskyEmbedVideo,

     
···

       
23
       
 
       
	import BskyPost from './BskyPost.svelte';

     

       
24
       
 
       
	import Icon from '@iconify/svelte';

     

       
25
       
 
       
	import { type Backlink, type BacklinksSource } from '$lib/at/constellation';

     

       
26
       
-
       
	import { postActions, pulsingPostId, type PostActions } from '$lib/state.svelte';

     

       
27
       
 
       
	import * as TID from '@atcute/tid';

     

       
28
       
 
       
	import type { PostWithUri } from '$lib/at/fetch';

     

       
29
       
 
       
	import { onMount } from 'svelte';

     

       
30
       
-
       
	import type { AtprotoDid } from '@atcute/lexicons/syntax';

     

       
31
       
 
       
	import { derived } from 'svelte/store';

     

       
32
       
 
       
	import Device from 'svelte-device-info';

     

       
33
       
 
       
	import Dropdown from './Dropdown.svelte';

     
···

       
61
       
 
       
	}: Props = $props();

     

       
62
       
 
       


     

       
63
       
 
       
	const selectedDid = $derived(client.user?.did ?? null);

     

       
0
       
 
       

     

       
64
       
 
       


     

       
65
       
 
       
	const aturi: CanonicalResourceUri = `at://${did}/app.bsky.feed.post/${rkey}`;

     

       
66
       
 
       
	const color = generateColorForDid(did);

     
···

       
73
       
 
       
	const post = data

     

       
74
       
 
       
		? Promise.resolve(ok(data))

     

       
75
       
 
       
		: client.getRecord(AppBskyFeedPost.mainSchema, did, rkey);

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
76
       
 
       
	// const replies = replyBacklinks

     

       
77
       
 
       
	// 	? Promise.resolve(ok(replyBacklinks))

     

       
78
       
 
       
	// 	: client.getBacklinks(

     
···

       
223
       
 
       
		actionsOpen = true;

     

       
224
       
 
       
		actionsPos = { x: event.clientX, y: event.clientY };

     

       
225
       
 
       
		event.preventDefault();

     

       
0
       
 
       

     

       
226
       
 
       
	};

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
227
       
 
       
</script>

     

       
228
       
 
       


     

       
229
       
 
       
{#snippet embedBadge(embed: AppBskyEmbeds)}

     
···

       
238
       
 
       
	</span>

     

       
239
       
 
       
{/snippet}

     

       
240
       
 
       


     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
241
       
 
       
{#if mini}

     

       
242
       
 
       
	<div class="text-sm opacity-60">

     

       
243
       
 
       
		{#await post}

     
···

       
297
       
 
       
			>

     

       
298
       
 
       
				<div

     

       
299
       
 
       
					class="

     

       
300
       
-
       
					mb-3 flex w-fit max-w-full items-center gap-1.5 rounded-sm pr-1

     

       
301
       
 
       
					"

     

       
302
       
 
       
					style="background: {color}33;"

     

       
303
       
 
       
				>

     

       
304
       
-
       
					<ProfilePicture {client} {did} size={8} />

     

       
305
       
-
       


     

       
306
       
 
       
					<span

     

       
307
       
-
       
						class="

     

       
308
       
-
       
						flex min-w-0 items-center gap-2 font-bold

     

       
309
       
-
       
						{isOnPostComposer ? 'contrast-200' : ''}

     

       
310
       
-
       
						"

     

       
311
       
-
       
						style="color: {color};"

     

       
312
       
 
       
					>

     

       
313
       
-
       
						{#await client.getProfile(did)}

     

       
314
       
-
       
							{handle}

     

       
315
       
-
       
						{:then profile}

     

       
316
       
-
       
							{#if profile.ok}

     

       
317
       
-
       
								{@const profileValue = profile.value}

     

       
318
       
-
       
								<span class="w-min min-w-0 overflow-hidden text-nowrap overflow-ellipsis"

     

       
319
       
-
       
									>{profileValue.displayName}</span

     

       
320
       
-
       
								><span class="text-nowrap opacity-70">(@{handle})</span>

     

       
321
       
-
       
							{:else}

     

       
322
       
-
       
								{handle}

     

       
323
       
-
       
							{/if}

     

       
324
       
-
       
						{/await}

     

       
325
       
 
       
					</span>

     

       
326
       
-
       
					<span>·</span>

     

       
327
       
-
       
					<span class="text-nowrap text-(--nucleus-fg)/67"

     

       
328
       
-
       
						>{getRelativeTime(new Date(record.createdAt))}</span

     

       
329
       
-
       
					>

     

       
330
       
 
       
				</div>

     

       
331
       
 
       
				<p class="leading-normal text-wrap wrap-break-word">

     

       
332
       
 
       
					{record.text}

     
···

       
357
       
 
       
	{#snippet embedMedia(

     

       
358
       
 
       
		embed: AppBskyEmbedImages.Main | AppBskyEmbedVideo.Main | AppBskyEmbedExternal.Main

     

       
359
       
 
       
	)}

     

       
360
       
-
       
		{#if embed.$type === 'app.bsky.embed.images'}

     

       
361
       
-
       
			<!-- todo: improve how images are displayed, and pop out on click -->

     

       
362
       
-
       
			{#each embed.images as image (image.image)}

     

       
363
       
-
       
				{#if isBlob(image.image)}

     

       
364
       
-
       
					<img

     

       
365
       
-
       
						class="rounded-sm"

     

       
366
       
-
       
						src={img('feed_thumbnail', did, image.image.ref.$link)}

     

       
367
       
-
       
						alt={image.alt}

     

       
368
       
-
       
					/>

     

       
369
       
-
       
				{/if}

     

       
370
       
-
       
			{/each}

     

       
371
       
-
       
		{:else if embed.$type === 'app.bsky.embed.video'}

     

       
372
       
-
       
			{#if isBlob(embed.video)}

     

       
373
       
-
       
				{#await didDoc then didDoc}

     

       
374
       
-
       
					{#if didDoc.ok}

     

       
375
       
-
       
						<!-- svelte-ignore a11y_media_has_caption -->

     

       
376
       
-
       
						<video

     

       
377
       
-
       
							class="rounded-sm"

     

       
378
       
-
       
							src={blob(didDoc.value.pds, did, embed.video.ref.$link)}

     

       
379
       
-
       
							controls

     

       
380
       
-
       
						></video>

     

       
381
       
 
       
					{/if}

     

       
382
       
-
       
				{/await}

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
383
       
 
       
			{/if}

     

       
384
       
-
       
		{/if}

     

       
385
       
 
       
	{/snippet}

     

       
386
       
 
       
	{#snippet embedPost(uri: ResourceUri)}

     

       
387
       
 
       
		{#if quoteDepth < 2}

     
···

       
481
       
 
       
			)}

     

       
482
       
 
       
		</div>

     

       
483
       
 
       
		<Dropdown

     

       
484
       
-
       
			class="flex min-w-54 flex-col gap-1 rounded-sm border-2 p-1 shadow-2xl backdrop-blur-xl backdrop-brightness-60"

     

       
485
       
 
       
			style="background: {color}36; border-color: {color}99;"

     

       
486
       
 
       
			bind:isOpen={actionsOpen}

     

       
487
       
 
       
			bind:position={actionsPos}

     

       
0
       
 
       

     

       
488
       
 
       
		>

     

       
489
       
 
       
			{@render dropdownItem('heroicons:link-20-solid', 'copy link to post', () =>

     

       
490
       
 
       
				navigator.clipboard.writeText(`${$settings.socialAppUrl}/profile/${did}/post/${rkey}`)

     
···

       
492
       
 
       
			{@render dropdownItem('heroicons:link-20-solid', 'copy at uri', () =>

     

       
493
       
 
       
				navigator.clipboard.writeText(post.uri)

     

       
494
       
 
       
			)}

     

       
495
       
-
       
			<div class="my-0.75 h-px w-full opacity-60" style="background: {color};"></div>

     

       
496
       
-
       
			{@render dropdownItem('heroicons:clipboard', 'copy post text', () =>

     

       
497
       
 
       
				navigator.clipboard.writeText(post.record.text)

     

       
498
       
 
       
			)}

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
499
       
 
       


     

       
500
       
 
       
			{#snippet trigger()}

     

       
501
       
 
       
				<div

     
···

       
517
       
 
       
	</div>

     

       
518
       
 
       
{/snippet}

     

       
519
       
 
       


     

       
520
       
-
       
{#snippet dropdownItem(icon: string, label: string, onClick: () => void)}

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
521
       
 
       
	<button

     

       
522
       
 
       
		class="

     

       
523
       
 
       
		flex items-center justify-between rounded-sm px-2 py-1.5

     

       
524
       
 
       
		transition-all duration-100 hover:[backdrop-filter:brightness(120%)]

     

       
0
       
 
       

     

       
525
       
 
       
		"

     

       
526
       
 
       
		onclick={() => {

     

       
527
       
 
       
			onClick();

     

       
528
       
-
       
			actionsOpen = false;

     

       
529
       
 
       
		}}

     

       
530
       
 
       
	>

     

       
531
       
 
       
		<span class="font-bold">{label}</span>

     

       
532
       
 
       
		<Icon class="h-6 w-6" {icon} />

     

       
533
       
 
       
	</button>

     

       
534
       
 
       
{/snippet}

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

···

       
1
       
 
       
<script lang="ts">

     

       
2
       
 
       
	import { type AtpClient } from '$lib/at/client';

     

       
3
       
 
       
	import {

     

       
4
       
+
       
		AppBskyActorProfile,

     

       
5
       
 
       
		AppBskyEmbedExternal,

     

       
6
       
 
       
		AppBskyEmbedImages,

     

       
7
       
 
       
		AppBskyEmbedVideo,

     
···

       
24
       
 
       
	import BskyPost from './BskyPost.svelte';

     

       
25
       
 
       
	import Icon from '@iconify/svelte';

     

       
26
       
 
       
	import { type Backlink, type BacklinksSource } from '$lib/at/constellation';

     

       
27
       
+
       
	import { clients, postActions, posts, pulsingPostId, type PostActions } from '$lib/state.svelte';

     

       
28
       
 
       
	import * as TID from '@atcute/tid';

     

       
29
       
 
       
	import type { PostWithUri } from '$lib/at/fetch';

     

       
30
       
 
       
	import { onMount } from 'svelte';

     

       
31
       
+
       
	import { isActorIdentifier, type AtprotoDid } from '@atcute/lexicons/syntax';

     

       
32
       
 
       
	import { derived } from 'svelte/store';

     

       
33
       
 
       
	import Device from 'svelte-device-info';

     

       
34
       
 
       
	import Dropdown from './Dropdown.svelte';

     
···

       
62
       
 
       
	}: Props = $props();

     

       
63
       
 
       


     

       
64
       
 
       
	const selectedDid = $derived(client.user?.did ?? null);

     

       
65
       
+
       
	const actionClient = $derived(clients.get(did as AtprotoDid));

     

       
66
       
 
       


     

       
67
       
 
       
	const aturi: CanonicalResourceUri = `at://${did}/app.bsky.feed.post/${rkey}`;

     

       
68
       
 
       
	const color = generateColorForDid(did);

     
···

       
75
       
 
       
	const post = data

     

       
76
       
 
       
		? Promise.resolve(ok(data))

     

       
77
       
 
       
		: client.getRecord(AppBskyFeedPost.mainSchema, did, rkey);

     

       
78
       
+
       
	let profile: AppBskyActorProfile.Main | null = $state(null);

     

       
79
       
+
       
	onMount(async () => {

     

       
80
       
+
       
		const p = await client.getProfile(did);

     

       
81
       
+
       
		if (!p.ok) return;

     

       
82
       
+
       
		profile = p.value;

     

       
83
       
+
       
		console.log(profile.description);

     

       
84
       
+
       
	});

     

       
85
       
 
       
	// const replies = replyBacklinks

     

       
86
       
 
       
	// 	? Promise.resolve(ok(replyBacklinks))

     

       
87
       
 
       
	// 	: client.getBacklinks(

     
···

       
232
       
 
       
		actionsOpen = true;

     

       
233
       
 
       
		actionsPos = { x: event.clientX, y: event.clientY };

     

       
234
       
 
       
		event.preventDefault();

     

       
235
       
+
       
		event.stopPropagation();

     

       
236
       
 
       
	};

     

       
237
       
+
       


     

       
238
       
+
       
	let deleteState: 'waiting' | 'confirm' | 'deleted' = $state('waiting');

     

       
239
       
+
       
	$effect(() => {

     

       
240
       
+
       
		if (deleteState === 'confirm' && !actionsOpen) deleteState = 'waiting';

     

       
241
       
+
       
	});

     

       
242
       
+
       


     

       
243
       
+
       
	const deletePost = () => {

     

       
244
       
+
       
		if (deleteState === 'deleted') return;

     

       
245
       
+
       
		if (deleteState === 'waiting') {

     

       
246
       
+
       
			deleteState = 'confirm';

     

       
247
       
+
       
			return;

     

       
248
       
+
       
		}

     

       
249
       
+
       


     

       
250
       
+
       
		actionClient?.atcute

     

       
251
       
+
       
			?.post('com.atproto.repo.deleteRecord', {

     

       
252
       
+
       
				input: {

     

       
253
       
+
       
					collection: 'app.bsky.feed.post',

     

       
254
       
+
       
					repo: did,

     

       
255
       
+
       
					rkey

     

       
256
       
+
       
				}

     

       
257
       
+
       
			})

     

       
258
       
+
       
			.then((result) => {

     

       
259
       
+
       
				if (!result.ok) return;

     

       
260
       
+
       
				posts.get(did)?.delete(aturi);

     

       
261
       
+
       
				deleteState = 'deleted';

     

       
262
       
+
       
			});

     

       
263
       
+
       
		actionsOpen = false;

     

       
264
       
+
       
	};

     

       
265
       
+
       


     

       
266
       
+
       
	let profileOpen = $state(false);

     

       
267
       
+
       
	let profilePopoutShowDid = $state(false);

     

       
268
       
 
       
</script>

     

       
269
       
 
       


     

       
270
       
 
       
{#snippet embedBadge(embed: AppBskyEmbeds)}

     
···

       
279
       
 
       
	</span>

     

       
280
       
 
       
{/snippet}

     

       
281
       
 
       


     

       
282
       
+
       
{#snippet profileInline()}

     

       
283
       
+
       
	<button

     

       
284
       
+
       
		class="

     

       
285
       
+
       
		flex min-w-0 items-center gap-2 font-bold {isOnPostComposer ? 'contrast-200' : ''}

     

       
286
       
+
       
		rounded-sm pr-1 transition-colors duration-100 ease-in-out hover:bg-white/10

     

       
287
       
+
       
		"

     

       
288
       
+
       
		style="color: {color};"

     

       
289
       
+
       
		onclick={() => (profileOpen = !profileOpen)}

     

       
290
       
+
       
	>

     

       
291
       
+
       
		<ProfilePicture {client} {did} size={8} />

     

       
292
       
+
       


     

       
293
       
+
       
		{#if profile}

     

       
294
       
+
       
			<span class="w-min max-w-sm min-w-0 overflow-hidden text-nowrap overflow-ellipsis"

     

       
295
       
+
       
				>{profile.displayName}</span

     

       
296
       
+
       
			><span class="shrink-0 text-sm text-nowrap opacity-70">(@{handle})</span>

     

       
297
       
+
       
		{:else}

     

       
298
       
+
       
			{handle}

     

       
299
       
+
       
		{/if}

     

       
300
       
+
       
	</button>

     

       
301
       
+
       
{/snippet}

     

       
302
       
+
       


     

       
303
       
+
       
<!-- eslint-disable svelte/no-navigation-without-resolve -->

     

       
304
       
+
       
{#snippet profilePopout()}

     

       
305
       
+
       
	{@const profileDesc = profile?.description?.trim() ?? ''}

     

       
306
       
+
       
	<Dropdown

     

       
307
       
+
       
		class="post-dropdown max-w-xl gap-2! p-2.5! backdrop-blur-3xl! backdrop-brightness-25!"

     

       
308
       
+
       
		style="background: {color}36; border-color: {color}99;"

     

       
309
       
+
       
		bind:isOpen={profileOpen}

     

       
310
       
+
       
		trigger={profileInline}

     

       
311
       
+
       
	>

     

       
312
       
+
       
		<div class="flex items-center gap-2">

     

       
313
       
+
       
			<ProfilePicture {client} {did} size={20} />

     

       
314
       
+
       


     

       
315
       
+
       
			<div class="flex flex-col items-start overflow-hidden overflow-ellipsis">

     

       
316
       
+
       
				<span class="mb-1.5 min-w-0 overflow-hidden text-2xl text-nowrap overflow-ellipsis">

     

       
317
       
+
       
					{profile?.displayName ?? handle}

     

       
318
       
+
       
					{#if profile?.pronouns}

     

       
319
       
+
       
						<span class="shrink-0 text-sm text-nowrap opacity-60">({profile.pronouns})</span>

     

       
320
       
+
       
					{/if}

     

       
321
       
+
       
				</span>

     

       
322
       
+
       
				<button

     

       
323
       
+
       
					oncontextmenu={(e) => {

     

       
324
       
+
       
						const node = e.target as Node;

     

       
325
       
+
       
						const selection = window.getSelection() ?? new Selection();

     

       
326
       
+
       
						const range = document.createRange();

     

       
327
       
+
       
						range.selectNodeContents(node);

     

       
328
       
+
       
						selection.removeAllRanges();

     

       
329
       
+
       
						selection.addRange(range);

     

       
330
       
+
       
						e.stopPropagation();

     

       
331
       
+
       
					}}

     

       
332
       
+
       
					onclick={() => (profilePopoutShowDid = !profilePopoutShowDid)}

     

       
333
       
+
       
					class="mb-0.5 text-nowrap opacity-85 select-text hover:underline"

     

       
334
       
+
       
				>

     

       
335
       
+
       
					{profilePopoutShowDid ? did : `@${handle}`}

     

       
336
       
+
       
				</button>

     

       
337
       
+
       
				{#if profile?.website}

     

       
338
       
+
       
					<a

     

       
339
       
+
       
						target="_blank"

     

       
340
       
+
       
						rel="noopener noreferrer"

     

       
341
       
+
       
						href={profile.website}

     

       
342
       
+
       
						class="text-sm text-nowrap opacity-60">{profile.website}</a

     

       
343
       
+
       
					>

     

       
344
       
+
       
				{/if}

     

       
345
       
+
       
			</div>

     

       
346
       
+
       
		</div>

     

       
347
       
+
       


     

       
348
       
+
       
		{#if profileDesc.length > 0}

     

       
349
       
+
       
			<p class="rounded-sm bg-black/25 p-1.5 text-wrap wrap-break-word">

     

       
350
       
+
       
				{#each profileDesc.split(/(\s)/) as line, idx (idx)}

     

       
351
       
+
       
					{#if line === '\n'}

     

       
352
       
+
       
						<br />

     

       
353
       
+
       
					{:else if isActorIdentifier(line.replace(/^@/, ''))}

     

       
354
       
+
       
						<a

     

       
355
       
+
       
							target="_blank"

     

       
356
       
+
       
							rel="noopener noreferrer"

     

       
357
       
+
       
							class="text-(--nucleus-accent2)"

     

       
358
       
+
       
							href={`${$settings.socialAppUrl}/profile/${line.replace(/^@/, '')}`}>{line}</a

     

       
359
       
+
       
						>

     

       
360
       
+
       
					{:else if line.startsWith('https://')}

     

       
361
       
+
       
						<a

     

       
362
       
+
       
							target="_blank"

     

       
363
       
+
       
							rel="noopener noreferrer"

     

       
364
       
+
       
							class="text-(--nucleus-accent2)"

     

       
365
       
+
       
							href={line}>{line.replace(/https?:\/\//, '')}</a

     

       
366
       
+
       
						>

     

       
367
       
+
       
					{:else}

     

       
368
       
+
       
						{line}

     

       
369
       
+
       
					{/if}

     

       
370
       
+
       
				{/each}

     

       
371
       
+
       
			</p>

     

       
372
       
+
       
		{/if}

     

       
373
       
+
       
	</Dropdown>

     

       
374
       
+
       
{/snippet}

     

       
375
       
+
       


     

       
376
       
 
       
{#if mini}

     

       
377
       
 
       
	<div class="text-sm opacity-60">

     

       
378
       
 
       
		{#await post}

     
···

       
432
       
 
       
			>

     

       
433
       
 
       
				<div

     

       
434
       
 
       
					class="

     

       
435
       
+
       
					mb-3 flex w-fit max-w-full items-center gap-1 rounded-sm pr-1

     

       
436
       
 
       
					"

     

       
437
       
 
       
					style="background: {color}33;"

     

       
438
       
 
       
				>

     

       
439
       
+
       
					{@render profilePopout()}

     

       
440
       
+
       
					<span>·</span>

     

       
441
       
 
       
					<span

     

       
442
       
+
       
						title={new Date(record.createdAt).toLocaleString()}

     

       
443
       
+
       
						class="pl-0.5 text-nowrap text-(--nucleus-fg)/67"

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
444
       
 
       
					>

     

       
445
       
+
       
						{getRelativeTime(new Date(record.createdAt))}

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
446
       
 
       
					</span>

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
447
       
 
       
				</div>

     

       
448
       
 
       
				<p class="leading-normal text-wrap wrap-break-word">

     

       
449
       
 
       
					{record.text}

     
···

       
474
       
 
       
	{#snippet embedMedia(

     

       
475
       
 
       
		embed: AppBskyEmbedImages.Main | AppBskyEmbedVideo.Main | AppBskyEmbedExternal.Main

     

       
476
       
 
       
	)}

     

       
477
       
+
       
		<!-- svelte-ignore a11y_no_static_element_interactions -->

     

       
478
       
+
       
		<div oncontextmenu={(e) => e.stopPropagation()}>

     

       
479
       
+
       
			{#if embed.$type === 'app.bsky.embed.images'}

     

       
480
       
+
       
				<!-- todo: improve how images are displayed, and pop out on click -->

     

       
481
       
+
       
				{#each embed.images as image (image.image)}

     

       
482
       
+
       
					{#if isBlob(image.image)}

     

       
483
       
+
       
						<img

     

       
484
       
+
       
							class="w-full rounded-sm"

     

       
485
       
+
       
							src={img('feed_thumbnail', did, image.image.ref.$link)}

     

       
486
       
+
       
							alt={image.alt}

     

       
487
       
+
       
						/>

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
488
       
 
       
					{/if}

     

       
489
       
+
       
				{/each}

     

       
490
       
+
       
			{:else if embed.$type === 'app.bsky.embed.video'}

     

       
491
       
+
       
				{#if isBlob(embed.video)}

     

       
492
       
+
       
					{#await didDoc then didDoc}

     

       
493
       
+
       
						{#if didDoc.ok}

     

       
494
       
+
       
							<!-- svelte-ignore a11y_media_has_caption -->

     

       
495
       
+
       
							<video

     

       
496
       
+
       
								class="rounded-sm"

     

       
497
       
+
       
								src={blob(didDoc.value.pds, did, embed.video.ref.$link)}

     

       
498
       
+
       
								controls

     

       
499
       
+
       
							></video>

     

       
500
       
+
       
						{/if}

     

       
501
       
+
       
					{/await}

     

       
502
       
+
       
				{/if}

     

       
503
       
 
       
			{/if}

     

       
504
       
+
       
		</div>

     

       
505
       
 
       
	{/snippet}

     

       
506
       
 
       
	{#snippet embedPost(uri: ResourceUri)}

     

       
507
       
 
       
		{#if quoteDepth < 2}

     
···

       
601
       
 
       
			)}

     

       
602
       
 
       
		</div>

     

       
603
       
 
       
		<Dropdown

     

       
604
       
+
       
			class="post-dropdown"

     

       
605
       
 
       
			style="background: {color}36; border-color: {color}99;"

     

       
606
       
 
       
			bind:isOpen={actionsOpen}

     

       
607
       
 
       
			bind:position={actionsPos}

     

       
608
       
+
       
			placement="bottom-end"

     

       
609
       
 
       
		>

     

       
610
       
 
       
			{@render dropdownItem('heroicons:link-20-solid', 'copy link to post', () =>

     

       
611
       
 
       
				navigator.clipboard.writeText(`${$settings.socialAppUrl}/profile/${did}/post/${rkey}`)

     
···

       
613
       
 
       
			{@render dropdownItem('heroicons:link-20-solid', 'copy at uri', () =>

     

       
614
       
 
       
				navigator.clipboard.writeText(post.uri)

     

       
615
       
 
       
			)}

     

       
616
       
+
       
			{@render dropdownItem('heroicons:clipboard-20-solid', 'copy post text', () =>

     

       
0
       
 
       

     

       
617
       
 
       
				navigator.clipboard.writeText(post.record.text)

     

       
618
       
 
       
			)}

     

       
619
       
+
       
			{#if actionClient}

     

       
620
       
+
       
				<div class="my-0.75 h-px w-full opacity-60" style="background: {color};"></div>

     

       
621
       
+
       
				{@render dropdownItem(

     

       
622
       
+
       
					deleteState === 'confirm' ? 'heroicons:check-20-solid' : 'heroicons:trash-20-solid',

     

       
623
       
+
       
					deleteState === 'confirm' ? 'are you sure?' : 'delete post',

     

       
624
       
+
       
					deletePost,

     

       
625
       
+
       
					false,

     

       
626
       
+
       
					deleteState === 'confirm' ? 'text-red-500' : ''

     

       
627
       
+
       
				)}

     

       
628
       
+
       
			{/if}

     

       
629
       
 
       


     

       
630
       
 
       
			{#snippet trigger()}

     

       
631
       
 
       
				<div

     
···

       
647
       
 
       
	</div>

     

       
648
       
 
       
{/snippet}

     

       
649
       
 
       


     

       
650
       
+
       
{#snippet dropdownItem(

     

       
651
       
+
       
	icon: string,

     

       
652
       
+
       
	label: string,

     

       
653
       
+
       
	onClick: () => void,

     

       
654
       
+
       
	autoClose: boolean = true,

     

       
655
       
+
       
	extraClass: string = ''

     

       
656
       
+
       
)}

     

       
657
       
 
       
	<button

     

       
658
       
 
       
		class="

     

       
659
       
 
       
		flex items-center justify-between rounded-sm px-2 py-1.5

     

       
660
       
 
       
		transition-all duration-100 hover:[backdrop-filter:brightness(120%)]

     

       
661
       
+
       
		{extraClass}

     

       
662
       
 
       
		"

     

       
663
       
 
       
		onclick={() => {

     

       
664
       
 
       
			onClick();

     

       
665
       
+
       
			if (autoClose) actionsOpen = false;

     

       
666
       
 
       
		}}

     

       
667
       
 
       
	>

     

       
668
       
 
       
		<span class="font-bold">{label}</span>

     

       
669
       
 
       
		<Icon class="h-6 w-6" {icon} />

     

       
670
       
 
       
	</button>

     

       
671
       
 
       
{/snippet}

     

       
672
       
+
       


     

       
673
       
+
       
<style>

     

       
674
       
+
       
	@reference "../app.css";

     

       
675
       
+
       


     

       
676
       
+
       
	:global(.post-dropdown) {

     

       
677
       
+
       
		@apply flex min-w-54 flex-col gap-1 rounded-sm border-2 p-1 shadow-2xl backdrop-blur-xl backdrop-brightness-60;

     

       
678
       
+
       
	}

     

       
679
       
+
       
</style>

     

···

       
145
       
 
       
	{#if replying}

     

       
146
       
 
       
		{@render renderPost(replying)}

     

       
147
       
 
       
	{/if}

     

       
148
       
-
       
	<textarea

     

       
149
       
-
       
		bind:this={textareaEl}

     

       
150
       
-
       
		bind:value={postText}

     

       
151
       
-
       
		onfocus={() => (isFocused = true)}

     

       
152
       
-
       
		onblur={unfocus}

     

       
153
       
-
       
		onkeydown={(event) => {

     

       
154
       
-
       
			if (event.key === 'Escape') unfocus();

     

       
155
       
-
       
			if (event.key === 'Enter' && (event.metaKey || event.ctrlKey)) doPost();

     

       
156
       
-
       
		}}

     

       
157
       
-
       
		placeholder="what's on your mind?"

     

       
158
       
-
       
		rows="4"

     

       
159
       
-
       
		class="field-sizing-content resize-none"

     

       
160
       
-
       
	></textarea>

     

       
161
       
-
       
	{#if quoting}

     

       
162
       
-
       
		{@render renderPost(quoting)}

     

       
163
       
-
       
	{/if}

     

       
0
       
 
       

     

       
0
       
 
       

     

       
164
       
 
       
{/snippet}

     

       
165
       
 
       


     

       
166
       
 
       
<div class="relative min-h-13">

     
···

       
211
       
 
       
	</div>

     

       
212
       
 
       
</div>

     

       
213
       
 
       


     

       
0
       
 
       

     

       
214
       
 
       
<style>

     

       
215
       
 
       
	@reference "../app.css";

     

       
216
       
 
       


     

       
217
       
 
       
	input,

     

       
218
       
-
       
	textarea {

     

       
219
       
 
       
		@apply single-line-input bg-(--nucleus-bg)/35;

     

       
220
       
 
       
		border-color: color-mix(in srgb, var(--acc-color) 30%, transparent);

     

       
221
       
 
       
	}

     

       
222
       
 
       


     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
223
       
 
       
	input {

     

       
224
       
 
       
		@apply p-1 px-2;

     

       
225
       
 
       
	}

     

       
226
       
 
       


     

       
227
       
-
       
	textarea {

     

       
228
       
 
       
		@apply focus:scale-100;

     

       
229
       
 
       
	}

     

       
230
       
 
       


     

       
231
       
 
       
	input::placeholder,

     

       
232
       
 
       
	textarea::placeholder {

     

       
233
       
 
       
		color: color-mix(in srgb, var(--acc-color) 45%, var(--nucleus-bg));

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
234
       
 
       
	}

     

       
235
       
 
       
</style>

     

···

       
145
       
 
       
	{#if replying}

     

       
146
       
 
       
		{@render renderPost(replying)}

     

       
147
       
 
       
	{/if}

     

       
148
       
+
       
	<div class="composer space-y-2">

     

       
149
       
+
       
		<textarea

     

       
150
       
+
       
			bind:this={textareaEl}

     

       
151
       
+
       
			bind:value={postText}

     

       
152
       
+
       
			onfocus={() => (isFocused = true)}

     

       
153
       
+
       
			onblur={unfocus}

     

       
154
       
+
       
			onkeydown={(event) => {

     

       
155
       
+
       
				if (event.key === 'Escape') unfocus();

     

       
156
       
+
       
				if (event.key === 'Enter' && (event.metaKey || event.ctrlKey)) doPost();

     

       
157
       
+
       
			}}

     

       
158
       
+
       
			placeholder="what's on your mind?"

     

       
159
       
+
       
			rows="4"

     

       
160
       
+
       
			class="field-sizing-content resize-none"

     

       
161
       
+
       
		></textarea>

     

       
162
       
+
       
		{#if quoting}

     

       
163
       
+
       
			{@render renderPost(quoting)}

     

       
164
       
+
       
		{/if}

     

       
165
       
+
       
	</div>

     

       
166
       
 
       
{/snippet}

     

       
167
       
 
       


     

       
168
       
 
       
<div class="relative min-h-13">

     
···

       
213
       
 
       
	</div>

     

       
214
       
 
       
</div>

     

       
215
       
 
       


     

       
216
       
+
       
<!-- TODO: this fucking blows -->

     

       
217
       
 
       
<style>

     

       
218
       
 
       
	@reference "../app.css";

     

       
219
       
 
       


     

       
220
       
 
       
	input,

     

       
221
       
+
       
	.composer {

     

       
222
       
 
       
		@apply single-line-input bg-(--nucleus-bg)/35;

     

       
223
       
 
       
		border-color: color-mix(in srgb, var(--acc-color) 30%, transparent);

     

       
224
       
 
       
	}

     

       
225
       
 
       


     

       
226
       
+
       
	.composer {

     

       
227
       
+
       
		@apply p-2;

     

       
228
       
+
       
	}

     

       
229
       
+
       


     

       
230
       
+
       
	textarea {

     

       
231
       
+
       
		@apply w-full bg-transparent p-0;

     

       
232
       
+
       
	}

     

       
233
       
+
       


     

       
234
       
 
       
	input {

     

       
235
       
 
       
		@apply p-1 px-2;

     

       
236
       
 
       
	}

     

       
237
       
 
       


     

       
238
       
+
       
	.composer {

     

       
239
       
 
       
		@apply focus:scale-100;

     

       
240
       
 
       
	}

     

       
241
       
 
       


     

       
242
       
 
       
	input::placeholder,

     

       
243
       
 
       
	textarea::placeholder {

     

       
244
       
 
       
		color: color-mix(in srgb, var(--acc-color) 45%, var(--nucleus-bg));

     

       
245
       
+
       
	}

     

       
246
       
+
       


     

       
247
       
+
       
	textarea:focus {

     

       
248
       
+
       
		@apply border-none! [box-shadow:none]! outline-none!;

     

       
249
       
 
       
	}

     

       
250
       
 
       
</style>

     

···

       
76
       
 
       
							type="url"

     

       
77
       
 
       
							bind:value={localSettings.endpoints[name]}

     

       
78
       
 
       
							placeholder={defaultSettings.endpoints[name]}

     

       
79
       
-
       
							class="single-line-input border-(--nucleus-accent)/40 bg-(--nucleus-accent)/3"

     

       
80
       
 
       
						/>

     

       
81
       
 
       
					</div>

     

       
82
       
 
       
				{/snippet}

     
···

       
97
       
 
       
				type="url"

     

       
98
       
 
       
				bind:value={localSettings.socialAppUrl}

     

       
99
       
 
       
				placeholder={defaultSettings.socialAppUrl}

     

       
100
       
-
       
				class="single-line-input border-(--nucleus-accent)/40 bg-(--nucleus-accent)/3"

     

       
101
       
 
       
			/>

     

       
102
       
 
       
		</div>

     

       
103
       
 
       


     

···

       
76
       
 
       
							type="url"

     

       
77
       
 
       
							bind:value={localSettings.endpoints[name]}

     

       
78
       
 
       
							placeholder={defaultSettings.endpoints[name]}

     

       
79
       
+
       
							class="single-line-input"

     

       
80
       
 
       
						/>

     

       
81
       
 
       
					</div>

     

       
82
       
 
       
				{/snippet}

     
···

       
97
       
 
       
				type="url"

     

       
98
       
 
       
				bind:value={localSettings.socialAppUrl}

     

       
99
       
 
       
				placeholder={defaultSettings.socialAppUrl}

     

       
100
       
+
       
				class="single-line-input"

     

       
101
       
 
       
			/>

     

       
102
       
 
       
		</div>

     

       
103
       
 
       


     

···

       
1
       
 
       
import { writable } from 'svelte/store';

     

       
2
       
-
       
import { type NotificationsStream } from './at/client';

     

       
3
       
 
       
import { SvelteMap } from 'svelte/reactivity';

     

       
4
       
 
       
import type { Did, ResourceUri } from '@atcute/lexicons';

     

       
5
       
 
       
import type { Backlink } from './at/constellation';

     

       
0
       
 
       

     

       
0
       
 
       

     

       
6
       
 
       
// import type { JetstreamSubscription } from '@atcute/jetstream';

     

       
7
       
 
       


     

       
8
       
 
       
export const notificationStream = writable<NotificationsStream | null>(null);

     
···

       
17
       
 
       
export const postActions = new SvelteMap<`${Did}:${ResourceUri}`, PostActions>();

     

       
18
       
 
       


     

       
19
       
 
       
export const pulsingPostId = writable<string | null>(null);

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

···

       
1
       
 
       
import { writable } from 'svelte/store';

     

       
2
       
+
       
import { AtpClient, type NotificationsStream } from './at/client';

     

       
3
       
 
       
import { SvelteMap } from 'svelte/reactivity';

     

       
4
       
 
       
import type { Did, ResourceUri } from '@atcute/lexicons';

     

       
5
       
 
       
import type { Backlink } from './at/constellation';

     

       
6
       
+
       
import type { PostWithUri } from './at/fetch';

     

       
7
       
+
       
import type { AtprotoDid } from '@atcute/lexicons/syntax';

     

       
8
       
 
       
// import type { JetstreamSubscription } from '@atcute/jetstream';

     

       
9
       
 
       


     

       
10
       
 
       
export const notificationStream = writable<NotificationsStream | null>(null);

     
···

       
19
       
 
       
export const postActions = new SvelteMap<`${Did}:${ResourceUri}`, PostActions>();

     

       
20
       
 
       


     

       
21
       
 
       
export const pulsingPostId = writable<string | null>(null);

     

       
22
       
+
       


     

       
23
       
+
       
export const viewClient = new AtpClient();

     

       
24
       
+
       
export const clients = new SvelteMap<AtprotoDid, AtpClient>();

     

       
25
       
+
       


     

       
26
       
+
       
export const posts = new SvelteMap<Did, SvelteMap<ResourceUri, PostWithUri>>();

     

       
27
       
+
       
export const cursors = new SvelteMap<Did, { value?: string; end: boolean }>();

     

···

       
12
       
 
       
	import { AppBskyFeedPost } from '@atcute/bluesky';

     

       
13
       
 
       
	import { SvelteMap, SvelteSet } from 'svelte/reactivity';

     

       
14
       
 
       
	import { InfiniteLoader, LoaderState } from 'svelte-infinite';

     

       
15
       
-
       
	import { notificationStream } from '$lib/state.svelte';

     

       
16
       
 
       
	import { get } from 'svelte/store';

     

       
17
       
 
       
	import Icon from '@iconify/svelte';

     

       
18
       
 
       
	import { sessions } from '$lib/at/oauth';

     
···

       
35
       
 
       
		}

     

       
36
       
 
       
	});

     

       
37
       
 
       


     

       
38
       
-
       
	const clients = new SvelteMap<AtprotoDid, AtpClient>();

     

       
39
       
 
       
	const selectedClient = $derived(selectedDid ? clients.get(selectedDid) : null);

     

       
40
       
 
       


     

       
41
       
 
       
	const loginAccount = async (account: Account) => {

     
···

       
65
       
 
       
		cursors.delete(did);

     

       
66
       
 
       
		handleAccountSelected(newAccounts[0]?.did);

     

       
67
       
 
       
	};

     

       
68
       
-
       


     

       
69
       
-
       
	const viewClient = new AtpClient();

     

       
70
       
-
       


     

       
71
       
-
       
	const posts = new SvelteMap<Did, SvelteMap<ResourceUri, PostWithUri>>();

     

       
72
       
-
       
	const cursors = new SvelteMap<Did, { value?: string; end: boolean }>();

     

       
73
       
 
       


     

       
74
       
 
       
	let isSettingsOpen = $state(false);

     

       
75
       
 
       
	let isNotificationsOpen = $state(false);

     

···

       
12
       
 
       
	import { AppBskyFeedPost } from '@atcute/bluesky';

     

       
13
       
 
       
	import { SvelteMap, SvelteSet } from 'svelte/reactivity';

     

       
14
       
 
       
	import { InfiniteLoader, LoaderState } from 'svelte-infinite';

     

       
15
       
+
       
	import { clients, cursors, notificationStream, posts, viewClient } from '$lib/state.svelte';

     

       
16
       
 
       
	import { get } from 'svelte/store';

     

       
17
       
 
       
	import Icon from '@iconify/svelte';

     

       
18
       
 
       
	import { sessions } from '$lib/at/oauth';

     
···

       
35
       
 
       
		}

     

       
36
       
 
       
	});

     

       
37
       
 
       


     

       
0
       
 
       

     

       
38
       
 
       
	const selectedClient = $derived(selectedDid ? clients.get(selectedDid) : null);

     

       
39
       
 
       


     

       
40
       
 
       
	const loginAccount = async (account: Account) => {

     
···

       
64
       
 
       
		cursors.delete(did);

     

       
65
       
 
       
		handleAccountSelected(newAccounts[0]?.did);

     

       
66
       
 
       
	};

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
67
       
 
       


     

       
68
       
 
       
	let isSettingsOpen = $state(false);

     

       
69
       
 
       
	let isNotificationsOpen = $state(false);