hook up profile lock/bot icons

buttons with a `href` now render as <a> elements, otherwise <button>

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/lib/ui/Button.svelte

@@ -5,47 +5,47 @@
 
     const dispatch = createEventDispatcher();
 
+    let className = "";
+    export { className as class };
     export let active = false;
     export let filled = false;
     export let disabled = false;
     export let centered = false;
     export let label = undefined;
     export let sound = "default";
-    export let href = false;
+    export let href = undefined;
+    export let onClick = undefined;
 
     let classes = [];
 
     function click() {
         if (disabled) return;
-        if (href) {
-            const link = document.createElement('a');
-            link.href = href;
-            link.dispatchEvent(new MouseEvent('click', {
-                bubbles: true,
-                cancelable: true,
-                view: window,
-                ctrlKey: event.ctrlKey,
-                metaKey: event.metaKey,
-                shiftKey: event.shiftKey,
-                altKey: event.altKey,
-                button: event.button,
-            }));
-            return;
-        }
-
         playSound(sound);
         dispatch('click');
     }
 
     afterUpdate(() => {
-        classes = [];
-        if (active) classes = ["active"];
-        if (filled) classes = ["filled"];
-        if (disabled) classes = ["disabled"];
+        classes = className.split(' ');
+        if (active) classes.push("active");
+        if (filled) classes.push("filled");
+        if (disabled) classes.push("disabled");
         if (centered) classes.push("centered");
     });
 </script>
 
