show posts on profile page

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;