···

       
9
       
9
       
 
       
	<link rel="icon" href={favicon} />

     

       
10
       
10
       
 
       
</svelte:head>

     

       
11
       
11
       
 
       


     

       
12
       
12
       
-
       
<div

     

       
13
       
13
       
-
       
	class="grain min-h-screen bg-(--nucleus-bg) text-(--nucleus-fg) transition-colors duration-300"

     

       
14
       
14
       
-
       
>

     

       
12
       
12
       
+
       
<div class="min-h-screen bg-(--nucleus-bg) text-(--nucleus-fg) transition-colors duration-300">

     

       
15
       
13
       
 
       
	{@render children?.()}

     

       
16
       
14
       
 
       
</div>

     

···

       
222
       
222
       
 
       
	});

     

       
223
       
223
       
 
       
</script>

     

       
224
       
224
       
 
       


     

       
225
       
225
       
-
       
<div class="mx-auto flex h-screen max-w-2xl flex-col p-4">

     

       
226
       
226
       
-
       
	<div class="mb-6 flex shrink-0 items-center justify-between">

     

       
227
       
227
       
-
       
		<div>

     

       
228
       
228
       
-
       
			<h1 class="text-3xl font-bold tracking-tight">nucleus</h1>

     

       
229
       
229
       
-
       
			<div class="mt-1 flex gap-2">

     

       
230
       
230
       
-
       
				<div class="h-1 w-11 rounded-full bg-(--nucleus-accent)"></div>

     

       
231
       
231
       
-
       
				<div class="h-1 w-8 rounded-full bg-(--nucleus-accent2)"></div>

     

       
225
       
225
       
+
       
<div class="mx-auto max-w-2xl">

     

       
226
       
226
       
+
       
	<!-- Sticky header -->

     

       
227
       
227
       
+
       
	<div class="sticky top-0 z-10 bg-(--nucleus-bg) p-4">

     

       
228
       
228
       
+
       
		<div class="mb-6 flex items-center justify-between">

     

       
229
       
229
       
+
       
			<div>

     

       
230
       
230
       
+
       
				<h1 class="text-3xl font-bold tracking-tight">nucleus</h1>

     

       
231
       
231
       
+
       
				<div class="mt-1 flex gap-2">

     

       
232
       
232
       
+
       
					<div class="h-1 w-11 rounded-full bg-(--nucleus-accent)"></div>

     

       
233
       
233
       
+
       
					<div class="h-1 w-8 rounded-full bg-(--nucleus-accent2)"></div>

     

       
234
       
234
       
+
       
				</div>

     

       
232
       
235
       
 
       
			</div>

     

       
236
       
236
       
+
       
			<button

     

       
237
       
237
       
+
       
				onclick={() => (isSettingsOpen = true)}

     

       
238
       
238
       
+
       
				class="group rounded-sm bg-(--nucleus-accent)/7 p-2 text-(--nucleus-accent) transition-all hover:scale-110 hover:shadow-lg"

     

       
239
       
239
       
+
       
				aria-label="settings"

     

       
240
       
240
       
+
       
			>

     

       
241
       
241
       
+
       
				<Icon class="group-hover:hidden" icon="heroicons:cog-6-tooth" width={28} />

     

       
242
       
242
       
+
       
				<Icon class="hidden group-hover:block" icon="heroicons:cog-6-tooth-solid" width={28} />

     

       
243
       
243
       
+
       
			</button>

     

       
233
       
244
       
 
       
		</div>

     

       
234
       
234
       
-
       
		<button

     

       
235
       
235
       
-
       
			onclick={() => (isSettingsOpen = true)}

     

       
236
       
236
       
-
       
			class="group rounded-sm bg-(--nucleus-accent)/7 p-2 text-(--nucleus-accent) transition-all hover:scale-110 hover:shadow-lg"

     

       
237
       
237
       
-
       
			aria-label="settings"

     

       
238
       
238
       
-
       
		>

     

       
239
       
239
       
-
       
			<Icon class="group-hover:hidden" icon="heroicons:cog-6-tooth" width={28} />

     

       
240
       
240
       
-
       
			<Icon class="hidden group-hover:block" icon="heroicons:cog-6-tooth-solid" width={28} />

     

       
241
       
241
       
-
       
		</button>

     

       
242
       
242
       
-
       
	</div>

     

       
243
       
245
       
 
       


     

       
244
       
244
       
-
       
	<div class="shrink-0 space-y-4">

     

       
245
       
245
       
-
       
		<div class="flex min-h-16 items-stretch gap-2">

     

       
246
       
246
       
-
       
			<AccountSelector

     

       
247
       
247
       
-
       
				client={viewClient}

     

       
248
       
248
       
-
       
				accounts={$accounts}

     

       
249
       
249
       
-
       
				bind:selectedDid

     

       
250
       
250
       
-
       
				onAccountSelected={handleAccountSelected}

     

       
251
       
251
       
-
       
				onLogout={handleLogout}

     

       
252
       
252
       
-
       
			/>

     

       
246
       
246
       
+
       
		<!-- Composer and error disclaimer (above thread list, not scrollable) -->

     

       
247
       
247
       
+
       
		<div class="space-y-4">

     

       
248
       
248
       
+
       
			<div class="flex min-h-16 items-stretch gap-2">

     

       
249
       
249
       
+
       
				<AccountSelector

     

       
250
       
