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

web/src/lib/i18n/locales/de.json

@@ -83,6 +83,7 @@
   "metric": "Metrisch",
   "moderate": "Mittel",
   "must-be-at-least-n-characters-long": "Muss mindestens {n} Zeichen lang sein",
+  "n-years-ago": "",
   "name": "Name",
   "near": "Nahe",
   "new-list": "Neue Liste",

web/src/lib/i18n/locales/en.json

@@ -83,6 +83,12 @@
   "metric": "Metric",
   "moderate": "Moderate",
   "must-be-at-least-n-characters-long": "Must be at least {n} characters long",
+  "n-years-ago": "{n} years ago",
+  "n-months-ago": "{n} months ago",
+  "n-days-ago": "{n} days ago",
+  "n-hours-ago": "{n} hours ago",
+  "n-minutes-ago": "{n} minutes ago",
+  "n-seconds-ago": "{n} seconds ago",
   "name": "Name",
   "near": "Near",
   "new-list": "New List",

web/src/lib/i18n/locales/fr.json

@@ -83,6 +83,7 @@
   "metric": "Métrique",
   "moderate": "Modérer",
   "must-be-at-least-n-characters-long": "Doit être composé d'au moins {n} caractères",
+  "n-years-ago": "",
   "name": "Nom",
   "near": "Proche",
   "new-list": "Nouvelle liste",

web/src/lib/i18n/locales/hu.json

@@ -83,6 +83,7 @@
   "metric": "Metrikus",
   "moderate": "Mérsékelt",
   "must-be-at-least-n-characters-long": "Legalább {n} karakter hosszúnak kell lennie",
+  "n-years-ago": "",
   "name": "Név",
   "near": "Közelben",
   "new-list": "Új lista",

web/src/lib/i18n/locales/nl.json

@@ -83,6 +83,7 @@
   "metric": "Metrisch",
   "moderate": "Gemiddeld",
   "must-be-at-least-n-characters-long": "Minimaal {n} tekens",
+  "n-years-ago": "",
   "name": "Naam",
   "near": "Nabij",
   "new-list": "Nieuwe lijst",

web/src/lib/i18n/locales/pl.json

@@ -83,6 +83,7 @@
   "metric": "Metryczne",
   "moderate": "Średnia",
   "must-be-at-least-n-characters-long": "Długość musi wynosić przynajmniej {n} znaków",
+  "n-years-ago": "",
   "name": "Nazwa",
   "near": "Blisko",
   "new-list": "Nowa Lista",

web/src/lib/i18n/locales/pt.json

@@ -83,6 +83,7 @@
   "metric": "Métrica",
   "moderate": "Moderado",
   "must-be-at-least-n-characters-long": "Deve ter pelo menos {n} caracteres",
+  "n-years-ago": "",
   "name": "Nome",
   "near": "Próximo",
   "new-list": "Nova lista",

web/src/lib/i18n/locales/zh.json

@@ -83,6 +83,7 @@
   "metric": "公制",
   "moderate": "中等",
   "must-be-at-least-n-characters-long": "长度至少 {n} 字符",
+  "n-years-ago": "",
   "name": "名称",
   "near": "附近",
   "new-list": "新列表",

web/src/lib/models/comment.ts

@@ -6,6 +6,7 @@ export class Comment {
     rating: number;
     author: string;
     trail: string;
+    created?: string;
     expand?: {
         author: User
     }

web/src/lib/util/format_util.ts

@@ -48,3 +48,31 @@ export function formatElevation(meters?: number) {
         return `${Math.round(feet)} ft`;
     }
 }
+
+export function formatTimeSince(date: Date) {
+
+    var seconds = Math.floor((new Date().getTime() - date.getTime()) / 1000);
+
+    var interval = seconds / 31536000;
+
+    if (interval > 1) {
+        return { unit: "years", value: Math.floor(interval) };
+    }
+    interval = seconds / 2592000;
+    if (interval > 1) {
+        return { unit: "months", value: Math.floor(interval) };
+    }
+    interval = seconds / 86400;
+    if (interval > 1) {
+        return { unit: "days", value: Math.floor(interval) };
+    }
+    interval = seconds / 3600;
+    if (interval > 1) {
+        return { unit: "hours", value: Math.floor(interval) };
+    }
+    interval = seconds / 60;
+    if (interval > 1) {
+        return { unit: "minutes", value: Math.floor(interval) };
+    }
+    return { unit: "seconds", value: Math.floor(interval) };
+}