another huge commit but we have notifs now yay

This commit is contained in:
ari melody 2024-07-02 19:38:20 +01:00
parent 015a3e65e1
commit 998e8f2517
Signed by: ari
GPG key ID: CF99829C92678188
17 changed files with 442 additions and 52 deletions

View file

@ -4,12 +4,12 @@
import Widgets from '$lib/ui/Widgets.svelte';
import { client, Client } from '$lib/client/client.js';
import { get } from 'svelte/store';
export let data;
$: path = data.path || "/";
import { logged_in } from '$lib/stores/user.js';
import { unread_notif_count, last_read_notif_id } from '$lib/notifications.js';
let ready = new Promise(resolve => {
if (get(client)) {
if (get(client).user) logged_in.set(true);
return resolve();
}
let new_client = new Client();
@ -21,8 +21,18 @@
client.set(new_client);
return resolve();
}
if (user) logged_in.set(true);
new_client.user = user;
window.peekie = new_client;
// spin up async task to fetch notifications
get(client).getNotifications(
get(last_read_notif_id)
).then(notif_data => {
if (!notif_data) return;
unread_notif_count.set(notif_data.length);
});
client.update(client => {
client.user = user;
return client;
@ -35,7 +45,7 @@
<div id="app">
<header>
<Navigation path={path} />
<Navigation />
</header>
<main>

View file

@ -1,6 +1,2 @@
export const prerender = true;
export const ssr = false;
export async function load({ url }) {
return { path: url.pathname };
}

View file

@ -1,14 +1,25 @@
<script>
import { page } from '$app/stores';
import { get } from 'svelte/store';
import { client } from '$lib/client/client.js';
import { timeline, getTimeline } from '$lib/timeline.js';
import LoginForm from '$lib/ui/LoginForm.svelte';
import Feed from '$lib/ui/Feed.svelte';
import User from '$lib/user/user.js';
import Button from '$lib/ui/Button.svelte';
getTimeline();
document.addEventListener("scroll", event => {
if (get(page).url.pathname !== "/") return;
if (window.innerHeight + window.scrollY >= document.body.offsetHeight - 2048) {
getTimeline();
}
});
</script>
{#if $client.user}
<Feed />
<Feed posts={$timeline} />
{:else}
<LoginForm />
{/if}

View file

@ -28,7 +28,21 @@
client.user = user
return client;
});
goto("/");
return get(client).getNotifications(
get(last_read_notification_id)
).then(notif_data => {
client.update(client => {
// we've just logged in, so assume all past notifications are read.
// i *would* just use the mastodon marker API to get the last read
// notification, but this does not appear to be widely supported.
if (notif_data.constructor === Array && notif_data.length > 0)
last_read_notification_id.set(notif_data[0].id);
client.save();
return client;
});
goto("/");
});
});
});
}

View file

@ -0,0 +1,57 @@
<script>
import { notifications, getNotifications } from '$lib/notifications.js';
import Notification from '$lib/ui/Notification.svelte';
getNotifications();
/*
document.addEventListener("scroll", event => {
if (window.innerHeight + window.scrollY >= document.body.offsetHeight - 2048) {
getNotifications();
}
});
*/
</script>
<header>
<h1>Notifications</h1>
</header>
<div class="notifications">
{#if $notifications.length === 0}
<div class="loading throb">
<span>fetching notifications...</span>
</div>
{:else}
{#each $notifications as notif}
<Notification data={notif} />
{/each}
{/if}
</div>
<style>
header {
width: 100%;
height: 64px;
margin: 16px 0 8px 0;
display: flex;
flex-direction: row;
}
h1 {
font-size: 1.5em;
}
.notifications {
margin: 16px 0;
}
.loading {
width: 100%;
height: 80vh;
display: flex;
justify-content: center;
align-items: center;
font-size: 2em;
font-weight: bold;
}
</style>

View file

@ -2,6 +2,8 @@
import { client } from '$lib/client/client.js';
import * as api from '$lib/client/api.js';
import { get } from 'svelte/store';
import { goto, afterNavigate } from '$app/navigation';
import { base } from '$app/paths'
import Post from '$lib/ui/post/Post.svelte';
import Button from '$lib/ui/Button.svelte';
@ -13,6 +15,12 @@
goto("/");
}
let previous_page = base;
afterNavigate(({from}) => {
previous_page = from?.url.pathname || previous_page
})
$: post = (async resolve => {
const post_data = await get(client).getPost(data.post_id, 0, false);
if (!post_data) {
@ -49,16 +57,19 @@
{#if !error}
<header>
{#await post then post}
<h1>Post by {@html post.user.rich_name}</h1>
<nav>
<Button centered on:click={() => {goto(previous_page)}}>Back</Button>
</nav>
<img src={post.user.avatar_url} type={post.user.avatar_type} alt="" width="40" height="40" class="header-avatar" loading="lazy" decoding="async">
<h1>
Post by {@html post.user.rich_name}
</h1>
{/await}
<nav>
<Button centered>Back</Button>
</nav>
</header>
<div id="feed" role="feed">
{#await post}
<div class="throb">
<div class="loading throb">
<span>loading post...</span>
</div>
{:then post}
@ -78,11 +89,19 @@
<style>
header {
width: 100%;
height: 64px;
margin: 16px 0 8px 0;
display: flex;
flex-direction: row;
}
header .header-avatar {
width: 40px;
height: 40px;
margin: auto 0;
border-radius: 4px;
}
header h1 {
margin: auto auto auto 8px;
font-size: 1.5em;
@ -92,7 +111,7 @@
}
header nav {
margin-left: auto;
margin-right: 8px;
display: flex;
flex-direction: row;
gap: 8px;
@ -102,7 +121,7 @@
margin-bottom: 20vh;
}
.throb {
.loading {
width: 100%;
height: 80vh;
display: flex;