adds time string to comment card

web/src/lib/components/comment/comment_card.svelte

@@ -4,6 +4,8 @@
     import { createEventDispatcher } from "svelte";
     import TextField from "../base/text_field.svelte";
     import { fade } from "svelte/transition";
+    import { formatTimeSince } from "$lib/util/format_util";
+    import { _ } from "svelte-i18n";
 
     export let comment: Comment;
     export let mode: "show" | "edit" = "show";
@@ -14,10 +16,12 @@
 
     let editedComment = comment.text;
 
-    const avatarSrc = comment.expand?.author.avatar
+    $: avatarSrc = comment.expand?.author.avatar
         ? getFileURL(comment.expand.author, comment.expand.author.avatar)
         : `https://api.dicebear.com/7.x/initials/svg?seed=${comment.expand?.author.username ?? ""}&backgroundType=gradientLinear`;
 
+    $: timeSince = formatTimeSince(new Date(comment.created ?? ""));
+
     function deleteComment() {
         dispatch("delete", comment);
     }
@@ -38,8 +42,15 @@
     <img class="rounded-full w-10 aspect-square" src={avatarSrc} alt="avatar" />
     <div>
         <div class="flex items-center">
-            <p class="text-sm font-semibold">
-                {comment.expand?.author.username}
+            <p class="">
+                <span class="text-sm font-semibold"
+                    >{comment.expand?.author.username}</span
+                >
+                <span class="text-xs text-gray-500 ml-2"
+                    >{$_(`n-${timeSince.unit}-ago`, {
+                        values: { n: timeSince.value },
+                    })}</span
+                >
             </p>
             {#if mode == "edit"}
                 <button

web/src/lib/components/trail/trail_info_panel.svelte

@@ -232,7 +232,7 @@
     </div>
     <section class="trail-info-panel-content px-8">
         <div
-            class="grid grid-cols-1 mt-4 gap-8"
+            class="grid grid-cols-1 my-4 gap-8"
             class:md:grid-cols-[1fr_18rem]={mode == "overview"}
         >
             {#if activeTab == 0}
@@ -310,7 +310,7 @@
                             >
                         </div>
                     {/if}
-                    <ul>
+                    <ul class="space-y-4">
                         {#each trail.expand.comments_via_trail ?? [] as comment}
                             <li>
                                 <CommentCard