250
       
+
       
					client={viewClient}

     

       
251
       
251
       
+
       
					accounts={$accounts}

     

       
252
       
252
       
+
       
					bind:selectedDid

     

       
253
       
253
       
+
       
					onAccountSelected={handleAccountSelected}

     

       
254
       
254
       
+
       
					onLogout={handleLogout}

     

       
255
       
255
       
+
       
				/>

     

       
253
       
256
       
 
       


     

       
254
       
254
       
-
       
			{#if selectedClient}

     

       
255
       
255
       
-
       
				<div class="flex-1">

     

       
256
       
256
       
-
       
					<PostComposer

     

       
257
       
257
       
-
       
						client={selectedClient}

     

       
258
       
258
       
-
       
						onPostSent={(post) => posts.get(selectedDid!)?.set(post.uri, post)}

     

       
259
       
259
       
-
       
						bind:quoting

     

       
260
       
260
       
-
       
						bind:replying

     

       
261
       
261
       
-
       
					/>

     

       
262
       
262
       
-
       
				</div>

     

       
263
       
263
       
-
       
			{:else}

     

       
264
       
264
       
-
       
				<div

     

       
265
       
265
       
-
       
					class="flex flex-1 items-center justify-center rounded-sm border-2 border-(--nucleus-accent)/20 bg-(--nucleus-accent)/4 px-4 py-2.5 backdrop-blur-sm"

     

       
266
       
266
       
-
       
				>

     

       
267
       
267
       
-
       
					<p class="text-sm opacity-80">select or add an account to post</p>

     

       
257
       
257
       
+
       
				{#if selectedClient}

     

       
258
       
258
       
+
       
					<div class="flex-1">

     

       
259
       
259
       
+
       
						<PostComposer

     

       
260
       
260
       
+
       
							client={selectedClient}

     

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

     

       
262
       
262
       
+
       
							bind:quoting

     

       
263
       
263
       
+
       
							bind:replying

     

       
264
       
264
       
+
       
						/>

     

       
265
       
265
       
+
       
					</div>

     

       
266
       
266
       
+
       
				{:else}

     

       
267
       
267
       
+
       
					<div

     

       
268
       
268
       
+
       
						class="flex flex-1 items-center justify-center rounded-sm border-2 border-(--nucleus-accent)/20 bg-(--nucleus-accent)/4 px-4 py-2.5 backdrop-blur-sm"

     

       
269
       
269
       
+
       
					>

     

       
270
       
270
       
+
       
						<p class="text-sm opacity-80">select or add an account to post</p>

     

       
271
       
271
       
+
       
					</div>

     

       
272
       
272
       
+
       
				{/if}

     

       
273
       
273
       
+
       
			</div>

     

       
274
       
274
       
+
       


     

       
275
       
275
       
+
       
			{#if !loadData.client.ok}

     

       
276
       
276
       
+
       
				<div class="error-disclaimer">

     

       
277
       
277
       
+
       
					<p>

     

       
278
       
278
       
+
       
						<Icon class="inline h-12 w-12" icon="heroicons:exclamation-triangle-16-solid" />

     

       
279
       
279
       
+
       
						{loadData.client.error}

     

       
280
       
280
       
+
       
					</p>

     

       
268
       
281
       
 
       
				</div>

     

       
269
       
282
       
 
       
			{/if}

     

       
270
       
270
       
-
       
		</div>

     

       
271
       
283
       
 
       


     

       
272
       
272
       
-
       
		{#if !loadData.client.ok}

     

       
273
       
273
       
-
       
			<div class="error-disclaimer">

     

       
274
       
274
       
-
       
				<p>

     

       
275
       
275
       
-
       
					<Icon class="inline h-12 w-12" icon="heroicons:exclamation-triangle-16-solid" />

     

       
276
       
276
       
-
       
					{loadData.client.error}

     

       
277
       
277
       
-
       
				</p>

     

       
278
       
278
       
-
       
			</div>

     

       
279
       
279
       
-
       
		{/if}

     

       
280
       
280
       
-
       


     

       
281
       
281
       
-
       
		<!-- <hr

     

       
284
       
284
       
+
       
			<!-- <hr

     

       
282
       
285
       
 
       
			class="h-[4px] w-full rounded-full border-0"

     

       
283
       
286
       
 
       
			style="background: linear-gradient(to right, var(--nucleus-accent), var(--nucleus-accent2));"

     

       
284
       
287
       
 
       
		/> -->

     

       
288
       
288
       
+
       
		</div>

     

       
285
       
289
       
 
       
	</div>

     

       
286
       
290
       
 
       


     

       
287
       
287
       
-
       
	<div

     

       
288
       
288
       
-
       
		class="mt-4 overflow-y-scroll [scrollbar-color:var(--nucleus-accent)_transparent]"

     

       
289
       
289
       
-
       
		bind:this={scrollContainer}

     

       
290
       
290
       
-
       
	>

     

       
291
       
291
       
+
       
	<!-- Thread list (page scrolls as a whole) -->

     

       
292
       
292
       
+
       
	<div class="mt-4 [scrollbar-color:var(--nucleus-accent)_transparent]" bind:this={scrollContainer}>

     

       
291
       
293
       
 
       
		{#if $accounts.length > 0}

     

       
292
       
294
       
 
       
			{@render renderThreads()}

     

       
293
       
295
       
 
       
		{:else}