hook up profile lock/bot icons

src/lang/en_GB.json

@@ -85,17 +85,16 @@
     },
 
     "profile": {
+        "locked": "This is a private account.",
+        "bot": "This is an automated account.",
+        "followers": "Followers",
+        "following": "Following",
         "follow": "Follow",
         "home_instance": "View on home instance",
         "more": "More",
-
-        "followers": "Followers",
-        "following": "Following",
-
         "posts": "Posts",
         "replies": "Replies",
         "media": "Media",
-
         "loading": "loading profile..."
     },
 

src/lib/account.js

@@ -33,6 +33,8 @@ export function parseAccount(data) {
     account.following_count = data.following_count;
     account.posts_count = data.statuses_count;
     account.bio = data.note;
+    account.bot = data.bot;
+    account.locked = data.locked;
 
     if (data.acct.includes('@'))
         account.host = data.acct.split('@')[1];

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

@@ -2,6 +2,8 @@
     import Button from '@cf/ui/Button.svelte';
     import HomeIcon from '@cf/icons/unlisted.svg';
     import MoreIcon from '@cf/icons/more.svg';
+    import LockIcon from '@cf/icons/lock.svg';
+    import BotIcon from '@cf/icons/bot.svg';
     import Lang from '$lib/lang';
     import * as api from '$lib/api.js';
     import { server, createServer } from '$lib/client/server.js';
@@ -64,7 +66,21 @@
             <!-- svelte-ignore a11y-img-redundant-alt -->
             <img src="{profile.avatar_url}" alt="">
             <div class="profile-tag-names">
-                <h1>{@html profile.rich_name}</h1>
+                <div class="profile-tag-display-name">
+                <h1>
+                    {@html profile.rich_name}
+                    {#if profile.locked}
+                        <span title="{lang.string('profile.locked')}">
+                            <LockIcon width="22px"/>
+                        </span>
+                    {/if}
+                    {#if profile.bot}
+                        <span title="{lang.string('profile.bot')}">
+                            <BotIcon width="22px"/>
+                        </span>
+                    {/if}
+                </h1>
+                </div>
                 <p>{profile.fqn}</p>
             </div>
         </div>
@@ -152,6 +168,13 @@
         font-size: 1.15rem
     }
 
+    .profile-tag-names h1 :global(svg) {
+        height: 1.2em;
+        width: 1.2em;
+        margin: -1em -.1em 0 -.1em;
+        transform: translateY(.2em);
+    }
+
     .profile-info {
         background-color: var(--bg-800);
         padding: 16px;