docs: API documentation and JSON schema updates

frontend/src/App.vue

@@ -4,6 +4,7 @@ import { useRouter } from 'vue-router'
 import { useAppStore } from '@/stores/app'
 import { useThemeStore } from '@/stores/theme'
 import AppLayout from '@/components/layout/AppLayout.vue'
+import LoginView from '@/views/LoginView.vue'
 
 const app = useAppStore()
 const theme = useThemeStore()
@@ -36,7 +37,8 @@ onMounted(async () => {
   </div>
 
   <template v-else>
-    <AppLayout v-if="!app.requiresSetup" />
-    <router-view v-else />
+    <router-view v-if="app.requiresSetup" />
+    <LoginView v-else-if="!app.token" />
+    <AppLayout v-else />
   </template>
 </template>

frontend/src/components/layout/Sidebar.vue

@@ -91,8 +91,8 @@ function navigate(slug: string) {
       </button>
     </nav>
 
-    <!-- New document -->
-    <div class="p-3 border-t border-slate-200 dark:border-slate-700/60">
+    <!-- Bottom actions -->
+    <div class="p-3 border-t border-slate-200 dark:border-slate-700/60 flex flex-col gap-2">
       <router-link
         to="/doc/new"
         class="btn-primary w-full text-center text-sm py-2"
@@ -103,6 +103,18 @@ function navigate(slug: string) {
         </svg>
         New document
       </router-link>
+
+      <router-link
+        to="/admin"
+        class="w-full btn-ghost text-center text-sm py-1.5"
+        @click="emit('close')"
+      >
+        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/>
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
+        </svg>
+        Admin
+      </router-link>
     </div>
 
   </div>

frontend/src/components/wizard/SetupWizard.vue

@@ -5,6 +5,7 @@ import { gql } from '@/lib/gql'
 import { useAppStore } from '@/stores/app'
 import { useThemeStore } from '@/stores/theme'
 import ThemeToggle from '@/components/layout/ThemeToggle.vue'
+import FolderPicker from '@/components/FolderPicker.vue'
 
 const router = useRouter()
 const app = useAppStore()
@@ -143,7 +144,7 @@ async function submit() {
                 <label class="label">Storage path
                   <span class="text-xs font-normal text-slate-400 ml-1">(where .adoc files are stored)</span>
                 </label>
-                <input v-model="form.storagePath" class="input" placeholder="/data/wiki" />
+                <FolderPicker v-model="form.storagePath" placeholder="/data/wiki" />
               </div>
 
               <div>
@@ -336,3 +337,4 @@ async function submit() {
 .fade-y-enter-active, .fade-y-leave-active { transition: opacity 0.2s, transform 0.2s; }
 .fade-y-enter-from, .fade-y-leave-to { opacity: 0; transform: translateY(-4px); }
 </style>
+

frontend/src/router/index.ts

@@ -19,6 +19,11 @@ export const router = createRouter({
       name: 'setup',
       component: () => import('@/components/wizard/SetupWizard.vue'),
     },
+    {
+      path: '/admin',
+      name: 'admin',
+      component: () => import('@/views/AdminView.vue'),
+    },
     {
       path: '/:pathMatch(.*)*',
       redirect: '/',

frontend/src/stores/app.ts

@@ -5,7 +5,7 @@ import { gql } from '@/lib/gql'
 export const useAppStore = defineStore('app', () => {
   const requiresSetup = ref(false)
   const token = ref<string | null>(localStorage.getItem('token'))
-  const username = ref<string | null>(null)
+  const username = ref<string | null>(localStorage.getItem('username'))
 
   async function checkStatus() {
     try {
@@ -24,12 +24,19 @@ export const useAppStore = defineStore('app', () => {
     token.value = data.login
     username.value = user
     localStorage.setItem('token', data.login)
+    localStorage.setItem('username', user)
   }
 
-  function logout() {
+  async function logout() {
+    try {
+      await gql(`mutation { logout }`)
+    } catch {
+      // ignore
+    }
     token.value = null
     username.value = null
     localStorage.removeItem('token')
+    localStorage.removeItem('username')
   }
 
   return { requiresSetup, token, username, checkStatus, login, logout }

frontend/src/views/DocumentView.vue

@@ -1,13 +1,15 @@
 <script setup lang="ts">
 import { ref, onMounted, computed } from 'vue'
-import { useRoute } from 'vue-router'
+import { useRoute, useRouter } from 'vue-router'
 import { gql } from '@/lib/gql'
 import VisualEditor from '@/components/editor/VisualEditor.vue'
 import SourceEditor from '@/components/editor/SourceEditor.vue'
 
 const route = useRoute()
+const router = useRouter()
 const slug = computed(() => route.params.slug as string)
 
+const docPath = ref('')
 const content = ref('')
 const editorMode = ref<'visual' | 'source'>('visual')
 const loading = ref(true)
@@ -15,6 +17,13 @@ const saving = ref(false)
 const commitMsg = ref('Update document')
 
 onMounted(async () => {
+  if (slug.value === 'new') {
+    loading.value = false
+    commitMsg.value = 'Initial commit'
+    return
+  }
+  
+  docPath.value = slug.value
   try {
     const data = await gql<{ document: { content: string } }>(
       `query Doc($s: String!) { document(slug: $s) { content } }`,
@@ -27,12 +36,21 @@ onMounted(async () => {
 })
 
 async function save() {
+  const targetSlug = slug.value === 'new' ? docPath.value : slug.value
+  if (!targetSlug) {
+    alert('Please enter a document name.')
+    return
+  }
+  
   saving.value = true
   try {
-    await gql(
+    const res = await gql<{ saveDocument: { slug: string } }>(
       `mutation Save($i: SaveDocumentInput!) { saveDocument(input: $i) { slug } }`,
-      { i: { slug: slug.value, content: content.value, commitMessage: commitMsg.value } },
+      { i: { slug: targetSlug, content: content.value, commitMessage: commitMsg.value } },
     )
+    if (slug.value === 'new') {
+      router.replace(`/doc/${res.saveDocument.slug}`)
+    }
   } finally {
     saving.value = false
   }
@@ -42,21 +60,28 @@ async function save() {
 <template>
   <div class="flex flex-col h-full">
     <!-- Toolbar -->
-    <div class="flex items-center gap-2 p-3 border-b border-slate-700 bg-surface-800 flex-wrap">
+    <div class="flex items-center gap-2 p-3 border-b border-slate-700 bg-slate-100 dark:bg-slate-800 flex-wrap">
       <button
-        :class="['px-3 py-1 rounded text-sm', editorMode === 'visual' ? 'bg-blue-600' : 'bg-surface-900 hover:bg-surface-700']"
+        :class="['px-3 py-1 rounded text-sm', editorMode === 'visual' ? 'bg-blue-600 text-white' : 'bg-slate-200 dark:bg-slate-900 hover:bg-slate-300 dark:hover:bg-slate-700']"
         @click="editorMode = 'visual'"
       >Visual</button>
       <button
-        :class="['px-3 py-1 rounded text-sm', editorMode === 'source' ? 'bg-blue-600' : 'bg-surface-900 hover:bg-surface-700']"
+        :class="['px-3 py-1 rounded text-sm', editorMode === 'source' ? 'bg-blue-600 text-white' : 'bg-slate-200 dark:bg-slate-900 hover:bg-slate-300 dark:hover:bg-slate-700']"
         @click="editorMode = 'source'"
       >Source</button>
 
       <div class="flex-1" />
 
+      <input
+        v-if="slug === 'new'"
+        v-model="docPath"
+        class="bg-white dark:bg-slate-900 border border-slate-300 dark:border-slate-600 rounded px-2 py-1 text-sm w-48 text-slate-900 dark:text-slate-100"
+        placeholder="New filename (e.g. folder/doc)"
+      />
+
       <input
         v-model="commitMsg"
-        class="bg-surface-900 border border-slate-600 rounded px-2 py-1 text-sm w-64"
+        class="bg-white dark:bg-slate-900 border border-slate-300 dark:border-slate-600 rounded px-2 py-1 text-sm w-64 text-slate-900 dark:text-slate-100"
         placeholder="Commit message"
       />
       <button

frontend/src/views/HomeView.vue

@@ -34,7 +34,7 @@ onMounted(async () => {
       <li
         v-for="doc in docs"
         :key="doc.slug"
-        class="rounded-lg bg-surface-800 hover:bg-surface-700 transition"
+        class="rounded-lg bg-slate-100 dark:bg-slate-800 hover:bg-slate-200 dark:hover:bg-slate-700 transition"
       >
         <router-link
           :to="`/doc/${doc.slug}`"