show posts on profile page

src/lib/api.js

@@ -448,3 +448,51 @@ export async function lookupUser(host, token, handle) {
 
     return data;
 }
+
+/**
+ * GET /api/v1/accounts/{user_id}/statuses
+ * @param {string} host - The domain of the target server.
+ * @param {string} token - The application token.
+ * @param {string} user_id - The ID of the user to fetch.
+ * @param {string} max_id - If provided, only shows notifications before this ID.
+ * @param {boolean} replies - If replies should be fetched.
+ * @param {boolean} boosts - If boosts should be fetched.
+ * @param {boolean} only_media - If only media should be fetched.
+ */
+export async function getUserPosts(host, token, user_id, max_id, show_replies, show_boosts, only_media) {
+    let url = new URL(`https://${host}/api/v1/accounts/${user_id}/statuses`);
+    let query = [];
+    if (!show_replies)
+        query.push('exclude_replies=true');
+    if (!show_boosts)
+        query.push('exclude_boosts=true');
+    if (only_media)
+        query.push('only_media=true');
+    if (max_id)
+        query.push(`max_id=${max_id}`);
+    url.search = query.join('&');
+
+    const data = await fetch(url, {
+        method: 'GET',
+        headers: { "Authorization": token ? `Bearer ${token}` : null }
+    }).then(res => res.json());
+
+    return data;
+}
+
+/**
+ * GET /api/v1/accounts/{user_id}/statuses?pinned=true
+ * @param {string} host - The domain of the target server.
+ * @param {string} token - The application token.
+ * @param {string} user_id - The ID of the user to fetch.
+ */
+export async function getUserPinnedPosts(host, token, user_id) {
+    let url = `https://${host}/api/v1/accounts/${user_id}/statuses?pinned=true`;
+
+    const data = await fetch(url, {
+        method: 'GET',
+        headers: { "Authorization": token ? `Bearer ${token}` : null }
+    }).then(res => res.json());
+
+    return data;
+}

src/lib/app.css

@@ -81,6 +81,10 @@ img.emoji {
     margin: -.2em 0;
 }
 
+hr {
+    border-color: color-mix(in srgb, transparent, var(--accent) 50%);
+}
+
 .throb {
     animation: .25s throb alternate infinite ease-in;
 }

src/lib/ui/Navigation.svelte

@@ -4,12 +4,10 @@
     import { server } from '$lib/client/server.js';
     import { app } from '$lib/client/app.js';
     import { playSound } from '$lib/sound.js';
-    import { getTimeline } from '$lib/timeline.js';
-    import { getNotifications } from '$lib/notifications.js';
     import { goto } from '$app/navigation';
     import { page } from '$app/stores';
     import { createEventDispatcher } from 'svelte';
-    import { notifications, unread_notif_count } from '$lib/notifications.js';
+    import { unread_notif_count } from '$lib/notifications.js';
     import Lang from '$lib/lang';
 
     import Logo from '$lib/../img/campfire-logo.svg';
@@ -81,7 +79,7 @@
             {lang.string('navigation.timeline')}
         </Button>
         <Button label="Notifications"
-                href="notifications"}
+                href="/notifications"}
                 active={$page.url.pathname === "/notifications"}>
             <svelte:fragment slot="icon">
                 <NotificationsIcon/>

src/lib/ui/Notification.svelte

@@ -14,7 +14,7 @@
     const lang = Lang('en_GB');
 
     let mention = (accounts) => {
-        let res = `<a href=${account.url}>${account.rich_name}</a>`;
+        let res = `<a href="/${$server.host}/${account.fqn}">${account.rich_name}</a>`;
         if (accounts.length > 1) res += ' ' + lang.string('notification.and_others').replaceAll('%1', accounts.length - 1);
         return res;
     };
@@ -90,7 +90,7 @@
         </span>
         <span class="notif-avatars">
             {#if data.accounts.length == 1}
-                <a href={data.accounts[0].url} class="notif-avatar">
+                <a href="/{$server.host}/{data.accounts[0].fqn}" class="notif-avatar">
                     <img src={data.accounts[0].avatar_url} alt="" width="28" height="28" />
                 </a>
             {:else}

src/lib/ui/post/Post.svelte

@@ -2,6 +2,7 @@
     import { onMount } from 'svelte';
     import { goto } from '$app/navigation';
     import { server } from '$lib/client/server';
+    import Lang from '$lib/lang';
 
     import BoostContext from './BoostContext.svelte';
     import ReplyContext from './ReplyContext.svelte';
@@ -12,6 +13,9 @@
 
     export let post_data;
     export let focused = false;
+    export let pinned = false;
+
+    const lang = Lang('en_GB');
 
     let post_context = undefined;
     let post = post_data;
@@ -41,8 +45,6 @@
             window.scrollTo(0, el.scrollHeight);
         }
     });
-
-    let aria_label = post.account.username + '; ' + post.text + '; ' + post.created_at;
 </script>
 
 <div class="post-container">
@@ -51,12 +53,15 @@
             <ReplyContext post={reply} />
         {/await}
     {/if}
+    {#if pinned}
+        <p class="pinned">{lang.string('post.pinned')}</p>
+    {/if}
     {#if is_boost && !post_context.text}
         <BoostContext post={post_context} />
     {/if}
     <article
             class={"post" + (focused ? " focused" : "")}
-            aria-label={aria_label}
+            aria-label={post.account.username + '; ' + post.text + '; ' + post.created_at}
             bind:this={el}
             on:mousedown={e => {mouse_pos.left = e.pageX; mouse_pos.top = e.pageY}}
             on:mouseup={e => {if (e.pageX == mouse_pos.left && e.pageY == mouse_pos.top) gotoPost(e)}}
@@ -83,6 +88,12 @@
         border-top: none;
     }
 
+    .pinned {
+        margin: 1em 1.2em -.2em 1.2em;
+        font-size: .8em;
+        color: var(--accent);
+    }
+
     .post {
         padding: 16px;
         transition: background-color .1s;