appview-less bluesky client
separate the postcomposer/accountselector from footer bar
+52
-49
+52
-49
src/routes/+page.svelte
+52
-49
src/routes/+page.svelte
···
5
5
import SettingsView from '$components/SettingsView.svelte';
6
6
import NotificationsView from '$components/NotificationsView.svelte';
7
7
import { AtpClient, type NotificationsStreamEvent } from '$lib/at/client';
8
-
import { accounts, type Account } from '$lib/accounts';
8
+
import { accounts, generateColorForDid, type Account } from '$lib/accounts';
9
9
import { type Did, parseCanonicalResourceUri, type ResourceUri } from '@atcute/lexicons';
10
10
import { onMount, tick } from 'svelte';
11
11
import { fetchPostsWithBacklinks, hydratePosts, type PostWithUri } from '$lib/at/fetch';
···
330
330
{/if}
331
331
332
332
<div
333
-
class="rounded-t-sm px-0.5 pt-0.5"
334
-
style="background: linear-gradient(to right, var(--nucleus-accent), var(--nucleus-accent2));"
333
+
class="
334
+
{currentView === 'timeline' ? '' : 'hidden'}
335
+
fixed bottom-[5.5dvh] z-20 w-full max-w-2xl p-2.5 px-4 transition-all
336
+
"
335
337
>
336
-
<div
337
-
class="rounded-t-sm"
338
-
style="
339
-
background: linear-gradient(to right, color-mix(in srgb, var(--nucleus-accent) 18%, var(--nucleus-bg)), color-mix(in srgb, var(--nucleus-accent2) 13%, var(--nucleus-bg)));
340
-
"
341
-
>
342
-
{#if currentView === 'timeline'}
343
-
<!-- composer and error disclaimer (above thread list, not scrollable) -->
344
-
<div class="flex gap-2 px-2 pt-2 pb-1">
345
-
<AccountSelector
346
-
client={viewClient}
347
-
accounts={$accounts}
348
-
bind:selectedDid
349
-
onAccountSelected={handleAccountSelected}
350
-
onLogout={handleLogout}
351
-
/>
338
+
<!-- composer and error disclaimer (above thread list, not scrollable) -->
339
+
<div class="footer-border-bg rounded-sm px-0.5 py-0.5">
340
+
<div class="footer-bg flex gap-2 rounded-sm p-1.5 shadow-2xl">
341
+
<AccountSelector
342
+
client={viewClient}
343
+
accounts={$accounts}
344
+
bind:selectedDid
345
+
onAccountSelected={handleAccountSelected}
346
+
onLogout={handleLogout}
347
+
/>
352
348
353
-
{#if selectedClient}
354
-
<div class="flex-1">
355
-
<PostComposer
356
-
client={selectedClient}
357
-
onPostSent={(post) => posts.get(selectedDid!)?.set(post.uri, post)}
358
-
bind:_state={postComposerState}
359
-
/>
360
-
</div>
361
-
{:else}
362
-
<div
363
-
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"
364
-
>
365
-
<p class="text-sm opacity-80">select or add an account to post</p>
366
-
</div>
367
-
{/if}
368
-
369
-
{#if postComposerState.type === 'null' && showScrollToTop}
370
-
{@render appButton(
371
-
scrollToTop,
372
-
'heroicons:arrow-up-16-solid',
373
-
'scroll to top',
374
-
false
375
-
)}
376
-
{/if}
377
-
</div>
349
+
{#if selectedClient}
350
+
<div class="flex-1">
351
+
<PostComposer
352
+
client={selectedClient}
353
+
onPostSent={(post) => posts.get(selectedDid!)?.set(post.uri, post)}
354
+
bind:_state={postComposerState}
355
+
/>
356
+
</div>
357
+
{:else}
358
+
<div
359
+
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"
360
+
>
361
+
<p class="text-sm opacity-80">select or add an account to post</p>
362
+
</div>
363
+
{/if}
378
364
379
-
<div
380
-
class="mt-1 h-px w-full opacity-50"
381
-
style="background: linear-gradient(to right, var(--nucleus-accent), var(--nucleus-accent2));"
382
-
></div>
383
-
{/if}
365
+
{#if postComposerState.type === 'null' && showScrollToTop}
366
+
{@render appButton(scrollToTop, 'heroicons:arrow-up-16-solid', 'scroll to top', false)}
367
+
{/if}
368
+
</div>
369
+
</div>
370
+
</div>
384
371
372
+
<div class="footer-border-bg rounded-t-sm px-0.5 pt-0.5">
373
+
<div class="footer-bg rounded-t-sm">
385
374
<div class="flex items-center gap-1.5 px-2 py-1">
386
375
<div class="mb-2">
387
376
<h1 class="text-3xl font-bold tracking-tight">nucleus</h1>
···
515
504
{/snippet}
516
505
</InfiniteLoader>
517
506
{/snippet}
507
+
508
+
<style>
509
+
.footer-bg {
510
+
background: linear-gradient(
511
+
to right,
512
+
color-mix(in srgb, var(--nucleus-accent) 18%, var(--nucleus-bg)),
513
+
color-mix(in srgb, var(--nucleus-accent2) 13%, var(--nucleus-bg))
514
+
);
515
+
}
516
+
517
+
.footer-border-bg {
518
+
background: linear-gradient(to right, var(--nucleus-accent), var(--nucleus-accent2));
519
+
}
520
+
</style>