feature: use Svelte to render event list

lib/frontend/components/EventList.svelte

@@ -0,0 +1,83 @@
+<style>
+  .list-wrapper {
+    max-height: 50vh;
+    overflow: auto;
+  }
+
+  #list {
+    width: 100%;
+  }
+
+  thead {
+    font-weight: 800;
+  }
+
+  tbody tr:nth-child(odd) {
+    background-color: whitesmoke;
+  }
+
+  tbody tr:nth-child(even) {
+    background-color: #e8e8e8;
+  }
+
+  td.actions {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  td.actions div {
+    margin: 2px;
+    text-decoration: none;
+  }
+
+  .delete-record {
+    font-size: 1.2rem;
+    cursor: pointer;
+  }
+</style>
+
+<script>
+  import { eventStore } from '../stores'
+
+  const handleRecordDelete = (id) => {
+    eventStore.clearCalculation(id)
+  }
+</script>
+
+<div class='list-wrapper'>
+  <table id="list">
+    <thead>
+      <tr>
+        <td>Date</td>
+        <td>Name</td>
+        <td></td>
+      </tr>
+    </thead>
+    <tbody>
+      {#each $eventStore as event (event.id)}
+        <tr>
+          <td>
+            {event.startTime
+              ? new Date(event.startTime).toLocaleString()
+              : 'N/A\xa0\xa0\xa0\xa0\xa0'
+            }
+          </td>
+          <td>
+            <a href={event.link}>{event.title}</a>
+          </td>
+          <td class='actions'>
+            <div
+              class='delete-record'
+              role='button'
+              tabIndex={0}
+              on:click={() => handleRecordDelete(event.id)}
+            >
+              ✖︎
+            </div>
+          </td>
+        </tr>
+      {/each}
+    </tbody>
+  </table>
+</div>