@stacksjs/defaults 0.70.229 → 0.70.230

package/resources/components/Dashboard/Content/BlogDashboard.stx

@@ -0,0 +1,489 @@
+<template>
+<div class="p-6 min-h-screen max-w-full text-neutral-950 dark:text-neutral-100 bg-neutral-50 dark:bg-neutral-950">
+  <div class="flex flex-col gap-6 mx-auto min-w-0 max-w-7xl w-full">
+
+    <header class="flex flex-col gap-4 md:flex-row md:items-end md:justify-between pb-5 border-b border-neutral-200 dark:border-neutral-800">
+      <div>
+        <h1 class="font-semibold text-2xl tracking-tight">Blog</h1>
+        <p class="mt-1 text-neutral-500 text-sm dark:text-neutral-400">
+          Posts are markdown files in <code class="px-1 py-0.5 text-xs bg-neutral-200 dark:bg-neutral-800 rounded">content/blog</code>. Saving writes the file. Commit and push to publish.
+        </p>
+      </div>
+      <div class="flex flex-wrap gap-2">
+        <Button tag="a" href="/blog" target="_blank" rel="noopener" variant="secondary">
+          <span class="h-4 w-4 i-hugeicons-view"></span>
+          View blog
+        </Button>
+        <Button @click="openEditor(null)">
+          <span class="h-4 w-4 i-hugeicons-plus-sign"></span>
+          New post
+        </Button>
+      </div>
+    </header>
+
+    <section class="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
+      <div class="p-4 bg-white dark:bg-neutral-900 border border-neutral-200 rounded-md dark:border-neutral-800">
+        <p class="text-neutral-500 text-sm dark:text-neutral-400">Total</p>
+        <p class="mt-2 font-semibold text-3xl">{{ posts().length }}</p>
+      </div>
+      <div class="p-4 bg-white dark:bg-neutral-900 border border-neutral-200 rounded-md dark:border-neutral-800">
+        <p class="text-neutral-500 text-sm dark:text-neutral-400">Published</p>
+        <p class="mt-2 font-semibold text-3xl text-green-600 dark:text-green-400">{{ publishedCount() }}</p>
+      </div>
+      <div class="p-4 bg-white dark:bg-neutral-900 border border-neutral-200 rounded-md dark:border-neutral-800">
+        <p class="text-neutral-500 text-sm dark:text-neutral-400">Drafts</p>
+        <p class="mt-2 font-semibold text-3xl text-amber-600 dark:text-amber-400">{{ draftCount() }}</p>
+      </div>
+      <div class="p-4 bg-white dark:bg-neutral-900 border border-neutral-200 rounded-md dark:border-neutral-800">
+        <p class="text-neutral-500 text-sm dark:text-neutral-400">Featured</p>
+        <p class="mt-2 font-semibold text-3xl">{{ featuredCount() }}</p>
+      </div>
+    </section>
+
+    <section class="overflow-hidden min-w-0 max-w-full bg-white dark:bg-neutral-900 border border-neutral-200 rounded-md dark:border-neutral-800">
+      <div class="flex flex-col gap-3 md:flex-row md:items-center md:justify-between p-4 border-b border-neutral-200 dark:border-neutral-800">
+        <div class="relative flex-1 max-w-md">
+          <span class="absolute left-3 top-1/2 h-4 w-4 text-neutral-500 pointer-events-none -translate-y-1/2 i-hugeicons-search-01"></span>
+          <label for="blog-search" class="sr-only">Search posts</label>
+          <input
+            id="blog-search"
+            type="search"
+            x-model="searchQuery"
+            placeholder="Search posts"
+            class="placeholder-neutral-500 pl-9 pr-3 py-2 w-full text-neutral-900 text-sm dark:text-neutral-100 bg-white dark:bg-neutral-950 border border-neutral-300 outline-none rounded-md dark:border-neutral-700 focus:border-blue-500 focus:ring-2 focus:ring-blue-500/30"
+          />
+        </div>
+        <div>
+          <label for="blog-status" class="sr-only">Filter by status</label>
+          <select
+            id="blog-status"
+            x-model="statusFilter"
+            class="px-3 py-2 text-neutral-900 text-sm dark:text-neutral-100 bg-white dark:bg-neutral-950 border border-neutral-300 rounded-md dark:border-neutral-700"
+          >
+            <option value="all">All statuses</option>
+            <option value="published">Published</option>
+            <option value="draft">Draft</option>
+          </select>
+        </div>
+      </div>
+
+      <!-- Error: the list request failed. Offers a retry rather than a dead end. -->
+      <div x-show="loadError()" class="flex flex-col gap-3 items-center px-6 py-12 text-center">
+        <span class="h-8 w-8 text-red-500 i-hugeicons-alert-02"></span>
+        <p class="font-medium">Couldn't load posts</p>
+        <p class="max-w-md text-neutral-500 text-sm dark:text-neutral-400">{{ loadError() }}</p>
+        <Button variant="secondary" @click="load()">
+          Try again
+        </Button>
+      </div>
+
+      <!-- Loading: skeleton rows matching the table's shape. -->
+      <div x-show="isLoading()" class="p-4 space-y-3">
+        @foreach(skeletonRows as row)
+          <div class="flex gap-4 items-center animate-pulse">
+            <div class="flex-1 space-y-2">
+              <div class="h-3.5 w-1/3 bg-neutral-200 dark:bg-neutral-800 rounded"></div>
+              <div class="h-3 w-2/3 bg-neutral-200 dark:bg-neutral-800 rounded"></div>
+            </div>
+            <div class="h-5 w-16 bg-neutral-200 dark:bg-neutral-800 rounded-full"></div>
+            <div class="h-3 w-20 bg-neutral-200 dark:bg-neutral-800 rounded"></div>
+          </div>
+        @endforeach
+      </div>
+
+      <div x-show="!isLoading() && !loadError() && filteredPosts().length > 0" class="overflow-x-auto max-w-full w-full">
+        <table class="min-w-full text-sm divide-neutral-200 divide-y dark:divide-neutral-800">
+          <thead class="font-semibold text-left text-neutral-600 text-xs uppercase dark:text-neutral-300 bg-neutral-50 dark:bg-neutral-950/60">
+            <tr>
+              <th scope="col" class="px-4 py-3">Post</th>
+              <th scope="col" class="px-4 py-3">Status</th>
+              <th scope="col" class="px-4 py-3">Date</th>
+              <th scope="col" class="px-4 py-3">Length</th>
+              <th scope="col" class="px-4 py-3"><span class="sr-only">Actions</span></th>
+            </tr>
+          </thead>
+          <tbody class="divide-neutral-200 divide-y dark:divide-neutral-800">
+            <template :for="post in filteredPosts">
+              <tr class="hover:bg-neutral-50 dark:hover:bg-neutral-950/60">
+                <td class="px-4 py-3">
+                  <div class="flex gap-2 items-center">
+                    <span class="font-medium">{{ post.title }}</span>
+                    <span x-show="post.featured" class="inline-flex px-1.5 py-0.5 font-medium text-[11px] text-blue-700 dark:text-blue-300 bg-blue-100 dark:bg-blue-900/40 rounded">Featured</span>
+                  </div>
+                  <div class="mt-1 max-w-xl text-neutral-500 text-xs truncate dark:text-neutral-400">{{ post.description || post.slug }}</div>
+                </td>
+                <td class="px-4 py-3">
+                  <span :class="statusClass(post.draft)" class="inline-flex px-2 py-0.5 font-medium text-xs rounded-full">
+                    {{ post.draft ? 'Draft' : 'Published' }}
+                  </span>
+                </td>
+                <td class="px-4 py-3 text-neutral-600 dark:text-neutral-300">{{ formatDate(post.date) }}</td>
+                <td class="px-4 py-3 text-neutral-600 dark:text-neutral-300">{{ post.readingTime }} min read</td>
+                <td class="px-4 py-3">
+                  <div class="flex gap-1 justify-end">
+                    <a
+                      x-show="!post.draft"
+                      :href="'/blog/' + post.slug"
+                      target="_blank"
+                      rel="noopener"
+                      :title="'View ' + post.title"
+                      class="p-2 text-neutral-600 dark:text-neutral-300 hover:bg-neutral-100 dark:hover:bg-neutral-800 rounded"
+                    >
+                      <span class="block h-4 w-4 i-hugeicons-view"></span>
+                    </a>
+                    <Button variant="ghost" size="sm" iconOnly :ariaLabel="'Edit ' + post.title" @click="openEditor(post)">
+                      <span class="block h-4 w-4 i-hugeicons-edit-01"></span>
+                    </Button>
+                    <Button variant="ghost" size="sm" iconOnly :ariaLabel="'Delete ' + post.title" @click="askDelete(post)">
+                      <span class="block h-4 w-4 text-red-600 dark:text-red-400 i-hugeicons-waste"></span>
+                    </Button>
+                  </div>
+                </td>
+              </tr>
+            </template>
+          </tbody>
+        </table>
+      </div>
+
+      <!-- Empty: distinguishes "no posts yet" from "nothing matched the filter". -->
+      <div x-show="!isLoading() && !loadError() && filteredPosts().length === 0" class="flex flex-col gap-3 items-center px-6 py-16 text-center">
+        <span class="h-8 w-8 text-neutral-400 i-hugeicons-quill-write-02"></span>
+        <p class="font-medium">{{ posts().length === 0 ? 'No posts yet' : 'No posts match your filters' }}</p>
+        <p class="max-w-sm text-neutral-500 text-sm dark:text-neutral-400">
+          {{ posts().length === 0 ? 'Your first post becomes a markdown file in content/blog.' : 'Try a different search term or status.' }}
+        </p>
+        <Button :if="posts().length === 0" @click="openEditor(null)">
+          Write your first post
+        </Button>
+        <Button :if="posts().length > 0" variant="secondary" @click="clearFilters()">
+          Clear filters
+        </Button>
+      </div>
+    </section>
+  </div>
+
+  <!-- Editor -->
+<div x-show="isEditorOpen()" class="flex fixed inset-0 overflow-y-auto z-40 items-start justify-center p-4 sm:p-6 dashboard-modal-layer">
+    <div class="fixed inset-0 bg-neutral-950/60" @click="closeEditor()"></div>
+
+    <div role="dialog" aria-modal="true" aria-labelledby="editor-title" class="relative z-10 my-8 max-w-3xl w-full bg-white dark:bg-neutral-900 border border-neutral-200 rounded-lg dark:border-neutral-800 shadow-xl">
+      <div class="flex items-center justify-between px-5 py-4 border-b border-neutral-200 dark:border-neutral-800">
+        <h2 id="editor-title" class="font-semibold text-lg">{{ editingSlug() ? 'Edit post' : 'New post' }}</h2>
+        <Button variant="ghost" size="sm" iconOnly ariaLabel="Close editor" @click="closeEditor()">
+          <span class="block h-4 w-4 i-hugeicons-cancel-01"></span>
+        </Button>
+      </div>
+
+      <div class="overflow-y-auto p-5 space-y-4 max-h-[70vh]">
+        <div x-show="formError()" class="flex gap-2 items-start px-3 py-2 text-red-800 text-sm dark:text-red-200 bg-red-50 dark:bg-red-950/40 border border-red-200 rounded-md dark:border-red-900">
+          <span class="shrink-0 mt-0.5 h-4 w-4 i-hugeicons-alert-02"></span>
+          <span>{{ formError() }}</span>
+        </div>
+
+        <div class="grid gap-4 sm:grid-cols-2">
+          <div class="flex flex-col gap-2 sm:col-span-2">
+            <label for="post-title" class="font-medium text-sm">Title</label>
+            <input id="post-title" type="text" x-model="formTitle" class="px-3 py-2 text-neutral-900 text-sm dark:text-neutral-100 bg-white dark:bg-neutral-950 border border-neutral-300 outline-none rounded-md dark:border-neutral-700 focus:border-blue-500 focus:ring-2 focus:ring-blue-500/30" />
+          </div>
+
+          <div class="flex flex-col gap-2 sm:col-span-2">
+            <label for="post-slug" class="font-medium text-sm">Slug</label>
+            <input id="post-slug" type="text" x-model="formSlug" :placeholder="suggestedSlug()" class="placeholder-neutral-500 px-3 py-2 font-mono text-neutral-900 text-sm dark:text-neutral-100 bg-white dark:bg-neutral-950 border border-neutral-300 outline-none rounded-md dark:border-neutral-700 focus:border-blue-500 focus:ring-2 focus:ring-blue-500/30" />
+            <p class="text-neutral-500 text-xs dark:text-neutral-400">The file name and public URL: /blog/{{ formSlug() || suggestedSlug() || 'your-post' }}</p>
+          </div>
+
+          <div class="flex flex-col gap-2 sm:col-span-2">
+            <label for="post-description" class="font-medium text-sm">Description</label>
+            <input id="post-description" type="text" x-model="formDescription" class="px-3 py-2 text-neutral-900 text-sm dark:text-neutral-100 bg-white dark:bg-neutral-950 border border-neutral-300 outline-none rounded-md dark:border-neutral-700 focus:border-blue-500 focus:ring-2 focus:ring-blue-500/30" />
+            <p class="text-neutral-500 text-xs dark:text-neutral-400">Used as the excerpt, the meta description, and the RSS summary.</p>
+          </div>
+
+          <div class="flex flex-col gap-2">
+            <label for="post-date" class="font-medium text-sm">Date</label>
+            <input id="post-date" type="date" x-model="formDate" class="px-3 py-2 text-neutral-900 text-sm dark:text-neutral-100 bg-white dark:bg-neutral-950 border border-neutral-300 outline-none rounded-md dark:border-neutral-700 focus:border-blue-500 focus:ring-2 focus:ring-blue-500/30" />
+          </div>
+
+          <div class="flex flex-col gap-2">
+            <label for="post-author" class="font-medium text-sm">Author</label>
+            <input id="post-author" type="text" x-model="formAuthor" class="px-3 py-2 text-neutral-900 text-sm dark:text-neutral-100 bg-white dark:bg-neutral-950 border border-neutral-300 outline-none rounded-md dark:border-neutral-700 focus:border-blue-500 focus:ring-2 focus:ring-blue-500/30" />
+          </div>
+
+          <div class="flex flex-col gap-2 sm:col-span-2">
+            <label for="post-poster" class="font-medium text-sm">Poster image</label>
+            <input id="post-poster" type="text" x-model="formPoster" placeholder="/assets/images/example.svg" class="placeholder-neutral-500 px-3 py-2 text-neutral-900 text-sm dark:text-neutral-100 bg-white dark:bg-neutral-950 border border-neutral-300 outline-none rounded-md dark:border-neutral-700 focus:border-blue-500 focus:ring-2 focus:ring-blue-500/30" />
+          </div>
+
+          <div class="flex flex-col gap-2 sm:col-span-2">
+            <label for="post-body" class="font-medium text-sm">Content</label>
+            <textarea id="post-body" x-model="formBody" rows="14" class="px-3 py-2 font-mono text-neutral-900 text-sm dark:text-neutral-100 bg-white dark:bg-neutral-950 border border-neutral-300 outline-none rounded-md dark:border-neutral-700 focus:border-blue-500 focus:ring-2 focus:ring-blue-500/30 resize-y"></textarea>
+            <p class="text-neutral-500 text-xs dark:text-neutral-400">Markdown. {{ bodyWordCount() }} words, about {{ bodyReadingTime() }} min read.</p>
+          </div>
+        </div>
+
+        <div class="flex flex-col gap-3 sm:flex-row sm:gap-6 pt-2 border-neutral-200 border-t dark:border-neutral-800">
+          <label class="flex gap-2 items-center text-sm">
+            <input type="checkbox" x-model="formDraft" class="h-4 w-4 text-blue-600 border-neutral-300 rounded dark:border-neutral-600" />
+            <span>Draft, keep off the public blog</span>
+          </label>
+          <label class="flex gap-2 items-center text-sm">
+            <input type="checkbox" x-model="formFeatured" class="h-4 w-4 text-blue-600 border-neutral-300 rounded dark:border-neutral-600" />
+            <span>Feature at the top of the listing</span>
+          </label>
+        </div>
+      </div>
+
+      <div class="flex gap-2 justify-end px-5 py-4 border-neutral-200 border-t dark:border-neutral-800">
+        <Button variant="secondary" :disabled="isSaving()" @click="closeEditor()">Cancel</Button>
+        <Button :loading="isSaving()" @click="submit()">
+          {{ isSaving() ? 'Saving' : 'Save post' }}
+        </Button>
+      </div>
+    </div>
+  </div>
+
+  <!-- Delete confirmation -->
+<div x-show="postToDelete()" class="flex fixed inset-0 z-50 items-center justify-center p-4 dashboard-modal-layer">
+    <div class="fixed inset-0 bg-neutral-950/60" @click="cancelDelete()"></div>
+
+    <div role="dialog" aria-modal="true" aria-labelledby="delete-title" class="relative z-10 p-5 max-w-md w-full bg-white dark:bg-neutral-900 border border-neutral-200 rounded-lg dark:border-neutral-800 shadow-xl">
+      <h2 id="delete-title" class="font-semibold text-lg">Delete this post?</h2>
+      <p class="mt-2 text-neutral-600 text-sm dark:text-neutral-300">
+        This deletes the file <code class="px-1 py-0.5 text-xs bg-neutral-100 dark:bg-neutral-800 rounded">content/blog/{{ deleteTargetSlug() }}.md</code>. It stays in git history until you commit the deletion.
+      </p>
+      <div class="flex gap-2 justify-end mt-5">
+        <Button variant="secondary" @click="cancelDelete()">Cancel</Button>
+        <Button variant="danger" @click="confirmDelete()">Delete post</Button>
+      </div>
+    </div>
+  </div>
+</div>
+</template>
+
+<script client>
+// Plain async transport for /api/dashboard/blog, which reads and writes the
+// markdown files in content/blog. It owns no state; the signals below do.
+import { deleteBlogPost, fetchBlogPost, fetchBlogPosts, saveBlogPost } from '~/storage/framework/defaults/functions/blog'
+
+// Fixed-length list purely to render the loading skeleton rows.
+const skeletonRows = [1, 2, 3, 4]
+
+const posts = state([])
+const isLoading = state(true)
+const isSaving = state(false)
+const loadError = state('')
+const searchQuery = state('')
+const statusFilter = state('all')
+
+// Editor state. `editingSlug` doubles as the mode flag: empty means "new post",
+// and it holds the ORIGINAL slug so a slug edit is sent as a rename.
+const isEditorOpen = state(false)
+const editingSlug = state('')
+const formError = state('')
+const formTitle = state('')
+const formSlug = state('')
+const formDescription = state('')
+const formDate = state('')
+const formAuthor = state('')
+const formPoster = state('')
+const formBody = state('')
+const formDraft = state(false)
+const formFeatured = state(false)
+
+const postToDelete = state(null)
+
+// Read by the delete dialog's copy; kept as a derived signal so the template
+// never has to reach through a possibly-null post.
+const deleteTargetSlug = derived(() => {
+  const post = postToDelete()
+
+  return post ? post.slug : ''
+})
+
+const publishedCount = derived(() => posts().filter(p => !p.draft).length)
+const draftCount = derived(() => posts().filter(p => p.draft).length)
+const featuredCount = derived(() => posts().filter(p => p.featured).length)
+
+const filteredPosts = derived(() => {
+  const q = searchQuery().trim().toLowerCase()
+  const status = statusFilter()
+
+  return posts().filter((post) => {
+    if (status === 'draft' && !post.draft)
+      return false
+    if (status === 'published' && post.draft)
+      return false
+    if (!q)
+      return true
+
+    return `${post.title} ${post.description} ${post.slug}`.toLowerCase().includes(q)
+  })
+})
+
+// Mirrors slugify() in blog-admin.ts so the placeholder matches what the server
+// will actually write when the slug field is left empty.
+function slugify(input) {
+  return String(input)
+    .toLowerCase()
+    .replace(/[^a-z0-9]+/g, '-')
+    .replace(/^-+|-+$/g, '')
+    .slice(0, 80)
+}
+
+const suggestedSlug = derived(() => slugify(formTitle()))
+const bodyWordCount = derived(() => formBody().split(/\s+/).filter(Boolean).length)
+const bodyReadingTime = derived(() => Math.max(1, Math.round(bodyWordCount() / 200)))
+
+function statusClass(draft) {
+  return draft
+    ? 'bg-amber-100 text-amber-800 dark:bg-amber-900/40 dark:text-amber-200'
+    : 'bg-green-100 text-green-800 dark:bg-green-900/40 dark:text-green-200'
+}
+
+function formatDate(value) {
+  if (!value)
+    return 'No date'
+
+  const date = new Date(value)
+
+  return Number.isNaN(date.getTime())
+    ? value
+    : date.toLocaleDateString(undefined, { year: 'numeric', month: 'short', day: 'numeric' })
+}
+
+function clearFilters() {
+  searchQuery.set('')
+  statusFilter.set('all')
+}
+
+async function openEditor(post) {
+  formError.set('')
+  editingSlug.set(post ? post.slug : '')
+  isEditorOpen.set(true)
+
+  if (!post) {
+    formTitle.set('')
+    formSlug.set('')
+    formDescription.set('')
+    formDate.set(new Date().toISOString().slice(0, 10))
+    formAuthor.set('')
+    formPoster.set('')
+    formBody.set('')
+    formDraft.set(true)
+    formFeatured.set(false)
+    return
+  }
+
+  // The list omits the markdown body, so fetch the full post. Seed the fields
+  // from the list row first so the editor is never blank while that request
+  // is in flight.
+  formTitle.set(post.title)
+  formSlug.set(post.slug)
+  formDescription.set(post.description)
+  formDate.set(post.date)
+  formAuthor.set(post.author)
+  formPoster.set(post.poster)
+  formDraft.set(post.draft)
+  formFeatured.set(post.featured)
+  formBody.set('')
+
+  try {
+    const full = await fetchBlogPost(post.slug)
+
+    // Ignore a late response if the user already closed or switched posts.
+    if (isEditorOpen() && editingSlug() === post.slug)
+      formBody.set(full.body)
+  }
+  catch (error) {
+    formError.set(`Couldn't load this post's content: ${error.message}`)
+  }
+}
+
+function closeEditor() {
+  isEditorOpen.set(false)
+  editingSlug.set('')
+  formError.set('')
+}
+
+async function submit() {
+  if (!formTitle().trim()) {
+    formError.set('A title is required.')
+    return
+  }
+
+  isSaving.set(true)
+  formError.set('')
+
+  try {
+    const saved = await saveBlogPost({
+      slug: formSlug().trim() || suggestedSlug(),
+      title: formTitle().trim(),
+      description: formDescription().trim(),
+      date: formDate(),
+      author: formAuthor().trim(),
+      authorBio: '',
+      poster: formPoster().trim(),
+      featured: formFeatured(),
+      draft: formDraft(),
+      body: formBody(),
+    }, editingSlug())
+
+    const original = editingSlug()
+
+    posts.update(list => (original
+      ? list.map(p => (p.slug === original ? saved : p))
+      : [saved, ...list]))
+
+    closeEditor()
+  }
+  catch (error) {
+    // Keep the editor open on failure so the author's work is not thrown away.
+    formError.set(error.message)
+  }
+  finally {
+    isSaving.set(false)
+  }
+}
+
+function askDelete(post) {
+  postToDelete.set(post)
+}
+
+function cancelDelete() {
+  postToDelete.set(null)
+}
+
+async function confirmDelete() {
+  const post = postToDelete()
+  if (!post)
+    return
+
+  postToDelete.set(null)
+
+  try {
+    await deleteBlogPost(post.slug)
+    posts.update(list => list.filter(p => p.slug !== post.slug))
+  }
+  catch (error) {
+    loadError.set(`Couldn't delete "${post.title}": ${error.message}`)
+  }
+}
+
+async function load() {
+  loadError.set('')
+
+  try {
+    const { posts: list } = await fetchBlogPosts()
+    posts.set(list)
+  }
+  catch (error) {
+    loadError.set(error.message)
+  }
+  finally {
+    isLoading.set(false)
+  }
+}
+
+// onMount, not effect: load() writes the same `posts` signal the derived signals
+// read, so an effect would re-trigger itself on every load.
+onMount(load)
+</script>

