···

       
4
       
4
       
 
       
.grain:before {

     

       
5
       
5
       
 
       
	content: '';

     

       
6
       
6
       
 
       
	background-color: transparent;

     

       
7
       
7
       
-
       
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 600'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)'/%3E%3C/svg%3E");

     

       
7
       
7
       
+
       
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 600'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='4' stitchTiles='stitch' /%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='2' intercept='-0.5' /%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)' /%3E%3C/svg%3E");

     

       
8
       
8
       
 
       
	background-repeat: repeat;

     

       
9
       
9
       
-
       
	background-size: 364px;

     

       
10
       
10
       
-
       
	opacity: 0.05;

     

       
9
       
9
       
+
       
	background-size: 40vmax;

     

       
10
       
10
       
+
       
	opacity: 0.06;

     

       
11
       
11
       
 
       
	top: 0;

     

       
12
       
12
       
 
       
	left: 0;

     

       
13
       
13
       
-
       
	position: absolute;

     

       
13
       
13
       
+
       
	position: fixed;

     

       
14
       
14
       
 
       
	width: 100%;

     

       
15
       
15
       
 
       
	height: 100%;

     

       
16
       
16
       
+
       
	pointer-events: none;

     

       
17
       
17
       
+
       
	z-index: 1;

     

       
16
       
18
       
 
       
}

     

···

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

     

       
5
       
5
       
 
       
	import { theme } from '$lib/theme.svelte';

     

       
6
       
6
       
 
       


     

       
7
       
7
       
-
       
	let {

     

       
8
       
8
       
-
       
		accounts = [],

     

       
9
       
9
       
-
       
		selectedDid = $bindable(null),

     

       
10
       
10
       
-
       
		onAccountSelected,

     

       
11
       
11
       
-
       
		onLoginSucceed

     

       
12
       
12
       
-
       
	}: {

     

       
7
       
7
       
+
       
	interface Props {

     

       
13
       
8
       
 
       
		accounts: Array<Account>;

     

       
14
       
9
       
 
       
		selectedDid?: Did | null;

     

       
15
       
10
       
 
       
		onAccountSelected: (did: Did) => void;

     

       
16
       
11
       
 
       
		onLoginSucceed: (did: Did, handle: Handle, password: string) => void;

     

       
17
       
17
       
-
       
	} = $props();

     

       
12
       
12
       
+
       
		onLogout: (did: Did) => void;

     

       
13
       
13
       
+
       
	}

     

       
14
       
14
       
+
       


     

       
15
       
15
       
+
       
	let {

     

       
16
       
16
       
+
       
		accounts = [],

     

       
17
       
17
       
+
       
		selectedDid = $bindable(null),

     

       
18
       
18
       
+
       
		onAccountSelected,

     

       
19
       
19
       
+
       
		onLoginSucceed,

     

       
20
       
20
       
+
       
		onLogout

     

       
21
       
21
       
+
       
	}: Props = $props();

     

       
18
       
22
       
 
       


     

       
19
       
23
       
 
       
	let color = $derived(selectedDid ? (generateColorForDid(selectedDid) ?? theme.fg) : theme.fg);

     

       
20
       
24
       
 
       


     
···

       
104
       
108
       
 
       
<div class="relative">

     

       
105
       
109
       
 
       
	<button

     

       
106
       
110
       
 
       
		onclick={toggleDropdown}

     

       
107
       
107
       
-
       
		class="group flex h-full items-center gap-2 rounded-2xl border-2 px-4 font-medium shadow-lg transition-all hover:scale-105 hover:shadow-xl"

     

       
111
       
111
       
+
       
		class="group flex h-full items-center gap-2 rounded-sm border-2 px-2 font-medium shadow-lg transition-all hover:scale-105 hover:shadow-xl"

     

       
108
       
112
       
 
       
		style="border-color: {theme.accent}66; background: {theme.accent}18; color: {color}; backdrop-filter: blur(8px);"

     

       
109
       
113
       
 
       
	>

     

       
110
       
110
       
-
       
		<span class="text-sm">

     

       
114
       
114
       
+
       
		<span class="font-bold">

     

       
111
       
115
       
 
       
			{selectedAccount ? `@${selectedAccount.handle}` : 'select account'}

     

       
112
       
116
       
 
       
		</span>

     

       
113
       
117
       
 
       
		<svg

     
···

       
125
       
129
       
 
       
		<!-- svelte-ignore a11y_click_events_have_key_events -->

     

       
126
       
130
       
 
       
		<!-- svelte-ignore a11y_no_static_element_interactions -->

     

       
127
       
131
       
 
       
		<div

     

       
128
       
128
       
-
       
			class="absolute left-0 z-10 mt-3 min-w-52 overflow-hidden rounded-2xl border-2 shadow-2xl backdrop-blur-lg"

     

       
132
       
132
       
+
       
			class="absolute left-0 z-10 mt-3 min-w-52 overflow-hidden rounded-sm border-2 shadow-2xl backdrop-blur-lg"

     

       
129
       
133
       
 
       
			style="border-color: {theme.accent}; background: {theme.bg}f0;"

     

       
130
       
134
       
 
       
			onclick={(e) => e.stopPropagation()}

     

       
131
       
135
       
 
       
		>

     
···

       
135
       
139
       
 
       
						{@const color = generateColorForDid(account.did)}

     

       
136
       
140
       
 
       
						<button

     

       
137
       
141
       
 
       
							onclick={() => selectAccount(account.did)}

     

       
138
       
138
       
-
       
							class="flex w-full items-center gap-3 rounded-xl p-2 text-left text-sm font-medium transition-all {account.did ===

     

       
139
       
139
       
-
       
							selectedDid

     

       
140
       
140
       
-
       
								? 'shadow-lg'

     

       
141
       
141
       
-
       
								: 'hover:scale-[1.02]'}"

     

       
142
       
142
       
+
       
							class="

     

       
143
       
143
       
+
       
    							group flex w-full items-center gap-3 rounded-sm p-2 text-left text-sm font-medium transition-all

     

       
144
       
144
       
+
       
    							{account.did === selectedDid ? 'shadow-lg' : ''}

     

       
145
       
145
       
+
       
							"

     

       
142
       
146
       
 
       
							style="color: {color}; background: {account.did === selectedDid

     

       
143
       
147
       
 
       
								? `linear-gradient(135deg, ${theme.accent}33, ${theme.accent2}33)`

     

       
144
       
148
       
 
       
								: 'transparent'};"

     

       
145
       
149
       
 
       
						>

     

       
146
       
150
       
 
       
							<span>@{account.handle}</span>

     

       
151
       
151
       
+
       
							<svg

     

       
152
       
152
       
+
       
								xmlns="http://www.w3.org/2000/svg"

     

       
153
       
153
       
+
       
								onclick={() => onLogout(account.did)}

     

       
154
       
154
       
+
       
								class="ml-auto hidden h-5 w-5 transition-all group-hover:[display:block] hover:scale-[1.2] hover:shadow-md"

     

       
155
       
155
       
+
       
								style="color: {theme.accent};"

     

       
156
       
156
       
+
       
								width="24"

     

       
157
       
157
       
+
       
								height="24"

     

       
158
       
158
       
+
       
								viewBox="0 0 20 20"

     

       
159
       
159
       
+
       
								><path

     

       
160
       
160
       
+
       
									fill="currentColor"

     

       
161
       
161
       
+
       
									fill-rule="evenodd"

     

       
162
       
162
       
+
       
									d="M8.75 1A2.75 2.75 0 0 0 6 3.75v.443q-1.193.115-2.365.298a.75.75 0 1 0 .23 1.482l.149-.022l.841 10.518A2.75 2.75 0 0 0 7.596 19h4.807a2.75 2.75 0 0 0 2.742-2.53l.841-10.52l.149.023a.75.75 0 0 0 .23-1.482A41 41 0 0 0 14 4.193V3.75A2.75 2.75 0 0 0 11.25 1zM10 4q1.26 0 2.5.075V3.75c0-.69-.56-1.25-1.25-1.25h-2.5c-.69 0-1.25.56-1.25 1.25v.325Q8.74 4 10 4M8.58 7.72a.75.75 0 0 0-1.5.06l.3 7.5a.75.75 0 1 0 1.5-.06zm4.34.06a.75.75 0 1 0-1.5-.06l-.3 7.5a.75.75 0 1 0 1.5.06z"

     

       
163
       
163
       
+
       
									clip-rule="evenodd"

     

       
164
       
164
       
+
       
								/></svg

     

       
165
       
165
       
+
       
							>

     

       
166
       
166
       
+
       


     

       
147
       
