initial ssh key model and creation ui

src/ui/FileInput.svelte

@@ -0,0 +1,39 @@
+<script>
+    // import { listen } from '@tauri-apps/api/event';
+    import { open } from '@tauri-apps/plugin-dialog';
+
+    import Icon from './Icon.svelte';
+
+
+    export let value = {};
+    export let params = {};
+
+    async function chooseFile() {
+        let file = await open(params);
+        if (file) {
+            value = file;
+        }
+    }
+
+    // some day, figure out drag-and-drop
+    // let drag = null;
+    // listen('tauri://drag', e => drag = e);
+    // listen('tauri://drop', e => console.log(e));
+    // listen('tauri://drag-cancelled', e => console.log(e));
+    // listen('tauri://drop-over', e => console.log(e));
+
+</script>
+
+
+<div class="relative flex join has-[:focus]:outline outline-2 outline-offset-2 outline-base-content/20">
+    <button type="button" class="btn btn-neutral join-item" on:click={chooseFile}>
+        Choose file
+    </button>
+    <input 
+        type="text"
+        class="join-item grow input input-bordered border-l-0 bg-transparent focus:outline-none"
+        value={value?.name || ''}
+        on:input={e => value.path = e.target.value}
+        on:change on:input on:focus on:blur
+    >
+</div>

src/ui/PassphraseInput.svelte

@@ -19,13 +19,13 @@
 </style>
 
 
-<div class="join w-full">
+<div class="join w-full has-[:focus]:outline outline-2 outline-offset-2 outline-base-content/20">
     <input
         type={show ? 'text' : 'password'}
         {value} {placeholder} {autofocus}
         on:input={e => value = e.target.value}
         on:input on:change on:focus on:blur
-        class="input input-bordered flex-grow join-item placeholder:text-gray-500 {classes}"
+        class="input input-bordered flex-grow join-item placeholder:text-gray-500 focus:outline-none {classes}"
     />
 
     <button