tiny ui updates & backend lib patches

2 files changed, 92 insertions, 92 deletions

diff --git a/extension/src/entries/options/components/Identities.vue b/extension/src/entries/options/components/Identities.vue
index c86a6ac..d7fd75d 100644
--- a/extension/src/entries/options/components/Identities.vue
+++ b/extension/src/entries/options/components/Identities.vue
@@ -1,6 +1,6 @@
 <template>
     <div class="sm:px-3">
-        <div class="flex justify-end gap-2">
+        <div class="flex justify-end gap-2 text-black dark:text-white">
              <div class="">
                 <div class="">
                     <button class="rounded btn sm" @click="onNip05Download">
@@ -11,24 +11,26 @@
             </div>
             <div class="mb-2">
                 <Popover class="relative" v-slot="{ open }">
-                    <PopoverButton class="rounded btn primary sm">Create</PopoverButton>
-                    <PopoverOverlay v-if="open" class="fixed inset-0 bg-black opacity-30" />
-                    <PopoverPanel class="absolute z-10 mt-2 md:-left-12" v-slot="{ close }">
-                        <div class="p-4 bg-white border border-gray-200 rounded-md shadow-lg dark:border-dark-300 dark:bg-dark-700">
-                            <div class="text-sm w-72">
+                    <PopoverButton class="rounded btn sm">Create</PopoverButton>
+                    <PopoverOverlay v-if="open" class="fixed inset-0 bg-black opacity-50" />
+                    <PopoverPanel class="absolute z-10 mt-2 md:-right-0" v-slot="{ close }">
+                        <div class="p-3 bg-white border border-gray-200 rounded shadow-lg dark:border-dark-600 dark:bg-dark-900">
+                            <div class="text-sm w-80">
                                 <form @submit.prevent="e => onCreate(e, close)">
-                                    Create new nostr identity
-                                    <div class="mt-2">
-                                        <input class="w-full primary" type="text" name="username" placeholder="User Name"/>
+                                    <span class="text-lg dark:text-gray-200">
+                                        Create keypair
+                                    </span>
+                                    <div class="mt-4">
+                                        <input class="w-full rounded input" type="text" name="username" placeholder="username"/>
                                     </div>
-                                    <div class="mt-2">
-                                        <input class="w-full primary" type="text" name="key" placeholder="Existing key?"/>
-                                        <div class="p-1.5 text-xs text-gray-600 dark:text-gray-300">
+                                    <div class="mt-3">
+                                        <input class="w-full rounded input" type="text" name="key" placeholder="Existing secret key?"/>
+                                        <div class="p-1.5 text-xs text-gray-600 dark:text-gray-400">
                                             Optional, hexadecimal private key (64 characters)
                                         </div>
                                     </div>
                                     <div class="flex justify-end mt-2">
-                                        <button class="rounded btn sm primary" type="submit">Create</button>
+                                        <button class="rounded sm btn" type="submit">Create</button>
                                     </div>
                                 </form>
                             </div>
@@ -38,47 +40,38 @@
             </div>
         </div>
         <div v-for="key in allKeys" :key="key" class="mt-2 mb-3">
-            <div class="id-card" :class="{'selected': isSelected(key)}" @click.self="selectKey(key)">
+            <div class="" :class="{'selected': isSelected(key)}" @click.self="selectKey(key)">
                 
-                <div class="flex flex-col min-w-0" @click="selectKey(key)">
-                    <div class="py-2">
-
-                        <table class="w-full text-sm text-left border-collapse">
-                            <thead class="">
-                                <tr>
-                                    <th scope="col" class="p-2 font-medium">Nip 05</th>
-                                    <th scope="col" class="p-2 font-medium">Modified</th>
-                                    <th scope="col" class="p-2 font-medium"></th>
-                                </tr>
-                            </thead>
-                            <tbody class="border-t border-gray-100 divide-y divide-gray-100 dark:border-dark-500 dark:divide-dark-500">
-                                <tr>
-                                    <th class="p-2 font-medium">{{ key.UserName }}</th>
-                                    <td class="p-2">{{ prettyPrintDate(key) }}</td>
-                                    <td class="flex justify-end p-2 ml-auto text-sm font-medium">
-                                        <div class="ml-auto button-group">
-                                            <button class="btn sm borderless" @click="copy(key.PublicKey)">
-                                                <fa-icon icon="copy"/>
-                                            </button>
-                                            <button class="btn sm borderless" @click="editKey(key)">
-                                                <fa-icon icon="edit"/>
-                                            </button>
-                                            <button class="btn sm red borderless" @click="onDeleteKey(key)">
-                                                <fa-icon icon="trash" />
-                                            </button>
-                                        </div>
-                                    </td>
-                                </tr>
-                            </tbody>
-                        </table>
-                        
-                    </div>
-                    <div class="py-2 overflow-hidden border-gray-500 border-y dark:border-dark-500 text-ellipsis">
-                        <span class="font-semibold">pub:</span>
-                        <span class="ml-1">{{ key.PublicKey }}</span> 
+                <div class="mb-8">
+                    <div class="cursor-pointer w-fit" @click="selectKey(key)">
+                        <h3 :class="[ isSelected(key) ? 'underline' : 'dark:hover:text-gray-300 hover:text-gray-700']" class="duration-100 ease-out">
+                           {{ key.UserName }}
+                        </h3>
                     </div>
