commit 2da2dc0d1fa3a0c5a09ef0ec9b0efb3cd3ad28a5 · ptr.pet/nucleus

+30

src/components/NotificationsPopup.svelte

···

       1
       1
       +
       <script lang="ts">

     

       2
       2
       +
       	import Popup from './Popup.svelte';

     

       3
       3
       +
       

     

       4
       4
       +
       	interface Props {

     

       5
       5
       +
       		isOpen: boolean;

     

       6
       6
       +
       		onClose: () => void;

     

       7
       7
       +
       	}

     

       8
       8
       +
       

     

       9
       9
       +
       	let { isOpen = $bindable(false), onClose }: Props = $props();

     

       10
       10
       +
       

     

       11
       11
       +
       	const handleClose = () => {

     

       12
       12
       +
       		onClose();

     

       13
       13
       +
       	};

     

       14
       14
       +
       </script>

     

       15
       15
       +
       

     

       16
       16
       +
       <Popup

     

       17
       17
       +
       	bind:isOpen

     

       18
       18
       +
       	onClose={handleClose}

     

       19
       19
       +
       	title="notifications"

     

       20
       20
       +
       	width="w-[42vmax] max-w-2xl"

     

       21
       21
       +
       	height="60vh"

     

       22
       22
       +
       	showHeaderDivider={true}

     

       23
       23
       +
       >

     

       24
       24
       +
       	<div class="flex h-full items-center justify-center">

     

       25
       25
       +
       		<div class="text-center">

     

       26
       26
       +
       			<div class="mb-4 text-6xl opacity-50">🚧</div>

     

       27
       27
       +
       			<h3 class="text-xl font-bold opacity-80">todo</h3>

     

       28
       28
       +
       		</div>

     

       29
       29
       +
       	</div>

     

       30
       30
       +
       </Popup>

+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
       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
       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
       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
       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
       353
       -
       					class="opacity- mt-1 h-px w-full rounded-full border-0 opacity-70"

     

       355
       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
       367
       -
       						() => (isSettingsOpen = true),

     

       369
       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
       392
       +
       <NotificationsPopup

     

       393
       393
       +
       	bind:isOpen={isNotificationsOpen}

     

       394
       394
       +
       	onClose={() => (isNotificationsOpen = false)}

     

       395
       395
       +
       />

     

       390
       396
        
       

     

       391
       397
        
       {#snippet replyPost(post: ThreadPost, reverse: boolean = reverseChronological)}

     

       392
       398
        
       	<span