Squashed commit of the following:

commit 069f81fc3c87c437eceff756ddca7a4c1b58044d
Author: vnugent <public@vaughnnugent.com>
Date:   Sat Feb 24 22:33:34 2024 -0500

    feat: #3 setup mode, admin signup, fixes, and contianerize!

commit 97ffede9eb312fca0257afa06969d47a12703f3b
Author: vnugent <public@vaughnnugent.com>
Date:   Mon Feb 19 22:26:03 2024 -0500

    feat: new account setup and invitation links

commit 1c8f59bc0a1b25ce5013b0f1fc7fa73c0de415d6
Author: vnugent <public@vaughnnugent.com>
Date:   Thu Feb 15 16:49:59 2024 -0500

    feat: update packages, drag/drop link, and fix some button padding

1 files changed, 75 insertions, 44 deletions

diff --git a/front-end/src/components/Settings/Bookmarks.vue b/front-end/src/components/Settings/Bookmarks.vue
index 7f73921..a4ab55a 100644
--- a/front-end/src/components/Settings/Bookmarks.vue
+++ b/front-end/src/components/Settings/Bookmarks.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { apiCall, useWait } from '@vnuge/vnlib.browser';
-import { useStore, type DownloadContentType } from '../../store';
+import { useStore, type DownloadContentType, TabId } from '../../store';
 import { ref } from 'vue';
 import { Menu, MenuButton, MenuItems, MenuItem } from '@headlessui/vue'
 
@@ -36,52 +36,83 @@ const downloadBookmarks = (contentType: DownloadContentType) => {
     });
 }
 
+const bookmarkHref = `
+javascript: (function() {
+  const bookmarkUrl = window.location; 
+  let applicationUrl = '${window.location.origin}';
+  applicationUrl += '?tab=${TabId.Bookmarks}&url=' + encodeURIComponent(bookmarkUrl); 
+  applicationUrl += '&title='+document.title;
+  window.open(applicationUrl);
+})();`
+
 </script>
 <template>
-      <div class="relative w-fit">
+    <div class="flex flex-col gap-4">
+        <div class="flex-row hidden gap-2 sm:flex">
+            <div class="">
+                <a :href="bookmarkHref" @click.prevent="" class="text-sm cursor-move btn light">
+                    <span class="whitespace-nowrap">
+                        Add Bookmark 📎
+                    </span>
+                </a>
+            </div>
+            <p class="p-0.5 my-auto text-sm flex flex-row">
+                <span class="">
+                    <svg class="w-6 h-5 text-gray-800 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+                        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h14M5 12l4-4m-4 4 4 4"/>
+                    </svg>
+                </span>
+                <span>
+                    Drag this button to your bookmarks bar to quickly add a new bookmark
+                </span>
+            </p>
+        </div>
+        <div class="relative ml-auto sm:ml-0 w-fit">
             <Menu>
-            <MenuButton :disabled="waiting" class="flex items-center gap-3 btn light">
-                <div class="hidden lg:inline">Download</div>
-                <svg class="w-5 h-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none">
-                    <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 13V4M7 14H5a1 1 0 0 0-1 1v4c0 .6.4 1 1 1h14c.6 0 1-.4 1-1v-4c0-.6-.4-1-1-1h-2m-1-5-4 5-4-5m9 8h0"/>
-                </svg>
-            </MenuButton>
-                <transition
-                enter-active-class="transition duration-100 ease-out"
-                enter-from-class="transform scale-95 opacity-0"
-                enter-to-class="transform scale-100 opacity-100"
-                leave-active-class="transition duration-75 ease-out"
-                leave-from-class="transform scale-100 opacity-100"
-                leave-to-class="transform scale-95 opacity-0"
-            >
-                <MenuItems class="absolute z-10 bg-white divide-y divide-gray-100 rounded-b shadow right-2 lg:left-0 min-w-32 lg:end-0 dark:bg-gray-700">
-                    <ul class="py-2 text-sm text-gray-700 dark:text-gray-200" aria-labelledby="dropdownDefaultButton">
-                        <!-- Use the `active` state to conditionally style the active item. -->
-                        <MenuItem as="template" v-slot="{ }">
-                            <li>
-                                <button @click="downloadBookmarks('text/html')" class="block w-full px-4 py-2 text-left hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">
-                                    HTML
-                                </button>
-                            </li>
-                        </MenuItem>
-                        <MenuItem as="template" v-slot="{ }">
-                            <li>
-                                <button @click="downloadBookmarks('text/csv')" class="block w-full px-4 py-2 text-left hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">
-                                    CSV
-                                </button>
-                            </li>
-                        </MenuItem>
-                          <MenuItem as="template" v-slot="{ }">
-                            <li>
-                                <button @click="downloadBookmarks('application/json')" class="block w-full px-4 py-2 text-left hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">
-                                    JSON
-                                </button>
-                            </li>
-                        </MenuItem>
-                    </ul>
-                </MenuItems>
-            </transition>
-        </Menu>
+                <MenuButton :disabled="waiting" class="flex items-center gap-3 btn light">
+                    <div class="hidden lg:inline">Download</div>
+                    <svg class="w-5 h-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none">
+                        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 13V4M7 14H5a1 1 0 0 0-1 1v4c0 .6.4 1 1 1h14c.6 0 1-.4 1-1v-4c0-.6-.4-1-1-1h-2m-1-5-4 5-4-5m9 8h0"/>
+                    </svg>
+                </MenuButton>
+                    <transition
+                    enter-active-class="transition duration-100 ease-out"
+                    enter-from-class="transform scale-95 opacity-0"
+                    enter-to-class="transform scale-100 opacity-100"
+                    leave-active-class="transition duration-75 ease-out"
+                    leave-from-class="transform scale-100 opacity-100"
+                    leave-to-class="transform scale-95 opacity-0"
+                >
+                    <MenuItems class="absolute z-10 bg-white divide-y divide-gray-100 rounded-b shadow right-2 lg:left-0 min-w-32 lg:end-0 dark:bg-gray-700">
+                        <ul class="py-2 text-sm text-gray-700 dark:text-gray-200" aria-labelledby="dropdownDefaultButton">
+                            <!-- Use the `active` state to conditionally style the active item. -->
+                            <MenuItem as="template" v-slot="{ }">
+                                <li>
+                                    <button @click="downloadBookmarks('text/html')" class="block w-full px-4 py-2 text-left hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">
+                                        HTML
+                                    </button>
+                                </li>
+                            </MenuItem>
+                            <MenuItem as="template" v-slot="{ }">
+                                <li>
+                                    <button @click="downloadBookmarks('text/csv')" class="block w-full px-4 py-2 text-left hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">
+                                        CSV
+                                    </button>
+                                </li>
+                            </MenuItem>
+                              <MenuItem as="template" v-slot="{ }">
+                                <li>
+                                    <button @click="downloadBookmarks('application/json')" class="block w-full px-4 py-2 text-left hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">
+                                        JSON
+                                    </button>
+                                </li>
+                            </MenuItem>
+                        </ul>
+                    </MenuItems>
+                </transition>
+            </Menu>
+        </div>
     </div>
+    
     <a ref="downloadAnchor" class="hidden"></a>
 </template>
\ No newline at end of file