move app state to store

src/App.svelte

@@ -2,25 +2,17 @@
 import { emit, listen } from '@tauri-apps/api/event';
 import { invoke } from '@tauri-apps/api/tauri';
 
+import { appState } from './lib/state.js';
 import { currentView } from './lib/routing.js';
-import queue from './lib/queue.js';
-const VIEWS = import.meta.glob('./views/*.svelte', {eager: true});
 
 
-var appState = {
-    currentRequest: null,
-    pendingRequests: queue(),
-    credentialStatus: 'locked',
-}
-
 listen('credentials-request', (tauriEvent) => {
-    appState.pendingRequests.put(tauriEvent.payload);
+    $appState.pendingRequests.put(tauriEvent.payload);
 });
 </script>
 
 
 <svelte:component
-    this={VIEWS[`./views/${$currentView}.svelte`].default}
+    this="{$currentView}"
-    bind:appState={appState}
 />
 <!-- <svelte:component this="{VIEWS['./views/ShowApproved.svelte'].default}" bind:appState="{appState}" /> -->

src/lib/routing.js

@@ -1,8 +1,13 @@
-import { writable } from 'svelte/store';
+import { writable, derived } from 'svelte/store';
+
+const VIEWS = import.meta.glob('../views/*.svelte', {eager: true});
 
 
-export const currentView = writable('Home');
+export let currentView = writable();
 
 export function navigate(viewName) {
-    currentView.set(viewName);
+    let view = VIEWS[`../views/${viewName}.svelte`].default;
+    currentView.set(view);
 }
+
+navigate('Home');

src/lib/state.js

@@ -0,0 +1,9 @@
+import { writable } from 'svelte/store';
+
+import queue from './queue.js';
+
+export let appState = writable({
+    currentRequest: null,
+    pendingRequests: queue(),
+    credentialStatus: 'locked',
+});

src/ui/Link.svelte

@@ -1,9 +1,9 @@
 <script>
     import { onMount } from 'svelte';
 
-    import { currentView } from '../lib/routing.js';
+    import { navigate } from '../lib/routing.js';
 
-    export let target = $currentView;
+    export let target;
     export let hotkey = null;
     export let ctrl = false
     export let alt = false;
