Fix #6: Display relative timestamps

src/lib/components/PostComponent.svelte

@@ -2,10 +2,24 @@
   import type { Post } from '$lib/mastodon/response';
   import AvatarComponent from '$lib/components/AvatarComponent.svelte';
   import AccountComponent from '$lib/components/AccountComponent.svelte';
+  import { secondsSince, relativeTime } from '$lib/relativeTime';
+  import { onMount } from "svelte";
 
   export let post: Post;
-  let dateCreated: string;
-  $: dateCreated = new Date(post.created_at).toLocaleString();
+  let displayRelativeTime = false;
+  const absoluteDate = new Date(post.created_at).toLocaleString();
+  let dateCreated = absoluteDate;
+  const timePassed = secondsSince(new Date(post.created_at));
+  $: if(displayRelativeTime) {
+    dateCreated = relativeTime($timePassed) ?? absoluteDate;
+  }
+
+  onMount(() => {
+    // Display relative time only after mount:
+    // When JS is disabled the server-side rendered absolute date will be shown,
+    // otherwise the relative date would be outdated very quickly
+    displayRelativeTime = true;
+  })
 </script>
 
 
@@ -14,7 +28,7 @@
   <div class="post">
     <div class="meta">
       <AccountComponent account={post.account} />
-      <small><a href={post.url} target="_blank">{dateCreated}</a></small>
+      <small><a href={post.url} target="_blank" title="{absoluteDate}">{dateCreated}</a></small>
     </div>
     <div class="content">{@html post.content}</div>
   </div>