add localisation support

currently only en_GB (TODO: dynamic language pack imports)

src/lib/ui/post/ActionBar.svelte

@@ -6,6 +6,7 @@
     import { timeline } from '$lib/timeline';
     import { parseReactions } from '$lib/post';
     import { playSound } from '$lib/sound';
+    import Lang from '$lib/lang';
 
     import ActionButton from './ActionButton.svelte';
 
@@ -19,6 +20,8 @@
 
     export let post;
 
+    const lang = Lang('en_GB');
+
     async function toggleBoost() {
         if (!$app || !$app.token) return;
 
@@ -74,29 +77,29 @@
 </script>
 
 <div class="post-actions" aria-label="Post actions" role="toolbar" tabindex="0" on:mouseup|stopPropagation on:keydown|stopPropagation>
-    <ActionButton type="reply" label="Reply" bind:count={post.reply_count} sound="post" disabled>
+    <ActionButton type="reply" label="{lang.string('post.actions.reply')}" bind:count={post.reply_count} sound="post" disabled>
         <ReplyIcon/>
     </ActionButton>
-    <ActionButton type="boost" label="Boost" on:click={toggleBoost} bind:active={post.boosted} bind:count={post.boost_count} disabled={!$account}>
+    <ActionButton type="boost" label="{lang.string('post.actions.boost')}" on:click={toggleBoost} bind:active={post.boosted} bind:count={post.boost_count} disabled={!$account}>
         <RepostIcon/>
         <svelte:fragment slot="activeIcon">
             <RepostIcon/>
         </svelte:fragment>
     </ActionButton>
-    <ActionButton type="favourite" label="Favourite" on:click={toggleFavourite} bind:active={post.favourited} bind:count={post.favourite_count} disabled={!$account}>
+    <ActionButton type="favourite" label="{lang.string('post.actions.favourite')}" on:click={toggleFavourite} bind:active={post.favourited} bind:count={post.favourite_count} disabled={!$account}>
         <FavouriteIcon/>
         <svelte:fragment slot="activeIcon">
             <FavouriteIconFill/>
         </svelte:fragment>
     </ActionButton>
-    <ActionButton type="quote" label="Quote" disabled>
+    <ActionButton type="quote" label="{lang.string('post.actions.quote')}" disabled>
         <QuoteIcon/>
     </ActionButton>
-    <ActionButton type="more" label="More" disabled>
+    <ActionButton type="more" label="{lang.string('post.actions.more')}" disabled>
         <MoreIcon/>
     </ActionButton>
     {#if $account && post.account.id === $account.id}
-        <ActionButton type="delete" label="Delete" on:click={deletePost}>
+        <ActionButton type="delete" label="{lang.string('post.actions.delete')}" on:click={deletePost}>
             <DeleteIcon/>
         </ActionButton>
     {/if}

src/lib/ui/post/Body.svelte

@@ -1,25 +1,29 @@
 <script>
+    import Lang from '$lib/lang';
+
     export let post;
 
-    let open_warned = false;
+    const lang = Lang('en_GB');
+
+    let open = false;
 </script>
 
 <div class="post-body">
     {#if post.warning}
-        <button class="post-warning" on:click|stopPropagation={() => { open_warned = !open_warned }} on:mouseup|stopPropagation>
+        <button class="post-warning" on:click|stopPropagation={() => { open = !open }} on:mouseup|stopPropagation>
         <strong>
             {post.warning}
-            <span class="warning-instructions">
-                {#if !open_warned}
-                    (click to reveal)
+            <span class="instructions">
+                {#if !open}
+                    {lang.string('post.warning.show')}
                 {:else}
-                    (click to hide)
+                    {lang.string('post.warning.hide')}
                 {/if}
             </span>
         </strong>
         </button>
     {/if}
-    {#if !post.warning || open_warned}
+    {#if !post.warning || open}
         {#if post.rich_text}
             <span class="post-text">{@html post.rich_text}</span>
         {:else if post.html}
@@ -78,7 +82,7 @@
         box-shadow: 0 0 8px var(--warn-bg);
     }
 
-    .post-warning .warning-instructions {
+    .post-warning .instructions {
         font-weight: normal;
         opacity: .5;
     }

src/lib/ui/post/BoostContext.svelte

@@ -1,5 +1,8 @@
 <script>
     import { shorthand as short_time } from '$lib/time.js';
+    import Lang from '$lib/lang.js';
+
+    const lang = Lang('en_GB');
 
     export let post;
 
@@ -9,10 +12,10 @@
 <div class="post-context">
     <span class="post-context-icon">🔁</span>
     <span class="post-context-action">
-        <a href={post.account.url} target="_blank"><span class="name">
-                {@html post.account.rich_name}</span>
-        </a>
-        boosted this post.
+        { @html
+        lang.string('post.boosted').replaceAll('%1',
+        `<a href={${post.account.url}} target="_blank"><span class="name">${post.account.rich_name}</span></a>`)
+        }
     </span>
     <span class="post-context-time">
         <time title="{time_string}">{short_time(post.created_at)}</time>
@@ -41,8 +44,8 @@
         margin-right: 4px;
     }
 
-    .post-context a,
-    .post-context a:visited {
+    :global(.post-context a),
+    :global(.post-context a:visited) {
         color: inherit;
         text-decoration: none;
     }

src/lib/ui/post/PostHeader.svelte

@@ -1,5 +1,8 @@
 <script>
     import { shorthand as short_time } from '$lib/time.js';
+    import Lang from '$lib/lang.js';
+
+    const lang = Lang('en_GB');
 
     export let post;
     export let reply = undefined;
@@ -19,10 +22,8 @@
         <div class="post-info" on:mouseup|stopPropagation>
             <a href={post.url} target="_blank" class="created-at">
                 <time title={time_string}>{short_time(post.created_at)}</time>
-                {#if post.visibility !== "public"}
-                    <br>
-                    <span class="post-visibility">{post.visibility}</span>
-                {/if}
+                <br>
+                <span class="post-visibility">{lang.string('post.visibility.' + post.visibility)}</span>
             </a>
         </div>
     </header>

src/lib/ui/post/ReactionBar.svelte

@@ -51,11 +51,7 @@
                 {/if}
         </ReactionButton>
     {/each}
-    <ReactionButton
-            type="reaction"
-            title="react"
-            label="React"
-            disabled>
+    <ReactionButton disabled>
     <ReactIcon/>
     </ReactionButton>
 </div>

src/lib/ui/post/ReactionButton.svelte

@@ -1,11 +1,14 @@
 <script>
     import { playSound } from '../../sound.js';
     import { createEventDispatcher } from 'svelte';
+    import Lang from '$lib/lang';
     const dispatch = createEventDispatcher();
 
+    const lang = Lang('en_GB');
+
     export let type = "react";
-    export let label = "React";
-    export let title = label;
+    export let label = lang.string('post.actions.react');
+    export let title = lang.string('post.actions.react');
     export let count = 0;
     export let active = false;
     export let disabled = false;