@ekrist1/vulse 0.1.6-alpha.3 → 0.1.7-alpha.4

package/src/admin/components/CollectionKindIcon.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+defineProps<{ singleton?: boolean; class?: string }>()
+</script>
+
+<template>
+  <svg
+    class="h-4 w-4 shrink-0 text-zinc-500"
+    :class="$props.class"
+    viewBox="0 0 20 20"
+    fill="currentColor"
+    aria-hidden="true"
+  >
+    <path
+      v-if="singleton"
+      fill-rule="evenodd"
+      d="M10 2a1 1 0 0 1 1 1v1.323l3.954 1.582 1.599-.8a1 1 0 0 1 .894 1.79l-1.233.616 1.738 5.42A1 1 0 0 1 17 13H3a1 1 0 0 1-.948-1.316l1.738-5.42-1.233-.617a1 1 0 0 1 .894-1.788l1.599.799L9 4.323V3a1 1 0 0 1 1-1Z"
+      clip-rule="evenodd"
+    />
+    <path
+      v-else
+      fill-rule="evenodd"
+      d="M2 4.75A2.75 2.75 0 0 1 4.75 2h10.5A2.75 2.75 0 0 1 18 4.75v10.5A2.75 2.75 0 0 1 15.25 18H4.75A2.75 2.75 0 0 1 2 15.25V4.75ZM4.75 3.5c-.69 0-1.25.56-1.25 1.25v10.5c0 .69.56 1.25 1.25 1.25h10.5c.69 0 1.25-.56 1.25-1.25V4.75c0-.69-.56-1.25-1.25-1.25H4.75Z"
+      clip-rule="evenodd"
+    />
+  </svg>
+</template>

package/src/admin/components/CollectionTree.vue

