add distance date

src/components/DistanceDate.svelte

@@ -0,0 +1,24 @@
+<script context="module">
+    import { formatDistance } from 'date-fns'
+    import { readable } from 'svelte/store'
+
+    const format = (date, baseDate) => formatDistance(date, baseDate, { addSuffix: true })
+
+    const now = readable(new Date(), set => {
+        const interval = setInterval(() => {
+            set(new Date())
+        }, 1000)
+
+        return () => clearInterval(interval)
+    })
+</script>
+
+<script>
+    export let date
+
+    $: iso = date.toISOString()
+    $: text = format(date, $now)
+</script>
+
+<time datetime={iso}>{text}</time>
+

src/components/Queue.svelte

@@ -4,7 +4,7 @@
     {#if $next}
         <div class="entry" on:click={() => select($next)}>
             <div class="title">{$next.title}</div>
-            <div class="user">by {$next.referer.username}</div>
+            <div class="user">shared by {$next.referer.username} <DistanceDate date={$next.date} /></div>
         </div>
     {/if}
 
@@ -18,13 +18,14 @@
     {#each history as track}
         <div class="entry" class:active={track === $current} on:click={() => select(track)}>
             <div class>{track.title}</div>
-            <div class>shared by {track.referer.username}</div>
+            <div class>shared by {track.referer.username} <DistanceDate date={track.date} /></div>
         </div>
     {/each}
 </div>
 
 <script>
     import { queue, next, current, enqueueing, select } from '/store.js'
+    import DistanceDate from '/components/DistanceDate.svelte'
 
     $: history = $queue.filter(x => x !== $next).reverse()
 </script>

src/services/mastodon.js

@@ -97,7 +97,7 @@ export async function* hashtagsIterator (domain, hashtags) {
 
 const processStatus = (domain, status) => ({
     title: '',
-    date: new Date(status.createdAt),
+    date: new Date(status.created_at),
     referer: {
         username: status.account.username,
         url: status.url,