button component

src/views/Home.svelte

@@ -1,10 +1,11 @@
 <script>
     import { onMount, createEventDispatcher } from 'svelte';
+    import { invoke } from '@tauri-apps/api/tauri';
+    import Button from '../ui/Button.svelte';
 
     export let appState;
 
     const dispatch = createEventDispatcher();
-
     onMount(async () => {
         // will block until a request comes in
         let req = await appState.pendingRequests.get();
@@ -13,6 +14,25 @@
         console.log(req);
         dispatch('navigate', {target: 'Approve'});
     });
+
+    let status = 'unknown';
+    onMount(async() => {
+        status = await invoke('get_session_status');
+    })
+
+    function blah() {
+        console.log('blah');
+    }
 </script>
 
-<h1 class="text-4xl text-gray-300">Creddy</h1>
+<h1 class="text-4xl text-gray-300">Creddy</h1>
+
+<p>Credential status: {status}</p>
+
+{#if status === 'locked'}
+    <Button on:click={() => dispatch('navigate', {target: 'Unlock'})}>Unlock</Button>
+{:else if status === 'empty'}
+    <Button on:click={() => dispatch('navigate', {target: 'EnterCredentials'})}>
+        Enter Credentials
+    </Button>
+{/if}