add missing files

src/components/tabs/Tab.svelte

@@ -0,0 +1,19 @@
+<script>
+  export let title;
+  export let active = false;
+  export let onTabSelected;
+</script>
+
+<div class="tab" class:active={active} on:click={onTabSelected}>
+  {title}
+</div>
+
+<style>
+  .tab {
+    padding: 10px 20px;
+    cursor: pointer;
+  }
+  .tab.active {
+    background-color: #f0f0f0;
+  }
+</style>

src/components/tabs/Tabs.svelte

@@ -0,0 +1,35 @@
+<script>
+  import { writable } from 'svelte/store';
+  import Tab from './Tab.svelte';
+
+  export let tabs = [];
+  let activeTab = tabs[0]?.title;
+  const activeContent = writable('');
+
+  $: activeContent.set(tabs.find(tab => tab.title === activeTab)?.content);
+
+  function selectTab(tabTitle) {
+    activeTab = tabTitle;
+  }
+</script>
+
+<div class="tabs">
+  {#each tabs as tab}
+    <Tab {tab.title} active={tab.title === activeTab} onTabSelected={() => selectTab(tab.title)} />
+  {/each}
+</div>
+
+<div class="tab-content">
+  <svelte:component this={$activeContent} />
+</div>
+
+<style>
+  .tabs {
+    display: flex;
+    justify-content: space-around;
+    border-bottom: 1px solid #ccc;
+  }
+  .tab-content {
+    padding: 20px;
+  }
+</style>

src/utils.js

@@ -0,0 +1,23 @@
+export function generateBackground(event) {
+  if(!event) return
+  const dTag = event.tags.find(tag => tag[0] === 'd');
+  return dTag ? generateColorFromTag(dTag[1]) : '#defaultColor';
+}
+
+export function generateColorFromTag(str) {
+  let hash = 0;
+  for (let i = 0; i < str.length; i++) {
+      const char = str.charCodeAt(i);
+      hash = ((hash << 5) - hash) + char;
+      hash &= hash; // Convert to 32bit integer
+  }
+
+  let color = '#';
+  for (let i = 0; i < 3; i++) {
+      let value = (hash >> (i * 8)) & 255;
+      // Normalize the value to get a pastel color
+      value = (value % 128) + 127; // Ensure the color is always light
+      color += ('00' + value.toString(16)).substr(-2);
+  }
+  return color;
+}