From a14b78a1b957474677ac34ba1264c7fa14420edd Mon Sep 17 00:00:00 2001
From: Adam French <adam.a.french@outlook.com>
Date: Thu, 16 Apr 2026 02:51:51 +0100
Subject: [PATCH] Add CreateBookmark form with toggle in Bookmarks header

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 vue/src/views/admin/CreateBookmark.vue | 37 ++++++++++++++++++++++++++
 vue/src/views/home/Bookmarks.vue       | 20 +++++++++++---
 2 files changed, 54 insertions(+), 3 deletions(-)
 create mode 100644 vue/src/views/admin/CreateBookmark.vue

diff --git a/vue/src/views/admin/CreateBookmark.vue b/vue/src/views/admin/CreateBookmark.vue
new file mode 100644
index 0000000..08dcdd1
--- /dev/null
+++ b/vue/src/views/admin/CreateBookmark.vue
@@ -0,0 +1,37 @@
+<script setup>
+import Button from "@/components/input/Button.vue";
+import { ref } from "vue";
+import { gql } from "@/graphql";
+
+const emit = defineEmits(["done", "cancel"]);
+
+const category = ref("");
+const name = ref("");
+const link = ref("");
+
+async function submit() {
+    try {
+        await gql(
+            `mutation CreateBookmark($input: CreateBookmarkInput!) { createBookmark(input: $input) { id } }`,
+            { input: { category: category.value, name: name.value, link: link.value } },
+        );
+        category.value = "";
+        name.value = "";
+        link.value = "";
+        emit("done");
+    } catch (err) {
+        console.error(err);
+    }
+}
+</script>
+
+<template>
+    <div class="flex flex-col">
+        <h1>Create Bookmark</h1>
+        <input type="text" v-model="category" placeholder="Category" />
+        <input type="text" v-model="name" placeholder="Name" @keyup.enter="submit" />
+        <input type="text" v-model="link" placeholder="Link" @keyup.enter="submit" />
+        <Button @click="submit">Upload</Button>
+        <Button @click="emit('cancel')">Cancel</Button>
+    </div>
+</template>
diff --git a/vue/src/views/home/Bookmarks.vue b/vue/src/views/home/Bookmarks.vue
index aa68dce..44c91c6 100644
--- a/vue/src/views/home/Bookmarks.vue
+++ b/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]"