another huge commit but we have notifs now yay

src/routes/+layout.svelte

@@ -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>

src/routes/+page.js

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

src/routes/+page.svelte

@@ -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}

src/routes/callback/+page.svelte

@@ -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("/");
+                });
             });
         });
     }

src/routes/notifications/+page.svelte

@@ -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>

src/routes/post/[id]/+page.svelte

@@ -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;