add i18n to profile page

src/lang/en_GB.json

@@ -84,6 +84,19 @@
         }
     },
 
+    "profile": {
+        "follow": "Follow",
+        "home_instance": "View on home instance",
+        "more": "More",
+
+        "followers": "Followers",
+        "following": "Following",
+
+        "posts": "Posts",
+        "replies": "Replies",
+        "media": "Media"
+    },
+
     "logs": {
         "logged_in": "Logged in as %1",
         "server_detected": "Server detected as %1 (%2) with capabilities: {%3}}",

src/routes/[server]/[account]/+page.svelte

@@ -1,7 +1,10 @@
 <script>
     import Button from '@cf/ui/Button.svelte';
-    import HomeIcon from '../../../img/icons/unlisted.svg';
-    import MoreIcon from '../../../img/icons/more.svg';
+    import HomeIcon from '@cf/icons/unlisted.svg';
+    import MoreIcon from '@cf/icons/more.svg';
+    import Lang from '$lib/lang';
+
+    const lang = Lang('en_GB');
 </script>
 
 <header>
@@ -30,15 +33,15 @@ also <a href="" class="mention">@mae</a>
         </p>
         <p class="profile-counts">
             <span>
-                <b>Followers</b>   1225
+                <b>{lang.string('profile.followers')}</b>   1225
             </span>
             <span>
-                <b>Following</b>   1345
+                <b>{lang.string('profile.following')}</b>   1345
             </span>
         </p>
         <div class="profile-actions">
-            <Button label="Follow" class="profile-btn-follow">Follow</Button>
-            <Button>
+            <Button label="{lang.string('profile.follow')}" class="profile-btn-follow">{lang.string('profile.follow')}</Button>
+            <Button label="{lang.string('profile.home_instance')}">
                 <HomeIcon width="24px"/>
             </Button>
             <Button>
@@ -49,9 +52,9 @@ also <a href="" class="mention">@mae</a>
 </div>
 
 <div class="profile-post-categories">
-    <Button active>Posts</Button>
-    <Button>Posts & replies</Button>
-    <Button>Media</Button>
+    <Button active>{lang.string('profile.posts')}</Button>
+    <Button>{lang.string('profile.replies')}</Button>
+    <Button>{lang.string('profile.media')}</Button>
 </div>
 
 <style>
@@ -69,7 +72,7 @@ also <a href="" class="mention">@mae</a>
         position: absolute;
         bottom: 16px;
         left: 16px;
-        background: #00000080;
+        background: color-mix(in srgb, transparent, var(--bg-1000) 50%);
         backdrop-filter: blur(8px);
         width: fit-content;
         display: flex;