···

       
102
       
 
       
	};

     

       
103
       
 
       


     

       
104
       
 
       
	$effect(() => {

     

       
0
       
 
       

     

       
105
       
 
       
		if (isFocused && textareaEl) textareaEl.focus();

     

       
106
       
 
       
		if (quoting || replying) isFocused = true;

     

       
107
       
 
       
	});

     
···

       
155
       
 
       
		}}

     

       
156
       
 
       
		placeholder="what's on your mind?"

     

       
157
       
 
       
		rows="4"

     

       
158
       
-
       
		class="field-sizing-content single-line-input resize-none bg-(--nucleus-bg)/40 focus:scale-100"

     

       
159
       
-
       
		style="border-color: color-mix(in srgb, {color} 27%, transparent);"

     

       
160
       
 
       
	></textarea>

     

       
161
       
 
       
	{#if quoting}

     

       
162
       
 
       
		{@render renderPost(quoting)}

     
···

       
202
       
 
       
							onfocus={() => (isFocused = true)}

     

       
203
       
 
       
							type="text"

     

       
204
       
 
       
							placeholder="what's on your mind?"

     

       
205
       
-
       
							class="single-line-input flex-1 bg-(--nucleus-bg)/40 p-1 px-2"

     

       
206
       
-
       
							style="border-color: color-mix(in srgb, {color} 27%, transparent);"

     

       
207
       
 
       
						/>

     

       
208
       
 
       
					{/if}

     

       
209
       
 
       
				</div>

     
···

       
211
       
 
       
		</div>

     

       
212
       
 
       
	</div>

     

       
213
       
 
       
</div>

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

···

       
102
       
 
       
	};

     

       
103
       
 
       


     

       
104
       
 
       
	$effect(() => {

     

       
105
       
+
       
		document.documentElement.style.setProperty('--acc-color', color);

     

       
106
       
 
       
		if (isFocused && textareaEl) textareaEl.focus();

     

       
107
       
 
       
		if (quoting || replying) isFocused = true;

     

       
108
       
 
       
	});

     
···

       
156
       
 
       
		}}

     

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

     

       
158
       
 
       
		rows="4"

     

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

     

       
0
       
 
       

     

       
160
       
 
       
	></textarea>

     

       
161
       
 
       
	{#if quoting}

     

       
162
       
 
       
		{@render renderPost(quoting)}

     
···

       
202
       
 
       
							onfocus={() => (isFocused = true)}

     

       
203
       
 
       
							type="text"

     

       
204
       
 
       
							placeholder="what's on your mind?"

     

       
205
       
+
       
							class="flex-1"

     

       
0
       
 
       

     

       
206
       
 
       
						/>

     

       
207
       
 
       
					{/if}

     

       
208
       
 
       
				</div>

     
···

       
210
       
 
       
		</div>

     

       
211
       
 
       
	</div>

     

       
212
       
 
       
</div>

     

       
213
       
+
       


     

       
214
       
+
       
<style>

     

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

     

       
216
       
+
       


     

       
217
       
+
       
	input,

     

       
218
       
+
       
	textarea {

     

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

     

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

     

       
221
       
+
       
	}

     

       
222
       
+
       


     

       
223
       
+
       
	input {

     

       
224
       
+
       
		@apply p-1 px-2;

     

       
225
       
+
       
	}

     

       
226
       
+
       


     

       
227
       
+
       
	textarea {

     

       
228
       
+
       
		@apply focus:scale-100;

     

       
229
       
+
       
	}

     

       
230
       
+
       


     

       
231
       
+
       
	input::placeholder,

     

       
232
       
+
       
	textarea::placeholder {

     

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

     

       
234
       
+
       
	}

     

       
235
       
+
       
</style>

     

···

       
256
       
 
       
	});

     

       
257
       
 
       
</script>

     

       
258
       
 
       


     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

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

     

       
260
       
 
       
	<!-- thread list (page scrolls as a whole) -->

     

       
261
       
 
       
	<div

     
···

       
334
       
 
       
					{/if}

     

       
