adds trail date field

web/src/lib/components/base/datepicker.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
     export let name: string = "";
-    export let value: string | number | Date = "";
+    export let value: string | Date = "";
     export let label: string = "";
     export let error: string = "";
 </script>

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

@@ -14,10 +14,9 @@
 
     let editedComment = comment.text;
 
-    const avatarSrc =
-        comment.expand && comment.expand.author
-            ? getFileURL(comment.expand?.author, comment.expand?.author.avatar)
-            : "https://api.dicebear.com/7.x/initials/svg?seed=comment&backgroundType=gradientLinear";
+    const 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`;
 
     function deleteComment() {
         dispatch("delete", comment);
@@ -31,7 +30,11 @@
     }
 </script>
 
-<div class="flex gap-4 items-center" in:fade={{duration: 150}} out:fade={{duration: 150}}>
+<div
+    class="flex gap-4 items-center"
+    in:fade={{ duration: 150 }}
+    out:fade={{ duration: 150 }}
+>
     <img class="rounded-full w-10 aspect-square" src={avatarSrc} alt="avatar" />
     <div>
         <div class="flex items-center">

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

@@ -27,6 +27,17 @@
     <div class="p-4">
         <div>
             <h4 class="font-semibold text-lg">{trail.name}</h4>
+            {#if trail.date}
+                <p class="text-xs text-gray-500 mb-3">
+                   {new Date(
+                        trail.date,
+                    ).toLocaleDateString(undefined, {
+                        month: "long",
+                        day: "2-digit",
+                        year: "numeric",
+                    })}
+                </p>
+            {/if}
             <div class="flex gap-x-4">
                 {#if trail.location}
                     <h5>
@@ -40,7 +51,7 @@
                 </h5>
             </div>
         </div>
-        <div class="flex mt-2 gap-4 text-sm text-gray-500 whitespace-nowrap">
+        <div class="flex mt-1 gap-4 text-sm text-gray-500 whitespace-nowrap">
             <span
                 ><i class="fa fa-left-right mr-2"></i>{formatDistance(
                     trail.distance,

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

@@ -41,7 +41,7 @@
         $_("waypoints"),
         $_("photos"),
         $_("summit-book"),
-        $_("comments"),
+        $_("comment", { values: { n: 2 } }),
     ];
 
     let map: Map;

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

@@ -23,6 +23,15 @@
     </div>
     <div class="min-w-0 basis-full">
         <h4 class="font-semibold text-lg">{trail.name}</h4>
+        {#if trail.date}
+            <p class="text-xs text-gray-500 mb-3">
+                {new Date(trail.date).toLocaleDateString(undefined, {
+                    month: "long",
+                    day: "2-digit",
+                    year: "numeric",
+                })}
+            </p>
+        {/if}
         <div class="flex flex-wrap gap-x-8">
             {#if trail.location}
                 <h5><i class="fa fa-location-dot mr-3"></i>{trail.location}</h5>
@@ -34,7 +43,7 @@
             </h5>
         </div>
 
-        <div class="flex mt-2 gap-4 text-sm text-gray-500">
+        <div class="flex mt-1 gap-4 text-sm text-gray-500">
             <span
                 ><i class="fa fa-left-right mr-2"></i>{formatDistance(
                     trail.distance,