event-based routing?

src/App.svelte

@@ -1,13 +1,33 @@
 <script>
 import { emit, listen } from '@tauri-apps/api/event';
+import queue from './lib/queue.js';
 import Home from './views/Home.svelte';
 import Approve from './views/Approve.svelte';
+import ShowApproved from './views/ShowApproved.svelte';
+import ShowDenied from './views/ShowDenied.svelte';
 
-let activeComponent = Home;
+const VIEWS = {
+    Home: Home,
+    Approve: Approve,
+    ShowApproved: ShowApproved,
+    ShowDenied: ShowDenied,
+};
+
+
+let currentView = Home;
+function navigate(event) {
+    currentView = VIEWS[event.detail.target];
+}
 
 listen('credentials-request', (event) => {
-    activeComponent = Approve;
-})
+    queue.put(1)
+});
+
+let requests = queue();
 </script>
 
-<svelte:component this={activeComponent} />
+{#if currentView === Home}
+    <svelte:component this={currentView} on:navigate={navigate} {requests} />
+{:else}
+    <svelte:component this={currentView} on:navigate={navigate} />
+{/if}

src/views/Approve.svelte

@@ -2,17 +2,25 @@
     import { createEventDispatcher } from 'svelte';
 
     const dispatch = createEventDispatcher();
+
+    function approve() {
+        dispatch('navigate', {target: 'ShowApproved'});
+    }
+
+    function deny() {
+        dispatch('navigate', {target: 'ShowDenied'});
+    }
 </script>
 
 <h2 class="text-3xl text-gray-200">An application would like to access your AWS credentials.</h2>
 
-<button on:click={() => dispatch('response', 'approved')}>
+<button on:click={approve}>
     <svg class="w-32 stroke-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1">
       <path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
     </svg>
 </button>
 
-<button on:click={() => dispatch('response', 'denied')}>
+<button on:click={deny}>
     <svg class="w-32 stroke-red-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1">
         <path stroke-linecap="round" stroke-linejoin="round" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" />
     </svg>

src/views/Home.svelte

@@ -1 +1,12 @@
+<script>
+    import { createEventDispatcher } from 'svelte';
+
+    const dispatch = createEventDispatcher();
+
+    let requests;
+    let r = await requests.get();
+
+    dispatch('navigate', {target: 'Approve.svelte'});
+</script>
+
 <h1 class="text-4xl text-gray-300">Creddy</h1>

src/views/ShowApproved.svelte

@@ -0,0 +1,7 @@
+<script>
+    import { createEventDispatcher } from 'svelte';
+    const dispatch = createEventDispatcher();
+    window.setTimeout(() => dispatch('navigate', {target: 'Home'}), 3000);
+</script>
+
+<h1 class="text-4xl text-gray-300">Approved!</h1>

src/views/ShowDenied.svelte

@@ -0,0 +1,7 @@
+<script>
+    import { createEventDispatcher } from 'svelte';
+    const dispatch = createEventDispatcher();
+    window.setTimeout(() => dispatch('navigate', {target: 'Home'}), 3000);
+</script>
+
+<h1 class="text-4xl text-gray-300">Denied!</h1>