@@ -11,7 +11,7 @@
 
     function click() {
         if (typeof target === 'string') {
-            $currentView = target;
+            navigate(target);
         }
         else if (typeof target === 'function') {
             target();

src/views/Approve.svelte

@@ -2,11 +2,10 @@
     import { invoke } from '@tauri-apps/api/tauri';
 
     import { navigate } from '../lib/routing.js';
+    import { appState } from '../lib/state.js';
     import Link from '../ui/Link.svelte';
     import Icon from '../ui/Icon.svelte';
 
-    export let appState;
-
 
     async function approve() {
         let status = await invoke('get_session_status');
@@ -22,8 +21,8 @@
     }
 
     var appName = null;
-    if (appState.currentRequest.clients.length === 1) {
+    if ($appState.currentRequest.clients.length === 1) {
-        let path = appState.currentRequest.clients[0].exe;
+        let path = $appState.currentRequest.clients[0].exe;
         let m = path.match(/\/([^/]+?$)|\\([^\\]+?$)/);
         appName = m[1] || m[2];
     }
@@ -34,7 +33,7 @@
     <!-- <div class="p-4 rounded-box border-2 border-neutral-content"> -->
         <div class="space-y-1 mb-4">
             <h2 class="text-xl font-bold">{appName ? `"${appName}"` : 'An appplication'} would like to access your AWS credentials.</h2>
-            {#each appState.currentRequest.clients as client}
+            {#each $appState.currentRequest.clients as client}
                 <p>Path: {client ? client.exe : 'Unknown'}</p>
                 <p>PID: {client ? client.pid : 'Unknown'}</p>
             {/each}

src/views/EnterCredentials.svelte

@@ -3,11 +3,11 @@
     import { invoke } from '@tauri-apps/api/tauri';
     import { getRootCause } from '../lib/errors.js';
 
+    import { appState } from '../lib/state.js';
     import { navigate } from '../lib/routing.js';
     import Link from '../ui/Link.svelte';
     import ErrorAlert from '../ui/ErrorAlert.svelte';
 
-    export let appState;
 
     let errorMsg = null;
     let alert;
@@ -19,7 +19,7 @@
 
         try {
             await invoke('save_credentials', {credentials, passphrase});
-            if (appState.currentRequest) {
+            if ($appState.currentRequest) {
                 navigate('ShowApproved');
             }
             else {

src/views/Home.svelte

@@ -1,18 +1,18 @@
 <script>
-    import { onMount, createEventDispatcher } from 'svelte';
+    import { onMount } from 'svelte';
     import { invoke } from '@tauri-apps/api/tauri';
 
+    import { appState } from '../lib/state.js';
     import { navigate } from '../lib/routing.js';
     import Nav from '../ui/Nav.svelte';
     import Icon from '../ui/Icon.svelte';
+    import Link from '../ui/Link.svelte';
 
-    export let appState;
 
-    const dispatch = createEventDispatcher();
     onMount(async () => {
         // will block until a request comes in
-        let req = await appState.pendingRequests.get();
+        let req = await $appState.pendingRequests.get();
-        appState.currentRequest = req;
+        $appState.currentRequest = req;
         navigate('Approve');
     });
 

src/views/Settings.svelte

@@ -1,8 +1,6 @@
 <script>
     import Nav from '../ui/Nav.svelte';
     import Link from '../ui/Link.svelte';
-
-    export let appState;
 </script>
 
 

src/views/ShowApproved.svelte

@@ -1,28 +1,28 @@
 <script>
     import { onMount } from 'svelte';
-    import { fly, draw, fade } from 'svelte/transition';
+    import { draw, fade } from 'svelte/transition';
-    import { expoIn, expoOut, expoInOut, linear } from 'svelte/easing';
     import { emit } from '@tauri-apps/api/event';
     import { invoke } from '@tauri-apps/api/tauri';
 
+    import { appState } from '../lib/state.js';
     import { navigate } from '../lib/routing.js';
     import ErrorAlert from '../ui/ErrorAlert.svelte';
     import Icon from '../ui/Icon.svelte';
+    import Link from '../ui/Link.svelte';
     
-    export let appState;
     let success = false;
     let error = null;
 
     async function respond() {
         let response = {
-            id: appState.currentRequest.id,
+            id: $appState.currentRequest.id,
             approval: 'Approved',
         };
 
         try {
             await invoke('respond', {response});
             success = true;
-            appState.currentRequest = null;
+            $appState.currentRequest = null;
             window.setTimeout(() => navigate('Home'), 1000);
         }
         catch (e) {
@@ -44,20 +44,18 @@
     <div class="flex flex-col h-screen items-center justify-center m-auto max-w-lg">
         <ErrorAlert>
             {error}
-            <button 
+            <Link target="Home">
-                slot="buttons"
+                <button 
-                class="btn btn-sm bg-transparent hover:bg-[#cd5a5a] border border-error-content text-error-content"
+                    slot="buttons"
-                on:click="{() => navigate('Home')}"
+                    class="btn btn-sm bg-transparent hover:bg-[#cd5a5a] border border-error-content text-error-content"
-            >
+                >
-                Ok
+                    Ok
-            </button>
+                </button>
+            </Link>
         </ErrorAlert>
     </div>
 {:else if success}
-    <!-- <div on:click="{() => {console.log('redraw'); k += 1}}" in:fly="{{x: '60vw', duration: 400, easing: expoOut}}" class="flex flex-col h-screen items-center justify-center max-w-max m-auto"> -->
     <div class="flex flex-col h-screen items-center justify-center max-w-max m-auto">
-        <!-- <Icon name="check-circle" class="w-36 h-36" /> -->
-
         <svg xmlns="http://www.w3.org/2000/svg" class="w-36 h-36" fill="none" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor">
           <path in:draw="{{duration: 500}}" stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
         </svg>

src/views/ShowDenied.svelte

@@ -1,26 +1,26 @@
 <script>
     import { onMount } from 'svelte';
-    import { fade, draw } from 'svelte/transition';
+    import { draw, fade } from 'svelte/transition';
-    import { expoOut } from 'svelte/easing';
     import { emit } from '@tauri-apps/api/event';
     import { invoke } from '@tauri-apps/api/tauri';
 
+    import { appState } from '../lib/state.js';
     import { navigate } from '../lib/routing.js';
     import ErrorAlert from '../ui/ErrorAlert.svelte';
     import Icon from '../ui/Icon.svelte';
+    import Link from '../ui/Link.svelte';
     
-    export let appState;
     let error = null;
     
     async function respond() {
         let response = {
-            id: appState.currentRequest.id,
+            id: $appState.currentRequest.id,
             approval: 'Denied',
         }
 
         try {
             await invoke('respond', {response});
-            appState.currentRequest = null;
+            $appState.currentRequest = null;
             window.setTimeout(() => navigate('Home'), 1000);
         }
         catch (e) {
@@ -36,20 +36,18 @@
     <div class="flex flex-col h-screen items-center justify-center m-auto max-w-lg">
         <ErrorAlert>
             {error}
-            <button 
+            <Link target="Home">
-                slot="buttons"
+                <button 
-                class="btn btn-sm bg-transparent hover:bg-[#cd5a5a] border border-error-content text-error-content"
+                    slot="buttons"
-                on:click="{() => dispatch('navigate', {target: 'Home'})}"
+                    class="btn btn-sm bg-transparent hover:bg-[#cd5a5a] border border-error-content text-error-content"
-            >
+                >
-                Ok
+                    Ok
-            </button>
+                </button>
+            </Link>
         </ErrorAlert>
     </div>
 {:else}
-    <!-- <div in:fly="{{x: '60vw', duration: 400, easing: expoOut}}" class="flex flex-col items-center justify-center h-screen max-w-max m-auto"> -->
     <div class="flex flex-col items-center justify-center h-screen max-w-max m-auto">
-        <!-- <Icon name="x-circle" class="w-36 h-36" /> -->
-    
         <svg xmlns="http://www.w3.org/2000/svg" class="w-36 h-36" fill="none" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor">
             <path in:draw="{{duration: 500}}" stroke-linecap="round" stroke-linejoin="round" d="M9.75 9.75l4.5 4.5m0-4.5l-4.5 4.5M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
         </svg>

src/views/Unlock.svelte

@@ -1,13 +1,12 @@
 <script>
     import { invoke } from '@tauri-apps/api/tauri';
 
+    import { appState } from '../lib/state.js';
     import { navigate } from '../lib/routing.js';
     import { getRootCause } from '../lib/errors.js';
     import ErrorAlert from '../ui/ErrorAlert.svelte';
     import Link from '../ui/Link.svelte';
 
-    export let appState;
-
 
     let errorMsg = null;
     let alert;
@@ -15,8 +14,8 @@
     async function unlock() {
         try {
             let r = await invoke('unlock', {passphrase});
-            appState.credentialStatus = 'unlocked';
+            $appState.credentialStatus = 'unlocked';
-            if (appState.currentRequest) {
+            if ($appState.currentRequest) {
                 navigate('ShowApproved');
             }
             else {