mostrar cosas hechas previamente por otrxs

src/lib/Others.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { derived, get } from "svelte/store";
   import timer from "./timer";
-  import { intervalToDuration } from "date-fns";
+  import { formatDistance, intervalToDuration } from "date-fns";
   import friends, { friendsData } from "./stores/friends";
   import formatDistanceShort from "./helpers/formatDistanceShort";
 
@@ -10,11 +10,15 @@
   );
 
   // $: done = readableArray(ydone);
-  // $: sortedDone = $done.sort((a, b) => b.started - a.started);
+  $: sortedDone = $allData
+    .flatMap((d) => d.done.map((t) => ({ ...t, friend: d })))
+    .sort((a, b) => b.started - a.started);
   const sTimer = timer(1000);
+  const hTimer = timer(1000 * 60 * 60);
 </script>
 
-{#if allData}
+<section>
+  <h2>actualmente:</h2>
   <ul>
     {#each $allData as data}
       {#if data.doing.length > 0}
@@ -32,4 +36,30 @@
       {/if}
     {/each}
   </ul>
-{/if}
+  <h2>previamente:</h2>
+  <ul>
+    {#each sortedDone as thing}
+      <li>
+        <strong>{thing.friend.name || thing.friend.id.room}</strong>
+        hizo
+        <em>{thing.description}</em>
+        por
+        {formatDistanceShort(
+          intervalToDuration({
+            start: new Date(thing.started),
+            end: new Date(thing.started + thing.took),
+          })
+        )}
+        hace
+        {formatDistance($hTimer, new Date(thing.started + thing.took))}
+      </li>
+    {/each}
+  </ul>
+</section>
+
+<style>
+  section {
+    overflow-y: auto;
+    max-height: 100%;
+  }
+</style>