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/ComposeView.svelte

@@ -0,0 +1,129 @@
+<script>
+    export let composeEventJson = "";
+
+    import { createEventDispatcher } from "svelte";
+    const dispatch = createEventDispatcher();
+
+    function reformatJson() {
+        dispatch("reformatJson");
+    }
+
+    function signEvent() {
+        dispatch("signEvent");
+    }
+
+    function publishEvent() {
+        dispatch("publishEvent");
+    }
+</script>
+
+<div class="compose-view">
+    <div class="compose-header">
+        <button class="compose-btn reformat-btn" on:click={reformatJson}
+            >Reformat</button
+        >
+        <button class="compose-btn sign-btn" on:click={signEvent}>Sign</button>
+        <button class="compose-btn publish-btn" on:click={publishEvent}
+            >Publish</button
+        >
+    </div>
+    <div class="compose-editor">
+        <textarea
+            bind:value={composeEventJson}
+            class="compose-textarea"
+            placeholder="Enter your Nostr event JSON here..."
+            spellcheck="false"
+        ></textarea>
+    </div>
+</div>
+
+<style>
+    .compose-view {
+        position: fixed;
+        top: 3em;
+        left: 200px;
+        right: 0;
+        bottom: 0;
+        display: flex;
+        flex-direction: column;
+        background: transparent;
+    }
+
+    .compose-header {
+        display: flex;
+        gap: 0.5em;
+        padding: 0.5em;
+        background: transparent;
+    }
+
+    .compose-btn {
+        padding: 0.5em 1em;
+        border: 1px solid var(--border-color);
+        border-radius: 0.25rem;
+        background: var(--button-bg);
+        color: var(--button-text);
+        cursor: pointer;
+        font-size: 0.9rem;
+        transition: background-color 0.2s;
+    }
+
+    .compose-btn:hover {
+        background: var(--button-hover-bg);
+    }
+
+    .reformat-btn {
+        background: var(--info);
+        color: var(--text-color);
+    }
+
+    .reformat-btn:hover {
+        background: var(--info);
+        filter: brightness(0.9);
+    }
+
+    .sign-btn {
+        background: var(--warning);
+        color: var(--text-color);
+    }
+
+    .sign-btn:hover {
+        background: var(--warning);
+        filter: brightness(0.9);
+    }
+
+    .publish-btn {
+        background: var(--success);
+        color: var(--text-color);
+    }
+
+    .publish-btn:hover {
+        background: var(--success);
+        filter: brightness(0.9);
+    }
+
+    .compose-editor {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        padding: 0;
+    }
+
+    .compose-textarea {
+        flex: 1;
+        width: 100%;
+        padding: 1em;
+        border-radius: 0.5em;
+        background: var(--input-bg);
+        color: var(--input-text-color);
+        font-family: monospace;
+        font-size: 0.9em;
+        line-height: 1.4;
+        resize: vertical;
+        outline: none;
+    }
+
+    .compose-textarea:focus {
+        border-color: var(--accent-color);
+        box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
+    }
+</style>