+{#if href}
+    <a
+            class={classes.join(' ')}
+            title={label}
+            aria-label={label}
+            href={href}
+            on:click={() => click()}>
+        <span class="icon">
+            <slot name="icon" />
+        </span>
+        <slot/>
+    </a>
+{:else}
     <button
             type="button"
             class={classes.join(' ')}
@@ -57,10 +57,10 @@
             </span>
             <slot/>
     </button>
+{/if}
 
 <style>
-    button {
-        width: 100%;
+    a, button {
         height: fit-content;
         padding: .7em .8em;
         display: flex;
@@ -71,6 +71,7 @@
         font-size: 1rem;
         font-weight: 600;
         text-align: left;
+        text-decoration: none;
 
         border-radius: 8px;
         border: 2px solid var(--bg-700);
@@ -84,22 +85,32 @@
 
         cursor: pointer;
     }
+    a {
+        width: calc(100% - 1.6em);
+    }
+    button {
+        width: 100%;
+    }
 
+    a.centered,
     button.centered {
         text-align: center;
         justify-content: center;
     }
 
+    a:hover,
     button:hover {
         border-color: color-mix(in srgb, var(--bg-700), black 10%);
         background-color: color-mix(in srgb, var(--bg-700), black 10%);
     }
 
+    a:active,
     button:active {
         border-color: color-mix(in srgb, var(--bg-700), black 20%);
         background-color: color-mix(in srgb, var(--bg-700), black 20%);
     }
 
+    a.active,
     button.active {
         background-color: var(--bg-600);
         color: var(--accent);
@@ -107,34 +118,40 @@
         text-shadow: 0px 2px 32px var(--accent);
     }
 
+    a.active:hover,
     button.active:hover {
         color: color-mix(in srgb, var(--accent), var(--bg-1000) 20%);
         border-color: color-mix(in srgb, var(--accent), var(--bg-1000) 20%);
         background-color: color-mix(in srgb, var(--bg-600), var(--accent) 10%);
     }
 
+    a.active:active,
     button.active:active {
         color: color-mix(in srgb, var(--accent), var(--bg-800) 10%);
         border-color: color-mix(in srgb, var(--accent), var(--bg-800) 10%);
         background-color: color-mix(in srgb, var(--bg-600), var(--bg-800) 10%);
     }
 
+    a.filled,
     button.filled {
         background-color: var(--accent);
         color: var(--bg-800);
         border-color: transparent;
     }
 
+    a.filled:hover,
     button.filled:hover {
         color: color-mix(in srgb, var(--bg-800), white 10%);
         background-color: color-mix(in srgb, var(--accent), white 20%);
     }
 
+    a.filled:active,
     button.filled:active {
         color: color-mix(in srgb, var(--bg-800), black 10%);
         background-color: color-mix(in srgb, var(--accent), black 20%);
     }
 
+    a.disabled,
     button.disabled {
         color: var(--text);
         opacity: .5;

src/lib/ui/Navigation.svelte

@@ -32,35 +32,6 @@
 
     const dispatch = createEventDispatcher();
 
-    function handle_btn(name) {
-        if (!$account) return;
-        let route;
-        switch (name) {
-            case "timeline":
-                route = "/";
-                getTimeline(true);
-                break;
-            case "notifications":
-                route = "/notifications";
-                notifications.set([]);
-                getNotifications();
-                break;
-            case "explore":
-            case "lists":
-            case "favourites":
-            case "bookmarks":
-            case "hashtags":
-            default:
-                return;
-        }
-        if (!route) return;
-        window.scrollTo({
-            top: 0,
-            behavior: "smooth"
-        });
-        goto(route);
-    }
-
     function gotoProfile() {
         if (!$account) return;
         playSound();
@@ -102,7 +73,7 @@
     {#if $account}
     <div id="nav-items">
         <Button label="Timeline"
-                on:click={() => handle_btn("timeline")}
+                href="/")}
                 active={$page.url.pathname === "/"}>
             <svelte:fragment slot="icon">
                 <TimelineIcon/>
@@ -110,7 +81,7 @@
             {lang.string('navigation.timeline')}
         </Button>
         <Button label="Notifications"
-                on:click={() => handle_btn("notifications")}
+                href="notifications"}
                 active={$page.url.pathname === "/notifications"}>
             <svelte:fragment slot="icon">
                 <NotificationsIcon/>
@@ -183,7 +154,7 @@
         <div id="account-button">
             <img src={$account.avatar_url} class="account-avatar" height="64px" alt="" aria-hidden="true" on:click={() => gotoProfile()}>
             <div class="account-name" aria-hidden="true">
-                <a href="/{$server.host}/{$account.username}" class="nickname" title={$account.nickname}>{@html $account.rich_name}</a>
+                <a href="/{$server.host}/@{$account.username}" class="nickname" title={$account.nickname}>{@html $account.rich_name}</a>
                 <span class="username" title={`@${$account.username}@${$account.host}`}>
                     {$account.fqn}
                 </span>

src/lib/ui/post/PostHeader.svelte

@@ -12,12 +12,12 @@
 </script>
 
 <div class={"post-header-container" + (reply ? " reply" : "")}>
-    <a href="/{$server.host}/{post.account.fqn}" class="post-avatar-container" on:mouseup|stopPropagation>
+    <a href="/{$server.host}/@{post.account.fqn}" class="post-avatar-container" on:mouseup|stopPropagation>
         <img src={post.account.avatar_url} type={post.account.avatar_type} alt="" width="48" height="48" class="post-avatar" loading="lazy" decoding="async">
     </a>
     <header class="post-header">
         <div class="post-user-info" on:mouseup|stopPropagation>
-            <a href="/{$server.host}/{post.account.fqn}" class="name">{@html post.account.rich_name}</a>
+            <a href="/{$server.host}/@{post.account.fqn}" class="name">{@html post.account.rich_name}</a>
             <span class="username">{post.account.mention}</span>
         </div>
         <div class="post-info" on:mouseup|stopPropagation>

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>
@@ -78,7 +94,7 @@
         </ul>
         <div class="profile-actions">
             {#if $account && profile.fqn !== $account.fqn}
-            <Button disabled filled label="{lang.string('profile.follow')} {profile.nickname}" class="profile-btn-follow">
+            <Button filled label="{lang.string('profile.follow')} {profile.nickname}" class="profile-btn-follow">
                 {lang.string('profile.follow')}
             </Button>
             {/if}
@@ -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;
@@ -186,13 +209,17 @@
         gap: .5rem;
     }
 
-    .profile-btn-follow {
+    .profile-actions :global(button.profile-btn-follow) {
         padding: 0 32px;
     }
 
-    .profile-actions :global(button) {
-        height: 42px;
+    .profile-actions :global(a) {
         width: fit-content;
+        height: 16px;
+    }
+    .profile-actions :global(button) {
+        width: fit-content;
+        height: 42px;
     }
 
     .profile-post-categories {