johnandersen777.bsky.social/knotless
git that lives in your Atmosphere account
Forked from chadtmiller.com/knotless
0
0
<script lang="ts">
import type * as listNotifications from '#lib/lexicons/dev/knotless/listNotifications.ts';
import type { Snippet } from 'svelte';
import { since } from '#lib/format.ts';
import { grouped, waiting } from '#lib/notifications.svelte.ts';
import { zone } from '#lib/zone.svelte.ts';
import NotificationItem from '#lib/molecules/NotificationItem.svelte';
import Empty from '#lib/molecules/Empty.svelte';
/**
* What others did that concerns the one looking, the latest first, those
* not seen yet marked: what waits on them to answer first, then the rest
* by how long ago, what several did together shown as one. `empty` says
* what shows, in a box where they would be, when nothing does.
*/
let {
notifications,
empty
}: { notifications: listNotifications.Notification[]; empty?: Snippet } = $props();
const first = $derived(notifications.filter(waiting));
const days = $derived.by(() => {
const out: [string, listNotifications.Notification[]][] = [];
for (const n of notifications) {
if (waiting(n)) continue;
const on = since(n.createdAt);
const last = out.at(-1);
if (last && last[0] === on) last[1].push(n);
else out.push([on, [n]]);
}
return out;
});
</script>
{#if first.length}
<h2 class="notifications-when">Waiting on you</h2>
<div class="box">
<ul class="list notifications">
{#each grouped(first) as g (g.first.uri)}<NotificationItem group={g} />{/each}
</ul>
</div>
{/if}
{#each days as [on, list] (on)}
<h2 class="notifications-when" class:zoneless={!zone.tz}>{on}</h2>
<div class="box">
<ul class="list notifications">
{#each grouped(list) as g (g.first.uri)}<NotificationItem group={g} />{/each}
</ul>
</div>
{:else}
{#if !first.length}
<div class="box">
{#if empty}{@render empty()}{:else}<Empty title="No notifications yet"
>Stars of your repositories, follows of you, and pulls, issues and comments for you show
up here.</Empty
>{/if}
</div>
{/if}
{/each}