appview-less bluesky client
refactor: touch up styling a bit more
+39
-3
+30
src/components/NotificationsPopup.svelte
+30
src/components/NotificationsPopup.svelte
···
1
+
<script lang="ts">
2
+
import Popup from './Popup.svelte';
3
+
4
+
interface Props {
5
+
isOpen: boolean;
6
+
onClose: () => void;
7
+
}
8
+
9
+
let { isOpen = $bindable(false), onClose }: Props = $props();
10
+
11
+
const handleClose = () => {
12
+
onClose();
13
+
};
14
+
</script>
15
+
16
+
<Popup
17
+
bind:isOpen
18
+
onClose={handleClose}
19
+
title="notifications"
20
+
width="w-[42vmax] max-w-2xl"
21
+
height="60vh"
22
+
showHeaderDivider={true}
23
+
>
24
+
<div class="flex h-full items-center justify-center">
25
+
<div class="text-center">
26
+
<div class="mb-4 text-6xl opacity-50">🚧</div>
27
+
<h3 class="text-xl font-bold opacity-80">todo</h3>
28
+
</div>
29
+
</div>
30
+
</Popup>
+9
-3
src/routes/+page.svelte
+9
-3
src/routes/+page.svelte
···
19
19
import type { AtprotoDid } from '@atcute/lexicons/syntax';
20
20
import type { PageProps } from './+page';
21
21
import { buildThreads, filterThreads, type ThreadPost } from '$lib/thread';
22
+
import NotificationsPopup from '$components/NotificationsPopup.svelte';
22
23
23
24
const { data: loadData }: PageProps = $props();
24
25
···
71
72
const cursors = new SvelteMap<Did, { value?: string; end: boolean }>();
72
73
73
74
let isSettingsOpen = $state(false);
75
+
let isNotificationsOpen = $state(false);
74
76
let reverseChronological = $state(true);
75
77
let viewOwnPosts = $state(true);
76
78
···
314
316
<div
315
317
class="rounded-t-sm"
316
318
style="
317
-
background: linear-gradient(to right, color-mix(in srgb, var(--nucleus-accent) 16%, var(--nucleus-bg)), color-mix(in srgb, var(--nucleus-accent2) 10%, var(--nucleus-bg)));
319
+
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)));
318
320
"
319
321
>
320
322
<!-- composer and error disclaimer (above thread list, not scrollable) -->
···
350
352
</div>
351
353
352
354
<div
353
-
class="opacity- mt-1 h-px w-full rounded-full border-0 opacity-70"
355
+
class="mt-1 h-px w-full opacity-50"
354
356
style="background: linear-gradient(to right, var(--nucleus-accent), var(--nucleus-accent2));"
355
357
></div>
356
358
···
364
366
</div>
365
367
<div class="grow"></div>
366
368
{@render appButton(
367
-
() => (isSettingsOpen = true),
369
+
() => (isNotificationsOpen = true),
368
370
'heroicons:bell',
369
371
'notifications',
370
372
'heroicons:bell-solid'
···
387
389
</div>
388
390
389
391
<SettingsPopup bind:isOpen={isSettingsOpen} onClose={() => (isSettingsOpen = false)} />
392
+
<NotificationsPopup
393
+
bind:isOpen={isNotificationsOpen}
394
+
onClose={() => (isNotificationsOpen = false)}
395
+
/>
390
396
391
397
{#snippet replyPost(post: ThreadPost, reverse: boolean = reverseChronological)}
392
398
<span