show posts on profile page

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;