creddy/src/views/Home.svelte

<script>
    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';

    import vaultDoorSvg from '../assets/vault_door.svg?raw';


    // onMount(async () => {
    //     // will block until a request comes in
    //     let req = await $appState.pendingRequests.get();
    //     $appState.currentRequest = req;
    //     navigate('Approve');
    // });
</script>


<Nav position="fixed">
    <h2 slot="title" class="text-3xl font-bold">Creddy</h2>
</Nav>

<div class="flex flex-col h-screen items-center justify-center p-4 space-y-4">
    {#await invoke('get_session_status') then status}
        {#if status === 'locked'}

            {@html vaultDoorSvg}
            <h2 class="text-2xl font-bold">Creddy is locked</h2>
            <Link target="Unlock" hotkey="Enter" class="w-64">
                <button class="btn btn-primary w-full">Unlock</button>
            </Link>

        {:else if status === 'unlocked'}
            {@html vaultDoorSvg}
            <h2 class="text-2xl font-bold">Waiting for requests</h2>

        {:else if status === 'empty'}
            {@html vaultDoorSvg}
            <h2 class="text-2xl font-bold">No credentials found</h2>
            <Link target="EnterCredentials" hotkey="Enter" class="w-64">
                <button class="btn btn-primary w-full">Enter Credentials</button>
            </Link>
        {/if}
    {/await}
</div>