finish manage ui for ssh keys

src/ui/ErrorAlert.svelte

@@ -2,6 +2,9 @@
     import { onMount } from 'svelte';
     import { slide } from 'svelte/transition';
 
+    import { fullMessage } from '../lib/errors.js';
+
+
     let extraClasses = "";
     export {extraClasses as class};
     export let slideDuration = 150;
@@ -78,7 +81,7 @@
     <div transition:slide="{{duration: slideDuration}}" class="alert alert-error shadow-lg {animationClass} {extraClasses}">
         <svg xmlns="http://www.w3.org/2000/svg" class="stroke-current flex-shrink-0 h-6 w-6" fill="none" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
         <span>
-            <slot {error}>{error.msg || error}</slot>
+            <slot {error}>{fullMessage(error)}</slot>
         </span>
 
         {#if $$slots.buttons}

src/ui/FileInput.svelte

@@ -1,20 +1,33 @@
 <script>
     // import { listen } from '@tauri-apps/api/event';
     import { open } from '@tauri-apps/plugin-dialog';
+    import { sep } from '@tauri-apps/api/path';
+    import { createEventDispatcher } from 'svelte';
 
     import Icon from './Icon.svelte';
 
 
     export let value = {};
     export let params = {};
+    let displayValue = value?.name || '';
+
+    const dispatch = createEventDispatcher();
 
     async function chooseFile() {
         let file = await open(params);
         if (file) {
             value = file;
+            displayValue = file.name;
+            dispatch('update', value);
         }
     }
 
+    function handleInput(evt) {
+        const segments = evt.target.value.split(sep());
+        const name = segments[segments.length - 1];
+        value = {name, path: evt.target.value};
+    }
+
     // some day, figure out drag-and-drop
     // let drag = null;
     // listen('tauri://drag', e => drag = e);
@@ -32,8 +45,9 @@
     <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
+        value={displayValue}
+        on:input={handleInput}
+        on:change={() => dispatch('update', value)}
+        on:focus on:blur
     >
 </div>