-                    <div class="py-2">
-                        <strong>Id:</strong> {{ key.Id }}
+                    <div class="mt-3">
+                        <p class="text-xs text-gray-700 truncate dark:text-gray-300">
+                            {{ key.PublicKey }}
+                        </p>
+                        <div class="flex flex-row gap-3 mt-1 text-xs text-gray-600 dark:text-gray-500">
+                            <div class="">
+                                {{ prettyPrintDate(key) }}
+                            </div>
+                             <div class="">
+                                <button class="text-red-700" @click="onDeleteKey(key)">
+                                    Delete
+                                </button>
+                            </div>
+                            <div class="">
+                                <button class="" @click="editKey(key)">
+                                    Edit
+                                </button>
+                            </div>
+                            <div class="">
+                                <button class="" @click="copy(key.PublicKey)">
+                                    Copy
+                                </button>
+                            </div>
+                        </div>
                     </div>
                 </div>
             </div>
@@ -94,7 +87,8 @@ import { ref, toRefs } from "vue";
 import {
     Popover,
     PopoverButton,
-    PopoverPanel
+    PopoverPanel,
+    PopoverOverlay
 } from '@headlessui/vue'
 import { apiCall, configureNotifier } from '@vnuge/vnlib.browser';
 import { useManagment, useStatus } from '~/bg-api/options.ts';
diff --git a/extension/src/entries/options/components/SiteSettings.vue b/extension/src/entries/options/components/SiteSettings.vue
index eafe8f3..01d3eac 100644
--- a/extension/src/entries/options/components/SiteSettings.vue
+++ b/extension/src/entries/options/components/SiteSettings.vue
@@ -8,32 +8,51 @@
                 </h3>
                 <div class="my-6">
                     <fieldset :disabled="waiting">
-                        <div class="w-full">
-                            <div class="flex flex-row justify-between">
-                                <label class="mr-2">Always on NIP-07</label>
+                        <div class="">
+                            <div class="w-full">
+                                <div class="flex flex-row w-full">
+                                    <Switch
+                                        v-model="buffer.autoInject"
+                                        :class="buffer.autoInject ? 'bg-black dark:bg-gray-50' : 'bg-gray-200 dark:bg-dark-600'"
+                                        class="relative inline-flex items-center h-5 rounded-full w-11"
+                                    >
+                                        <span class="sr-only">NIP-07</span>
+                                        <span
+                                            :class="buffer.autoInject ? 'translate-x-6' : 'translate-x-1'"
+                                            class="inline-block w-4 h-4 transition transform bg-white rounded-full dark:bg-dark-900"
+                                        />
+                                    </Switch>
+                                    <div class="my-auto ml-2 text-sm dark:text-gray-200">
+                                       Always on NIP-07
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        
+                        <div class="mt-3">
+                            <div class="flex flex-row w-fit">
                                 <Switch
-                                    v-model="buffer.autoInject"
-                                    :class="buffer.autoInject ? 'bg-primary-500 dark:bg-primary-600' : 'bg-gray-200 dark:bg-dark-600'"
-                                    class="relative inline-flex items-center h-6 ml-auto rounded-full w-11"
+                                    v-model="v$.heartbeat.$model"
+                                    :class="v$.heartbeat.$model ? 'bg-black dark:bg-white' : 'bg-gray-200 dark:bg-dark-600'"
+                                    class="relative inline-flex items-center h-5 mx-auto rounded-full w-11"
                                 >
-                                    <span class="sr-only">NIP-07</span>
+                                    <span class="sr-only">Stay logged in</span>
                                     <span
