commit 424bd6cfb7aaa5f178dc32e79a997d229c7bd823 · ptr.pet/nucleus

+1 -3

src/routes/+layout.svelte

···

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

     

       10
        
       </svelte:head>

     

       11
        
       

     

       12
       -
       <div

     

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

     

       14
       -
       >

     

       15
        
       	{@render children?.()}

     

       16
        
       </div>

···

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

     

       10
        
       </svelte:head>

     

       11
        
       

     

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

     

       0
        
       
     

       0
        
       
     

       13
        
       	{@render children?.()}

     

       14
        
       </div>

+56 -54

src/routes/+page.svelte

···

       222
        
       	});

     

       223
        
       </script>

     

       224
        
       

     

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

     

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

     

       227
       -
       		<div>

     

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

     

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

     

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

     

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

     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       232
        
       			</div>

     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       233
        
       		</div>

     

       234
       -
       		<button

     

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

     

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

     

       237
       -
       			aria-label="settings"

     

       238
       -
       		>

     

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

     

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

     

       241
       -
       		</button>

     

       242
       -
       	</div>

     

       243
        
       

     

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

     

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

     

       246
       -
       			<AccountSelector

     

       247
       -
       				client={viewClient}

     

       248
       -
       				accounts={$accounts}

     

       249
       -
       				bind:selectedDid

     

       250
       -
       				onAccountSelected={handleAccountSelected}

     

       251
       -
       				onLogout={handleLogout}

     

       252
       -
       			/>

     

       0
        
       
     

       253
        
       

     

       254
       -
       			{#if selectedClient}

     

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

     

       256
       -
       					<PostComposer

     

       257
       -
       						client={selectedClient}

     

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

     

       259
       -
       						bind:quoting

     

       260
       -
       						bind:replying

     

       261
       -
       					/>

     

       262
       -
       				</div>

     

       263
       -
       			{:else}

     

       264
       -
       				<div

     

       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
       -
       				>

     

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

     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       268
        
       				</div>

     

       269
        
       			{/if}

     

       270
       -
       		</div>

     

       271
        
       

     

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

     

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

     

       274
       -
       				<p>

     

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

     

       276
       -
       					{loadData.client.error}

     

       277
       -
       				</p>

     

       278
       -
       			</div>

     

       279
       -
       		{/if}

     

       280
       -
       

     

       281
       -
       		<!-- <hr

     

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

     

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

     

       284
        
       		/> -->

     

       0
        
       
     

       285
        
       	</div>

     

       286
        
       

     

       287
       -
       	<div

     

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

     

       289
       -
       		bind:this={scrollContainer}

     

       290
       -
       	>

     

       291
        
       		{#if $accounts.length > 0}

     

       292
        
       			{@render renderThreads()}

     

       293
        
       		{:else}

···

       222
        
       	});

     

       223
        
       </script>

     

       224
        
       

     

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

     

       226
       +
       	<!-- Sticky header -->

     

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

     

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

     

       229
       +
       			<div>

     

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

     

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

     

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

     

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

     

       234
       +
       				</div>

     

       235
        
       			</div>

     

       236
       +
       			<button

     

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

     

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

     

       239
       +
       				aria-label="settings"

     

       240
       +
       			>

     

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

     

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

     

       243
       +
       			</button>

     

       244
        
       		</div>

     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       245
        
       

     

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

     

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

     

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

     

       249
       +
       				<AccountSelector

     

       250
       +
       					client={viewClient}

     

       251
       +
       					accounts={$accounts}

     

       252
       +
       					bind:selectedDid

     

       253
       +
       					onAccountSelected={handleAccountSelected}

     

       254
       +
       					onLogout={handleLogout}

     

       255
       +
       				/>

     

       256
        
       

     

       257
       +
       				{#if selectedClient}

     

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

     

       259
       +
       						<PostComposer

     

       260
       +
       							client={selectedClient}

     

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

     

       262
       +
       							bind:quoting

     

       263
       +
       							bind:replying

     

       264
       +
       						/>

     

       265
       +
       					</div>

     

       266
       +
       				{:else}

     

       267
       +
       					<div

     

       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
       +
       					>

     

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

     

       271
       +
       					</div>

     

       272
       +
       				{/if}

     

       273
       +
       			</div>

     

       274
       +
       

     

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

     

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

     

       277
       +
       					<p>

     

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

     

       279
       +
       						{loadData.client.error}

     

       280
       +
       					</p>

     

       281
        
       				</div>

     

       282
        
       			{/if}

     

       0
        
       
     

       283
        
       

     

       284
       +
       			<!-- <hr

     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

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

     

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

     

       287
        
       		/> -->

     

       288
       +
       		</div>

     

       289
        
       	</div>

     

       290
        
       

     

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

     

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

     

       0
        
       
     

       0
        
       
     

       293
        
       		{#if $accounts.length > 0}

     

       294
        
       			{@render renderThreads()}

     

       295
        
       		{:else}