Implement New Views and Refactor App Structure

- Added new components: Header, Sidebar, ExportView, ImportView, EventsView, ComposeView, RecoveryView, SprocketView, and SearchResultsView to enhance the application's functionality and user experience.
- Updated App.svelte to integrate the new views and improve the overall layout.
- Refactored existing components for better organization and maintainability.
- Adjusted CSS styles for improved visual consistency across the application.
- Incremented version number to v0.19.3 to reflect the latest changes and additions.

app/web/src/Sidebar.svelte

@@ -0,0 +1,121 @@
+<script>
+    export let isDarkTheme = false;
+    export let tabs = [];
+    export let selectedTab = "";
+
+    import { createEventDispatcher } from "svelte";
+    const dispatch = createEventDispatcher();
+
+    function selectTab(tabId) {
+        dispatch("selectTab", tabId);
+    }
+
+    function closeSearchTab(tabId) {
+        dispatch("closeSearchTab", tabId);
+    }
+</script>
+
+<aside class="sidebar" class:dark-theme={isDarkTheme}>
+    <div class="sidebar-content">
+        <div class="tabs">
+            {#each tabs as tab}
+                <button
+                    class="tab"
+                    class:active={selectedTab === tab.id}
+                    on:click={() => selectTab(tab.id)}
+                >
+                    <span class="tab-icon">{tab.icon}</span>
+                    <span class="tab-label">{tab.label}</span>
+                    {#if tab.isSearchTab}
+                        <span
+                            class="tab-close-icon"
+                            on:click|stopPropagation={() =>
+                                closeSearchTab(tab.id)}
+                            on:keydown={(e) =>
+                                e.key === "Enter" && closeSearchTab(tab.id)}
+                            role="button"
+                            tabindex="0">✕</span
+                        >
+                    {/if}
+                </button>
+            {/each}
+        </div>
+    </div>
+</aside>
+
+<style>
+    .sidebar {
+        position: fixed;
+        left: 0;
+        top: 2.5em;
+        width: 200px;
+        bottom: 0;
+        background: var(--sidebar-bg);
+        overflow-y: auto;
+        z-index: 100;
+    }
+
+    .sidebar-content {
+        padding: 0;
+        background: var(--sidebar-bg);
+    }
+
+    .tabs {
+        display: flex;
+        flex-direction: column;
+        padding: 0;
+    }
+
+    .tab {
+        display: flex;
+        align-items: center;
+        padding: 0.75em;
+        background: transparent;
+        color: var(--text-color);
+        border: none;
+        cursor: pointer;
+        transition: background-color 0.2s;
+        gap: 0.75rem;
+        text-align: left;
+        width: 100%;
+    }
+
+    .tab:hover {
+        background-color: var(--bg-color);
+    }
+
+    .tab.active {
+        background-color: var(--bg-color);
+    }
+
+    .tab-icon {
+        font-size: 1.2em;
+        flex-shrink: 0;
+        width: 1.5em;
+        text-align: center;
+    }
+
+    .tab-label {
+        font-size: 0.9em;
+        font-weight: 500;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        flex: 1;
+    }
+
+    .tab-close-icon {
+        cursor: pointer;
+        transition: opacity 0.2s;
+        font-size: 0.8em;
+        margin-left: auto;
+        padding: 0.25rem;
+        flex-shrink: 0;
+    }
+
+    .tab-close-icon:hover {
+        opacity: 0.7;
+        background-color: var(--warning);
+        color: var(--text-color);
+    }
+</style>