appview-less bluesky client
feat: scroll to top button
+33
-2
+1
-1
src/components/AccountSelector.svelte
+1
-1
src/components/AccountSelector.svelte
···
96
96
<div class="relative">
97
97
<button
98
98
onclick={toggleDropdown}
99
-
class="flex h-13 w-13 items-center justify-center rounded-sm shadow-md transition-all hover:shadow-xl hover:brightness-125 hover:saturate-150"
99
+
class="flex h-13 w-13 items-center justify-center rounded-sm shadow-md transition-all hover:scale-110 hover:shadow-xl hover:saturate-150"
100
100
>
101
101
{#if selectedDid}
102
102
<ProfilePicture {client} did={selectedDid} size={13} />
+32
-1
src/routes/+page.svelte
+32
-1
src/routes/+page.svelte
···
176
176
177
177
let loading = $state(false);
178
178
let loadError = $state('');
179
+
let showScrollToTop = $state(false);
180
+
181
+
const handleScroll = () => {
182
+
showScrollToTop = window.scrollY > 300;
183
+
};
184
+
185
+
const scrollToTop = () => {
186
+
window.scrollTo({ top: 0, behavior: 'smooth' });
187
+
};
188
+
179
189
const loadMore = async () => {
180
190
if (loading || $accounts.length === 0) return;
181
191
···
196
206
if (cursors.values().every((cursor) => cursor.end)) loaderState.complete();
197
207
};
198
208
199
-
onMount(async () => {
209
+
onMount(() => {
210
+
window.addEventListener('scroll', handleScroll);
211
+
200
212
accounts.subscribe((newAccounts) => {
201
213
get(notificationStream)?.stop();
202
214
// jetstream.set(null);
···
237
249
} else {
238
250
selectedDid = null;
239
251
}
252
+
253
+
return () => {
254
+
window.removeEventListener('scroll', handleScroll);
255
+
};
240
256
});
241
257
</script>
242
258
···
315
331
>
316
332
<p class="text-sm opacity-80">select or add an account to post</p>
317
333
</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>
318
349
{/if}
319
350
</div>
320
351