rework routing

src/views/Unlock.svelte

@@ -1,26 +1,25 @@
 <script>
     import { invoke } from '@tauri-apps/api/tauri';
-    import { createEventDispatcher } from 'svelte';
 
+    import { navigate } from '../lib/routing.js';
     import { getRootCause } from '../lib/errors.js';
     import ErrorAlert from '../ui/ErrorAlert.svelte';
 
     export let appState;
 
-    const dispatch = createEventDispatcher();
 
     let errorMsg = null;
-    let alert = null;
+    let alert;
     let passphrase = '';
     async function unlock() {
         try {
             let r = await invoke('unlock', {passphrase});
             appState.credentialStatus = 'unlocked';
             if (appState.currentRequest) {
-                dispatch('navigate', {target: 'ShowApproved'});
+                navigate('ShowApproved');
             }
             else {
-                dispatch('navigate', {target: 'Home'});
+                navigate('Home');
             }
         }
         catch (e) {
@@ -40,46 +39,12 @@
     }
 </script>
 
-<style>
-    @keyframes shake {
-        0% {
-            transform: translateX(0px);
-        }
-        20% {
-            transform: translateX(10px);
-        }
-        40% {
-            transform: translateX(-10px);
-        }
-        60% {
-            transform: translateX(5px);
-        }
-        80% {
-            transform: translateX(-5px);
-        }
-        90% {
-            transform: translateX(2px);
-        }
-        95% {
-            transform: translateX(-2px);
-        }
-        100% {
-            transform: translateX(0px);
-        }
-    }
-    .shake {
-        animation-name: shake;
-        animation-play-state: running;
-        animation-duration: 0.4s;
-    }
-</style>
-
 
 <form action="#" on:submit|preventDefault="{unlock}" class="form-control space-y-4 max-w-sm m-auto p-4 h-screen justify-center">
     <h2 class="font-bold text-2xl text-center">Enter your passphrase</h2>
 
     {#if errorMsg}
-        <ErrorAlert message="{errorMsg}" bind:this="{alert}" />
+        <ErrorAlert bind:this="{alert}">{errorMsg}</ErrorAlert>
     {/if}
 
     <input autofocus name="password" type="password" placeholder="correct horse battery staple" bind:value="{passphrase}" class="input input-bordered" />