polished UI form and function

src/Feed.svelte

@@ -24,8 +24,6 @@
             return;
         }
 
-        console.log(timeline_data);
-
         for (let i in timeline_data) {
             const post_data = timeline_data[i];
             const post = await parsePost(post_data, 1);

src/client/api.js

@@ -214,11 +214,14 @@ export async function parseUser(data) {
     user.id = data.id;
     user.nickname = data.display_name;
     user.username = data.username;
+    user.avatar_url = data.avatar;
+    user.url = data.url;
+
     if (data.acct.includes('@'))
         user.host = data.acct.split('@')[1];
     else
         user.host = data.username + '@' + Client.get().instance.host;
-    user.avatar_url = data.avatar;
+
     user.emojis = [];
     data.emojis.forEach(emoji_data => {
         emoji_data.id = emoji_data.shortcode + '@' + user.host;
@@ -226,6 +229,7 @@ export async function parseUser(data) {
         emoji_data.host = user.host;
         user.emojis.push(parseEmoji(emoji_data));
     });
+
     Client.get().putCacheUser(user);
     return user;
 }

src/post/Body.svelte

@@ -28,7 +28,7 @@
         <div class="post-media-container" data-count={post.files.length}>
             {#each post.files as file}
                 <div class="post-media image">
-                    <a href={file.url}>
+                    <a href={file.url} target="_blank">
                         <img src={file.url} alt={file.alt} height="200" loading="lazy" decoding="async">
                     </a>
                 </div>
@@ -43,10 +43,11 @@
 
 <style>
     .post-body {
-        margin-top: 8px;
+        margin-top: 10px;
     }
 
     .post-warning {
+        margin-bottom: 6px;
         padding: 4px 8px;
         --warn-bg: rgba(255,220,30,.1);
         background-image: repeating-linear-gradient(-45deg, transparent, transparent 10px, var(--warn-bg) 10px, var(--warn-bg) 20px);
@@ -67,12 +68,14 @@
     }
 
     .post-text {
+        line-height: 1.2em;
         word-wrap: break-word;
     }
 
     .post-text :global(.emoji) {
         position: relative;
         top: 6px;
+        margin-top: -10px;
         height: 24px!important;
     }
 
@@ -110,8 +113,7 @@
 
     .post-text :global(a.mention) {
         color: var(--accent);
-        padding: 6px 6px;
+        padding: 3px 6px;
-        margin: -6px 0;
         background: var(--accent-bg);
         border-radius: 6px;
         text-decoration: none;

src/post/BoostContext.svelte

@@ -10,7 +10,7 @@
 <div class="post-context">
     <span class="post-context-icon">🔁</span>
     <span class="post-context-action">
-        <a href="/{post.user.mention}">{@html parseEmojis(post.user.rich_name)}</a> boosted this post.
+        <a href={post.user.url} target="_blank">{@html parseEmojis(post.user.rich_name)}</a> boosted this post.
     </span>
     <span class="post-context-time">
         <time title="{time_string}">{short_time(post.created_at)}</time>

src/post/Header.svelte

@@ -8,16 +8,16 @@
 </script>
 
 <div class="post-header-container">
-    <a href="/{post.user.mention}" class="post-avatar-container">
+    <a href={post.user.url} target="_blank" class="post-avatar-container">
         <img src={post.user.avatar_url} type={post.user.avatar_type} alt="" width="48" height="48" class="post-avatar" loading="lazy" decoding="async">
     </a>
     <header class="post-header">
         <div class="post-user-info">
-            <a href="/{post.user.mention}" class="name">{@html post.user.rich_name}</a>
+            <a href={post.user.url} target="_blank" class="name">{@html post.user.rich_name}</a>
             <span class="username">{post.user.mention}</span>
         </div>
         <div class="post-info">
-            <a href={post.url} class="created-at">
+            <a href={post.url} target="_blank" class="created-at">
                 <time title={time_string}>{short_time(post.created_at)}</time>
                 {#if post.visibility !== "public"}
                     <span class="post-visibility">({post.visibility})</span>
@@ -44,6 +44,7 @@
 
     .post-avatar-container {
         margin-right: 12px;
+        display: flex;
     }
 
     .post-avatar {
@@ -61,6 +62,13 @@
         margin-left: auto;
     }
 
+    .post-user-info {
+        margin-top: -6px;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+    }
+
     .post-user-info a {
         display: block;
     }
@@ -68,7 +76,7 @@
     .post-user-info .name :global(.emoji) {
         position: relative;
         top: 4px;
-        height: 26px;
+        height: 20px;
     }
 
     .post-user-info .username {

src/post/Post.svelte

@@ -69,7 +69,6 @@
 
 
     :global(.post-reactions) {
-        margin-top: 16px;
         display: flex;
         flex-direction: row;
     }

src/post/ReplyContext.svelte

@@ -13,7 +13,7 @@
 
 <article class="post-reply">
     <div class="post-reply-avatar-container">
-        <a href="/{post.user.mention}" class="post-avatar-container">
+        <a href={post.user.url} target="_blank" class="post-avatar-container">
             <img src={post.user.avatar_url} type={post.user.avatar_type} alt="" width="48" height="48" class="post-avatar" loading="lazy" decoding="async">
         </a>
         <div class="line">
@@ -24,11 +24,11 @@
         <div class="post-header-container">
             <header class="post-header">
                 <div class="post-user-info">
-                    <a href="/{post.user.mention}" class="name">{@html post.user.rich_name}</a>
+                    <a href={post.user.url} target="_blank" class="name">{@html post.user.rich_name}</a>
                     <span class="username">{post.user.mention}</span>
                 </div>
                 <div class="post-info">
-                    <a href={post.url} class="created-at">
+                    <a href={post.url} target="_blank" class="created-at">
                         <time title={time_string}>{short_time(post.created_at)}</time>
                     </a>
                 </div>
@@ -62,6 +62,10 @@
         flex-direction: row;
     }
 
+    .post-avatar-container {
+        display: flex;
+    }
+
     .post-reply-avatar-container {
         margin-right: 12px;
         margin-bottom: -24px;
@@ -69,7 +73,6 @@
 
     .post-reply-avatar-container .line {
         position: relative;
-        top: -4px;
         left: -1px;
         width: 50%;
         height: calc(100% - 48px);
@@ -81,6 +84,7 @@
     }
 
     .post-header-container {
+        margin-bottom: -6px;
         display: flex;
         flex-direction: row;
     }
@@ -100,6 +104,7 @@
     }
 
     .post-header {
+        height: 48px;
         display: flex;
         flex-grow: 1;
         flex-direction: row;
@@ -109,6 +114,13 @@
         margin-left: auto;
     }
 
+    .post-user-info {
+        margin-top: -4px;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+    }
+
     .post-user-info a {
         display: block;
     }
@@ -127,4 +139,12 @@
     .post-info .created-at {
         font-size: .8em;
     }
+
+    :global(.post-body) {
+        margin-top: 0;
+    }
+
+    :global(.post-body p) {
+        margin: 0;
+    }
 </style>

src/post/post.js

@@ -1,6 +1,4 @@
-import { Client } from '../client/client.js';
+import { parseText as parseEmoji } from '../emoji.js';
-import { capabilities, server_types } from '../client/instance.js';
-import { parseOne as parseEmoji, EMOJI_REGEX } from '../emoji.js';
 
 export default class Post {
     id;
@@ -19,6 +17,11 @@ export default class Post {
     boost;
     visibility;
 
+    async rich_text() {
+        return parseEmoji(this.text, this.user.host);
+    }
+
+    /*
     async rich_text() {
         let text = this.text;
         if (!text) return text;
@@ -165,4 +168,5 @@ export default class Post {
 
         return response;
     }
+    */
 }

src/user/user.js

@@ -7,6 +7,7 @@ export default class User {
     host;
     avatar_url;
     emojis;
+    url;
 
     get name() {
         return this.nickname || this.username;