qarpeo 0.0.0-alpha.10

package/dist/runtime/app/pages/cms.vue

@@ -0,0 +1,2249 @@
+<script setup lang="ts">
+import { ref, computed, watch, onMounted } from "vue"
+
+definePageMeta({
+  layout: false,
+})
+
+const route = useRoute()
+const router = useRouter()
+
+const runtimeConfig = useRuntimeConfig()
+const cmsConfig = (runtimeConfig.public as any)?.qarpeo?.cms || {}
+const apiPath = cmsConfig.apiPath || "/api/cms"
+const hasDeployTrigger = Boolean(cmsConfig.hasDeployTrigger)
+
+interface CMSCollectionItem {
+  id: string
+  name: string
+  description?: string | null
+  schemaJson?: string
+  fields?: Record<string, any>
+  source?: string
+  mode?: string
+}
+
+interface CMSEntryItem {
+  id: string
+  collectionId: string
+  slug: string
+  title: string
+  description?: string | null
+  coverImage?: string | null
+  tags?: string | null
+  order?: number
+  contentMd: string
+  status: string
+  authorId?: string | null
+  publishedAt?: number | null
+  createdAt?: number
+  updatedAt?: number
+  metadata?: Record<string, any>
+}
+
+// State
+const user = ref<any>(null)
+const collections = ref<CMSCollectionItem[]>([])
+const selectedCollectionId = computed(() => (route.query.collection as string) || "")
+const entries = ref<CMSEntryItem[]>([])
+const currentView = ref<"list" | "editor">("list")
+
+const loading = ref(false)
+const saving = ref(false)
+const syncing = ref(false)
+const exporting = ref(false)
+const deploying = ref(false)
+
+const searchQuery = ref("")
+const statusFilter = ref("all")
+const statusOptions = [
+  { label: "All Statuses", value: "all" },
+  { label: "Published", value: "published" },
+  { label: "Drafts", value: "draft" },
+  { label: "Pending Review", value: "pending_review" },
+  { label: "Scheduled", value: "scheduled" },
+  { label: "Archived", value: "archived" },
+]
+const tableColumns = [
+  { accessorKey: "title", header: "Title" },
+  { accessorKey: "slug", header: "Slug" },
+  { accessorKey: "status", header: "Status" },
+  { accessorKey: "updatedAt", header: "Updated" },
+  { id: "actions", header: "" },
+]
+const openMediaLibrary = ref(false)
+const showNewCollectionModal = ref(false)
+const showPreview = ref(false)
+const uploadProgress = ref(0)
+const mediaItems = ref<any[]>([])
+const mediaLoading = ref(false)
+const mediaSearchQuery = ref("")
+const mediaCopiedUrl = ref<string | null>(null)
+const imageTargetField = ref<string | null>(null)
+
+// Live preview state
+const previewMode = ref<"doc" | "page">("doc")
+const previewDevice = ref<"desktop" | "tablet" | "mobile">("desktop")
+const previewIframeUrl = ref("")
+const previewLoading = ref(false)
+const previewCopied = ref(false)
+
+const editorToolbarItems = [
+  [
+    { kind: "undo", icon: "i-lucide-undo", tooltip: { text: "Undo" } },
+    { kind: "redo", icon: "i-lucide-redo", tooltip: { text: "Redo" } },
+  ],
+  [
+    { kind: "heading", level: 1, icon: "i-lucide-heading-1", tooltip: { text: "Heading 1" } },
+    { kind: "heading", level: 2, icon: "i-lucide-heading-2", tooltip: { text: "Heading 2" } },
+    { kind: "heading", level: 3, icon: "i-lucide-heading-3", tooltip: { text: "Heading 3" } },
+  ],
+  [
+    { kind: "mark", mark: "bold", icon: "i-lucide-bold", tooltip: { text: "Bold" } },
+    { kind: "mark", mark: "italic", icon: "i-lucide-italic", tooltip: { text: "Italic" } },
+    {
+      kind: "mark",
+      mark: "strike",
+      icon: "i-lucide-strikethrough",
+      tooltip: { text: "Strikethrough" },
+    },
+    { kind: "mark", mark: "code", icon: "i-lucide-code", tooltip: { text: "Inline Code" } },
+  ],
+  [
+    { kind: "bulletList", icon: "i-lucide-list", tooltip: { text: "Bullet List" } },
+    { kind: "orderedList", icon: "i-lucide-list-ordered", tooltip: { text: "Numbered List" } },
+    { kind: "blockquote", icon: "i-lucide-quote", tooltip: { text: "Blockquote" } },
+    { kind: "codeBlock", icon: "i-lucide-square-code", tooltip: { text: "Code Block" } },
+    { kind: "horizontalRule", icon: "i-lucide-minus", tooltip: { text: "Divider" } },
+  ],
+  [
+    { kind: "link", icon: "i-lucide-link", tooltip: { text: "Link" } },
+    {
+      icon: "i-lucide-image",
+      tooltip: { text: "Insert Image" },
+      onClick: () => {
+        imageTargetField.value = null
+        openMediaLibrary.value = true
+      },
+    },
+  ],
+]
+
+const newCol = ref({ id: "", name: "", description: "" })
+const scheduledPublishDate = ref("")
+
+const activeEntry = ref<CMSEntryItem>({
+  id: "",
+  collectionId: "",
+  slug: "",
+  title: "",
+  description: "",
+  coverImage: "",
+  tags: "",
+  order: 0,
+  contentMd: "",
+  status: "draft",
+  metadata: {},
+})
+
+// Computeds
+const currentCollection = computed(() =>
+  collections.value.find((c) => c.id === selectedCollectionId.value),
+)
+
+const collectionNavItems = computed(() =>
+  collections.value.map((col) => ({
+    label: col.name,
+    value: col.id,
+    badge: col.source
+      ? {
+          label: col.source,
+          size: "xs" as const,
+          variant: "subtle" as const,
+          color: "neutral" as const,
+        }
+      : undefined,
+    onSelect: () => selectCollection(col.id),
+  })),
+)
+
+const collectionConfig = computed(() => {
+  return cmsConfig.collections?.[selectedCollectionId.value] || {}
+})
+
+const collectionMode = computed<string>(() => {
+  return collectionConfig.value.mode || currentCollection.value?.mode || "db"
+})
+
+const isFileLocked = computed(() => collectionMode.value === "file-lock")
+const isGitSync = computed(() => collectionMode.value === "git-sync")
+
+const activeApproval = computed(() => {
+  return collectionConfig.value.approval
+})
+
+const hasApproval = computed(() => Boolean(activeApproval.value))
+
+const isAuthor = computed(() => {
+  return (
+    activeEntry.value.authorId && user.value?.id && activeEntry.value.authorId === user.value.id
+  )
+})
+
+const canApprove = computed(() => {
+  if (!hasApproval.value) return true
+  const app = activeApproval.value
+  const u = user.value
+  if (!u) return false
+  const role = u.role || "user"
+  const isApprover = u.isAdmin || (app.roles && app.roles.includes(role))
+  if (!isApprover) return false
+  if (!app.allowSelfApproval && isAuthor.value) return false
+  return true
+})
+
+const currentCollectionFields = computed<Record<string, any>>(() => {
+  const staticFields = collectionConfig.value.fields || {}
+  const dbFields = currentCollection.value?.fields || {}
+  return { ...staticFields, ...dbFields }
+})
+
+const hasCustomFields = computed(() => Object.keys(currentCollectionFields.value).length > 0)
+
+// Methods
+async function fetchUser() {
+  try {
+    const res = await fetch("/api/auth/user")
+    if (res.ok) {
+      const data = await res.json()
+      user.value = data.user
+    }
+  } catch {}
+}
+
+async function fetchCollections() {
+  try {
+    const res = await fetch(`${apiPath}/collections`)
+    const data = await res.json()
+    collections.value = data.collections || []
+
+    const currentId = selectedCollectionId.value
+    const exists = collections.value.some((c) => c.id === currentId)
+    if (exists) {
+      fetchEntries()
+    }
+  } catch (err) {
+    console.error("Failed to load collections:", err)
+  }
+}
+
+async function fetchEntries() {
+  if (!selectedCollectionId.value) return
+  loading.value = true
+  try {
+    const params = new URLSearchParams({ limit: "50" })
+    params.set("status", statusFilter.value)
+    const res = await fetch(`${apiPath}/${selectedCollectionId.value}?${params.toString()}`)
+    const data = await res.json()
+    entries.value = data.entries || []
+  } finally {
+    loading.value = false
+  }
+}
+
+function selectCollection(id: string) {
+  const query = { ...route.query }
+  if (id) {
+    query.collection = id
+  } else {
+    delete query.collection
+  }
+  router.replace({ query })
+  currentView.value = "list"
+  if (id) {
+    fetchEntries()
+  } else {
+    entries.value = []
+  }
+}
+
+function backToList() {
+  currentView.value = "list"
+  fetchEntries()
+}
+
+watch(selectedCollectionId, (newId) => {
+  currentView.value = "list"
+  if (newId) {
+    fetchEntries()
+  } else {
+    entries.value = []
+  }
+})
+
+function createNewEntry() {
+  const meta: Record<string, any> = {}
+  for (const [k, fld] of Object.entries(currentCollectionFields.value)) {
+    if (fld.default !== undefined) meta[k] = fld.default
+  }
+  activeEntry.value = {
+    id: "",
+    collectionId: selectedCollectionId.value,
+    title: "",
+    slug: "",
+    description: "",
+    coverImage: "",
+    tags: "",
+    order: 0,
+    contentMd: "# New Entry\n\nWrite content here...",
+    status: "draft",
+    metadata: meta,
+  }
+  scheduledPublishDate.value = ""
+  currentView.value = "editor"
+}
+
+function editEntry(entry: CMSEntryItem) {
+  const meta = entry.metadata ? { ...entry.metadata } : {}
+  for (const [k, fld] of Object.entries(currentCollectionFields.value)) {
+    if (meta[k] === undefined && fld.default !== undefined) {
+      meta[k] = fld.default
+    }
+  }
+  activeEntry.value = {
+    ...entry,
+    contentMd: entry.contentMd || "",
+    metadata: meta,
+  }
+  if (entry.publishedAt && entry.status === "scheduled") {
+    const d = new Date(entry.publishedAt)
+    const pad = (n: number) => String(n).padStart(2, "0")
+    scheduledPublishDate.value = `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}T${pad(d.getHours())}:${pad(d.getMinutes())}`
+  } else {
+    scheduledPublishDate.value = ""
+  }
+  currentView.value = "editor"
+}
+
+function onTitleChange() {
+  if (!activeEntry.value.id) {
+    activeEntry.value.slug = activeEntry.value.title
+      .toLowerCase()
+      .replace(/[^a-z0-9]+/g, "-")
+      .replace(/(^-|-$)/g, "")
+  }
+}
+
+async function saveEntry(targetStatus?: string) {
+  saving.value = true
+  try {
+    const scheduledTimestamp = scheduledPublishDate.value
+      ? new Date(scheduledPublishDate.value).getTime()
+      : undefined
+
+    const payload = {
+      title: activeEntry.value.title,
+      slug: activeEntry.value.slug,
+      description: activeEntry.value.description,
+      coverImage: activeEntry.value.coverImage,
+      tags: activeEntry.value.tags,
+      order: Number(activeEntry.value.order) || 0,
+      contentMd: activeEntry.value.contentMd,
+      status: targetStatus || activeEntry.value.status,
+      publishedAt:
+        targetStatus === "scheduled"
+          ? scheduledTimestamp
+          : targetStatus === "published"
+            ? activeEntry.value.publishedAt || Date.now()
+            : null,
+      metadata: activeEntry.value.metadata || {},
+    }
+
+    let res: Response
+    if (activeEntry.value.id) {
+      res = await fetch(`${apiPath}/${selectedCollectionId.value}/${activeEntry.value.id}`, {
+        method: "PUT",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(payload),
+      })
+    } else {
+      res = await fetch(`${apiPath}/${selectedCollectionId.value}`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(payload),
+      })
+    }
+
+    if (res.ok) {
+      const data = await res.json()
+      activeEntry.value = data.entry
+      alert("Saved successfully!")
+      fetchEntries()
+    } else {
+      const err = await res.json().catch(() => ({}))
+      alert(err.message || "Failed to save")
+    }
+  } finally {
+    saving.value = false
+  }
+}
+
+async function togglePublish(entry: CMSEntryItem) {
+  const nextStatus = entry.status === "published" ? "draft" : "published"
+  const res = await fetch(`${apiPath}/${selectedCollectionId.value}/${entry.id}/publish`, {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({ status: nextStatus }),
+  })
+  if (res.ok) fetchEntries()
+}
+
+async function deleteEntry(id: string) {
+  if (!confirm("Are you sure you want to delete this entry?")) return
+  const res = await fetch(`${apiPath}/${selectedCollectionId.value}/${id}`, {
+    method: "DELETE",
+  })
+  if (res.ok) fetchEntries()
+}
+
+async function submitForReview() {
+  if (!activeEntry.value.id) {
+    await saveEntry("draft")
+  }
+  if (!activeEntry.value.id) return
+  const note = prompt("Optional note for reviewer:")
+  saving.value = true
+  try {
+    const res = await fetch(
+      `${apiPath}/${selectedCollectionId.value}/${activeEntry.value.id}/review`,
+      {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ action: "submit", note: note || undefined }),
+      },
+    )
+    if (res.ok) {
+      const data = await res.json()
+      activeEntry.value = data.entry
+      alert("Submitted for review!")
+      fetchEntries()
+    } else {
+      const err = await res.json().catch(() => ({}))
+      alert(err.message || "Failed to submit for review")
+    }
+  } finally {
+    saving.value = false
+  }
+}
+
+async function rejectReview() {
+  if (!activeEntry.value.id) return
+  const reason = prompt("Reason for requesting changes:")
+  if (reason === null) return
+  saving.value = true
+  try {
+    const res = await fetch(
+      `${apiPath}/${selectedCollectionId.value}/${activeEntry.value.id}/review`,
+      {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ action: "reject", reason: reason || undefined }),
+      },
+    )
+    if (res.ok) {
+      const data = await res.json()
+      activeEntry.value = data.entry
+      alert("Changes requested. Entry reverted to draft.")
+      fetchEntries()
+    } else {
+      const err = await res.json().catch(() => ({}))
+      alert(err.message || "Failed to reject review")
+    }
+  } finally {
+    saving.value = false
+  }
+}
+
+async function getPreviewUrl(): Promise<string | null> {
+  if (!activeEntry.value.id) return null
+  try {
+    const res = await fetch(
+      `${apiPath}/${selectedCollectionId.value}/${activeEntry.value.id}/preview-token`,
+      { method: "POST" },
+    )
+    if (res.ok) {
+      const data = await res.json()
+      const slug = activeEntry.value.slug
+      const col = selectedCollectionId.value
+      return `${window.location.origin}/${col}/${slug}?preview=true&preview_token=${encodeURIComponent(data.token)}&expires=${data.expires}`
+    }
+  } catch (e) {
+    console.error("Failed to generate preview token:", e)
+  }
+  return null
+}
+
+async function loadPagePreview() {
+  if (!activeEntry.value.id) return
+  previewLoading.value = true
+  const url = await getPreviewUrl()
+  if (url) {
+    previewIframeUrl.value = url
+  }
+  previewLoading.value = false
+}
+
+async function copyPreviewLink() {
+  if (!activeEntry.value.id) return
+  const url = await getPreviewUrl()
+  if (url) {
+    await navigator.clipboard.writeText(url)
+    previewCopied.value = true
+    setTimeout(() => {
+      previewCopied.value = false
+    }, 2500)
+  }
+}
+
+function openPreviewInNewTab() {
+  if (previewIframeUrl.value) {
+    window.open(previewIframeUrl.value, "_blank")
+  } else {
+    getPreviewUrl().then((url) => {
+      if (url) window.open(url, "_blank")
+    })
+  }
+}
+
+watch([showPreview, previewMode], async ([open, mode]) => {
+  if (open && mode === "page" && !previewIframeUrl.value) {
+    await loadPagePreview()
+  }
+})
+
+async function triggerSync() {
+  syncing.value = true
+  try {
+    const res = await fetch(`${apiPath}/sync`, { method: "POST" })
+    if (res.ok) {
+      const data = await res.json()
+      alert(`Sync completed! Added/updated: ${data.synced || 0} entries.`)
+      fetchEntries()
+    }
+  } finally {
+    syncing.value = false
+  }
+}
+
+async function triggerExport() {
+  exporting.value = true
+  try {
+    const res = await fetch(`${apiPath}/export`, { method: "POST" })
+    if (res.ok) {
+      const data = await res.json()
+      alert(`Export completed! Written: ${data.exported || 0} files.`)
+    }
+  } finally {
+    exporting.value = false
+  }
+}
+
+async function triggerDeploy() {
+  if (!confirm("Trigger a site redeploy now?")) return
+  deploying.value = true
+  try {
+    const res = await fetch(`${apiPath}/deploy`, { method: "POST" })
+    if (res.ok) {
+      const data = await res.json()
+      alert("Deploy triggered! (" + (data.triggered || []).join(", ") + ")")
+    } else {
+      const err = await res.json().catch(() => ({}))
+      alert("Deploy failed: " + (err.message || res.statusText))
+    }
+  } catch (e) {
+    alert("Deploy error: " + e)
+  } finally {
+    deploying.value = false
+  }
+}
+
+async function createCollection() {
+  if (!newCol.value.id || !newCol.value.name) return
+  const createdId = newCol.value.id
+  const res = await fetch(`${apiPath}/collections`, {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify(newCol.value),
+  })
+  if (res.ok) {
+    showNewCollectionModal.value = false
+    newCol.value = { id: "", name: "", description: "" }
+    await fetchCollections()
+    selectCollection(createdId)
+  }
+}
+
+const filteredMediaItems = computed(() => {
+  if (!mediaSearchQuery.value.trim()) return mediaItems.value
+  const q = mediaSearchQuery.value.toLowerCase()
+  return mediaItems.value.filter((item) =>
+    (item.pathname || item.key || item.url || "").toLowerCase().includes(q),
+  )
+})
+
+async function fetchMediaFiles() {
+  mediaLoading.value = true
+  try {
+    const res = await fetch("/api/storage/files")
+    if (res.ok) {
+      const data = await res.json()
+      mediaItems.value = data.files || []
+    }
+  } catch (e) {
+    console.error("Failed to load media files:", e)
+  } finally {
+    mediaLoading.value = false
+  }
+}
+
+watch(openMediaLibrary, (isOpen) => {
+  if (isOpen) {
+    fetchMediaFiles()
+  }
+})
+
+function formatBytes(bytes: number): string {
+  if (!bytes || bytes <= 0) return "0 B"
+  const k = 1024
+  const sizes = ["B", "KB", "MB", "GB"]
+  const i = Math.floor(Math.log(bytes) / Math.log(k))
+  return `${parseFloat((bytes / Math.pow(k, i)).toFixed(1))} ${sizes[i]}`
+}
+
+function copyMediaUrl(url: string) {
+  navigator.clipboard.writeText(url)
+  mediaCopiedUrl.value = url
+  setTimeout(() => {
+    if (mediaCopiedUrl.value === url) mediaCopiedUrl.value = null
+  }, 2000)
+}
+
+async function deleteMediaItem(item: any) {
+  if (
+    !confirm(`Are you sure you want to delete "${item.pathname || item.key}" from Cloudflare R2?`)
+  )
+    return
+  try {
+    const res = await fetch(`/api/storage/file/${encodeURIComponent(item.key)}`, {
+      method: "DELETE",
+    })
+    if (res.ok) {
+      mediaItems.value = mediaItems.value.filter((m) => m.key !== item.key)
+    }
+  } catch (e) {
+    console.error("Failed to delete media file:", e)
+  }
+}
+
+async function handleFileUpload(e: any) {
+  const file = e.target.files?.[0]
+  if (!file) return
+  uploadProgress.value = 10
+  const formData = new FormData()
+  formData.append("file", file)
+  try {
+    const res = await fetch("/api/storage/upload", {
+      method: "POST",
+      body: formData,
+    })
+    uploadProgress.value = 100
+    if (res.ok) {
+      const data = await res.json()
+      if (data.file) {
+        mediaItems.value.unshift(data.file)
+      } else {
+        await fetchMediaFiles()
+      }
+    }
+  } finally {
+    setTimeout(() => {
+      uploadProgress.value = 0
+    }, 1000)
+  }
+}
+
+function pickImageForCover() {
+  imageTargetField.value = "coverImage"
+  openMediaLibrary.value = true
+}
+
+function pickImageForField(fieldKey: string) {
+  imageTargetField.value = fieldKey
+  openMediaLibrary.value = true
+}
+
+function selectMediaItem(url: string) {
+  if (imageTargetField.value === "coverImage") {
+    activeEntry.value.coverImage = url
+  } else if (imageTargetField.value) {
+    if (!activeEntry.value.metadata) activeEntry.value.metadata = {}
+    activeEntry.value.metadata[imageTargetField.value] = url
+  } else {
+    insertImageMarkdown(url)
+  }
+  openMediaLibrary.value = false
+  imageTargetField.value = null
+}
+
+function insertImageMarkdown(url: string) {
+  activeEntry.value.contentMd += `\n\n![](${url})\n`
+  openMediaLibrary.value = false
+}
+
+function formatJsonField(val: any) {
+  if (val === undefined || val === null) return ""
+  if (typeof val === "string") return val
+  try {
+    return JSON.stringify(val, null, 2)
+  } catch {
+    return String(val)
+  }
+}
+
+function updateJsonField(key: string, text: string) {
+  if (!activeEntry.value.metadata) activeEntry.value.metadata = {}
+  try {
+    activeEntry.value.metadata[key] = JSON.parse(text)
+  } catch {
+    activeEntry.value.metadata[key] = text
+  }
+}
+
+const collapsedBlocks = ref<Record<string, boolean>>({})
+
+function getBlocksList(key: string | number): any[] {
+  if (!activeEntry.value.metadata) activeEntry.value.metadata = {}
+  if (!Array.isArray(activeEntry.value.metadata[key])) {
+    activeEntry.value.metadata[key] = []
+  }
+  return activeEntry.value.metadata[key]
+}
+
+function isBlockCollapsed(fieldKey: string | number, bIdx: number): boolean {
+  return Boolean(collapsedBlocks.value[`${fieldKey}:${bIdx}`])
+}
+
+function toggleBlockCollapse(fieldKey: string | number, bIdx: number) {
+  const k = `${fieldKey}:${bIdx}`
+  collapsedBlocks.value[k] = !collapsedBlocks.value[k]
+}
+
+function moveBlock(fieldKey: string | number, bIdx: number, direction: number) {
+  const list = getBlocksList(fieldKey)
+  const target = bIdx + direction
+  if (target < 0 || target >= list.length) return
+  const item = list.splice(bIdx, 1)[0]
+  list.splice(target, 0, item)
+}
+
+function duplicateBlock(fieldKey: string | number, bIdx: number) {
+  const list = getBlocksList(fieldKey)
+  const block = list[bIdx]
+  if (!block) return
+  const clone = JSON.parse(JSON.stringify(block))
+  clone._id = crypto.randomUUID().slice(0, 8)
+  list.splice(bIdx + 1, 0, clone)
+}
+
+function deleteBlock(fieldKey: string | number, bIdx: number) {
+  const list = getBlocksList(fieldKey)
+  list.splice(bIdx, 1)
+}
+
+function addBlock(fieldKey: string | number, blockType: string, blockDef?: any) {
+  const list = getBlocksList(fieldKey)
+  const newBlock: Record<string, any> = {
+    _id: crypto.randomUUID().slice(0, 8),
+    _type: blockType,
+  }
+  if (blockDef?.fields) {
+    for (const [k, f] of Object.entries<any>(blockDef.fields)) {
+      if (f.default !== undefined) {
+        newBlock[k] = f.default
+      }
+    }
+  }
+  list.push(newBlock)
+}
+
+function getBlockMenuItems(fieldKey: string | number, blocksDict: Record<string, any>) {
+  return [
+    Object.entries(blocksDict).map(([type, def]) => ({
+      label: def.label || type,
+      icon: def.icon || "i-lucide-box",
+      onSelect: () => addBlock(fieldKey, type, def),
+    })),
+  ]
+}
+
+function updateBlockJsonField(block: any, fieldKey: string, text: string) {
+  try {
+    block[fieldKey] = JSON.parse(text)
+  } catch {
+    block[fieldKey] = text
+  }
+}
+
+function copyToClipboard(text: string) {
+  navigator.clipboard.writeText(text)
+  alert("URL copied!")
+}
+
+function formatDate(ts?: number | null) {
+  if (!ts) return "—"
+  return new Date(ts).toLocaleDateString("en-US", {
+    month: "short",
+    day: "numeric",
+  })
+}
+
+function formatDateTime(ts?: number | null) {
+  if (!ts) return ""
+  return new Date(ts).toLocaleString()
+}
+
+function getStatusBadgeColor(status: string): "success" | "warning" | "info" | "error" | "neutral" {
+  if (status === "published") return "success"
+  if (status === "pending_review") return "warning"
+  if (status === "scheduled") return "info"
+  if (status === "archived") return "error"
+  return "neutral"
+}
+
+function formatStatus(status: string) {
+  if (status === "pending_review") return "Pending Review"
+  if (status === "scheduled") return "Scheduled"
+  if (status === "published") return "Published"
+  if (status === "archived") return "Archived"
+  return "Draft"
+}
+
+let searchTimeout: any
+function debouncedSearch() {
+  clearTimeout(searchTimeout)
+  searchTimeout = setTimeout(async () => {
+    if (!searchQuery.value) {
+      fetchEntries()
+      return
+    }
+    loading.value = true
+    try {
+      const res = await fetch(
+        `${apiPath}/search?q=${encodeURIComponent(searchQuery.value)}&collection=${selectedCollectionId.value}`,
+      )
+      const data = await res.json()
+      entries.value = data.results || []
+    } finally {
+      loading.value = false
+    }
+  }, 300)
+}
+
+function logout() {
+  fetch("/api/auth/logout", { method: "POST" }).then(() => {
+    window.location.reload()
+  })
+}
+
+onMounted(() => {
+  fetchUser()
+  fetchCollections()
+})
+</script>
+
+<template>
+  <UDashboardGroup>
+    <!-- Left Sidebar: Collections & Management / Entry Settings -->
+    <UDashboardSidebar resizable collapsible :ui="{ header: 'border-b border-default' }">
+      <template #header="{ collapsed }">
+        <div
+          v-if="currentView === 'editor'"
+          class="flex items-center justify-between px-2 py-1 w-full overflow-hidden"
+        >
+          <div class="flex items-center gap-2 truncate">
+            <UButton
+              size="xs"
+              color="neutral"
+              variant="ghost"
+              icon="i-lucide-arrow-left"
+              @click="backToList"
+            />
+            <span
+              v-if="!collapsed"
+              class="font-bold text-xs uppercase text-slate-300 tracking-wider truncate"
+            >
+              Entry Settings
+            </span>
+          </div>
+          <UBadge
+            v-if="!collapsed"
+            size="xs"
+            variant="subtle"
+            :color="getStatusBadgeColor(activeEntry.status)"
+          >
+            {{ formatStatus(activeEntry.status) }}
+          </UBadge>
+        </div>
+        <div v-else class="flex items-center gap-2 px-2 py-1 w-full overflow-hidden">
+          <span class="inline-block w-2.5 h-2.5 rounded-full bg-emerald-500 shrink-0"></span>
+          <span
+            v-if="!collapsed"
+            class="font-bold text-sm text-white flex items-center gap-1.5 truncate"
+          >
+            Qarpeo <UBadge size="xs" variant="subtle" color="primary">CMS</UBadge>
+          </span>
+        </div>
+      </template>
+
+      <!-- 1. Collections list (List Mode) -->
+      <div v-if="currentView === 'list'" class="space-y-1">
+        <UButton
+          label="Dashboard Overview"
+          size="xs"
+          color="neutral"
+          variant="ghost"
+          :active="!selectedCollectionId"
+          active-color="primary"
+          active-variant="subtle"
+          icon="i-lucide-layout-dashboard"
+          class="w-full justify-start mb-2"
+          @click="selectCollection('')"
+        />
+
+        <div class="flex items-center justify-between py-1 mb-1">
+          <span class="text-xs uppercase font-semibold text-slate-400 tracking-wider"
+            >Collections</span
+          >
+          <UButton
+            label="New"
+            size="xs"
+            color="primary"
+            variant="ghost"
+            icon="i-lucide-plus"
+            @click="showNewCollectionModal = true"
+          />
+        </div>
+
+        <UNavigationMenu
+          :items="collectionNavItems"
+          orientation="vertical"
+          :model-value="selectedCollectionId"
+          highlight
+          highlight-color="primary"
+          color="neutral"
+        />
+      </div>
+
+      <!-- 2. Entry Settings / Metadata Inputs (Editor Mode) -->
+      <div v-else-if="currentView === 'editor'" class="space-y-4 p-1 overflow-y-auto">
+        <UFormField label="Title" name="title">
+          <UInput v-model="activeEntry.title" class="w-full" @input="onTitleChange" />
+        </UFormField>
+
+        <UFormField label="Slug" name="slug">
+          <UInput v-model="activeEntry.slug" class="w-full font-mono text-xs" />
+        </UFormField>
+
+        <UFormField label="Description / Excerpt" name="description">
+          <UTextarea v-model="activeEntry.description" :rows="2" class="w-full" />
+        </UFormField>
+
+        <UFormField label="Cover Image" name="coverImage">
+          <div class="flex gap-2">
+            <UInput
+              v-model="activeEntry.coverImage"
+              placeholder="/api/storage/file/..."
+              class="flex-1"
+            />
+            <UButton size="xs" color="neutral" variant="outline" @click="pickImageForCover"
+              >Pick</UButton
+            >
+          </div>
+          <div v-if="activeEntry.coverImage" class="mt-2">
+            <img
+              :src="activeEntry.coverImage"
+              class="w-full h-24 object-cover rounded border border-default"
+            />
+          </div>
+        </UFormField>
+
+        <UFormField label="Tags (comma-separated)" name="tags">
+          <UInput v-model="activeEntry.tags" placeholder="news, edge, cloudflare" class="w-full" />
+        </UFormField>
+
+        <UFormField label="Order" name="order">
+          <UInput v-model.number="activeEntry.order" type="number" class="w-full" />
+        </UFormField>
+
+        <UFormField
+          label="Schedule Publish"
+          name="scheduledPublishDate"
+          :help="
+            activeEntry.publishedAt && activeEntry.status === 'scheduled'
+              ? `Scheduled for ${formatDateTime(activeEntry.publishedAt)}`
+              : undefined
+          "
+        >
+          <UInput v-model="scheduledPublishDate" type="datetime-local" class="w-full" />
+        </UFormField>
+
+        <!-- Custom Dynamic Fields -->
+        <div v-if="hasCustomFields" class="pt-3 border-t border-default space-y-3">
+          <div class="flex items-center justify-between">
+            <span class="text-xs font-semibold text-slate-300 uppercase tracking-wider"
+              >Custom Fields</span
+            >
+            <span class="text-[10px] text-slate-500 font-mono"
+              >{{ Object.keys(currentCollectionFields).length }} fields</span
+            >
+          </div>
+
+          <UFormField
+            v-for="(field, key) in currentCollectionFields"
+            :key="key"
+            :label="field.label || String(key)"
+            :description="field.description"
+            :required="field.required"
+            :name="String(key)"
+          >
+            <!-- 1. String with options -->
+            <template v-if="field.type === 'string' && field.options && field.options.length">
+              <USelect
+                v-model="activeEntry.metadata![key]"
+                :items="field.options"
+                label-key="label"
+                value-key="value"
+                placeholder="Select option..."
+                class="w-full"
+              />
+            </template>
+
+            <!-- 2. String standard -->
+            <template v-else-if="field.type === 'string'">
+              <UInput
+                v-model="activeEntry.metadata![key]"
+                :placeholder="field.default ? String(field.default) : ''"
+                class="w-full"
+              />
+            </template>
+
+            <!-- 3. Text multi-line -->
+            <template v-else-if="field.type === 'text'">
+              <UTextarea v-model="activeEntry.metadata![key]" :rows="2" class="w-full" />
+            </template>
+
+            <!-- 4. Number -->
+            <template v-else-if="field.type === 'number'">
+              <UInput v-model.number="activeEntry.metadata![key]" type="number" class="w-full" />
+            </template>
+
+            <!-- 5. Boolean -->
+            <template v-else-if="field.type === 'boolean'">
+              <div class="flex items-center gap-2 pt-1">
+                <USwitch v-model="activeEntry.metadata![key]" />
+                <span class="text-xs text-slate-300">{{
+                  activeEntry.metadata![key] ? "Enabled" : "Disabled"
+                }}</span>
+              </div>
+            </template>
+
+            <!-- 6. Date -->
+            <template v-else-if="field.type === 'date'">
+              <UInput v-model="activeEntry.metadata![key]" type="date" class="w-full" />
+            </template>
+
+            <!-- 7. Image -->
+            <template v-else-if="field.type === 'image'">
+              <div class="flex gap-2">
+                <UInput
+                  v-model="activeEntry.metadata![key]"
+                  placeholder="/api/storage/file/..."
+                  class="flex-1"
+                />
+                <UButton
+                  size="xs"
+                  color="neutral"
+                  variant="outline"
+                  @click="pickImageForField(String(key))"
+                  >Pick</UButton
+                >
+              </div>
+              <div v-if="activeEntry.metadata![key]" class="mt-1">
+                <img
+                  :src="activeEntry.metadata![key]"
+                  class="w-16 h-16 object-cover rounded border border-default bg-muted"
+                />
+              </div>
+            </template>
+
+            <!-- 8. Tags -->
+            <template v-else-if="field.type === 'tags'">
+              <UInput
+                v-model="activeEntry.metadata![key]"
+                placeholder="tag1, tag2"
+                class="w-full"
+              />
+            </template>
+
+            <!-- 9. JSON -->
+            <template v-else-if="field.type === 'json'">
+              <UTextarea
+                :model-value="formatJsonField(activeEntry.metadata![key])"
+                :rows="3"
+                class="w-full font-mono text-[11px]"
+                @update:model-value="updateJsonField(String(key), $event)"
+              />
+            </template>
+
+            <!-- 10. Blocks / Dynamic Zones (Page Builder) -->
+            <template v-else-if="field.type === 'blocks'">
+              <div class="space-y-3 pt-1">
+                <div
+                  v-for="(block, bIdx) in getBlocksList(key)"
+                  :key="block._id || bIdx"
+                  class="border border-default rounded-lg bg-muted/20 overflow-hidden"
+                >
+                  <!-- Block Header -->
+                  <div
+                    class="flex items-center justify-between px-3 py-2 bg-muted/50 border-b border-default select-none"
+                  >
+                    <div
+                      class="flex items-center gap-2 cursor-pointer flex-1"
+                      @click="toggleBlockCollapse(key, bIdx)"
+                    >
+                      <UIcon
+                        :name="
+                          isBlockCollapsed(key, bIdx)
+                            ? 'i-lucide-chevron-right'
+                            : 'i-lucide-chevron-down'
+                        "
+                        class="w-4 h-4 text-muted-foreground"
+                      />
+                      <UIcon
+                        :name="field.blocks?.[block._type]?.icon || 'i-lucide-box'"
+                        class="w-4 h-4 text-primary"
+                      />
+                      <span class="font-medium text-xs">
+                        {{ field.blocks?.[block._type]?.label || block._type }}
+                      </span>
+                      <UBadge size="xs" variant="subtle" color="neutral">
+                        #{{ bIdx + 1 }}
+                      </UBadge>
+                    </div>
+
+                    <div class="flex items-center gap-1">
+                      <UButton
+                        size="xs"
+                        color="neutral"
+                        variant="ghost"
+                        icon="i-lucide-arrow-up"
+                        :disabled="bIdx === 0"
+                        @click="moveBlock(key, bIdx, -1)"
+                      />
+                      <UButton
+                        size="xs"
+                        color="neutral"
+                        variant="ghost"
+                        icon="i-lucide-arrow-down"
+                        :disabled="bIdx === getBlocksList(key).length - 1"
+                        @click="moveBlock(key, bIdx, 1)"
+                      />
+                      <UButton
+                        size="xs"
+                        color="neutral"
+                        variant="ghost"
+                        icon="i-lucide-copy"
+                        @click="duplicateBlock(key, bIdx)"
+                      />
+                      <UButton
+                        size="xs"
+                        color="error"
+                        variant="ghost"
+                        icon="i-lucide-trash-2"
+                        @click="deleteBlock(key, bIdx)"
+                      />
+                    </div>
+                  </div>
+
+                  <!-- Block Fields -->
+                  <div v-show="!isBlockCollapsed(key, bIdx)" class="p-3 space-y-3 bg-card/30">
+                    <div
+                      v-for="(subField, subKey) in (field.blocks?.[block._type]?.fields || {})"
+                      :key="subKey"
+                      class="space-y-1"
+                    >
+                      <label class="text-[11px] font-medium text-muted-foreground">
+                        {{ subField.label || subKey }}
+                        <span v-if="subField.required" class="text-error">*</span>
+                      </label>
+
+                      <template v-if="subField.type === 'string' && subField.options?.length">
+                        <USelect
+                          v-model="block[subKey]"
+                          :items="subField.options"
+                          label-key="label"
+                          value-key="value"
+                          class="w-full"
+                        />
+                      </template>
+                      <template v-else-if="subField.type === 'string'">
+                        <UInput v-model="block[subKey]" class="w-full" />
+                      </template>
+                      <template v-else-if="subField.type === 'text'">
+                        <UTextarea v-model="block[subKey]" :rows="2" class="w-full" />
+                      </template>
+                      <template v-else-if="subField.type === 'number'">
+                        <UInput v-model.number="block[subKey]" type="number" class="w-full" />
+                      </template>
+                      <template v-else-if="subField.type === 'boolean'">
+                        <div class="flex items-center gap-2 pt-1">
+                          <USwitch v-model="block[subKey]" />
+                          <span class="text-xs text-muted-foreground">
+                            {{ block[subKey] ? "Enabled" : "Disabled" }}
+                          </span>
+                        </div>
+                      </template>
+                      <template v-else-if="subField.type === 'date'">
+                        <UInput v-model="block[subKey]" type="date" class="w-full" />
+                      </template>
+                      <template v-else-if="subField.type === 'image'">
+                        <UInput
+                          v-model="block[subKey]"
+                          placeholder="/api/storage/file/..."
+                          class="w-full"
+                        />
+                      </template>
+                      <template v-else-if="subField.type === 'tags'">
+                        <UInput v-model="block[subKey]" placeholder="tag1, tag2" class="w-full" />
+                      </template>
+                      <template v-else-if="subField.type === 'json'">
+                        <UTextarea
+                          :model-value="formatJsonField(block[subKey])"
+                          :rows="2"
+                          class="w-full font-mono text-[11px]"
+                          @update:model-value="updateBlockJsonField(block, String(subKey), $event)"
+                        />
+                      </template>
+                    </div>
+                  </div>
+                </div>
+
+                <!-- Add Block Button -->
+                <div
+                  v-if="field.blocks && Object.keys(field.blocks).length"
+                  class="flex flex-wrap items-center gap-2 pt-1"
+                >
+                  <UDropdownMenu
+                    :items="getBlockMenuItems(key, field.blocks)"
+                    :content="{ align: 'start' }"
+                  >
+                    <UButton size="xs" color="primary" variant="soft" icon="i-lucide-plus">
+                      Add Block
+                    </UButton>
+                  </UDropdownMenu>
+                  <span class="text-[11px] text-muted-foreground">
+                    {{ getBlocksList(key).length }} block(s) added
+                  </span>
+                </div>
+              </div>
+            </template>
+          </UFormField>
+        </div>
+      </div>
+
+      <template #footer="{ collapsed }">
+        <div v-if="currentView === 'editor'" class="p-2 border-t border-default w-full">
+          <UButton
+            size="xs"
+            color="neutral"
+            variant="ghost"
+            icon="i-lucide-arrow-left"
+            block
+            @click="backToList"
+          >
+            <span v-if="!collapsed">Back to Collections</span>
+          </UButton>
+        </div>
+        <div
+          v-else-if="user"
+          class="p-2 flex items-center justify-between w-full border-t border-default"
+        >
+          <div v-if="!collapsed" class="flex flex-col truncate pr-2">
+            <span class="text-xs font-medium text-white truncate">{{
+              user.name || user.email
+            }}</span>
+            <span class="text-[10px] text-slate-400 truncate">{{ user.role || "user" }}</span>
+          </div>
+          <UButton
+            size="xs"
+            color="error"
+            variant="ghost"
+            icon="i-lucide-log-out"
+            @click="logout"
+          />
+        </div>
+      </template>
+    </UDashboardSidebar>
+
+    <!-- Main Content Panel -->
+    <UDashboardPanel>
+      <template #header>
+        <UDashboardNavbar>
+          <template #title>
+            <div class="flex items-center gap-2">
+              <span class="font-semibold text-sm text-white">
+                {{
+                  currentView === "editor"
+                    ? activeEntry.title || "Untitled Entry"
+                    : currentCollection?.name || "Dashboard Overview"
+                }}
+              </span>
+              <UBadge
+                v-if="currentView === 'editor'"
+                size="sm"
+                variant="subtle"
+                :color="getStatusBadgeColor(activeEntry.status)"
+              >
+                {{ formatStatus(activeEntry.status) }}
+              </UBadge>
+              <UBadge
+                v-if="currentView === 'editor' && isGitSync"
+                label="🌿 Git-sync active"
+                size="xs"
+                color="success"
+                variant="subtle"
+              />
+              <UBadge
+                v-if="currentView === 'editor' && hasApproval"
+                label="🛡️ Approval required"
+                size="xs"
+                color="primary"
+                variant="subtle"
+              />
+            </div>
+          </template>
+
+          <template #right>
+            <div class="flex items-center space-x-2">
+              <!-- When in editor view, back button & editorial actions -->
+              <template v-if="currentView === 'editor'">
+                <UButton
+                  size="xs"
+                  color="neutral"
+                  variant="ghost"
+                  icon="i-lucide-arrow-left"
+                  @click="backToList"
+                >
+                  Back
+                </UButton>
+
+                <UButton
+                  size="xs"
+                  color="neutral"
+                  variant="outline"
+                  icon="i-lucide-link"
+                  @click="copyPreviewLink"
+                >
+                  Share Preview
+                </UButton>
+
+                <template v-if="!isFileLocked">
+                  <!-- Approval Workflow -->
+                  <template v-if="hasApproval">
+                    <UButton
+                      size="xs"
+                      color="neutral"
+                      variant="outline"
+                      :loading="saving"
+                      @click="saveEntry('draft')"
+                    >
+                      Save Draft
+                    </UButton>
+                    <UButton
+                      v-if="scheduledPublishDate && canApprove"
+                      size="xs"
+                      color="secondary"
+                      icon="i-lucide-clock"
+                      :loading="saving"
+                      @click="saveEntry('scheduled')"
+                    >
+                      Schedule
+                    </UButton>
+                    <UButton
+                      v-if="activeEntry.status === 'draft'"
+                      size="xs"
+                      color="primary"
+                      icon="i-lucide-send"
+                      :loading="saving"
+                      @click="submitForReview"
+                    >
+                      Submit for Review
+                    </UButton>
+                    <template v-else-if="activeEntry.status === 'pending_review'">
+                      <UButton
+                        v-if="canApprove"
+                        size="xs"
+                        color="error"
+                        variant="outline"
+                        :loading="saving"
+                        @click="rejectReview"
+                      >
+                        Request Changes
+                      </UButton>
+                      <UButton
+                        v-if="canApprove"
+                        size="xs"
+                        color="success"
+                        icon="i-lucide-check"
+                        :loading="saving"
+                        @click="saveEntry('published')"
+                      >
+                        Approve & Publish
+                      </UButton>
+                      <UBadge v-else color="warning" variant="subtle">
+                        ⏳ Awaiting review
+                        {{
+                          isAuthor && !activeApproval?.allowSelfApproval
+                            ? "(Self-approval disabled)"
+                            : ""
+                        }}
+                      </UBadge>
+                    </template>
+                    <template v-else-if="activeEntry.status === 'published'">
+                      <UButton
+                        size="xs"
+                        color="neutral"
+                        variant="outline"
+                        :loading="saving"
+                        @click="saveEntry('draft')"
+                      >
+                        Unpublish
+                      </UButton>
+                      <UButton
+                        v-if="canApprove"
+                        size="xs"
+                        color="success"
+                        :loading="saving"
+                        @click="saveEntry('published')"
+                      >
+                        Publish Changes
+                      </UButton>
+                    </template>
+                  </template>
+
+                  <!-- Standard Workflow -->
+                  <template v-else>
+                    <UButton
+                      size="xs"
+                      color="neutral"
+                      variant="outline"
+                      :loading="saving"
+                      @click="saveEntry('draft')"
+                    >
+                      Save Draft
+                    </UButton>
+                    <UButton
+                      v-if="scheduledPublishDate"
+                      size="xs"
+                      color="secondary"
+                      icon="i-lucide-clock"
+                      :loading="saving"
+                      @click="saveEntry('scheduled')"
+                    >
+                      Schedule
+                    </UButton>
+                    <UButton
+                      size="xs"
+                      color="success"
+                      icon="i-lucide-upload"
+                      :loading="saving"
+                      @click="saveEntry('published')"
+                    >
+                      Publish
+                    </UButton>
+                  </template>
+                </template>
+                <UBadge v-else color="warning" variant="subtle">
+                  🔒 File-locked — edit source files
+                </UBadge>
+              </template>
+
+              <!-- Global actions -->
+              <UButton
+                size="xs"
+                color="neutral"
+                variant="outline"
+                icon="i-lucide-image"
+                @click="openMediaLibrary = true"
+              >
+                Media
+              </UButton>
+
+              <UButton
+                size="xs"
+                color="neutral"
+                variant="outline"
+                icon="i-lucide-refresh-cw"
+                :loading="syncing"
+                @click="triggerSync"
+              >
+                Sync Files
+              </UButton>
+
+              <UButton
+                size="xs"
+                color="neutral"
+                variant="outline"
+                icon="i-lucide-download"
+                :loading="exporting"
+                @click="triggerExport"
+              >
+                Export
+              </UButton>
+
+              <UButton
+                v-if="hasDeployTrigger"
+                size="xs"
+                color="primary"
+                variant="solid"
+                icon="i-lucide-rocket"
+                :loading="deploying"
+                @click="triggerDeploy"
+              >
+                Deploy
+              </UButton>
+            </div>
+          </template>
+        </UDashboardNavbar>
+
+        <!-- List View Toolbar inside DashboardPanel Header (When collection is selected) -->
+        <UDashboardToolbar v-if="currentView === 'list' && selectedCollectionId">
+          <template #left>
+            <div class="flex items-center gap-3">
+              <UInput
+                v-model="searchQuery"
+                placeholder="Search entries..."
+                class="w-64"
+                @input="debouncedSearch"
+              />
+              <USelect
+                v-model="statusFilter"
+                :items="statusOptions"
+                class="w-40"
+                @update:model-value="fetchEntries"
+              />
+            </div>
+          </template>
+
+          <template #right>
+            <div class="flex items-center gap-2">
+              <UButton
+                v-if="!isFileLocked"
+                color="primary"
+                icon="i-lucide-plus"
+                size="sm"
+                @click="createNewEntry"
+              >
+                New Entry
+              </UButton>
+              <UBadge v-else color="warning" variant="subtle" class="gap-1.5 py-1 px-2.5">
+                🔒 File-locked — read-only
+              </UBadge>
+            </div>
+          </template>
+        </UDashboardToolbar>
+      </template>
+
+      <template #body>
+        <!-- 0. DASHBOARD OVERVIEW (When no collection is selected in URL) -->
+        <div v-if="currentView === 'list' && !selectedCollectionId">
+          <!-- Top Row: Metric Cards (flex-1) + Quick Actions sidebar -->
+          <div class="flex flex-col md:flex-row gap-6 items-start">
+            <!-- Left: Metric Cards -->
+            <div class="flex-1 min-w-0">
+              <ProseCardGroup>
+                <ProseCard
+                  title="Total Collections"
+                  :description="collections.length"
+                  icon="i-lucide-folder"
+                  color="primary"
+                  to="https://nuxt.lemonsqueezy.com"
+                  target="_blank"
+                />
+                <ProseCard
+                  title="Media Storage"
+                  description="Cloudflare R2"
+                  icon="i-lucide-image"
+                  color="primary"
+                  to="https://nuxt.lemonsqueezy.com"
+                  target="_blank"
+                />
+                <ProseCard
+                  title="CMS Mode"
+                  description="Edge + Local DB"
+                  icon="i-lucide-database"
+                  color="primary"
+                  to="https://nuxt.lemonsqueezy.com"
+                  target="_blank"
+                />
+                <ProseCard
+                  title="Deploy Trigger"
+                  :description="hasDeployTrigger ? 'Active' : 'Not configured'"
+                  icon="i-lucide-rocket"
+                  color="primary"
+                  to="https://nuxt.lemonsqueezy.com"
+                  target="_blank"
+                />
+              </ProseCardGroup>
+            </div>
+
+            <!-- Right: Quick Actions Box List -->
+            <div class="w-full md:w-64 lg:w-72 shrink-0 space-y-4">
+              <UCard>
+                <template #header>
+                  <div class="flex items-center justify-between">
+                    <span class="text-xs font-semibold text-white uppercase tracking-wider"
+                      >Quick Actions</span
+                    >
+                    <UIcon name="i-lucide-zap" class="w-3.5 h-3.5 text-primary" />
+                  </div>
+                </template>
+
+                <UButton
+                  size="sm"
+                  color="neutral"
+                  variant="ghost"
+                  icon="i-lucide-image"
+                  block
+                  class="justify-start text-xs py-2"
+                  @click="openMediaLibrary = true"
+                >
+                  <div class="text-left flex-1 min-w-0">
+                    <p class="font-medium text-white truncate">Media Library</p>
+                    <p class="text-[10px] text-muted truncate">Upload & browse files</p>
+                  </div>
+                </UButton>
+
+                <UButton
+                  size="sm"
+                  color="neutral"
+                  variant="ghost"
+                  icon="i-lucide-refresh-cw"
+                  block
+                  class="justify-start text-xs py-2"
+                  :loading="syncing"
+                  @click="triggerSync"
+                >
+                  <div class="text-left flex-1 min-w-0">
+                    <p class="font-medium text-white truncate">Sync Files</p>
+                    <p class="text-[10px] text-muted truncate">Sync markdown content</p>
+                  </div>
+                </UButton>
+
+                <UButton
+                  size="sm"
+                  color="neutral"
+                  variant="ghost"
+                  icon="i-lucide-download"
+                  block
+                  class="justify-start text-xs py-2"
+                  :loading="exporting"
+                  @click="triggerExport"
+                >
+                  <div class="text-left flex-1 min-w-0">
+                    <p class="font-medium text-white truncate">Export Content</p>
+                    <p class="text-[10px] text-muted truncate">Download backup archive</p>
+                  </div>
+                </UButton>
+
+                <UButton
+                  v-if="hasDeployTrigger"
+                  size="sm"
+                  color="neutral"
+                  variant="ghost"
+                  icon="i-lucide-rocket"
+                  block
+                  class="justify-start text-xs py-2"
+                  :loading="deploying"
+                  @click="triggerDeploy"
+                >
+                  <div class="text-left flex-1 min-w-0">
+                    <p class="font-medium text-white truncate">Deploy Site</p>
+                    <p class="text-[10px] text-muted truncate">Trigger remote build</p>
+                  </div>
+                </UButton>
+              </UCard>
+            </div>
+          </div>
+
+          <!-- Collections Section (full width below) -->
+          <div class="space-y-4">
+            <UDashboardToolbar>
+              <div>
+                <h3 class="font-semibold text-sm text-white">Content Collections</h3>
+                <p class="text-xs text-muted">Choose a collection to manage or create entries</p>
+              </div>
+              <UButton
+                label="New Collection"
+                icon="i-lucide-plus"
+                @click="showNewCollectionModal = true"
+              />
+            </UDashboardToolbar>
+            <UBlogPosts class="grid grid-cols-1 sm:grid-cols-2 gap-4">
+              <UBlogPost
+                v-for="col in collections"
+                :key="col.id"
+                :description="col.description || 'No description provided'"
+                :title="col.name"
+                :badge="{
+                  label: `${col.source || 'db'} | ${col.mode === 'file-lock' ? '🔒 File-locked' : col.mode === 'git-sync' ? '🌿 Git-sync' : '💾 Database'}`,
+                }"
+                :to="{ query: { ...route.query, collection: col.id } }"
+              />
+            </UBlogPosts>
+          </div>
+        </div>
+
+        <!-- 1. ENTRIES LIST VIEW (When a collection is selected in URL) -->
+        <div v-else-if="currentView === 'list' && selectedCollectionId">
+          <div class="flex-1 overflow-auto p-4 min-w-0">
+            <UTable :data="entries" :columns="tableColumns" :loading="loading" class="w-full">
+              <template #empty>
+                <div class="text-center py-12 text-slate-500 text-sm">
+                  No entries found. Click "+ New Entry" to create one.
+                </div>
+              </template>
+
+              <template #title-cell="{ row }">
+                <span
+                  class="font-medium text-white cursor-pointer hover:text-indigo-400"
+                  @click="editEntry(row.original)"
+                >
+                  {{ row.original.title }}
+                </span>
+              </template>
+
+              <template #slug-cell="{ row }">
+                <span class="font-mono text-xs text-slate-400">
+                  {{ row.original.slug }}
+                </span>
+              </template>
+
+              <template #status-cell="{ row }">
+                <UBadge
+                  size="xs"
+                  variant="subtle"
+                  :color="getStatusBadgeColor(row.original.status)"
+                >
+                  {{ formatStatus(row.original.status) }}
+                </UBadge>
+              </template>
+
+              <template #updatedAt-cell="{ row }">
+                <span class="text-xs text-slate-500">
+                  {{ formatDate(row.original.updatedAt) }}
+                </span>
+              </template>
+
+              <template #actions-cell="{ row }">
+                <div class="flex items-center justify-end space-x-2">
+                  <UButton
+                    size="xs"
+                    color="neutral"
+                    variant="ghost"
+                    @click="editEntry(row.original)"
+                  >
+                    Edit
+                  </UButton>
+                  <UButton
+                    v-if="!isFileLocked"
+                    :label="row.original.status === 'published' ? 'Unpublish' : 'Publish'"
+                    size="xs"
+                    :color="row.original.status === 'published' ? 'warning' : 'success'"
+                    variant="ghost"
+                    @click="togglePublish(row.original)"
+                  />
+                  <UButton
+                    v-if="!isFileLocked"
+                    label="Delete"
+                    size="xs"
+                    color="error"
+                    variant="ghost"
+                    @click="deleteEntry(row.original.id)"
+                  />
+                </div>
+              </template>
+            </UTable>
+          </div>
+        </div>
+
+        <!-- 2. EDITOR VIEW -->
+        <div v-else-if="currentView === 'editor'">
+          <!-- Main UEditor Column -->
+          <div class="flex-1 flex flex-col overflow-hidden min-w-0">
+            <UEditor
+              v-model="activeEntry.contentMd"
+              content-type="markdown"
+              placeholder="Start writing your markdown content here..."
+              class="flex-1 flex flex-col overflow-hidden w-full min-w-0"
+              :ui="{
+                root: 'flex-1 flex flex-col overflow-hidden',
+                content: 'flex-1 overflow-y-auto p-4 sm:p-6 min-w-0',
+              }"
+            >
+              <template #default="{ editor }">
+                <div
+                  class="border-b border-default bg-default/80 px-3 py-1.5 flex items-center justify-between shrink-0 flex-wrap gap-2"
+                >
+                  <UEditorToolbar :editor="editor" :items="editorToolbarItems" />
+                  <div class="flex items-center gap-2">
+                    <UButton
+                      size="xs"
+                      :color="showPreview ? 'primary' : 'neutral'"
+                      :variant="showPreview ? 'subtle' : 'ghost'"
+                      icon="i-lucide-eye"
+                      @click="showPreview = !showPreview"
+                    >
+                      {{ showPreview ? "Hide Preview" : "Preview" }}
+                    </UButton>
+                  </div>
+                </div>
+              </template>
+            </UEditor>
+          </div>
+
+          <!-- Optional Live Preview Pane (Toggleable) -->
+          <div
+            v-if="showPreview"
+            class="w-1/2 border-l border-default flex flex-col overflow-hidden bg-muted/20 shrink-0"
+          >
+            <!-- Header Bar -->
+            <div
+              class="h-10 bg-muted/40 border-b border-default px-3 flex items-center justify-between text-xs shrink-0 gap-2"
+            >
+              <div class="flex items-center gap-1.5">
+                <div
+                  class="inline-flex rounded-md p-0.5 bg-muted/60 border border-default text-[11px]"
+                >
+                  <button
+                    type="button"
+                    class="px-2 py-0.5 rounded font-medium transition-colors"
+                    :class="
+                      previewMode === 'doc'
+                        ? 'bg-background text-foreground shadow-xs'
+                        : 'text-muted hover:text-foreground'
+                    "
+                    @click="previewMode = 'doc'"
+                  >
+                    Document
+                  </button>
+                  <button
+                    type="button"
+                    class="px-2 py-0.5 rounded font-medium transition-colors"
+                    :class="
+                      previewMode === 'page'
+                        ? 'bg-background text-foreground shadow-xs'
+                        : 'text-muted hover:text-foreground'
+                    "
+                    @click="previewMode = 'page'"
+                  >
+                    Live Page
+                  </button>
+                </div>
+
+                <!-- Device switcher for iframe -->
+                <div v-if="previewMode === 'page'" class="flex items-center gap-0.5 ml-2">
+                  <UButton
+                    size="xs"
+                    :color="previewDevice === 'desktop' ? 'primary' : 'neutral'"
+                    :variant="previewDevice === 'desktop' ? 'subtle' : 'ghost'"
+                    icon="i-lucide-monitor"
+                    title="Desktop (100%)"
+                    @click="previewDevice = 'desktop'"
+                  />
+                  <UButton
+                    size="xs"
+                    :color="previewDevice === 'tablet' ? 'primary' : 'neutral'"
+                    :variant="previewDevice === 'tablet' ? 'subtle' : 'ghost'"
+                    icon="i-lucide-tablet"
+                    title="Tablet (768px)"
+                    @click="previewDevice = 'tablet'"
+                  />
+                  <UButton
+                    size="xs"
+                    :color="previewDevice === 'mobile' ? 'primary' : 'neutral'"
+                    :variant="previewDevice === 'mobile' ? 'subtle' : 'ghost'"
+                    icon="i-lucide-smartphone"
+                    title="Mobile (375px)"
+                    @click="previewDevice = 'mobile'"
+                  />
+                </div>
+              </div>
+
+              <div class="flex items-center gap-1">
+                <UButton
+                  v-if="previewMode === 'page'"
+                  size="xs"
+                  color="neutral"
+                  variant="ghost"
+                  icon="i-lucide-refresh-cw"
+                  :loading="previewLoading"
+                  title="Reload preview"
+                  @click="loadPagePreview"
+                />
+                <UButton
+                  size="xs"
+                  :color="previewCopied ? 'success' : 'neutral'"
+                  :variant="previewCopied ? 'subtle' : 'ghost'"
+                  :icon="previewCopied ? 'i-lucide-check' : 'i-lucide-copy'"
+                  title="Copy preview link"
+                  @click="copyPreviewLink"
+                >
+                  {{ previewCopied ? "Copied!" : "Share" }}
+                </UButton>
+                <UButton
+                  size="xs"
+                  color="neutral"
+                  variant="ghost"
+                  icon="i-lucide-external-link"
+                  title="Open preview in new tab"
+                  @click="openPreviewInNewTab"
+                />
+                <UButton
+                  size="xs"
+                  color="neutral"
+                  variant="ghost"
+                  icon="i-lucide-x"
+                  @click="showPreview = false"
+                />
+              </div>
+            </div>
+
+            <!-- Preview Body: Document Mode -->
+            <div v-if="previewMode === 'doc'" class="flex-1 p-6 overflow-y-auto space-y-4">
+              <!-- Cover image header if present -->
+              <div
+                v-if="activeEntry.coverImage"
+                class="rounded-lg overflow-hidden border border-default bg-muted max-h-56"
+              >
+                <img
+                  :src="activeEntry.coverImage"
+                  class="w-full h-full object-cover"
+                  alt="Cover preview"
+                />
+              </div>
+
+              <!-- Header info -->
+              <div class="space-y-1">
+                <div class="flex items-center gap-2 flex-wrap">
+                  <UBadge
+                    size="xs"
+                    variant="subtle"
+                    :color="getStatusBadgeColor(activeEntry.status)"
+                  >
+                    {{ formatStatus(activeEntry.status) }}
+                  </UBadge>
+                  <span class="text-xs text-muted font-mono"
+                    >/{{ selectedCollectionId }}/{{ activeEntry.slug }}</span
+                  >
+                  <span v-if="activeEntry.tags" class="text-xs text-muted"
+                    >#{{ activeEntry.tags }}</span
+                  >
+                </div>
+                <h1 class="text-2xl font-bold tracking-tight text-foreground">
+                  {{ activeEntry.title || "Untitled Entry" }}
+                </h1>
+                <p v-if="activeEntry.description" class="text-sm text-muted">
+                  {{ activeEntry.description }}
+                </p>
+              </div>
+
+              <hr class="border-default" />
+
+              <!-- Rendered Markdown Content -->
+              <ContentRenderer
+                :value="activeEntry.contentMd"
+                class="prose dark:prose-invert max-w-none text-sm"
+              />
+            </div>
+
+            <!-- Preview Body: Page Mode (Iframe) -->
+            <div
+              v-else
+              class="flex-1 flex flex-col items-center justify-center overflow-hidden bg-muted/30 p-2 sm:p-4"
+            >
+              <div
+                class="h-full flex flex-col bg-background rounded-lg border border-default shadow-md overflow-hidden transition-all duration-200"
+                :class="{
+                  'w-full': previewDevice === 'desktop',
+                  'w-[768px] max-w-full': previewDevice === 'tablet',
+                  'w-[375px] max-w-full': previewDevice === 'mobile',
+                }"
+              >
+                <!-- Simulated browser mini bar -->
+                <div
+                  class="h-7 bg-muted/60 border-b border-default px-2.5 flex items-center justify-between text-[11px] text-muted shrink-0"
+                >
+                  <div class="flex items-center gap-1.5">
+                    <span class="w-2 h-2 rounded-full bg-red-400 inline-block"></span>
+                    <span class="w-2 h-2 rounded-full bg-amber-400 inline-block"></span>
+                    <span class="w-2 h-2 rounded-full bg-emerald-400 inline-block"></span>
+                  </div>
+                  <span class="font-mono text-[10px] text-muted truncate max-w-[260px]">{{
+                    previewIframeUrl || "Loading preview..."
+                  }}</span>
+                  <span class="text-[10px] text-muted capitalize">{{ previewDevice }}</span>
+                </div>
+
+                <div
+                  v-if="previewLoading"
+                  class="flex-1 flex items-center justify-center p-6 text-xs text-muted"
+                >
+                  <UIcon name="i-lucide-loader-2" class="w-5 h-5 animate-spin mr-2" />
+                  Generating preview token & loading live page...
+                </div>
+                <iframe
+                  v-else-if="previewIframeUrl"
+                  :src="previewIframeUrl"
+                  class="flex-1 w-full h-full border-0 bg-background"
+                />
+                <div
+                  v-else
+                  class="flex-1 flex flex-col items-center justify-center p-6 text-center text-xs text-muted space-y-2"
+                >
+                  <UIcon name="i-lucide-file-question" class="w-8 h-8 text-muted" />
+                  <p>Save entry first or click reload to generate live preview.</p>
+                  <UButton
+                    size="xs"
+                    color="primary"
+                    label="Generate Preview"
+                    @click="loadPagePreview"
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </template>
+    </UDashboardPanel>
+
+    <!-- Modals (outside panel, inside group) -->
+    <UModal
+      v-model:open="openMediaLibrary"
+      title="Media Library (Cloudflare R2)"
+      description="Upload, browse, and manage images stored in Cloudflare R2"
+      :ui="{ content: 'sm:max-w-3xl' }"
+    >
+      <template #body>
+        <div class="space-y-4">
+          <!-- Toolbar: Search + Refresh + Upload Trigger -->
+          <div class="flex items-center justify-between gap-2 flex-wrap">
+            <div class="flex items-center gap-2 flex-1 min-w-[200px]">
+              <UInput
+                v-model="mediaSearchQuery"
+                placeholder="Search images in R2..."
+                icon="i-lucide-search"
+                size="xs"
+                class="w-full max-w-xs"
+              />
+              <UButton
+                size="xs"
+                color="neutral"
+                variant="ghost"
+                icon="i-lucide-refresh-cw"
+                :loading="mediaLoading"
+                title="Refresh media files"
+                @click="fetchMediaFiles"
+              />
+              <span class="text-xs text-muted">
+                {{ filteredMediaItems.length }} file{{ filteredMediaItems.length === 1 ? "" : "s" }}
+              </span>
+            </div>
+
+            <div class="flex items-center gap-2 shrink-0">
+              <input
+                type="file"
+                class="hidden"
+                id="cms-file-upload"
+                accept="image/*"
+                @change="handleFileUpload"
+              />
+              <label
+                for="cms-file-upload"
+                class="cursor-pointer inline-flex items-center gap-1.5 px-3 py-1.5 rounded-md text-xs bg-primary hover:bg-primary/90 text-white font-medium shadow-xs transition-colors"
+              >
+                <UIcon name="i-lucide-upload" class="w-3.5 h-3.5" />
+                Upload Image
+              </label>
+            </div>
+          </div>
+
+          <!-- Upload Progress indicator -->
+          <div
+            v-if="uploadProgress > 0"
+            class="p-2.5 rounded-md bg-primary/10 border border-primary/20 flex items-center justify-between text-xs text-primary"
+          >
+            <span>Uploading image to Cloudflare R2...</span>
+            <span class="font-mono font-medium">{{ uploadProgress }}%</span>
+          </div>
+
+          <!-- Image Grid -->
+          <div
+            v-if="mediaLoading && mediaItems.length === 0"
+            class="py-12 flex flex-col items-center justify-center text-xs text-muted"
+          >
+            <UIcon name="i-lucide-loader-2" class="w-6 h-6 animate-spin mb-2" />
+            Loading images from Cloudflare R2...
+          </div>
+
+          <div
+            v-else-if="filteredMediaItems.length === 0"
+            class="py-12 text-center text-xs text-muted border border-dashed border-default rounded-lg bg-muted/10"
+          >
+            <UIcon name="i-lucide-image" class="w-8 h-8 text-muted mx-auto mb-2" />
+            <p v-if="mediaSearchQuery">No images match your search "{{ mediaSearchQuery }}".</p>
+            <p v-else>No images found in Cloudflare R2 storage. Upload an image to get started.</p>
+          </div>
+
+          <div
+            v-else
+            class="max-h-[380px] overflow-y-auto grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-3 p-1"
+          >
+            <div
+              v-for="item in filteredMediaItems"
+              :key="item.key || item.url"
+              class="group relative flex flex-col bg-muted/20 hover:bg-muted/40 rounded-lg border border-default overflow-hidden transition-all duration-150"
+            >
+              <!-- Thumbnail -->
+              <div
+                class="aspect-square bg-muted/60 relative overflow-hidden flex items-center justify-center"
+              >
+                <img
+                  :src="item.url"
+                  :alt="item.pathname || item.key"
+                  class="w-full h-full object-cover transition-transform group-hover:scale-105 duration-200"
+                  loading="lazy"
+                />
+                <!-- Quick Action Overlay on hover -->
+                <div
+                  class="absolute inset-0 bg-black/50 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center gap-1.5 p-2"
+                >
+                  <UButton
+                    size="xs"
+                    color="primary"
+                    label="Select"
+                    @click="selectMediaItem(item.url)"
+                  />
+                  <UButton
+                    size="xs"
+                    color="neutral"
+                    variant="subtle"
+                    icon="i-lucide-trash-2"
+                    title="Delete from R2"
+                    @click="deleteMediaItem(item)"
+                  />
+                </div>
+              </div>
+
+              <!-- Metadata footer -->
+              <div class="p-2 flex flex-col gap-1 min-w-0">
+                <p
+                  class="text-[11px] font-medium text-foreground truncate"
+                  :title="item.pathname || item.key"
+                >
+                  {{ (item.pathname || item.key || "").split("/").pop() }}
+                </p>
+                <div class="flex items-center justify-between text-[10px] text-muted">
+                  <span>{{ formatBytes(item.size) }}</span>
+                  <div class="flex items-center gap-1">
+                    <button
+                      type="button"
+                      class="hover:text-foreground text-[10px]"
+                      :title="mediaCopiedUrl === item.url ? 'Copied!' : 'Copy URL'"
+                      @click.stop="copyMediaUrl(item.url)"
+                    >
+                      {{ mediaCopiedUrl === item.url ? "✓ Copied" : "Copy" }}
+                    </button>
+                    <span>·</span>
+                    <button
+                      type="button"
+                      class="hover:text-foreground text-[10px]"
+                      title="Insert Markdown"
+                      @click.stop="insertImageMarkdown(item.url)"
+                    >
+                      Insert
+                    </button>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </template>
+
+      <template #footer>
+        <div class="flex items-center justify-between w-full">
+          <span class="text-xs text-muted">
+            Directly connected to Cloudflare R2 bucket binding (<span class="font-mono">BLOB</span>)
+          </span>
+          <UButton
+            label="Close"
+            size="xs"
+            color="neutral"
+            variant="ghost"
+            @click="openMediaLibrary = false"
+          />
+        </div>
+      </template>
+    </UModal>
+
+    <!-- New Collection Modal -->
+    <UModal
+      v-model:open="showNewCollectionModal"
+      title="Create New Collection"
+      description="Add a new content collection to the CMS"
+    >
+      <template #body>
+        <div class="space-y-3">
+          <UFormField label="Collection ID" name="collectionId" required>
+            <UInput v-model="newCol.id" placeholder="e.g. team-members" class="w-full" />
+          </UFormField>
+          <UFormField label="Name" name="name" required>
+            <UInput v-model="newCol.name" placeholder="e.g. Team Members" class="w-full" />
+          </UFormField>
+          <UFormField label="Description" name="description">
+            <UInput
+              v-model="newCol.description"
+              placeholder="Optional description"
+              class="w-full"
+            />
+          </UFormField>
+        </div>
+      </template>
+
+      <template #footer>
+        <div class="flex justify-end space-x-2 w-full">
+          <UButton
+            size="xs"
+            color="neutral"
+            variant="ghost"
+            @click="showNewCollectionModal = false"
+          >
+            Cancel
+          </UButton>
+          <UButton size="xs" color="primary" @click="createCollection"> Create </UButton>
+        </div>
+      </template>
+    </UModal>
+  </UDashboardGroup>
+</template>