johnandersen777.bsky.social/knotless

Switch repository

Loading…

<script lang="ts">
	import type * as updateSeen from '#lib/lexicons/dev/knotless/updateSeen.ts';
	import type { DatetimeString } from '@atproto/lex';
	import { onMount } from 'svelte';
	import { call } from '#lib/data.ts';
	import { LOGIN } from '#lib/login.ts';
	import { KINDS, unread } from '#lib/notifications.svelte.ts';
	import { scrollRow } from '#lib/rows.ts';
	import Icon from '#lib/atoms/Icon.svelte';
	import Meta from '#lib/atoms/Meta.svelte';
	import Empty from '#lib/molecules/Empty.svelte';
	import More from '#lib/atoms/More.svelte';
	import NotificationList from '#lib/organisms/NotificationList.svelte';
	import { Pages } from '#lib/pages.svelte.ts';
	let { data } = $props();
	const older = new Pages(
		() => data,
		(d) => ({ items: d.page?.notifications ?? [], cursor: d.page?.cursor }),
		(n) => n.uri
	);
	// What an empty page says, of the kind asked for.
	const none = $derived(KINDS.find(([k]) => k === data.kind)?.[2]);
	// Seen once shown: those newer than the newest here stay new. Those of
	// one kind are not, as that would mark seen those of others before them.
	onMount(() => {
		if (data.kind) return;
		const newest = data.page?.notifications.find((n) => !n.isRead);
		if (!newest) return;
		const seenAt = newest.createdAt as DatetimeString;
		call<typeof updateSeen.main>('dev.knotless.updateSeen', { seenAt })
			.then(() => (unread.count = 0))
			.catch(() => null);
	});
</script>

<Meta title="Notifications" about="What others did that concerns you on knotless." />

<div class="section notifications-head">
	<h1>Notifications</h1>
	{#if data.page}<a
			class="gear"
			href="/settings/notifications"
			aria-label="Notification settings"
			title="Notification settings"><Icon name="gear" /></a
		>{/if}
</div>
{#if data.page}
	<nav class="chips notification-kinds" {@attach scrollRow(data.kind)}>
		<a href="/notifications" aria-current={data.kind ? undefined : 'true'}>All</a>
		{#each KINDS as [k, name] (k)}<a
				href="/notifications?kind={k}"
				aria-current={data.kind === k ? 'true' : undefined}>{name}</a
			>{/each}
	</nav>
	{#snippet empty()}<Empty title={none ?? 'No notifications yet'}
			>{#if none}<a href="/notifications">See all notifications</a>{:else}Stars of your
				repositories, follows of you, and pulls, issues and comments for you show up here.{/if}</Empty
		>{/snippet}
	<NotificationList notifications={older.items} {empty} />
	<More pages={older} label="Older" />
{:else if data.login}
	<p class="feed-note">
		Log in to see what others did that concerns you. <button class="btn" popovertarget={LOGIN}
			>Log in</button
		>
	</p>
{:else}
	<p class="feed-note">This server has no logins, so it has no notifications to show.</p>
{/if}