package/resources/components/Dashboard/Content/CommentsDashboard.stx

@@ -0,0 +1,172 @@
+<script client>
+import { dashboardApi } from '../../../../functions/dashboard-api'
+import { pushToast } from '../../../../functions/toasts'
+
+type CommentStatus = 'pending' | 'approved' | 'spam' | 'trash'
+
+interface CommentRecord {
+  id: string
+  authorName: string
+  authorEmail: string
+  content: string
+  postTitle: string
+  status: CommentStatus
+  createdAt: string
+}
+
+const comments = state<CommentRecord[]>([])
+const loading = state(true)
+const loadError = state('')
+const search = state('')
+const statusFilter = state('all')
+const updatingId = state('')
+const deletingComment = state<CommentRecord | null>(null)
+const deleting = state(false)
+const deleteError = state('')
+
+function normalize(record: any): CommentRecord {
+  const rawStatus = String(record?.status || 'pending').toLowerCase()
+  return {
+    id: String(record?.id || ''),
+    authorName: String(record?.author_name || ''),
+    authorEmail: String(record?.author_email || ''),
+    content: String(record?.content || ''),
+    postTitle: String(record?.post_title || ''),
+    status: ['pending', 'approved', 'spam', 'trash'].includes(rawStatus) ? rawStatus as CommentStatus : 'pending',
+    createdAt: String(record?.created_at || ''),
+  }
+}
+
+function visibleComments(): CommentRecord[] {
+  const query = search().trim().toLowerCase()
+  return comments().filter(comment =>
+    (statusFilter() === 'all' || comment.status === statusFilter())
+    && (!query || [comment.content, comment.authorName, comment.authorEmail, comment.postTitle]
+      .some(value => value.toLowerCase().includes(query))),
+  )
+}
+
+function statusCount(status: CommentStatus): number {
+  return comments().filter(comment => comment.status === status).length
+}
+
+function statusClass(status: CommentStatus): string {
+  return `inline-flex px-2 py-1 font-medium text-xs rounded-full ${({
+    approved: 'text-green-700 dark:text-green-300 bg-green-50 dark:bg-green-950/40',
+    pending: 'text-yellow-700 dark:text-yellow-300 bg-yellow-50 dark:bg-yellow-950/40',
+    spam: 'text-red-700 dark:text-red-300 bg-red-50 dark:bg-red-950/40',
+    trash: 'text-gray-600 dark:text-neutral-300 bg-gray-100 dark:bg-neutral-700',
+  }[status])}`
+}
+
+function formatDate(value: string): string {
+  if (!value)
+    return 'Unknown'
+  const date = new Date(value)
+  return Number.isNaN(date.getTime())
+    ? value
+    : new Intl.DateTimeFormat('en-US', { month: 'short', day: 'numeric', year: 'numeric' }).format(date)
+}
+
+async function loadComments(): Promise<void> {
+  loading.set(true)
+  loadError.set('')
+  try {
+    const data = await dashboardApi<{ comments?: unknown[] }>('/api/dashboard/comments')
+    if (!Array.isArray(data.comments))
+      throw new TypeError('Comments were not returned in the expected shape.')
+    comments.set(data.comments.map(normalize))
+  }
+  catch (error) {
+    loadError.set(error instanceof Error ? error.message : String(error))
+    pushToast('error', 'Could not load comments', { detail: loadError() })
+  }
+  finally {
+    loading.set(false)
+  }
+}
+
+async function setStatus(comment: CommentRecord, status: CommentStatus): Promise<void> {
+  updatingId.set(comment.id)
+  try {
+    await dashboardApi(`/api/dashboard/comments/${comment.id}`, {
+      method: 'PATCH',
+      body: { status },
+    })
+    comments.set(comments().map(record => record.id === comment.id ? { ...record, status } : record))
+    pushToast('success', `Comment marked ${status}`)
+  }
+  catch (error) {
+    pushToast('error', 'Could not update comment', {
+      detail: error instanceof Error ? error.message : String(error),
+    })
+  }
+  finally {
+    updatingId.set('')
+  }
+}
+
+function openDelete(comment: CommentRecord): void {
+  deletingComment.set(comment)
+  deleteError.set('')
+}
+
+function closeDelete(): void {
+  if (!deleting())
+    deletingComment.set(null)
+}
+
+async function deleteComment(): Promise<void> {
+  const comment = deletingComment()
+  if (!comment)
+    return
+  deleting.set(true)
+  deleteError.set('')
+  try {
+    await dashboardApi(`/api/dashboard/comments/${comment.id}`, { method: 'DELETE' })
+    comments.set(comments().filter(record => record.id !== comment.id))
+    deletingComment.set(null)
+    pushToast('success', 'Comment permanently deleted')
+  }
+  catch (error) {
+    deleteError.set(error instanceof Error ? error.message : String(error))
+  }
+  finally {
+    deleting.set(false)
+  }
+}
+
+onMount(() => {
+  void loadComments()
+})
+</script>
+
+<div class="space-y-6">
+  <header class="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
+    <div><p class="font-semibold text-blue-600 text-xs tracking-wide uppercase dark:text-blue-400">CMS</p><h1 class="mt-1 font-bold text-2xl text-gray-900 dark:text-white">Comments</h1><p class="mt-1 text-gray-500 text-sm dark:text-neutral-400">Moderate persisted reader comments without altering their content.</p></div>
+    <Button :loading="loading()" variant="secondary" @click="loadComments()"><span :if="!loading()" aria-hidden="true" class="h-4 w-4 i-hugeicons-refresh"></span>Refresh</Button>
+  </header>
+
+  <div :if="loadError()" role="alert" class="flex gap-4 items-center justify-between p-4 text-red-700 text-sm dark:text-red-300 bg-red-50 dark:bg-red-950/30 border border-red-200 rounded-lg dark:border-red-900"><span>{{ loadError() }}</span><Button variant="secondary" size="sm" @click="loadComments()">Retry</Button></div>
+
+  <section aria-label="Comment metrics" class="grid gap-3 sm:grid-cols-2 lg:grid-cols-4">
+    <article class="p-4 bg-white dark:bg-neutral-800 border border-gray-200 rounded-lg dark:border-neutral-700"><p class="text-gray-500 text-xs dark:text-neutral-400">Total</p><p class="mt-2 font-semibold text-2xl text-gray-900 dark:text-white">{{ comments().length }}</p></article>
+    <article class="p-4 bg-white dark:bg-neutral-800 border border-gray-200 rounded-lg dark:border-neutral-700"><p class="text-gray-500 text-xs dark:text-neutral-400">Pending</p><p class="mt-2 font-semibold text-2xl text-yellow-700 dark:text-yellow-300">{{ statusCount('pending') }}</p></article>
+    <article class="p-4 bg-white dark:bg-neutral-800 border border-gray-200 rounded-lg dark:border-neutral-700"><p class="text-gray-500 text-xs dark:text-neutral-400">Approved</p><p class="mt-2 font-semibold text-2xl text-green-700 dark:text-green-300">{{ statusCount('approved') }}</p></article>
+    <article class="p-4 bg-white dark:bg-neutral-800 border border-gray-200 rounded-lg dark:border-neutral-700"><p class="text-gray-500 text-xs dark:text-neutral-400">Spam or trash</p><p class="mt-2 font-semibold text-2xl text-gray-900 dark:text-white">{{ statusCount('spam') + statusCount('trash') }}</p></article>
+  </section>
+
+  <section class="overflow-hidden bg-white dark:bg-neutral-800 border border-gray-200 rounded-lg dark:border-neutral-700">
+    <div class="flex flex-col gap-3 sm:flex-row p-4 border-b border-gray-200 dark:border-neutral-700"><label class="flex-1"><span class="sr-only">Search comments</span><input x-model="search" type="search" placeholder="Search comments" class="px-3 py-2 max-w-xl w-full text-gray-900 text-sm dark:text-white bg-white dark:bg-neutral-900 border border-gray-300 rounded-md dark:border-neutral-700" /></label><label><span class="sr-only">Filter comment status</span><select x-model="statusFilter" class="px-3 py-2 w-full text-gray-900 text-sm dark:text-white bg-white dark:bg-neutral-900 border border-gray-300 rounded-md dark:border-neutral-700"><option value="all">All statuses</option><option value="pending">Pending</option><option value="approved">Approved</option><option value="spam">Spam</option><option value="trash">Trash</option></select></label></div>
+    <div class="divide-gray-200 divide-y dark:divide-neutral-700">
+      <div :if="loading()" class="px-4 py-14 text-center text-gray-500 text-sm dark:text-neutral-400"><span class="inline-block mr-2 h-4 w-4 animate-spin i-hugeicons-loading-03"></span>Loading comments</div>
+      <div :else-if="visibleComments().length === 0" class="px-4 py-14 text-center"><span class="inline-block h-6 w-6 text-gray-400 i-hugeicons-comment-01"></span><p class="mt-2 font-medium text-gray-900 text-sm dark:text-white">No comments found</p><p class="mt-1 text-gray-500 text-sm dark:text-neutral-400">Adjust the search or status filter.</p></div>
+      <template :else><template :for="comment in visibleComments()"><article class="p-4"><div class="flex flex-col gap-4 lg:flex-row lg:items-start lg:justify-between"><div class="min-w-0"><div class="flex flex-wrap gap-2 items-center"><p class="font-semibold text-gray-900 text-sm dark:text-white">{{ comment.authorName || 'Anonymous' }}</p><span :class="statusClass(comment.status)">{{ comment.status }}</span><span class="text-gray-400 text-xs">{{ formatDate(comment.createdAt) }}</span></div><p class="mt-1 text-gray-500 text-xs dark:text-neutral-400">{{ comment.authorEmail }}<span :if="comment.postTitle"> on {{ comment.postTitle }}</span></p><p class="mt-3 max-w-4xl text-gray-700 text-sm whitespace-pre-wrap dark:text-neutral-200">{{ comment.content }}</p></div><div class="flex flex-shrink-0 flex-wrap gap-2"><Button :if="comment.status !== 'approved'" variant="success" size="sm" :disabled="Boolean(updatingId())" @click="setStatus(comment, 'approved')">Approve</Button><Button :if="comment.status !== 'pending'" variant="secondary" size="sm" :disabled="Boolean(updatingId())" @click="setStatus(comment, 'pending')">Restore</Button><Button :if="comment.status !== 'spam'" variant="warning" size="sm" :disabled="Boolean(updatingId())" @click="setStatus(comment, 'spam')">Spam</Button><Button :if="comment.status !== 'trash'" variant="outline" size="sm" :disabled="Boolean(updatingId())" @click="setStatus(comment, 'trash')">Trash</Button><Button variant="ghost" size="sm" iconOnly :ariaLabel="'Permanently delete comment by ' + comment.authorName" :disabled="Boolean(updatingId())" @click="openDelete(comment)"><span class="block h-4 w-4 text-red-500 i-hugeicons-delete-02"></span></Button></div></div></article></template></template>
+    </div>
+  </section>
+</div>
+
+<div :if="Boolean(deletingComment())" class="flex fixed inset-y-0 right-0 z-[55] items-center justify-center p-4 dashboard-modal-layer">
+  <button type="button" aria-label="Close delete comment dialog" class="absolute inset-0 bg-black/45" @click="closeDelete()"></button>
+  <section role="dialog" aria-modal="true" aria-label="Permanently delete comment?" class="relative p-6 max-w-md w-full bg-white dark:bg-neutral-800 border border-gray-200 rounded-xl dark:border-neutral-700 shadow-xl"><h2 class="font-semibold text-gray-900 text-lg dark:text-white">Permanently delete comment?</h2><p class="mt-2 text-gray-500 text-sm dark:text-neutral-400">The comment from <strong>{{ deletingComment()?.authorName || 'Anonymous' }}</strong> cannot be restored.</p><div :if="deleteError()" role="alert" class="mt-4 p-3 text-red-700 text-sm dark:text-red-300 bg-red-50 dark:bg-red-950/30 border border-red-200 rounded-lg dark:border-red-900">{{ deleteError() }}</div><div class="flex gap-2 justify-end mt-6"><Button :disabled="deleting()" variant="secondary" @click="closeDelete()">Cancel</Button><Button :loading="deleting()" variant="danger" @click="deleteComment()">Delete permanently</Button></div></section>
+</div>