src/lang/en_GB.json

@@ -85,16 +85,17 @@
     },
 
     "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,8 +33,6 @@ 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 = undefined;
+    export let href = false;
-    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 = className.split(' ');
+        classes = [];
-        if (active) classes.push("active");
+        if (active) classes = ["active"];
-        if (filled) classes.push("filled");
+        if (filled) classes = ["filled"];
-        if (disabled) classes.push("disabled");
+        if (disabled) classes = ["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>
-    a, button {
+    button {
+        width: 100%;
         height: fit-content;
         padding: .7em .8em;
         display: flex;
@@ -71,7 +71,6 @@
         font-size: 1rem;
         font-weight: 600;
         text-align: left;
-        text-decoration: none;
 
         border-radius: 8px;
         border: 2px solid var(--bg-700);
@@ -85,32 +84,22 @@
 
         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);
@@ -118,40 +107,34 @@
         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,6 +32,35 @@
 
     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();
@@ -73,7 +102,7 @@
     {#if $account}
     <div id="nav-items">
         <Button label="Timeline"
-                href="/")}
+                on:click={() => handle_btn("timeline")}
                 active={$page.url.pathname === "/"}>
             <svelte:fragment slot="icon">
                 <TimelineIcon/>
@@ -81,7 +110,7 @@
             {lang.string('navigation.timeline')}
         </Button>
         <Button label="Notifications"
-                href="notifications"}
+                on:click={() => handle_btn("notifications")}
                 active={$page.url.pathname === "/notifications"}>
             <svelte:fragment slot="icon">
                 <NotificationsIcon/>
@@ -154,7 +183,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,8 +2,6 @@
     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';
@@ -66,21 +64,7 @@
             <!-- svelte-ignore a11y-img-redundant-alt -->
             <img src="{profile.avatar_url}" alt="">
             <div class="profile-tag-names">
-                <div class="profile-tag-display-name">
+                <h1>{@html profile.rich_name}</h1>
-                <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>
@@ -94,7 +78,7 @@
         </ul>
         <div class="profile-actions">
             {#if $account && profile.fqn !== $account.fqn}
-            <Button filled label="{lang.string('profile.follow')} {profile.nickname}" class="profile-btn-follow">
+            <Button disabled filled label="{lang.string('profile.follow')} {profile.nickname}" class="profile-btn-follow">
                 {lang.string('profile.follow')}
             </Button>
             {/if}
@@ -168,13 +152,6 @@
         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;
@@ -209,17 +186,13 @@
         gap: .5rem;
     }
 
-    .profile-actions :global(button.profile-btn-follow) {
+    .profile-btn-follow {
         padding: 0 32px;
     }
 
-    .profile-actions :global(a) {
-        width: fit-content;
-        height: 16px;
-    }
     .profile-actions :global(button) {
-        width: fit-content;
         height: 42px;
+        width: fit-content;
     }
 
     .profile-post-categories {