Add CreateBookmark form with toggle in Bookmarks header

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

vue/src/views/home/Bookmarks.vue

@@ -1,10 +1,16 @@
 <script setup>
-import { computed } from "vue";
+import { computed, ref, defineAsyncComponent } from "vue";
 import LinkTable from "@/components/util/LinkTable.vue";
 import Header from "@/components/text/Header.vue";
 import { useHomeDataStore } from "@/stores/homeData";
+import { useAuthStore } from "@/stores/auth";
+
+const CreateBookmark = defineAsyncComponent(() => import("@/views/admin/CreateBookmark.vue"));
 
 const homeData = useHomeDataStore();
+const authStore = useAuthStore();
+
+const showCreate = ref(false);
 
 const groupedBookmarks = computed(() => {
     const groups = {};
@@ -18,8 +24,16 @@ const groupedBookmarks = computed(() => {
 
 <template>
     <div class="bookmarks-wrapper">
-        <Header class="text-left">Bookmarks</Header>
-        <div class="bookmarks-scroll">
+        <Header class="text-left">
+            <span class="flex items-center justify-between w-full">
+                {{ showCreate ? "Create Bookmark" : "Bookmarks" }}
+                <button v-if="authStore.user.admin" class="text-sm px-1" @click="showCreate = !showCreate">
+                    {{ showCreate ? "x" : "+" }}
+                </button>
+            </span>
+        </Header>
+        <CreateBookmark v-if="showCreate" class="flex-1 min-h-0 p-1" @done="showCreate = false" @cancel="showCreate = false" />
+        <div v-if="!showCreate" class="bookmarks-scroll">
             <LinkTable
                 v-for="group in groupedBookmarks"
                 :key="group[0]"