@@ -0,0 +1,220 @@
+<script setup lang="ts">
+import { onMounted, ref, watch } from 'vue'
+import { adminApi } from '../client/api.js'
+import type { EntryNode } from '../../core/repos/entries.js'
+import TreeRow from './TreeRow.vue'
+
+const props = defineProps<{ handle: string; entryLocale?: string }>()
+
+const tree = ref<EntryNode[]>([])
+const loading = ref(false)
+const moving = ref(false)
+const expanded = ref<Set<string>>(new Set())
+const dragId = ref<string | null>(null)
+const error = ref<string | null>(null)
+
+async function load() {
+  loading.value = true
+  error.value = null
+  try {
+    const qs = props.entryLocale ? `?locale=${encodeURIComponent(props.entryLocale)}` : ''
+    tree.value = await adminApi.get<EntryNode[]>(`/api/vulse/entries/${props.handle}/tree${qs}`)
+    for (const root of tree.value) {
+      expanded.value.add(root.id)
+      for (const child of root.children) expanded.value.add(child.id)
+    }
+  } catch (e) {
+    error.value = e instanceof Error ? e.message : 'Could not load tree'
+  } finally {
+    loading.value = false
+  }
+}
+
+onMounted(load)
+
+watch(() => props.entryLocale, () => { void load() })
+
+function toggle(id: string) {
+  if (expanded.value.has(id)) expanded.value.delete(id)
+  else expanded.value.add(id)
+  expanded.value = new Set(expanded.value)
+}
+
+function descendantIds(node: EntryNode): Set<string> {
+  const out = new Set<string>([node.id])
+  function walk(n: EntryNode) {
+    for (const c of n.children) {
+      out.add(c.id)
+      walk(c)
+    }
+  }
+  walk(node)
+  return out
+}
+
+function findNode(nodes: EntryNode[], id: string): EntryNode | null {
+  for (const n of nodes) {
+    if (n.id === id) return n
+    const found = findNode(n.children, id)
+    if (found) return found
+  }
+  return null
+}
+
+function siblingsOf(id: string): EntryNode[] {
+  function walk(nodes: EntryNode[], parent: EntryNode[]): EntryNode[] | null {
+    for (const n of nodes) {
+      if (n.id === id) return parent
+      const found = walk(n.children, n.children)
+      if (found) return found
+    }
+    return null
+  }
+  return walk(tree.value, tree.value) ?? []
+}
+
+async function moveEntry(id: string, body: { parentId: string | null; sortOrder?: number }) {
+  await adminApi.patch(`/api/vulse/entries/${props.handle}/${id}/move`, body)
+}
+
+async function moveUp(id: string) {
+  const siblings = siblingsOf(id)
+  const idx = siblings.findIndex((s) => s.id === id)
+  if (idx <= 0) return
+  moving.value = true
+  try {
+    const node = siblings[idx]!
+    await moveEntry(id, { parentId: node.parentId, sortOrder: idx })
+    await load()
+  } finally {
+    moving.value = false
+  }
+}
+
+async function moveDown(id: string) {
+  const siblings = siblingsOf(id)
+  const idx = siblings.findIndex((s) => s.id === id)
+  if (idx < 0 || idx >= siblings.length - 1) return
+  moving.value = true
+  try {
+    const node = siblings[idx]!
+    await moveEntry(id, { parentId: node.parentId, sortOrder: idx + 2 })
+    await load()
+  } finally {
+    moving.value = false
+  }
+}
+
+async function outdent(id: string) {
+  const node = findNode(tree.value, id)
+  if (!node || node.parentId === null) return
+  const parent = findNode(tree.value, node.parentId)
+  moving.value = true
+  try {
+    await moveEntry(id, { parentId: parent?.parentId ?? null })
+    await load()
+  } finally {
+    moving.value = false
+  }
+}
+
+async function indent(id: string) {
+  const siblings = siblingsOf(id)
+  const idx = siblings.findIndex((s) => s.id === id)
+  if (idx <= 0) return
+  const newParent = siblings[idx - 1]!
+  moving.value = true
+  try {
+    await moveEntry(id, { parentId: newParent.id })
+    expanded.value.add(newParent.id)
+    expanded.value = new Set(expanded.value)
+    await load()
+  } finally {
+    moving.value = false
+  }
+}
+
+function onDragStart(event: DragEvent, id: string) {
+  dragId.value = id
+  event.dataTransfer?.setData('text/plain', id)
+  if (event.dataTransfer) event.dataTransfer.effectAllowed = 'move'
+}
+
+function onDragOver(event: DragEvent) {
+  if (dragId.value) event.preventDefault()
+}
+
+async function onDropOnto(event: DragEvent, targetId: string | null) {
+  event.preventDefault()
+  const src = dragId.value
+  dragId.value = null
+  if (!src || src === targetId) return
+  const srcNode = findNode(tree.value, src)
+  if (srcNode && targetId !== null && descendantIds(srcNode).has(targetId)) {
+    error.value = "Can't drop a page onto one of its descendants."
+    return
+  }
+  moving.value = true
+  try {
+    await moveEntry(src, { parentId: targetId })
+    if (targetId) {
+      expanded.value.add(targetId)
+      expanded.value = new Set(expanded.value)
+    }
+    await load()
+  } catch (e) {
+    error.value = e instanceof Error ? e.message : 'Move failed'
+  } finally {
+    moving.value = false
+  }
+}
+
+async function destroy(id: string, label: string) {
+  if (!confirm(`Delete "${label}" and any nested children? This cannot be undone.`)) return
+  try {
+    await adminApi.delete(`/api/vulse/entries/${props.handle}/${id}`)
+    await load()
+  } catch (e) {
+    error.value = e instanceof Error ? e.message : 'Could not delete'
+  }
+}
+</script>
+
+<template>
+  <div data-testid="collection-tree">
+    <p v-if="error" class="mb-3 rounded bg-red-50 px-3 py-2 text-sm text-red-700">{{ error }}</p>
+    <div v-if="loading" class="text-sm text-zinc-500">Loading…</div>
+    <div
+      v-else-if="tree.length === 0"
+      class="rounded border border-dashed border-zinc-300 bg-white p-6 text-sm text-zinc-500"
+    >
+      No pages yet. Use the “+ New” button to create your first entry.
+    </div>
+    <ul
+      v-else
+      class="divide-y divide-zinc-100 overflow-hidden rounded border border-zinc-200 bg-white"
+      @dragover="onDragOver"
+      @drop="(e) => onDropOnto(e, null)"
+    >
+      <TreeRow
+        v-for="node in tree"
+        :key="node.id"
+        :node="node"
+        :handle="handle"
+        :depth="0"
+        :expanded-set="expanded"
+        :dragging-id="dragId"
+        :disabled="moving"
+        @toggle="toggle"
+        @move-up="moveUp"
+        @move-down="moveDown"
+        @outdent="outdent"
+        @indent="indent"
+        @drag-start="onDragStart"
+        @drag-over="onDragOver"
+        @drop-onto="onDropOnto"
+        @destroy="destroy"
+      />
+    </ul>
+  </div>
+</template>

package/src/admin/components/EntryEditorWithPreview.vue

