bump to version 0.3.0

CHANGELOGS.md

@@ -0,0 +1,10 @@
+# Campfire v0.3.0
+- Added notifications view
+- Many more background tweaks, fixes, and optimisations
+
+# Campfire v0.2.0
+- Complete UI overhaul (thanks mae!)
+- Added light and dark themes
+- Added ability to like and boost posts
+- Added ability to view threads in context
+- Many background tweaks, fixes, and optimisations

package-lock.json

@@ -1,12 +1,12 @@
 {
     "name": "campfire-client",
-    "version": "0.2.0",
+    "version": "0.3.0",
     "lockfileVersion": 3,
     "requires": true,
     "packages": {
         "": {
             "name": "campfire-client",
-            "version": "0.2.0",
+            "version": "0.3.0",
             "license": "GPL-3.0",
             "devDependencies": {
                 "@poppanator/sveltekit-svg": "^4.2.1",

package.json

@@ -1,6 +1,6 @@
 {
     "name": "campfire-client",
-    "version": "0.2.0",
+    "version": "0.3.0",
     "description": "social media for the galaxy-wide-web! 🌌",
     "private": true,
     "type": "module",

src/lib/client/api.js

@@ -1,8 +1,9 @@
-import { client } from '../client/client.js';
+import { client } from '$lib/client/client.js';
+import { user } from '$lib/stores/user.js';
 import { capabilities } from '../client/instance.js';
-import Post from '../post.js';
+import Post from '$lib/post.js';
-import User from '../user/user.js';
+import User from '$lib/user/user.js';
-import Emoji from '../emoji.js';
+import Emoji from '$lib/emoji.js';
 import { get } from 'svelte/store';
 
 export async function createApp(host) {
@@ -92,7 +93,7 @@ export async function verifyCredentials() {
 }
 
 export async function getNotifications(since_id, limit, types) {
-    if (!get(client).user) return false;
+    if (!get(user)) return false;
 
     let url = `https://${get(client).instance.host}/api/v1/notifications`;
 
@@ -112,6 +113,7 @@ export async function getNotifications(since_id, limit, types) {
 }
 
 export async function getTimeline(last_post_id) {
+    if (!get(user)) return false;
     let url = `https://${get(client).instance.host}/api/v1/timelines/home`;
     if (last_post_id) url += "?max_id=" + last_post_id;
     const data = await fetch(url, {

src/lib/client/client.js

@@ -2,7 +2,7 @@ import { Instance, server_types } from './instance.js';
 import * as api from './api.js';
 import { get, writable } from 'svelte/store';
 import { last_read_notif_id } from '$lib/notifications.js';
-import { user } from '$lib/stores/user.js';
+import { user, logged_in } from '$lib/stores/user.js';
 
 export const client = writable(false);
 
@@ -206,6 +206,7 @@ export class Client {
             console.warn("Failed to log out correctly; ditching the old tokens anyways.");
         }
         localStorage.removeItem(save_name);
+        logged_in.set(false);
         client.set(new Client());
         console.log("Logged out successfully.");
     }

src/lib/notifications.js

@@ -29,7 +29,7 @@ export async function getNotifications() {
                     }
                 }
             }
-            notif.status = await api.parsePost(notif.status, 0, false);
+            notif.status = notif.status ? await api.parsePost(notif.status, 0, false) : null;
             notifications.update(notifications => [...notifications, notif]);
         }
         last_read_notif_id.set(data[0].id);

src/lib/stores/user.js

@@ -1,4 +1,22 @@
-import { writable } from 'svelte/store';
+import { client } from '$lib/client/client.js';
+import * as api from '$lib/client/api.js';
+import { get, writable } from 'svelte/store';
 
 export let user = writable(0);
 export let logged_in = writable(false);
+
+export async function getUser() {
+    // already known
+    if (get(user)) return get(user);
+
+    // cannot provide- not logged in
+    if (!get(client).app || !get(client).app.token) return false;
+
+    // logged in- attempt to retrieve using token
+    const data = await api.verifyCredentials();
+    if (!data) return false;
+
+    user.set(await api.parseUser(data));
+    console.log(`Logged in as @${get(user).username}@${get(user).host}`);
+    return get(user);
+}

src/lib/ui/Navigation.svelte

@@ -3,6 +3,7 @@
     import Button from './Button.svelte';
     import Feed from './Feed.svelte';
     import { client } from '$lib/client/client.js';
+    import { user } from '$lib/stores/user.js';
     import { play_sound } from '$lib/sound.js';
     import { getTimeline } from '$lib/timeline.js';
     import { getNotifications } from '$lib/notifications.js';
@@ -150,11 +151,11 @@
         </div>
 
         <div id="account-button">
-            <img src={$client.user.avatar_url} class="account-avatar" height="64px" alt="" aria-hidden="true" on:click={() => play_sound()}>
+            <img src={$user.avatar_url} class="account-avatar" height="64px" alt="" aria-hidden="true" on:click={() => play_sound()}>
             <div class="account-name" aria-hidden="true">
-                <a href={$client.user.url} class="nickname" title={$client.user.nickname}>{$client.user.nickname}</a>
+                <a href={$user.url} class="nickname" title={$user.nickname}>{$user.nickname}</a>
-                <span class="username" title={`@${$client.user.username}@${$client.user.host}`}>
+                <span class="username" title={`@${$user.username}@${$user.host}`}>
-                    {`@${$client.user.username}@${$client.user.host}`}
+                    {`@${$user.username}@${$user.host}`}
                 </span>
             </div>
         </div>

src/lib/ui/Notification.svelte

@@ -48,7 +48,7 @@
     }
 </script>
 
-<a class="notification" href={`/post/${data.status.id}`} aria-label={aria_label}>
+<a class="notification" href={data.status ? `/post/${data.status.id}` : null} aria-label={aria_label}>
     <header aria-hidden>
         <span class="notif-icon">
             {#if data.type === "favourite"}
@@ -92,7 +92,7 @@
 <style>
     .notification {
         display: block;
-        margin: 8px 0;
+        margin-bottom: 8px;
         padding: 16px;
         border-radius: 8px;
         background: var(--bg-800);

src/routes/+layout.svelte

@@ -3,27 +3,25 @@
     import Navigation from '$lib/ui/Navigation.svelte';
     import Widgets from '$lib/ui/Widgets.svelte';
     import { client, Client } from '$lib/client/client.js';
+    import { user, getUser } from '$lib/stores/user.js';
     import { get } from 'svelte/store';
     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);
+            if (get(user)) logged_in.set(true);
             return resolve();
         }
         let new_client = new Client();
         new_client.load();
         client.set(new_client);
 
-        return new_client.getClientUser().then(user => {
+        return getUser().then(new_user => {
-            if (!user) {
+            if (!new_user) return resolve();
-                client.set(new_client);
+
-                return resolve();
+            logged_in.set(true);
-            }
+            user.set(new_user);
-            if (user) logged_in.set(true);
-            new_client.user = user;
-            window.peekie = new_client;
 
             // spin up async task to fetch notifications
             get(client).getNotifications(
@@ -33,10 +31,6 @@
                 unread_notif_count.set(notif_data.length);
             });
 
-            client.update(client => {
-                client.user = user;
-                return client;
-            });
             return resolve();
         });
     });

src/routes/+page.svelte

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

src/routes/callback/+page.svelte

@@ -3,6 +3,8 @@
     import { goto } from '$app/navigation';
     import { error } from '@sveltejs/kit';
     import { get } from 'svelte/store';
+    import { last_read_notif_id } from '$lib/notifications.js';
+    import { logged_in, user, getUser } from '$lib/stores/user.js';
 
     export let data;
 
@@ -23,24 +25,18 @@
                 return c;
             });
 
-            get(client).getClientUser().then(user => {
+            getUser().then(new_user => {
-                if (user) client.update(client => {
+                if (!new_user) return;
-                    client.user = user
+
-                    return client;
+                logged_in.set(true);
-                });
+                user.set(new_user);
 
                 return get(client).getNotifications(
-                    get(last_read_notification_id)
+                    get(last_read_notif_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);
+                        last_read_notif_id.set(notif_data[0].id);
-                        client.save();
+                    get(client).save();
-                        return client;
-                    });
                     goto("/");
                 });
             });

src/routes/notifications/+page.svelte

@@ -1,10 +1,16 @@
 <script>
     import { notifications, getNotifications } from '$lib/notifications.js';
+    import { logged_in } from '$lib/stores/user.js';
+    import { goto } from '$app/navigation';
+    import { get } from 'svelte/store';
     import Notification from '$lib/ui/Notification.svelte';
 
+    if (!get(logged_in)) goto("/");
+
     getNotifications();
     /*
     document.addEventListener("scroll", event => {
+        if (get(logged_in) && get(page).url.pathname !== "/") return;
         if (window.innerHeight + window.scrollY >= document.body.offsetHeight - 2048) {
             getNotifications();
         }
@@ -41,10 +47,6 @@
         font-size: 1.5em;
     }
 
-    .notifications {
-        margin: 16px 0;
-    }
-
     .loading {
         width: 100%;
         height: 80vh;