appview-less bluesky client
27
fork

Configure Feed

Select the types of activity you want to include in your feed.

feat: make scroll container cover whole page

dusk 424bd6cf ed15568e

+57 -57
+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
··· 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}