appview-less bluesky client
feat: make scroll container cover whole page
+57
-57
+1
-3
src/routes/+layout.svelte
+1
-3
src/routes/+layout.svelte
···
9
9
<link rel="icon" href={favicon} />
10
10
</svelte:head>
11
11
12
-
<div
13
-
class="grain min-h-screen bg-(--nucleus-bg) text-(--nucleus-fg) transition-colors duration-300"
14
-
>
12
+
<div class="min-h-screen bg-(--nucleus-bg) text-(--nucleus-fg) transition-colors duration-300">
15
13
{@render children?.()}
16
14
</div>
+56
-54
src/routes/+page.svelte
+56
-54
src/routes/+page.svelte
···
222
222
});
223
223
</script>
224
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>
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>
232
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>
233
244
</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
245
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
-
/>
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
+
/>
253
256
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>
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>
268
281
</div>
269
282
{/if}
270
-
</div>
271
283
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
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
+
</div>
285
289
</div>
286
290
287
-
<div
288
-
class="mt-4 overflow-y-scroll [scrollbar-color:var(--nucleus-accent)_transparent]"
289
-
bind:this={scrollContainer}
290
-
>
291
+
<!-- Thread list (page scrolls as a whole) -->
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}