@@ -0,0 +1,130 @@
+<script setup lang="ts">
+import { computed, onMounted, ref } from 'vue'
+import type { FieldDescriptor } from '../client/form-from-zod.js'
+import { resolveActiveLocale } from '../client/active-locale.js'
+import { isLivePreviewEnabled } from '../client/live-preview-enabled.js'
+import EntryForm from './EntryForm.vue'
+import LivePreviewPanel from './LivePreviewPanel.vue'
+
+const PREVIEW_VISIBLE_KEY = 'vulse:live-preview-visible'
+
+const props = defineProps<{
+  collection: string
+  entryId?: string
+  fields: FieldDescriptor[]
+  initial: Record<string, unknown>
+  titleField?: string
+  draftsEnabled?: boolean
+  seoEnabled?: boolean
+  seoMapping?: import('../../core/blueprints/seo.js').SeoFieldMapping
+  tree?: boolean
+  parentId?: string | null
+  hasUnpublishedChanges?: boolean
+  previewPath: string
+  /** When false, hides live preview for this collection. Avoid prop name `enabled` (Astro/HTML coercion). */
+  livePreviewAllowed?: boolean
+  /** Active locale from the server. Avoid prop name `locale` (Astro/HTML coercion). */
+  entryLocale?: string
+  defaultLocale?: string
+  supportedLocales?: string[]
+  existingLocales?: string[]
+}>()
+
+const allowLivePreview = computed(() => isLivePreviewEnabled(props.livePreviewAllowed))
+
+const activeLocale = computed(() =>
+  resolveActiveLocale(props.supportedLocales, props.entryLocale, props.defaultLocale),
+)
+
+const previewContent = ref<Record<string, unknown>>({ ...props.initial })
+delete previewContent.value.slug
+delete previewContent.value.status
+delete previewContent.value.hasUnpublishedChanges
+
+const previewSlug = ref(String(props.initial?.slug ?? ''))
+const previewVisible = ref(true)
+
+onMounted(() => {
+  if (!allowLivePreview.value) return
+  try {
+    const stored = localStorage.getItem(PREVIEW_VISIBLE_KEY)
+    if (stored === 'false') previewVisible.value = false
+  } catch {
+    // ignore storage errors
+  }
+})
+
+function onPreviewChange(payload: { content: Record<string, unknown>; slug: string }) {
+  previewContent.value = payload.content
+  previewSlug.value = payload.slug
+}
+
+function togglePreview() {
+  previewVisible.value = !previewVisible.value
+  try {
+    localStorage.setItem(PREVIEW_VISIBLE_KEY, String(previewVisible.value))
+  } catch {
+    // ignore storage errors
+  }
+}
+</script>
+
+<template>
+  <div class="space-y-4">
+    <div
+      v-if="allowLivePreview"
+      class="flex items-center justify-end gap-2"
+    >
+      <button
+        type="button"
+        class="rounded border border-zinc-300 bg-white px-3 py-1.5 text-sm text-zinc-700 hover:bg-zinc-50"
+        @click="togglePreview"
+      >
+        {{ previewVisible ? 'Hide live preview' : 'Show live preview' }}
+      </button>
+    </div>
+
+    <p
+      v-else
+      class="rounded border border-zinc-200 bg-zinc-50 px-4 py-3 text-sm text-zinc-600"
+    >
+      Live preview is disabled for this collection. Use the Preview button above to view saved drafts in a new tab.
+    </p>
+
+    <div
+      class="grid gap-8"
+      :class="previewVisible && allowLivePreview ? 'grid-cols-1 xl:grid-cols-2' : 'grid-cols-1'"
+    >
+      <EntryForm
+        :key="`${entryId ?? 'new'}:${activeLocale}`"
+        :collection="collection"
+        :entry-id="entryId"
+        :fields="fields"
+        :initial="initial"
+        :title-field="titleField"
+        :drafts-enabled="draftsEnabled"
+        :seo-enabled="seoEnabled"
+        :seo-mapping="seoMapping"
+        :tree="tree"
+        :parent-id="parentId"
+        :has-unpublished-changes="hasUnpublishedChanges"
+        :wide="!previewVisible || !allowLivePreview"
+        :entry-locale="entryLocale"
+        :default-locale="defaultLocale"
+        :supported-locales="supportedLocales"
+        :existing-locales="existingLocales"
+        @preview-change="onPreviewChange"
+      />
+      <LivePreviewPanel
+        v-if="previewVisible && allowLivePreview"
+        :key="(entryId ?? previewSlug) + ':' + activeLocale"
+        :collection="collection"
+        :entry-id="entryId"
+        :preview-path="previewPath"
+        :slug="previewSlug"
+        :content="previewContent"
+        :entry-locale="activeLocale"
+      />
+    </div>
+  </div>
+</template>