-                                        :class="buffer.autoInject ? 'translate-x-6' : 'translate-x-1'"
-                                        class="inline-block w-4 h-4 transition transform bg-white rounded-full"
+                                        :class="v$.heartbeat.$model ? 'translate-x-6' : 'translate-x-1'"
+                                        class="inline-block w-4 h-4 transition transform rounded-full bg-gray-50 dark:bg-dark-900"
                                     />
                                 </Switch>
+                                <div class="my-auto ml-2 text-sm dark:text-gray-200">
+                                   Stay logged-in
+                                </div>
                             </div>
                         </div>
-                        <p class="mt-1 text-xs">
-                            Enable auto injection of <code>window.nostr</code> support to all websites. Sites may be able to 
-                            track you if you enable this feature.
-                        </p>
                     </fieldset>
                 </div>
                 <h3 class="text-center">
                     Server settings
                 </h3>
-                <p class="text-sm">
+                <p class="text-xs dark:text-gray-400">
                     You must be careful when editing these settings as you may loose connection to your vault
                     server if you input the wrong values.
                 </p>
@@ -52,43 +71,25 @@
                 </div>
                 <fieldset :disabled="waiting || !editMode">
                     <div class="pl-1 mt-2">
-                        <div class="flex flex-row w-full">
-                            <div>
-                                <label class="mb-2">Stay logged in</label>
-                                <Switch
-                                    v-model="v$.heartbeat.$model"
-                                    :class="v$.heartbeat.$model ? 'bg-primary-500 dark:bg-primary-600' : 'bg-gray-200 dark:bg-dark-600'"
-                                    class="relative inline-flex items-center h-6 mx-auto rounded-full w-11"
-                                >
-                                    <span class="sr-only">Stay logged in</span>
-                                    <span
-                                        :class="v$.heartbeat.$model ? 'translate-x-6' : 'translate-x-1'"
-                                        class="inline-block w-4 h-4 transition transform bg-white rounded-full"
-                                    />
-                                </Switch>
-                            </div>
-                            <div class="my-auto text-xs">
-                                Enables keepalive messages to regenerate credentials when they expire
-                            </div>
-                        </div>
+                        
                     </div>
                     <div class="mt-2">
                         <label class="pl-1">BaseUrl</label>
-                        <input class="w-full primary" v-model="v$.apiUrl.$model" :class="{'error': v$.apiUrl.$invalid }" />
+                        <input class="w-full input" v-model="v$.apiUrl.$model" :class="{'error': v$.apiUrl.$invalid }" />
                         <p class="pl-1 mt-1 text-xs text-red-500">
                             * The http path to the vault server (must start with http:// or https://)
                         </p>
                     </div>
                     <div class="mt-2">
                         <label class="pl-1">Account endpoint</label>
-                        <input class="w-full primary" v-model="v$.accountBasePath.$model" :class="{ 'error': v$.accountBasePath.$invalid }" />
+                        <input class="w-full input" v-model="v$.accountBasePath.$model" :class="{ 'error': v$.accountBasePath.$invalid }" />
                         <p class="pl-1 mt-1 text-xs text-red-500">
                             * This is the path to the account server endpoint (must start with /)
                         </p>
                     </div>
                     <div class="mt-2">
                         <label class="pl-1">Nostr endpoint</label>
-                        <input class="w-full primary" v-model="v$.nostrEndpoint.$model" :class="{ 'error': v$.nostrEndpoint.$invalid }" />
+                        <input class="w-full input" v-model="v$.nostrEndpoint.$model" :class="{ 'error': v$.nostrEndpoint.$invalid }" />
                         <p class="pl-1 mt-1 text-xs text-red-500">
                             * This is the path to the Nostr plugin endpoint path (must start with /)
                         </p>
@@ -155,6 +156,7 @@ const editMode = ref(false);
 const toggleEdit = useToggle(editMode);
 
 const autoInject = computed(() => buffer.autoInject)
+const heartbeat = computed(() => buffer.heartbeat)
 
 const onSave = async () => {
 
@@ -217,16 +219,20 @@ const testConnection = async () =>{
 const loadConfig = async () => {
     const config = await getSiteConfig();
     apply(config);
+}
+
+const init = async () => {
+    await loadConfig();
 
     //Watch for changes to autoinject value and publish changes when it does
-    watchDebounced(autoInject, publishConfig, { debounce: 500 })
+    watchDebounced(autoInject, publishConfig, { debounce: 500, immediate: false })
+    watchDebounced(heartbeat, publishConfig, { debounce: 500, immediate: false })
 }
 
 //If edit mode is toggled off, reload config
 watch(editMode, v => v ? null : loadConfig());
 
-
-loadConfig();
+init();
 
 </script>