167
       
 
       
							{#if account.did === selectedDid}

     

       
148
       
168
       
 
       
								<svg

     

       
149
       
149
       
-
       
									class="ml-auto h-5 w-5"

     

       
169
       
169
       
+
       
									xmlns="http://www.w3.org/2000/svg"

     

       
170
       
170
       
+
       
									class="ml-auto h-5 w-5 group-hover:hidden"

     

       
150
       
171
       
 
       
									style="color: {theme.accent};"

     

       
151
       
151
       
-
       
									fill="currentColor"

     

       
152
       
152
       
-
       
									viewBox="0 0 20 20"

     

       
153
       
153
       
-
       
								>

     

       
154
       
154
       
-
       
									<path

     

       
172
       
172
       
+
       
									width="24"

     

       
173
       
173
       
+
       
									height="24"

     

       
174
       
174
       
+
       
									viewBox="0 0 24 24"

     

       
175
       
175
       
+
       
									><path

     

       
176
       
176
       
+
       
										fill="currentColor"

     

       
155
       
177
       
 
       
										fill-rule="evenodd"

     

       
156
       
156
       
-
       
										d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"

     

       
178
       
178
       
+
       
										d="M19.916 4.626a.75.75 0 0 1 .208 1.04l-9 13.5a.75.75 0 0 1-1.154.114l-6-6a.75.75 0 0 1 1.06-1.06l5.353 5.353l8.493-12.74a.75.75 0 0 1 1.04-.207"

     

       
157
       
179
       
 
       
										clip-rule="evenodd"

     

       
158
       
158
       
-
       
									/>

     

       
159
       
159
       
-
       
								</svg>

     

       
180
       
180
       
+
       
										stroke-width="1.5"

     

       
181
       
181
       
+
       
										stroke="currentColor"

     

       
182
       
182
       
+
       
									/></svg

     

       
183
       
183
       
+
       
								>

     

       
160
       
184
       
 
       
							{/if}

     

       
161
       
185
       
 
       
						</button>

     

       
162
       
186
       
 
       
					{/each}

     
···

       
168
       
192
       
 
       
			{/if}

     

       
169
       
193
       
 
       
			<button

     

       
170
       
194
       
 
       
				onclick={openLoginModal}

     

       
171
       
171
       
-
       
				class="flex w-full items-center gap-3 p-3 text-left text-sm font-semibold transition-all hover:scale-[1.02]"

     

       
195
       
195
       
+
       
				class="group flex w-full origin-left items-center gap-3 p-3 text-left text-sm font-semibold transition-all hover:scale-[1.1]"

     

       
172
       
196
       
 
       
				style="color: {theme.accent};"

     

       
173
       
197
       
 
       
			>

     

       
174
       
198
       
 
       
				<svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">

     
···

       
197
       
221
       
 
       
		<!-- svelte-ignore a11y_interactive_supports_focus -->

     

       
198
       
222
       
 
       
		<!-- svelte-ignore a11y_click_events_have_key_events -->

     

       
199
       
223
       
 
       
		<div

     

       
200
       
200
       
-
       
			class="w-full max-w-md rounded-3xl border-2 p-5 shadow-2xl"

     

       
224
       
224
       
+
       
			class="w-full max-w-md rounded-sm border-2 p-5 shadow-2xl"

     

       
201
       
225
       
 
       
			style="background: {theme.bg}; border-color: {theme.accent};"

     

       
202
       
226
       
 
       
			onclick={(e) => e.stopPropagation()}

     

       
203
       
227
       
 
       
			role="dialog"

     
···

       
237
       
261
       
 
       
						type="text"

     

       
238
       
262
       
 
       
						bind:value={loginHandle}

     

       
239
       
263
       
 
       
						placeholder="example.bsky.social"

     

       
240
       
240
       
-
       
						class="placeholder-opacity-40 w-full rounded-xl border-2 px-4 py-3 font-medium transition-all focus:scale-[1.02] focus:shadow-lg focus:outline-none"

     

       
264
       
264
       
+
       
						class="placeholder-opacity-40 w-full rounded-sm border-2 px-4 py-3 font-medium transition-all focus:scale-[1.02] focus:shadow-lg focus:outline-none"

     

       
241
       
265
       
 
       
						style="background: {theme.accent}08; border-color: {theme.accent}66; color: {theme.fg};"

     

       
242
       
266
       
 
       
						disabled={isLoggingIn}

     

       
243
       
267
       
 
       
					/>

     
···

       
256
       
280
       
 
       
						type="password"

     

       
257
       
281
       
 
       
						bind:value={loginPassword}

     

       
258
       
282
       
 
       
						placeholder="xxxx-xxxx-xxxx-xxxx"

     

       
259
       
259
       
-
       
						class="placeholder-opacity-40 w-full rounded-xl border-2 px-4 py-3 font-medium transition-all focus:scale-[1.02] focus:shadow-lg focus:outline-none"

     

       
283
       
283
       
+
       
						class="placeholder-opacity-40 w-full rounded-sm border-2 px-4 py-3 font-medium transition-all focus:scale-[1.02] focus:shadow-lg focus:outline-none"

     

       
260
       
284
       
 
       
						style="background: {theme.accent}08; border-color: {theme.accent}66; color: {theme.fg};"

     

       
261
       
285
       
 
       
						disabled={isLoggingIn}

     

       
262
       
286
       
 
       
					/>

     
···

       
264
       
288
       
 
       


     

       
265
       
289
       
 
       
				{#if loginError}

     

       
266
       
290
       
 
       
					<div

     

       
267
       
267
       
-
       
						class="rounded-xl border-2 p-4"

     

       
291
       
291
       
+
       
						class="rounded-sm border-2 p-4"

     

       
268
       
292
       
 
       
						style="background: #ef444422; border-color: #ef4444;"

     

       
269
       
293
       
 
       
					>

     

       
270
       
294
       
 
       
						<p class="text-sm font-medium" style="color: #fca5a5;">{loginError}</p>

     
···

       
274
       
298
       
 
       
				<div class="flex gap-3 pt-3">

     

       
275
       
299
       
 
       
					<button

     

       
276
       
300
       
 
       
						onclick={closeLoginModal}

     

       
277
       
277
       
-
       
						class="flex-1 rounded-xl border-2 px-5 py-3 font-semibold transition-all hover:scale-105"

     

       
301
       
301
       
+
       
						class="flex-1 rounded-sm border-2 px-5 py-3 font-semibold transition-all hover:scale-105"

     

       
278
       
302
       
 
       
						style="background: {theme.bg}; border-color: {theme.fg}33; color: {theme.fg};"

     

       
279
       
303
       
 
       
						disabled={isLoggingIn}

     

       
280
       
304
       
 
       
					>

     
···

       
282
       
306
       
 
       
					</button>

     

       
283
       
307
       
 
       
					<button

     

       
284
       
308
       
 
       
						onclick={handleLogin}

     

       
285
       
285
       
-
       
						class="flex-1 rounded-xl border-2 px-5 py-3 font-semibold transition-all hover:scale-105 hover:shadow-xl disabled:cursor-not-allowed disabled:opacity-50"

     

       
309
       
309
       
+
       
						class="flex-1 rounded-sm border-2 px-5 py-3 font-semibold transition-all hover:scale-105 hover:shadow-xl disabled:cursor-not-allowed disabled:opacity-50"

     

       
286
       
310
       
 
       
						style="background: linear-gradient(135deg, {theme.accent}, {theme.accent2}); border-color: transparent; color: {theme.fg};"

     

       
287
       
311
       
 
       
						disabled={isLoggingIn}

     

       
288
       
312
       
 
       
					>

     

···

       
4
       
4
       
 
       
	import type { ActorIdentifier, RecordKey } from '@atcute/lexicons';

     

       
5
       
5
       
 
       
	import { theme } from '$lib/theme.svelte';

     

       
6
       
6
       
 
       
	import { map, ok } from '$lib/result';

     

       
7
       
7
       
-
       
	import type { Backlinks } from '$lib/at/constellation';

     

       
8
       
7
       
 
       
	import { generateColorForDid } from '$lib/accounts';

     

       
9
       
8
       
 
       


     

       
10
       
9
       
 
       
	interface Props {

     

       
11
       
10
       
 
       
		client: AtpClient;

     

       
12
       
11
       
 
       
		identifier: ActorIdentifier;

     

       
13
       
12
       
 
       
		rkey: RecordKey;

     

       
14
       
14
       
-
       
		replyBacklinks?: Backlinks;

     

       
13
       
13
       
+
       
		// replyBacklinks?: Backlinks;

     

       
15
       
14
       
 
       
		record?: AppBskyFeedPost.Main;

     

       
15
       
15
       
+
       
		mini?: boolean;

     

       
16
       
16
       
 
       
	}

     

       
17
       
17
       
 
       


     

       
18
       
18
       
-
       
	const { client, identifier, rkey, record, replyBacklinks }: Props = $props();

     

       
18
       
18
       
+
       
	const { client, identifier, rkey, record, mini /* replyBacklinks */ }: Props = $props();

     

       
19
       
19
       
 
       


     

       
20
       
20
       
 
       
	const color = generateColorForDid(identifier) ?? theme.accent2;

     

       
21
       
21
       
 
       


     
···

       
29
       
29
       
 
       
	const post = record

     

       
30
       
30
       
 
       
		? Promise.resolve(ok(record))

     

       
31
       
31
       
 
       
		: client.getRecord(AppBskyFeedPost.mainSchema, identifier, rkey);

     

       
32
       
32
       
-
       
	const replies = replyBacklinks

     

       
33
       
33
       
-
       
		? Promise.resolve(ok(replyBacklinks))

     

       
34
       
34
       
-
       
		: client.getBacklinks(

     

       
35
       
35
       
-
       
				identifier,

     

       
36
       
36
       
-
       
				'app.bsky.feed.post',

     

       
37
       
37
       
-
       
				rkey,

     

       
38
       
38
       
-
       
				'app.bsky.feed.post:reply.parent.uri'

     

       
39
       
39
       
-
       
			);

     

       
32
       
32
       
+
       
	// const replies = replyBacklinks

     

       
33
       
33
       
+
       
	// 	? Promise.resolve(ok(replyBacklinks))

     

       
34
       
34
       
+
       
	// 	: client.getBacklinks(

     

       
35
       
35
       
+
       
	// 			identifier,

     

       
36
       
36
       
+
       
	// 			'app.bsky.feed.post',

     

       
37
       
37
       
+
       
	// 			rkey,

     

       
38
       
38
       
+
       
	// 			'app.bsky.feed.post:reply.parent.uri'

     

       
39
       
39
       
+
       
	// 		);

     

       
40
       
40
       
 
       


     

       
41
       
41
       
 
       
	const getEmbedText = (embedType: string) => {

     

       
42
       
42
       
 
       
		switch (embedType) {

     
···

       
70
       
70
       
 
       
		if (days > 0) return `${days} day${days > 1 ? 's' : ''} ago`;

     

       
71
       
71
       
 
       
		if (hours > 0) return `${hours} hour${hours > 1 ? 's' : ''} ago`;

     

       
72
       
72
       
 
       
		if (minutes > 0) return `${minutes} minute${minutes > 1 ? 's' : ''} ago`;

     

       
73
       
73
       
-
       
		return `${seconds} second${seconds > 1 ? 's' : ''} ago`;

     

       
73
       
73
       
+
       
		if (seconds > 0) return `${seconds} second${seconds > 1 ? 's' : ''} ago`;

     

       
74
       
74
       
+
       
		return 'just now';

     

       
74
       
75
       
 
       
	};

     

       
75
       
76
       
 
       
</script>

     

       
76
       
77
       
 
       


     

       
77
       
77
       
-
       
{#await post}

     

       
78
       
78
       
+
       
{#snippet embedBadge(record: AppBskyFeedPost.Main)}

     

       
79
       
79
       
+
       
	{#if record.embed}

     

       
80
       
80
       
+
       
		<span

     

       
81
       
81
       
+
       
			class="rounded-full px-2.5 py-0.5 text-xs font-medium"

     

       
82
       
82
       
+
       
			style="background: {mini ? theme.fg : color}22; color: {mini ? theme.fg : color};"

     

       
83
       
83
       
+
       
		>

     

       
84
       
84
       
+
       
			{getEmbedText(record.embed.$type)}

     

       
85
       
85
       
+
       
		</span>

     

       
86
       
86
       
+
       
	{/if}

     

       
87
       
87
       
+
       
{/snippet}

     

       
88
       
88
       
+
       


     

       
89
       
89
       
+
       
{#if mini}

     

       
78
       
90
       
 
       
	<div

     

       
79
       
79
       
-
       
		class="rounded-xl border-2 p-3 text-center backdrop-blur-sm"

     

       
80
       
80
       
-
       
		style="background: {color}18; border-color: {color}66;"

     

       
91
       
91
       
+
       
		class="overflow-hidden text-sm text-nowrap overflow-ellipsis opacity-60"

     

       
92
       
92
       
+
       
		style="color: {theme.fg};"

     

       
81
       
93
       
 
       
	>

     

       
82
       
82
       
-
       
		<div

     

       
83
       
83
       
-
       
			class="inline-block h-6 w-6 animate-spin rounded-full border-3"

     

       
84
       
84
       
-
       
			style="border-color: {theme.accent}; border-left-color: transparent;"

     

       
85
       
85
       
-
       
		></div>

     

       
86
       
86
       
-
       
		<p class="mt-3 text-sm font-medium opacity-60" style="color: {theme.fg};">loading post...</p>

     

       
94
       
94
       
+
       
		{#await post}

     

       
95
       
95
       
+
       
			loading...

     

       
96
       
96
       
+
       
		{:then post}

     

       
97
       
97
       
+
       
			{#if post.ok}

     

       
98
       
98
       
+
       
				{@const record = post.value}

     

       
99
       
99
       
+
       
				<span style="color: {color};">@{handle}</span>: {@render embedBadge(record)}

     

       
100
       
100
       
+
       
				{record.text}

     

       
101
       
101
       
+
       
			{:else}

     

       
102
       
102
       
+
       
				{post.error}

     

       
103
       
103
       
+
       
			{/if}

     

       
104
       
104
       
+
       
		{/await}

     

       
87
       
105
       
 
       
	</div>

     

       
88
       
88
       
-
       
{:then post}

     

       
89
       
89
       
-
       
	{#if post.ok}

     

       
90
       
90
       
-
       
		{@const record = post.value}

     

       
106
       
106
       
+
       
{:else}

     

       
107
       
107
       
+
       
	{#await post}

     

       
91
       
108
       
 
       
		<div

     

       
92
       
92
       
-
       
			class="rounded-xl border-2 p-3 shadow-lg backdrop-blur-sm transition-all hover:scale-[1.01]"

     

       
109
       
109
       
+
       
			class="rounded-sm border-2 p-3 text-center backdrop-blur-sm"

     

       
93
       
110
       
 
       
			style="background: {color}18; border-color: {color}66;"

     

       
94
       
111
       
 
       
		>

     

       
95
       
95
       
-
       
			<div class="mb-3 flex items-center gap-1.5">

     

       
96
       
96
       
-
       
				<span class="font-bold" style="color: {color};">

     

       
97
       
97
       
-
       
					@{handle}

     

       
98
       
98
       
-
       
				</span>

     

       
99
       
99
       
-
       
				<span>·</span>

     

       
112
       
112
       
+
       
			<div

     

       
113
       
113
       
+
       
				class="inline-block h-6 w-6 animate-spin rounded-full border-3"

     

       
114
       
114
       
+
       
				style="border-color: {theme.accent}; border-left-color: transparent;"

     

       
115
       
115
       
+
       
			></div>

     

       
116
       
116
       
+
       
			<p class="mt-3 text-sm font-medium opacity-60" style="color: {theme.fg};">loading post...</p>

     

       
117
       
117
       
+
       
		</div>

     

       
118
       
118
       
+
       
	{:then post}

     

       
119
       
119
       
+
       
		{#if post.ok}

     

       
120
       
120
       
+
       
			{@const record = post.value}

     

       
121
       
121
       
+
       
			<div

     

       
122
       
122
       
+
       
				class="rounded-sm border-2 p-3 shadow-lg backdrop-blur-sm transition-all hover:scale-[1.01]"

     

       
123
       
123
       
+
       
				style="background: {color}18; border-color: {color}66;"

     

       
124
       
124
       
+
       
			>

     

       
125
       
125
       
+
       
				<div class="mb-3 flex items-center gap-1.5">

     

       
126
       
126
       
+
       
					<span class="font-bold" style="color: {color};">

     

       
127
       
127
       
+
       
						@{handle}

     

       
128
       
128
       
+
       
					</span>

     

       
129
       
129
       
+
       
					<!-- <span>·</span>

     

       
100
       
130
       
 
       
				{#await replies}

     

       
101
       
131
       
 
       
					<span style="color: {theme.fg}aa;">… replies</span>

     

       
102
       
132
       
 
       
				{:then replies}

     
···

       
117
       
147
       
 
       
							style="color: {theme.fg}aa;">{replies.error}</span

     

       
118
       
148
       
 
       
						>

     

       
119
       
149
       
 
       
					{/if}

     

       
120
       
120
       
-
       
				{/await}

     

       
121
       
121
       
-
       
				<span>·</span>

     

       
122
       
122
       
-
       
				<span style="color: {theme.fg}aa;">{getRelativeTime(new Date(record.createdAt))}</span>

     

       
150
       
150
       
+
       
				{/await} -->

     

       
151
       
151
       
+
       
					<span>·</span>

     

       
152
       
152
       
+
       
					<span style="color: {theme.fg}aa;">{getRelativeTime(new Date(record.createdAt))}</span>

     

       
153
       
153
       
+
       
				</div>

     

       
154
       
154
       
+
       
				<p class="leading-relaxed text-wrap" style="color: {theme.fg};">

     

       
155
       
155
       
+
       
					{record.text}

     

       
156
       
156
       
+
       
					{@render embedBadge(record)}

     

       
157
       
157
       
+
       
				</p>

     

       
123
       
158
       
 
       
			</div>

     

       
124
       
124
       
-
       
			<p class="leading-relaxed text-wrap" style="color: {theme.fg};">

     

       
125
       
125
       
-
       
				{record.text}

     

       
126
       
126
       
-
       
				{#if record.embed}

     

       
127
       
127
       
-
       
					<span

     

       
128
       
128
       
-
       
						class="rounded-full px-2.5 py-0.5 text-xs font-medium"

     

       
129
       
129
       
-
       
						style="background: {color}22; color: {color};"

     

       
130
       
130
       
-
       
					>

     

       
131
       
131
       
-
       
						{getEmbedText(record.embed.$type)}

     

       
132
       
132
       
-
       
					</span>

     

       
133
       
133
       
-
       
				{/if}

     

       
134
       
134
       
-
       
			</p>

     

       
135
       
135
       
-
       
		</div>

     

       
136
       
136
       
-
       
	{:else}

     

       
137
       
137
       
-
       
		<div class="rounded-xl border-2 p-4" style="background: #ef444422; border-color: #ef4444;">

     

       
138
       
138
       
-
       
			<p class="text-sm font-medium" style="color: #fca5a5;">error: {post.error}</p>

     

       
139
       
139
       
-
       
		</div>

     

       
140
       
140
       
-
       
	{/if}

     

       
141
       
141
       
-
       
{/await}

     

       
159
       
159
       
+
       
		{:else}

     

       
160
       
160
       
+
       
			<div class="rounded-xl border-2 p-4" style="background: #ef444422; border-color: #ef4444;">

     

       
161
       
161
       
+
       
				<p class="text-sm font-medium" style="color: #fca5a5;">error: {post.error}</p>

     

       
162
       
162
       
+
       
			</div>

     

       
163
       
163
       
+
       
		{/if}

     

       
164
       
164
       
+
       
	{/await}

     

       
165
       
165
       
+
       
{/if}

     

···

       
1
       
1
       
 
       
<script lang="ts">

     

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

     

       
3
       
3
       
 
       
	import { ok, err, type Result } from '$lib/result';

     

       
4
       
4
       
-
       
	import type { ComAtprotoRepoCreateRecord } from '@atcute/atproto';

     

       
5
       
4
       
 
       
	import type { AppBskyFeedPost } from '@atcute/bluesky';

     

       
6
       
6
       
-
       
	import type { InferOutput } from '@atcute/lexicons';

     

       
5
       
5
       
+
       
	import type { ResourceUri } from '@atcute/lexicons';

     

       
7
       
6
       
 
       
	import { theme } from '$lib/theme.svelte';

     

       
8
       
7
       
 
       


     

       
9
       
8
       
 
       
	interface Props {

     

       
10
       
9
       
 
       
		client: AtpClient;

     

       
10
       
10
       
+
       
		onPostSent: (uri: ResourceUri, post: AppBskyFeedPost.Main) => void;

     

       
11
       
11
       
 
       
	}

     

       
12
       
12
       
 
       


     

       
13
       
13
       
-
       
	const { client }: Props = $props();

     

       
13
       
13
       
+
       
	const { client, onPostSent }: Props = $props();

     

       
14
       
14
       
 
       


     

       
15
       
15
       
 
       
	const post = async (

     

       
16
       
16
       
 
       
		text: string

     

       
17
       
17
       
-
       
	): Promise<

     

       
18
       
18
       
-
       
		Result<InferOutput<(typeof ComAtprotoRepoCreateRecord.mainSchema)['output']['schema']>, string>

     

       
19
       
19
       
-
       
	> => {

     

       
17
       
17
       
+
       
	): Promise<Result<{ uri: ResourceUri; record: AppBskyFeedPost.Main }, string>> => {

     

       
20
       
18
       
 
       
		const record: AppBskyFeedPost.Main = {

     

       
21
       
19
       
 
       
			$type: 'app.bsky.feed.post',

     

       
22
       
20
       
 
       
			text,

     
···

       
39
       
37
       
 
       
			return err(`failed to post: ${res.data.error}: ${res.data.message ?? 'no details'}`);

     

       
40
       
38
       
 
       
		}

     

       
41
       
39
       
 
       


     

       
42
       
42
       
-
       
		return ok(res.data);

     

       
40
       
40
       
+
       
		return ok({

     

       
41
       
41
       
+
       
			uri: res.data.uri,

     

       
42
       
42
       
+
       
			record

     

       
43
       
43
       
+
       
		});

     

       
43
       
44
       
 
       
	};

     

       
44
       
45
       
 
       


     

       
45
       
46
       
 
       
	let postText = $state('');

     

       
46
       
47
       
 
       
	let info = $state('');

     

       
48
       
48
       
+
       


     

       
49
       
49
       
+
       
	const doPost = () => {

     

       
50
       
50
       
+
       
		post(postText).then((res) => {

     

       
51
       
51
       
+
       
			if (res.ok) {

     

       
52
       
52
       
+
       
				onPostSent(res.value.uri, res.value.record);

     

       
53
       
53
       
+
       
				postText = '';

     

       
54
       
54
       
+
       
				info = 'posted!';

     

       
55
       
55
       
+
       
				setTimeout(() => (info = ''), 1000 * 3);

     

       
56
       
56
       
+
       
			} else {

     

       
57
       
57
       
+
       
				info = res.error;

     

       
58
       
58
       
+
       
			}

     

       
59
       
59
       
+
       
		});

     

       
60
       
60
       
+
       
	};

     

       
47
       
61
       
 
       
</script>

     

       
48
       
62
       
 
       


     

       
49
       
63
       
 
       
<div

     

       
50
       
50
       
-
       
	class="flex min-h-16 max-w-full items-center rounded-xl border-2 px-1 shadow-lg backdrop-blur-sm"

     

       
64
       
64
       
+
       
	class="flex min-h-16 max-w-full items-center rounded-sm border-2 px-1 shadow-lg backdrop-blur-sm"

     

       
51
       
65
       
 
       
	style="background: {theme.accent}18; border-color: {theme.accent}66;"

     

       
52
       
66
       
 
       
>

     

       
53
       
67
       
 
       
	<div class="w-full p-1">

     

       
54
       
68
       
 
       
		{#if info.length > 0}

     

       
55
       
69
       
 
       
			<div

     

       
56
       
56
       
-
       
				class="rounded-lg px-3 py-1.5 text-center font-medium text-nowrap overflow-ellipsis"

     

       
70
       
70
       
+
       
				class="rounded-sm px-3 py-1.5 text-center font-medium text-nowrap overflow-ellipsis"

     

       
57
       
71
       
 
       
				style="background: {theme.accent}22; color: {theme.accent};"

     

       
58
       
72
       
 
       
			>

     

       
59
       
73
       
 
       
				{info}

     
···

       
62
       
76
       
 
       
			<div class="flex gap-2">

     

       
63
       
77
       
 
       
				<input

     

       
64
       
78
       
 
       
					bind:value={postText}

     

       
79
       
79
       
+
       
					onkeydown={(event) => {

     

       
80
       
80
       
+
       
						if (event.key === 'Enter') doPost();

     

       
81
       
81
       
+
       
					}}

     

       
65
       
82
       
 
       
					type="text"

     

       
66
       
83
       
 
       
					placeholder="what's on your mind?"

     

       
67
       
67
       
-
       
					class="placeholder-opacity-50 flex-1 rounded-lg border-2 px-3 py-2 text-sm font-medium transition-all focus:scale-[1.01] focus:shadow-lg focus:outline-none"

     

       
84
       
84
       
+
       
					class="placeholder-opacity-50 flex-1 rounded-sm border-2 px-3 py-2 text-sm font-medium transition-all focus:scale-[1.01] focus:shadow-lg focus:outline-none"

     

       
68
       
85
       
 
       
					style="background: {theme.bg}66; border-color: {theme.accent}44; color: {theme.fg};"

     

       
69
       
86
       
 
       
				/>

     

       
70
       
87
       
 
       
				<button

     

       
71
       
71
       
-
       
					onclick={() => {

     

       
72
       
72
       
-
       
						post(postText).then((res) => {

     

       
73
       
73
       
-
       
							if (res.ok) {

     

       
74
       
74
       
-
       
								postText = '';

     

       
75
       
75
       
-
       
								info = 'posted! aaaaaaaaaasdf asdlfkasl;df kjasdfjalsdkfjaskd fajksdhf';

     

       
76
       
76
       
-
       
								setTimeout(() => (info = ''), 1000 * 3);

     

       
77
       
77
       
-
       
							} else {

     

       
78
       
78
       
-
       
								info = res.error;

     

       
79
       
79
       
-
       
							}

     

       
80
       
80
       
-
       
						});

     

       
81
       
81
       
-
       
					}}

     

       
82
       
82
       
-
       
					class="rounded-lg border-none px-5 py-2 text-sm font-bold transition-all hover:scale-105 hover:shadow-xl"

     

       
88
       
88
       
+
       
					onclick={doPost}

     

       
89
       
89
       
+
       
					class="rounded-sm border-none px-5 py-2 text-sm font-bold transition-all hover:scale-105 hover:shadow-xl"

     

       
83
       
90
       
 
       
					style="background: linear-gradient(120deg, {theme.accent}c0, {theme.accent2}c0); color: {theme.fg}f0;"

     

       
84
       
91
       
 
       
				>

     

       
85
       
92
       
 
       
					post

     

···

       
9
       
9
       
 
       
import {

     

       
10
       
10
       
 
       
	isHandle,

     

       
11
       
11
       
 
       
	parseCanonicalResourceUri,

     

       
12
       
12
       
+
       
	parseResourceUri,

     

       
12
       
13
       
 
       
	type ActorIdentifier,

     

       
13
       
14
       
 
       
	type AtprotoDid,

     

       
14
       
15
       
 
       
	type CanonicalResourceUri,

     

       
15
       
16
       
 
       
	type Nsid,

     

       
16
       
16
       
-
       
	type RecordKey

     

       
17
       
17
       
+
       
	type RecordKey,

     

       
18
       
18
       
+
       
	type ResourceUri

     

       
17
       
19
       
 
       
} from '@atcute/lexicons/syntax';

     

       
18
       
20
       
 
       
import type {

     

       
21
       
21
       
+
       
	InferInput,

     

       
19
       
22
       
 
       
	InferXRPCBodyOutput,

     

       
20
       
23
       
 
       
	ObjectSchema,

     

       
21
       
24
       
 
       
	RecordKeySchema,

     
···

       
74
       
77
       
 
       
		return ok(null);

     

       
75
       
78
       
 
       
	}

     

       
76
       
79
       
 
       


     

       
80
       
80
       
+
       
	async getRecordUri<

     

       
81
       
81
       
+
       
		Collection extends Nsid,

     

       
82
       
82
       
+
       
		TObject extends ObjectSchema & { shape: { $type: v.LiteralSchema<Collection> } },

     

       
83
       
83
       
+
       
		TKey extends RecordKeySchema,

     

       
84
       
84
       
+
       
		Schema extends RecordSchema<TObject, TKey>,

     

       
85
       
85
       
+
       
		Output extends InferInput<Schema>

     

       
86
       
86
       
+
       
	>(schema: Schema, uri: ResourceUri): Promise<Result<Output, string>> {

     

       
87
       
87
       
+
       
		const parsedUri = expect(parseResourceUri(uri));

     

       
88
       
88
       
+
       
		if (parsedUri.collection !== schema.object.shape.$type.expected)

     

       
89
       
89
       
+
       
			return err(

     

       
90
       
90
       
+
       
				`collections don't match: ${parsedUri.collection} != ${schema.object.shape.$type.expected}`

     

       
91
       
91
       
+
       
			);

     

       
92
       
92
       
+
       
		return await this.getRecord(schema, parsedUri.repo!, parsedUri.rkey!);

     

       
93
       
93
       
+
       
	}

     

       
94
       
94
       
+
       


     

       
77
       
95
       
 
       
	async getRecord<

     

       
78
       
96
       
 
       
		Collection extends Nsid,

     

       
79
       
97
       
 
       
		TObject extends ObjectSchema & { shape: { $type: v.LiteralSchema<Collection> } },

     

       
80
       
98
       
 
       
		TKey extends RecordKeySchema,

     

       
81
       
99
       
 
       
		Schema extends RecordSchema<TObject, TKey>,

     

       
82
       
82
       
-
       
		Output extends InferOutput<Schema>

     

       
100
       
100
       
+
       
		Output extends InferInput<Schema>

     

       
83
       
101
       
 
       
	>(schema: Schema, repo: ActorIdentifier, rkey: RecordKey): Promise<Result<Output, string>> {

     

       
84
       
102
       
 
       
		const collection = schema.object.shape.$type.expected;

     

       
85
       
103
       
 
       
		const cacheKey = `${repo}:${collection}:${rkey}`;

     

···

       
4
       
4
       
 
       
import type { Backlinks } from './constellation';

     

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

     

       
6
       
6
       
 
       


     

       
7
       
7
       
-
       
export type PostWithBacklinks = {

     

       
8
       
8
       
-
       
	post: AppBskyFeedPost.Main;

     

       
9
       
9
       
-
       
	replies: Backlinks | string;

     

       
7
       
7
       
+
       
export type PostWithUri = { uri: CanonicalResourceUri; record: AppBskyFeedPost.Main };

     

       
8
       
8
       
+
       
export type PostWithBacklinks = PostWithUri & {

     

       
9
       
9
       
+
       
	replies: Result<Backlinks, string>;

     

       
10
       
10
       
 
       
};

     

       
11
       
11
       
-
       
export type PostsWithReplyBacklinks = Map<CanonicalResourceUri, PostWithBacklinks>;

     

       
11
       
11
       
+
       
export type PostsWithReplyBacklinks = PostWithBacklinks[];

     

       
12
       
12
       
 
       


     

       
13
       
13
       
-
       
export const fetchPostsWithReplyBacklinks = async (

     

       
13
       
13
       
+
       
export const fetchPostsWithBacklinks = async (

     

       
14
       
14
       
 
       
	client: AtpClient,

     

       
15
       
15
       
 
       
	repo: ActorIdentifier,

     

       
16
       
16
       
 
       
	cursor?: string,

     
···

       
25
       
25
       
 
       
		records.map((r) =>

     

       
26
       
26
       
 
       
			client

     

       
27
       
27
       
 
       
				.getBacklinksUri(r.uri as CanonicalResourceUri, 'app.bsky.feed.post:reply.parent.uri')

     

       
28
       
28
       
-
       
				.then((res) => ({

     

       
29
       
29
       
-
       
					key: r.uri as CanonicalResourceUri,

     

       
30
       
30
       
-
       
					value: {

     

       
31
       
31
       
-
       
						post: r.value as AppBskyFeedPost.Main,

     

       
32
       
32
       
-
       
						// filter out posts from the same repo

     

       
33
       
33
       
-
       
						replies: res.ok

     

       
34
       
34
       
-
       
							? { ...res.value, records: res.value.records.filter((r) => r.did !== repo) }

     

       
35
       
35
       
-
       
							: res.error

     

       
36
       
36
       
-
       
					}

     

       
37
       
37
       
-
       
				}))

     

       
28
       
28
       
+
       
				.then(

     

       
29
       
29
       
+
       
					(res): PostWithBacklinks => ({

     

       
30
       
30
       
+
       
						uri: r.uri as CanonicalResourceUri,

     

       
31
       
31
       
+
       
						record: r.value as AppBskyFeedPost.Main,

     

       
32
       
32
       
+
       
						replies: res

     

       
33
       
33
       
+
       
					})

     

       
34
       
34
       
+
       
				)

     

       
38
       
35
       
 
       
		)

     

       
39
       
36
       
 
       
	);

     

       
40
       
37
       
 
       


     

       
41
       
41
       
-
       
	return ok({ posts: new Map(allBacklinks.map((b) => [b.key, b.value])), cursor });

     

       
38
       
38
       
+
       
	return ok({ posts: allBacklinks, cursor });

     

       
42
       
39
       
 
       
};

     

       
43
       
40
       
 
       


     

       
44
       
44
       
-
       
export const fetchReplies = async (client: AtpClient, data: PostsWithReplyBacklinks) => {

     

       
45
       
45
       
-
       
	const allReplies = await Promise.all(

     

       
46
       
46
       
-
       
		Array.from(data.values()).map(async (d) => {

     

       
47
       
47
       
-
       
			if (typeof d.replies === 'string') return [];

     

       
48
       
48
       
-
       
			const replies = await Promise.all(

     

       
49
       
49
       
-
       
				d.replies.records.map((r) =>

     

       
50
       
50
       
-
       
					client

     

       
51
       
51
       
-
       
						.getRecord(AppBskyFeedPost.mainSchema, r.did, r.rkey)

     

       
52
       
52
       
-
       
						.then((res) =>

     

       
53
       
53
       
-
       
							map(res, (d) => ({ uri: `at://${r.did}/app.bsky.feed.post/${r.rkey}`, record: d }))

     

       
41
       
41
       
+
       
export const hydratePosts = async (

     

       
42
       
42
       
+
       
	client: AtpClient,

     

       
43
       
43
       
+
       
	data: PostsWithReplyBacklinks

     

       
44
       
44
       
+
       
): Promise<Map<CanonicalResourceUri, AppBskyFeedPost.Main>> => {

     

       
45
       
45
       
+
       
	const allPosts = await Promise.all(

     

       
46
       
46
       
+
       
		data.map(async (post) => {

     

       
47
       
47
       
+
       
			const result: Result<PostWithUri, string>[] = [ok({ uri: post.uri, record: post.record })];

     

       
48
       
48
       
+
       
			if (post.replies.ok) {

     

       
49
       
49
       
+
       
				const replies = await Promise.all(

     

       
50
       
50
       
+
       
					post.replies.value.records.map((r) =>

     

       
51
       
51
       
+
       
						client.getRecord(AppBskyFeedPost.mainSchema, r.did, r.rkey).then((res) =>

     

       
52
       
52
       
+
       
							map(

     

       
53
       
53
       
+
       
								res,

     

       
54
       
54
       
+
       
								(d): PostWithUri => ({

     

       
55
       
55
       
+
       
									uri: `at://${r.did}/app.bsky.feed.post/${r.rkey}` as CanonicalResourceUri,

     

       
56
       
56
       
+
       
									record: d

     

       
57
       
57
       
+
       
								})

     

       
58
       
58
       
+
       
							)

     

       
54
       
59
       
 
       
						)

     

       
55
       
55
       
-
       
				)

     

       
56
       
56
       
-
       
			);

     

       
57
       
57
       
-
       
			return replies;

     

       
60
       
60
       
+
       
					)

     

       
61
       
61
       
+
       
				);

     

       
62
       
62
       
+
       
				result.push(...replies);

     

       
63
       
63
       
+
       
			}

     

       
64
       
64
       
+
       
			return result;

     

       
58
       
65
       
 
       
		})

     

       
59
       
66
       
 
       
	);

     

       
67
       
67
       
+
       
	const posts = new Map(

     

       
68
       
68
       
+
       
		allPosts

     

       
69
       
69
       
+
       
			.flat()

     

       
70
       
70
       
+
       
			.flatMap((res) => (res.ok ? [res.value] : []))

     

       
71
       
71
       
+
       
			.map((post) => [post.uri, post.record])

     

       
72
       
72
       
+
       
	);

     

       
60
       
73
       
 
       


     

       
61
       
61
       
-
       
	return allReplies.flat();

     

       
74
       
74
       
+
       
	// hydrate posts

     

       
75
       
75
       
+
       
	const missingPosts = await Promise.all(

     

       
76
       
76
       
+
       
		Array.from(posts).map(async ([uri, record]) => {

     

       
77
       
77
       
+
       
			let result: PostWithUri[] = [{ uri, record }];

     

       
78
       
78
       
+
       
			let parent = record.reply?.parent;

     

       
79
       
79
       
+
       
			while (parent) {

     

       
80
       
80
       
+
       
				if (posts.has(parent.uri as CanonicalResourceUri)) {

     

       
81
       
81
       
+
       
					return result;

     

       
82
       
82
       
+
       
				}

     

       
83
       
83
       
+
       
				const p = await client.getRecordUri(AppBskyFeedPost.mainSchema, parent.uri);

     

       
84
       
84
       
+
       
				if (p.ok) {

     

       
85
       
85
       
+
       
					result = [{ uri: parent.uri as CanonicalResourceUri, record: p.value }, ...result];

     

       
86
       
86
       
+
       
					parent = p.value.reply?.parent;

     

       
87
       
87
       
+
       
					continue;

     

       
88
       
88
       
+
       
				}

     

       
89
       
89
       
+
       
				parent = undefined;

     

       
90
       
90
       
+
       
			}

     

       
91
       
91
       
+
       
			return result;

     

       
92
       
92
       
+
       
		})

     

       
93
       
93
       
+
       
	);

     

       
94
       
94
       
+
       
	for (const post of missingPosts.flat()) {

     

       
95
       
95
       
+
       
		posts.set(post.uri, post.record);

     

       
96
       
96
       
+
       
	}

     

       
97
       
97
       
+
       


     

       
98
       
98
       
+
       
	return posts;

     

       
62
       
99
       
 
       
};

     

···

       
1
       
1
       
 
       
export const theme = $state({

     

       
2
       
2
       
-
       
	bg: '#0f172a', // slate-900 - deep blue-grey background

     

       
2
       
2
       
+
       
	bg: '#11001c', // slate-900 - deep blue-grey background

     

       
3
       
3
       
 
       
	fg: '#f8fafc', // slate-50 - crisp white foreground

     

       
4
       
4
       
 
       
	accent: '#ec4899', // pink-500 - vibrant pink accent

     

       
5
       
5
       
 
       
	accent2: '#8b5cf6' // violet-500 - purple secondary accent

     

···

       
4
       
4
       
 
       
	import AccountSelector from '$components/AccountSelector.svelte';

     

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

     

       
6
       
6
       
 
       
	import { accounts, addAccount, type Account } from '$lib/accounts';

     

       
7
       
7
       
-
       
	import { type Did, type Handle, parseCanonicalResourceUri } from '@atcute/lexicons';

     

       
7
       
7
       
+
       
	import {

     

       
8
       
8
       
+
       
		type Did,

     

       
9
       
9
       
+
       
		type Handle,

     

       
10
       
10
       
+
       
		parseCanonicalResourceUri,

     

       
11
       
11
       
+
       
		type ResourceUri

     

       
12
       
12
       
+
       
	} from '@atcute/lexicons';

     

       
8
       
13
       
 
       
	import { onMount } from 'svelte';

     

       
9
       
14
       
 
       
	import { theme } from '$lib/theme.svelte';

     

       
10
       
10
       
-
       
	import { fetchPostsWithReplyBacklinks, fetchReplies } from '$lib/at/fetch';

     

       
15
       
15
       
+
       
	import { fetchPostsWithBacklinks, hydratePosts } from '$lib/at/fetch';

     

       
11
       
16
       
 
       
	import { expect } from '$lib/result';

     

       
12
       
12
       
-
       
	import { writable } from 'svelte/store';

     

       
13
       
17
       
 
       
	import type { AppBskyFeedPost } from '@atcute/bluesky';

     

       
18
       
18
       
+
       
	import { SvelteMap } from 'svelte/reactivity';

     

       
14
       
19
       
 
       


     

       
15
       
20
       
 
       
	let selectedDid = $state<Did | null>(null);

     

       
16
       
16
       
-
       
	let clients = writable<Map<Did, AtpClient>>(new Map());

     

       
17
       
17
       
-
       
	let selectedClient = $derived(selectedDid ? $clients.get(selectedDid) : null);

     

       
21
       
21
       
+
       
	let clients = new SvelteMap<Did, AtpClient>();

     

       
22
       
22
       
+
       
	let selectedClient = $derived(selectedDid ? clients.get(selectedDid) : null);

     

       
18
       
23
       
 
       


     

       
19
       
24
       
 
       
	let viewClient = $state<AtpClient>(new AtpClient());

     

       
20
       
25
       
 
       


     

       
21
       
26
       
 
       
	onMount(async () => {

     

       
22
       
27
       
 
       
		if ($accounts.length > 0) {

     

       
23
       
28
       
 
       
			selectedDid = $accounts[0].did;

     

       
24
       
24
       
-
       
			Promise.all($accounts.map(loginAccount)).then(() => fetchTimeline($accounts));

     

       
29
       
29
       
+
       
			Promise.all($accounts.map(loginAccount)).then(() => fetchTimelines($accounts));

     

       
25
       
30
       
 
       
		}

     

       
26
       
31
       
 
       
	});

     

       
27
       
32
       
 
       


     

       
28
       
33
       
 
       
	const loginAccount = async (account: Account) => {

     

       
29
       
34
       
 
       
		const client = new AtpClient();

     

       
30
       
35
       
 
       
		const result = await client.login(account.handle, account.password);

     

       
31
       
31
       
-
       
		if (result.ok) {

     

       
32
       
32
       
-
       
			clients.update((map) => map.set(account.did, client));

     

       
33
       
33
       
-
       
		}

     

       
36
       
36
       
+
       
		if (result.ok) clients.set(account.did, client);

     

       
34
       
37
       
 
       
	};

     

       
35
       
38
       
 
       


     

       
36
       
39
       
 
       
	const handleAccountSelected = async (did: Did) => {

     

       
37
       
40
       
 
       
		selectedDid = did;

     

       
38
       
41
       
 
       
		const account = $accounts.find((acc) => acc.did === did);

     

       
39
       
39
       
-
       
		if (account && (!$clients.has(account.did) || !$clients.get(account.did)?.atcute))

     

       
42
       
42
       
+
       
		if (account && (!clients.has(account.did) || !clients.get(account.did)?.atcute))

     

       
40
       
43
       
 
       
			await loginAccount(account);

     

       
41
       
44
       
 
       
	};

     

       
42
       
45
       
 
       


     

       
43
       
43
       
-
       
	const handleLoginSucceed = (did: Did, handle: Handle, password: string) => {

     

       
46
       
46
       
+
       
	const handleLogout = async (did: Did) => {

     

       
47
       
47
       
+
       
		$accounts = $accounts.filter((acc) => acc.did !== did);

     

       
48
       
48
       
+
       
		clients.delete(did);

     

       
49
       
49
       
+
       
		posts.delete(did);

     

       
50
       
50
       
+
       
	};

     

       
51
       
51
       
+
       


     

       
52
       
52
       
+
       
	const handleLoginSucceed = async (did: Did, handle: Handle, password: string) => {

     

       
44
       
53
       
 
       
		const newAccount: Account = { did, handle, password };

     

       
45
       
54
       
 
       
		addAccount(newAccount);

     

       
46
       
55
       
 
       
		selectedDid = did;

     

       
47
       
47
       
-
       
		loginAccount(newAccount);

     

       
56
       
56
       
+
       
		loginAccount(newAccount).then(() => fetchTimeline(newAccount));

     

       
48
       
57
       
 
       
	};

     

       
49
       
58
       
 
       


     

       
50
       
50
       
-
       
	let timeline = writable<Map<string, AppBskyFeedPost.Main>>(new Map());

     

       
51
       
51
       
-
       
	const fetchTimeline = async (newAccounts: Account[]) => {

     

       
52
       
52
       
-
       
		await Promise.all(

     

       
53
       
53
       
-
       
			newAccounts.map(async (account) => {

     

       
54
       
54
       
-
       
				const client = $clients.get(account.did);

     

       
55
       
55
       
-
       
				if (!client) return;

     

       
56
       
56
       
-
       
				const accPosts = await fetchPostsWithReplyBacklinks(client, account.did, undefined, 20);

     

       
57
       
57
       
-
       
				if (!accPosts.ok) {

     

       
58
       
58
       
-
       
					console.error(`failed to fetch posts for account ${account.handle}: ${accPosts.error}`);

     

       
59
       
59
       
-
       
					return;

     

       
59
       
59
       
+
       
	let posts = new SvelteMap<Did, SvelteMap<ResourceUri, AppBskyFeedPost.Main>>();

     

       
60
       
60
       
+
       
	const fetchTimeline = async (account: Account) => {

     

       
61
       
61
       
+
       
		const client = clients.get(account.did);

     

       
62
       
62
       
+
       
		if (!client) return;

     

       
63
       
63
       
+
       
		const accPosts = await fetchPostsWithBacklinks(client, account.did, undefined, 20);

     

       
64
       
64
       
+
       
		if (!accPosts.ok) {

     

       
65
       
65
       
+
       
			console.error(`failed to fetch posts for account ${account.handle}: ${accPosts.error}`);

     

       
66
       
66
       
+
       
			return;

     

       
67
       
67
       
+
       
		}

     

       
68
       
68
       
+
       
		const accTimeline = await hydratePosts(client, accPosts.value.posts);

     

       
69
       
69
       
+
       
		if (!posts.has(account.did)) {

     

       
70
       
70
       
+
       
			posts.set(account.did, new SvelteMap(accTimeline));

     

       
71
       
71
       
+
       
			return;

     

       
72
       
72
       
+
       
		}

     

       
73
       
73
       
+
       
		const map = posts.get(account.did)!;

     

       
74
       
74
       
+
       
		for (const [uri, record] of accTimeline) map.set(uri, record);

     

       
75
       
75
       
+
       
	};

     

       
76
       
76
       
+
       
	const fetchTimelines = (newAccounts: Account[]) => Promise.all(newAccounts.map(fetchTimeline));

     

       
77
       
77
       
+
       


     

       
78
       
78
       
+
       
	let reverseChronological = $state(true);

     

       
79
       
79
       
+
       
	let viewOwnPosts = $state(true);

     

       
80
       
80
       
+
       


     

       
81
       
81
       
+
       
	type ThreadPost = {

     

       
82
       
82
       
+
       
		uri: ResourceUri;

     

       
83
       
83
       
+
       
		did: Did;

     

       
84
       
84
       
+
       
		rkey: string;

     

       
85
       
85
       
+
       
		record: AppBskyFeedPost.Main;

     

       
86
       
86
       
+
       
		parentUri: ResourceUri | null;

     

       
87
       
87
       
+
       
		depth: number;

     

       
88
       
88
       
+
       
		newestTime: number;

     

       
89
       
89
       
+
       
	};

     

       
90
       
90
       
+
       


     

       
91
       
91
       
+
       
	type Thread = {

     

       
92
       
92
       
+
       
		rootUri: ResourceUri;

     

       
93
       
93
       
+
       
		posts: ThreadPost[];

     

       
94
       
94
       
+
       
		newestTime: number;

     

       
95
       
95
       
+
       
		branchParentPost?: ThreadPost;

     

       
96
       
96
       
+
       
	};

     

       
97
       
97
       
+
       


     

       
98
       
98
       
+
       
	const buildThreads = (timelines: Map<Did, Map<ResourceUri, AppBskyFeedPost.Main>>): Thread[] => {

     

       
99
       
99
       
+
       
		// eslint-disable-next-line svelte/prefer-svelte-reactivity

     

       
100
       
100
       
+
       
		const threadMap = new Map<ResourceUri, ThreadPost[]>();

     

       
101
       
101
       
+
       


     

       
102
       
102
       
+
       
		// Single pass: create posts and group by thread

     

       
103
       
103
       
+
       
		for (const [, timeline] of timelines) {

     

       
104
       
104
       
+
       
			for (const [uri, record] of timeline) {

     

       
105
       
105
       
+
       
				const parsedUri = expect(parseCanonicalResourceUri(uri));

     

       
106
       
106
       
+
       
				const rootUri = (record.reply?.root.uri as ResourceUri) || uri;

     

       
107
       
107
       
+
       
				const parentUri = (record.reply?.parent.uri as ResourceUri) || null;

     

       
108
       
108
       
+
       


     

       
109
       
109
       
+
       
				const post: ThreadPost = {

     

       
110
       
110
       
+
       
					uri,

     

       
111
       
111
       
+
       
					did: parsedUri.repo,

     

       
112
       
112
       
+
       
					rkey: parsedUri.rkey,

     

       
113
       
113
       
+
       
					record,

     

       
114
       
114
       
+
       
					parentUri,

     

       
115
       
115
       
+
       
					depth: 0,

     

       
116
       
116
       
+
       
					newestTime: new Date(record.createdAt).getTime()

     

       
117
       
117
       
+
       
				};

     

       
118
       
118
       
+
       


     

       
119
       
119
       
+
       
				if (!threadMap.has(rootUri)) {

     

       
120
       
120
       
+
       
					threadMap.set(rootUri, []);

     

       
121
       
121
       
+
       
				}

     

       
122
       
122
       
+
       
				threadMap.get(rootUri)!.push(post);

     

       
123
       
123
       
+
       
			}

     

       
124
       
124
       
+
       
		}

     

       
125
       
125
       
+
       


     

       
126
       
126
       
+
       
		const threads: Thread[] = [];

     

       
127
       
127
       
+
       


     

       
128
       
128
       
+
       
		for (const [rootUri, posts] of threadMap) {

     

       
129
       
129
       
+
       
			const uriToPost = new Map(posts.map((p) => [p.uri, p]));

     

       
130
       
130
       
+
       
			// eslint-disable-next-line svelte/prefer-svelte-reactivity

     

       
131
       
131
       
+
       
			const childrenMap = new Map<ResourceUri | null, ThreadPost[]>();

     

       
132
       
132
       
+
       


     

       
133
       
133
       
+
       
			// Calculate depth and group by parent

     

       
134
       
134
       
+
       
			for (const post of posts) {

     

       
135
       
135
       
+
       
				let depth = 0;

     

       
136
       
136
       
+
       
				let currentUri = post.parentUri;

     

       
137
       
137
       
+
       


     

       
138
       
138
       
+
       
				while (currentUri && uriToPost.has(currentUri)) {

     

       
139
       
139
       
+
       
					depth++;

     

       
140
       
140
       
+
       
					currentUri = uriToPost.get(currentUri)!.parentUri;

     

       
141
       
141
       
+
       
				}

     

       
142
       
142
       
+
       


     

       
143
       
143
       
+
       
				post.depth = depth;

     

       
144
       
144
       
+
       


     

       
145
       
145
       
+
       
				if (!childrenMap.has(post.parentUri)) {

     

       
146
       
146
       
+
       
					childrenMap.set(post.parentUri, []);

     

       
60
       
147
       
 
       
				}

     

       
61
       
61
       
-
       
				const accTimeline = await fetchReplies(client, accPosts.value.posts);

     

       
62
       
62
       
-
       
				for (const reply of accTimeline) {

     

       
63
       
63
       
-
       
					if (!reply.ok) {

     

       
64
       
64
       
-
       
						console.error(`failed to fetch reply: ${reply.error}`);

     

       
65
       
65
       
-
       
						return;

     

       
148
       
148
       
+
       
				childrenMap.get(post.parentUri)!.push(post);

     

       
149
       
149
       
+
       
			}

     

       
150
       
150
       
+
       


     

       
151
       
151
       
+
       
			// Sort children by time (newest first)

     

       
152
       
152
       
+
       
			for (const children of childrenMap.values()) {

     

       
153
       
153
       
+
       
				children.sort((a, b) => b.newestTime - a.newestTime);

     

       
154
       
154
       
+
       
			}

     

       
155
       
155
       
+
       


     

       
156
       
156
       
+
       
			// Helper to create a thread from posts

     

       
157
       
157
       
+
       
			const createThread = (

     

       
158
       
158
       
+
       
				posts: ThreadPost[],

     

       
159
       
159
       
+
       
				rootUri: ResourceUri,

     

       
160
       
160
       
+
       
				branchParentUri?: ResourceUri

     

       
161
       
161
       
+
       
			): Thread => {

     

       
162
       
162
       
+
       
				return {

     

       
163
       
163
       
+
       
					rootUri,

     

       
164
       
164
       
+
       
					posts,

     

       
165
       
165
       
+
       
					newestTime: Math.max(...posts.map((p) => p.newestTime)),

     

       
166
       
166
       
+
       
					branchParentPost: branchParentUri ? uriToPost.get(branchParentUri) : undefined

     

       
167
       
167
       
+
       
				};

     

       
168
       
168
       
+
       
			};

     

       
169
       
169
       
+
       


     

       
170
       
170
       
+
       
			// Helper to collect all posts in a subtree

     

       
171
       
171
       
+
       
			const collectSubtree = (startPost: ThreadPost): ThreadPost[] => {

     

       
172
       
172
       
+
       
				const result: ThreadPost[] = [];

     

       
173
       
173
       
+
       
				const addWithChildren = (post: ThreadPost) => {

     

       
174
       
174
       
+
       
					result.push(post);

     

       
175
       
175
       
+
       
					const children = childrenMap.get(post.uri) || [];

     

       
176
       
176
       
+
       
					for (const child of children) {

     

       
177
       
177
       
+
       
						addWithChildren(child);

     

       
66
       
178
       
 
       
					}

     

       
67
       
67
       
-
       
					timeline.update((map) => map.set(reply.value.uri, reply.value.record));

     

       
179
       
179
       
+
       
				};

     

       
180
       
180
       
+
       
				addWithChildren(startPost);

     

       
181
       
181
       
+
       
				return result;

     

       
182
       
182
       
+
       
			};

     

       
183
       
183
       
+
       


     

       
184
       
184
       
+
       
			// Find branching points (posts with 2+ children)

     

       
185
       
185
       
+
       
			const branchingPoints = Array.from(childrenMap.entries())

     

       
186
       
186
       
+
       
				.filter(([, children]) => children.length > 1)

     

       
187
       
187
       
+
       
				.map(([uri]) => uri);

     

       
188
       
188
       
+
       


     

       
189
       
189
       
+
       
			if (branchingPoints.length === 0) {

     

       
190
       
190
       
+
       
				// No branches - single thread

     

       
191
       
191
       
+
       
				const roots = childrenMap.get(null) || [];

     

       
192
       
192
       
+
       
				const allPosts = roots.flatMap((root) => collectSubtree(root));

     

       
193
       
193
       
+
       
				threads.push(createThread(allPosts, rootUri));

     

       
194
       
194
       
+
       
			} else {

     

       
195
       
195
       
+
       
				// Has branches - split into separate threads

     

       
196
       
196
       
+
       
				for (const branchParentUri of branchingPoints) {

     

       
197
       
197
       
+
       
					const branches = childrenMap.get(branchParentUri) || [];

     

       
198
       
198
       
+
       


     

       
199
       
199
       
+
       
					// Sort branches oldest to newest for processing

     

       
200
       
200
       
+
       
					const sortedBranches = [...branches].sort((a, b) => a.newestTime - b.newestTime);

     

       
201
       
201
       
+
       


     

       
202
       
202
       
+
       
					sortedBranches.forEach((branchRoot, index) => {

     

       
203
       
203
       
+
       
						const isOldestBranch = index === 0;

     

       
204
       
204
       
+
       
						const branchPosts: ThreadPost[] = [];

     

       
205
       
205
       
+
       


     

       
206
       
206
       
+
       
						// If oldest branch, include parent chain

     

       
207
       
207
       
+
       
						if (isOldestBranch && branchParentUri !== null) {

     

       
208
       
208
       
+
       
							const parentChain: ThreadPost[] = [];

     

       
209
       
209
       
+
       
							let currentUri: ResourceUri | null = branchParentUri;

     

       
210
       
210
       
+
       
							while (currentUri && uriToPost.has(currentUri)) {

     

       
211
       
211
       
+
       
								parentChain.unshift(uriToPost.get(currentUri)!);

     

       
212
       
212
       
+
       
								currentUri = uriToPost.get(currentUri)!.parentUri;

     

       
213
       
213
       
+
       
							}

     

       
214
       
214
       
+
       
							branchPosts.push(...parentChain);

     

       
215
       
215
       
+
       
						}

     

       
216
       
216
       
+
       


     

       
217
       
217
       
+
       
						// Add branch posts

     

       
218
       
218
       
+
       
						branchPosts.push(...collectSubtree(branchRoot));

     

       
219
       
219
       
+
       


     

       
220
       
220
       
+
       
						// Recalculate depths for display

     

       
221
       
221
       
+
       
						const minDepth = Math.min(...branchPosts.map((p) => p.depth));

     

       
222
       
222
       
+
       
						branchPosts.forEach((p) => (p.depth = p.depth - minDepth));

     

       
223
       
223
       
+
       


     

       
224
       
224
       
+
       
						threads.push(

     

       
225
       
225
       
+
       
							createThread(

     

       
226
       
226
       
+
       
								branchPosts,

     

       
227
       
227
       
+
       
								branchRoot.uri,

     

       
228
       
228
       
+
       
								isOldestBranch ? undefined : (branchParentUri ?? undefined)

     

       
229
       
229
       
+
       
							)

     

       
230
       
230
       
+
       
						);

     

       
231
       
231
       
+
       
					});

     

       
68
       
232
       
 
       
				}

     

       
69
       
69
       
-
       
			})

     

       
70
       
70
       
-
       
		);

     

       
71
       
71
       
-
       
	};

     

       
72
       
72
       
-
       
	accounts.subscribe(fetchTimeline);

     

       
233
       
233
       
+
       
			}

     

       
234
       
234
       
+
       
		}

     

       
73
       
235
       
 
       


     

       
74
       
74
       
-
       
	const getSortedTimeline = (_timeline: Map<string, AppBskyFeedPost.Main>) => {

     

       
75
       
75
       
-
       
		const sortedTimeline = Array.from(_timeline).sort(

     

       
76
       
76
       
-
       
			([_a, post], [_b, post2]) =>

     

       
77
       
77
       
-
       
				new Date(post2.createdAt).getTime() - new Date(post.createdAt).getTime()

     

       
78
       
78
       
-
       
		);

     

       
79
       
79
       
-
       
		return sortedTimeline;

     

       
236
       
236
       
+
       
		// Sort threads by newest time (descending) so older branches appear first

     

       
237
       
237
       
+
       
		threads.sort((a, b) => b.newestTime - a.newestTime);

     

       
238
       
238
       
+
       


     

       
239
       
239
       
+
       
		return threads;

     

       
80
       
240
       
 
       
	};

     

       
81
       
81
       
-
       
	let sortedTimeline = $derived(getSortedTimeline($timeline));

     

       
241
       
241
       
+
       


     

       
242
       
242
       
+
       
	// Filtering functions (now much simpler!)

     

       
243
       
243
       
+
       
	const isOwnPost = (post: ThreadPost, accounts: Account[]) =>

     

       
244
       
244
       
+
       
		accounts.some((account) => account.did === post.did);

     

       
245
       
245
       
+
       
	const hasNonOwnPost = (posts: ThreadPost[], accounts: Account[]) =>

     

       
246
       
246
       
+
       
		posts.some((post) => !isOwnPost(post, accounts));

     

       
247
       
247
       
+
       
	const filterThreads = (threads: Thread[], accounts: Account[]) =>

     

       
248
       
248
       
+
       
		threads.filter((thread) => {

     

       
249
       
249
       
+
       
			if (!viewOwnPosts) {

     

       
250
       
250
       
+
       
				return hasNonOwnPost(thread.posts, accounts);

     

       
251
       
251
       
+
       
			}

     

       
252
       
252
       
+
       
			return true;

     

       
253
       
253
       
+
       
		});

     

       
254
       
254
       
+
       


     

       
255
       
255
       
+
       
	// Usage

     

       
256
       
256
       
+
       
	let threads = $derived(filterThreads(buildThreads(posts), $accounts));

     

       
82
       
257
       
 
       
</script>

     

       
83
       
258
       
 
       


     

       
84
       
259
       
 
       
<div class="mx-auto max-w-2xl p-4">

     
···

       
97
       
272
       
 
       
				bind:selectedDid

     

       
98
       
273
       
 
       
				onAccountSelected={handleAccountSelected}

     

       
99
       
274
       
 
       
				onLoginSucceed={handleLoginSucceed}

     

       
275
       
275
       
+
       
				onLogout={handleLogout}

     

       
100
       
276
       
 
       
			/>

     

       
101
       
277
       
 
       


     

       
102
       
278
       
 
       
			{#if selectedClient}

     

       
103
       
279
       
 
       
				<div class="flex-1">

     

       
104
       
104
       
-
       
					<PostComposer client={selectedClient} />

     

       
280
       
280
       
+
       
					<PostComposer

     

       
281
       
281
       
+
       
						client={selectedClient}

     

       
282
       
282
       
+
       
						onPostSent={(uri, record) => posts.get(selectedDid!)?.set(uri, record)}

     

       
283
       
283
       
+
       
					/>

     

       
105
       
284
       
 
       
				</div>

     

       
106
       
285
       
 
       
			{:else}

     

       
107
       
286
       
 
       
				<div

     

       
108
       
108
       
-
       
					class="flex flex-1 items-center justify-center rounded-xl border-2 px-4 py-2.5 backdrop-blur-sm"

     

       
287
       
287
       
+
       
					class="flex flex-1 items-center justify-center rounded-sm border-2 px-4 py-2.5 backdrop-blur-sm"

     

       
109
       
288
       
 
       
					style="border-color: {theme.accent}33; background: {theme.accent}0a;"

     

       
110
       
289
       
 
       
				>

     

       
111
       
290
       
 
       
					<p class="text-sm opacity-80" style="color: {theme.fg};">

     
···

       
116
       
295
       
 
       
		</div>

     

       
117
       
296
       
 
       


     

       
118
       
297
       
 
       
		<hr

     

       
119
       
119
       
-
       
			class="h-[3px] w-full rounded-full border-0"

     

       
298
       
298
       
+
       
			class="h-[4px] w-full rounded-full border-0"

     

       
120
       
299
       
 
       
			style="background: linear-gradient(to right, {theme.accent}, {theme.accent2});"

     

       
121
       
300
       
 
       
		/>

     

       
122
       
301
       
 
       


     

       
123
       
123
       
-
       
		<div class="flex flex-col gap-3">

     

       
124
       
124
       
-
       
			{#each sortedTimeline as [postUri, data] (postUri)}

     

       
125
       
125
       
-
       
				{@const parsedUri = expect(parseCanonicalResourceUri(postUri))}

     

       
126
       
126
       
-
       
				<BskyPost

     

       
127
       
127
       
-
       
					client={viewClient}

     

       
128
       
128
       
-
       
					identifier={parsedUri.repo}

     

       
129
       
129
       
-
       
					rkey={parsedUri.rkey}

     

       
130
       
130
       
-
       
					record={data}

     

       
131
       
131
       
-
       
				/>

     

       
302
       
302
       
+
       
		<div class="flex flex-col">

     

       
303
       
303
       
+
       
			{#each threads as thread (thread.rootUri)}

     

       
304
       
304
       
+
       
				<div class="flex {reverseChronological ? 'flex-col' : 'flex-col-reverse'} mb-6.5">

     

       
305
       
305
       
+
       
					{#if thread.branchParentPost}

     

       
306
       
306
       
+
       
						{@const post = thread.branchParentPost}

     

       
307
       
307
       
+
       
						<div class="mb-1.5 flex items-center gap-1.5">

     

       
308
       
308
       
+
       
							<span class="text-sm opacity-60" style="color: {theme.fg};"

     

       
309
       
309
       
+
       
								>{reverseChronological ? '↱' : '↳'}</span

     

       
310
       
310
       
+
       
							>

     

       
311
       
311
       
+
       
							<BskyPost

     

       
312
       
312
       
+
       
								mini

     

       
313
       
313
       
+
       
								client={viewClient}

     

       
314
       
314
       
+
       
								identifier={post.did}

     

       
315
       
315
       
+
       
								rkey={post.rkey}

     

       
316
       
316
       
+
       
								record={post.record}

     

       
317
       
317
       
+
       
							/>

     

       
318
       
318
       
+
       
						</div>

     

       
319
       
319
       
+
       
					{/if}

     

       
320
       
320
       
+
       
					{#each thread.posts as post (post.uri)}

     

       
321
       
321
       
+
       
						<div class="mb-1.5">

     

       
322
       
322
       
+
       
							<BskyPost

     

       
323
       
323
       
+
       
								client={viewClient}

     

       
324
       
324
       
+
       
								identifier={post.did}

     

       
325
       
325
       
+
       
								rkey={post.rkey}

     

       
326
       
326
       
+
       
								record={post.record}

     

       
327
       
327
       
+
       
							/>

     

       
328
       
328
       
+
       
						</div>

     

       
329
       
329
       
+
       
					{/each}

     

       
330
       
330
       
+
       
				</div>

     

       
132
       
331
       
 
       
			{/each}

     

       
133
       
332
       
 
       
		</div>

     

       
134
       
333
       
 
       
	</div>