335
       
 
       


     

       
336
       
 
       
					{#if showScrollToTop}

     

       
337
       
-
       
						<button

     

       
338
       
-
       
							onclick={scrollToTop}

     

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

     

       
340
       
-
       
							aria-label="scroll to top"

     

       
341
       
-
       
							title="scroll to top"

     

       
342
       
-
       
						>

     

       
343
       
-
       
							<Icon

     

       
344
       
-
       
								class="transition-transform group-hover:-translate-y-0.5"

     

       
345
       
-
       
								icon="heroicons:arrow-up-16-solid"

     

       
346
       
-
       
								width={28}

     

       
347
       
-
       
							/>

     

       
348
       
-
       
						</button>

     

       
349
       
 
       
					{/if}

     

       
350
       
 
       
				</div>

     

       
351
       
 
       


     
···

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

     

       
355
       
 
       
				></div>

     

       
356
       
 
       


     

       
357
       
-
       
				<div class="flex items-center justify-between px-2 py-1">

     

       
358
       
 
       
					<div class="mb-2">

     

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

     

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

     
···

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

     

       
363
       
 
       
						</div>

     

       
364
       
 
       
					</div>

     

       
365
       
-
       
					<button

     

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

     

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

     

       
368
       
-
       
						aria-label="settings"

     

       
369
       
-
       
					>

     

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

     

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

     

       
372
       
-
       
					</button>

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
373
       
 
       
				</div>

     

       
374
       
 
       


     

       
375
       
 
       
				<!-- <hr

     

···

       
256
       
 
       
	});

     

       
257
       
 
       
</script>

     

       
258
       
 
       


     

       
259
       
+
       
{#snippet appButton(onClick: () => void, icon: string, ariaLabel: string, iconHover?: string)}

     

       
260
       
+
       
	<button

     

       
261
       
+
       
		onclick={onClick}

     

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

     

       
263
       
+
       
		aria-label={ariaLabel}

     

       
264
       
+
       
	>

     

       
265
       
+
       
		<Icon class="group-hover:hidden" {icon} width={28} />

     

       
266
       
+
       
		<Icon class="hidden group-hover:block" icon={iconHover ?? icon} width={28} />

     

       
267
       
+
       
	</button>

     

       
268
       
+
       
{/snippet}

     

       
269
       
+
       


     

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

     

       
271
       
 
       
	<!-- thread list (page scrolls as a whole) -->

     

       
272
       
 
       
	<div

     
···

       
345
       
 
       
					{/if}

     

       
346
       
 
       


     

       
347
       
 
       
					{#if showScrollToTop}

     

       
348
       
+
       
						{@render appButton(scrollToTop, 'heroicons:arrow-up-16-solid', 'scroll to top')}

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
349
       
 
       
					{/if}

     

       
350
       
 
       
				</div>

     

       
351
       
 
       


     
···

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

     

       
355
       
 
       
				></div>

     

       
356
       
 
       


     

       
357
       
+
       
				<div class="flex items-center gap-1.5 px-2 py-1">

     

       
358
       
 
       
					<div class="mb-2">

     

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

     

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

     
···

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

     

       
363
       
 
       
						</div>

     

       
364
       
 
       
					</div>

     

       
365
       
+
       
					<div class="grow"></div>

     

       
366
       
+
       
					{@render appButton(

     

       
367
       
+
       
						() => (isSettingsOpen = true),

     

       
368
       
+
       
						'heroicons:bell',

     

       
369
       
+
       
						'notifications',

     

       
370
       
+
       
						'heroicons:bell-solid'

     

       
371
       
+
       
					)}

     

       
372
       
+
       
					{@render appButton(

     

       
373
       
+
       
						() => (isSettingsOpen = true),

     

       
374
       
+
       
						'heroicons:cog-6-tooth',

     

       
375
       
+
       
						'settings',

     

       
376
       
+
       
						'heroicons:cog-6-tooth-solid'

     

       
377
       
+
       
					)}

     

       
378
       
 
       
				</div>

     

       
379
       
 
       


     

       
380
       
 
       
				<!-- <hr