@stacksjs/defaults 0.70.206 → 0.70.208

package/views/dashboard/content/categories/index.stx

@@ -0,0 +1,169 @@
+@extends('layouts/default')
+
+@section('content')
+<div class="p-6 min-h-screen text-neutral-950 dark:text-neutral-100 bg-neutral-50 dark:bg-neutral-950">
+  <div class="flex flex-col gap-6 mx-auto max-w-6xl">
+    <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>
+        <p class="font-semibold text-blue-600 text-xs tracking-wide uppercase dark:text-blue-400">CMS</p>
+        <h1 class="mt-1 font-semibold text-2xl tracking-tight">Categories</h1>
+        <p class="mt-1 text-neutral-500 text-sm dark:text-neutral-400">Organize posts and markdown content into public blog categories.</p>
+      </div>
+      <button id="new-category-button" type="button" class="inline-flex gap-2 items-center px-3 py-2 font-semibold text-sm text-white bg-blue-600 hover:bg-blue-500 rounded-md shadow-sm">
+        <span class="h-4 w-4 i-hugeicons-plus-sign"></span>
+        New Category
+      </button>
+    </header>
+
+    <section class="grid gap-4 md:grid-cols-3">
+      <div class="p-4 bg-white dark:bg-neutral-900 border border-neutral-200 rounded-lg dark:border-neutral-800 shadow-sm">
+        <p class="text-neutral-500 text-sm dark:text-neutral-400">Total Categories</p>
+        <p id="category-total" class="mt-2 font-semibold text-3xl">0</p>
+      </div>
+      <div class="p-4 bg-white dark:bg-neutral-900 border border-neutral-200 rounded-lg dark:border-neutral-800 shadow-sm">
+        <p class="text-neutral-500 text-sm dark:text-neutral-400">Newest</p>
+        <p id="category-newest" class="mt-2 font-semibold text-2xl truncate">-</p>
+      </div>
+      <div class="p-4 bg-white dark:bg-neutral-900 border border-neutral-200 rounded-lg dark:border-neutral-800 shadow-sm">
+        <p class="text-neutral-500 text-sm dark:text-neutral-400">Active</p>
+        <p id="category-active" class="mt-2 font-semibold text-3xl text-green-600 dark:text-green-400">0</p>
+      </div>
+    </section>
+
+    <section class="bg-white dark:bg-neutral-900 border border-neutral-200 rounded-lg dark:border-neutral-800 shadow-sm">
+      <div class="p-4 border-b border-neutral-200 dark:border-neutral-800">
+        <input id="category-search" type="search" placeholder="Search categories..." class="px-3 py-2 max-w-md w-full text-sm 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/20" />
+      </div>
+      <div class="overflow-x-auto">
+        <table class="min-w-full text-sm divide-neutral-200 divide-y dark:divide-neutral-800">
+          <thead class="font-semibold text-left text-neutral-500 text-xs uppercase dark:text-neutral-400 bg-neutral-50 dark:bg-neutral-900">
+            <tr>
+              <th class="px-4 py-3">Name</th>
+              <th class="px-4 py-3">Slug</th>
+              <th class="px-4 py-3">Description</th>
+              <th class="px-4 py-3 text-right">Actions</th>
+            </tr>
+          </thead>
+          <tbody id="categories-table" class="divide-neutral-200 divide-y dark:divide-neutral-800"></tbody>
+        </table>
+      </div>
+      <div id="categories-empty" class="hidden p-10 text-center text-neutral-500 text-sm dark:text-neutral-400">No categories found.</div>
+    </section>
+  </div>
+</div>
+
+<dialog id="category-dialog" class="p-0 max-w-lg w-full text-neutral-950 dark:text-neutral-100 bg-white backdrop:bg-black/40 dark:bg-neutral-900 border border-neutral-200 rounded-lg dark:border-neutral-800 shadow-xl">
+  <form id="category-form" method="dialog">
+    <div class="px-5 py-4 border-b border-neutral-200 dark:border-neutral-800">
+      <h2 class="font-semibold text-lg">New Category</h2>
+    </div>
+    <div class="grid gap-4 p-5">
+      <label class="grid gap-1 font-medium text-sm">Name <input id="category-name" required class="px-3 py-2 text-sm bg-white dark:bg-neutral-950 border border-neutral-300 rounded-md dark:border-neutral-700" /></label>
+      <label class="grid gap-1 font-medium text-sm">Slug <input id="category-slug" class="px-3 py-2 text-sm bg-white dark:bg-neutral-950 border border-neutral-300 rounded-md dark:border-neutral-700" /></label>
+      <label class="grid gap-1 font-medium text-sm">Description <textarea id="category-description" rows="3" class="px-3 py-2 text-sm bg-white dark:bg-neutral-950 border border-neutral-300 rounded-md dark:border-neutral-700"></textarea></label>
+    </div>
+    <div class="flex gap-2 justify-end px-5 py-4 border-neutral-200 border-t dark:border-neutral-800">
+      <button id="category-cancel" type="button" class="px-3 py-2 font-medium text-sm border border-neutral-300 rounded-md dark:border-neutral-700">Cancel</button>
+      <button type="submit" class="px-3 py-2 font-semibold text-sm text-white bg-blue-600 hover:bg-blue-500 rounded-md">Create Category</button>
+    </div>
+  </form>
+</dialog>
+
+<script>
+;(function () {
+  var api = '/api/dashboard/categories'
+  var categories = []
+  var table = document.getElementById('categories-table')
+  var empty = document.getElementById('categories-empty')
+  var dialog = document.getElementById('category-dialog')
+  var search = document.getElementById('category-search')
+  function $(id) { return document.getElementById(id) }
+  // CSRF is default-on for POST/PATCH/DELETE via a stateless double-submit
+  // cookie: the server seeds a non-HttpOnly X-CSRF-Token cookie on safe
+  // responses and the client echoes it back in the header. The list request on
+  // page load seeds it, so the token is present by the time a save can happen.
+  // See defaults/app/Middleware/Csrf.ts.
+  function writeHeaders() {
+    var headers = { 'content-type': 'application/json' }
+    var match = document.cookie.match(/(?:^|;\s*)X-CSRF-Token=([^;]*)/)
+    if (match) headers['X-CSRF-Token'] = decodeURIComponent(match[1])
+    return headers
+  }
+  function escapeHtml(value) {
+    return String(value || '').replace(/[&<>"']/g, function (ch) {
+      return ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' })[ch]
+    })
+  }
+  function slug(value) {
+    return String(value || '').trim().toLowerCase().replace(/['"]/g, '').replace(/[^a-z0-9]+/g, '-').replace(/^-+|-+$/g, '')
+  }
+  function render() {
+    var q = search.value.toLowerCase()
+    var rows = categories.filter(function (category) {
+      return !q || [category.name, category.slug, category.description].join(' ').toLowerCase().indexOf(q) !== -1
+    })
+    $('category-total').textContent = String(categories.length)
+    $('category-active').textContent = String(categories.filter(function (c) { return c.is_active !== false && c.is_active !== 0 }).length)
+    $('category-newest').textContent = categories[0] ? categories[0].name : '-'
+    empty.classList.toggle('hidden', rows.length > 0)
+    table.innerHTML = rows.map(function (category) {
+      return '<tr class="hover:bg-neutral-50 dark:hover:bg-neutral-950/70">' +
+        '<td class="px-4 py-3 font-medium">' + escapeHtml(category.name) + '</td>' +
+        '<td class="px-4 py-3 text-neutral-600 dark:text-neutral-300">' + escapeHtml(category.slug) + '</td>' +
+        '<td class="px-4 py-3 text-neutral-600 dark:text-neutral-300">' + escapeHtml(category.description) + '</td>' +
+        '<td class="px-4 py-3 text-right"><button type="button" data-id="' + category.id + '" class="p-2 text-red-600 dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-950/40 rounded"><span class="block h-4 w-4 i-hugeicons-waste"></span></button></td>' +
+      '</tr>'
+    }).join('')
+  }
+  async function load() {
+    var res = await fetch(api)
+    if (!res.ok) throw new Error('Unable to load CMS categories (' + res.status + ').')
+    var json = await res.json()
+    categories = Array.isArray(json.categories) ? json.categories : []
+    render()
+  }
+  document.getElementById('new-category-button').addEventListener('click', function () {
+    $('category-name').value = ''
+    $('category-slug').value = ''
+    $('category-description').value = ''
+    dialog.showModal()
+  })
+  $('category-cancel').addEventListener('click', function () { dialog.close() })
+  $('category-name').addEventListener('input', function () {
+    if (!$('category-slug').dataset.touched) $('category-slug').value = slug($('category-name').value)
+  })
+  $('category-slug').addEventListener('input', function () { $('category-slug').dataset.touched = '1' })
+  document.getElementById('category-form').addEventListener('submit', async function (event) {
+    event.preventDefault()
+    var res = await fetch(api, {
+      method: 'POST',
+      headers: writeHeaders(),
+      body: JSON.stringify({ name: $('category-name').value, slug: $('category-slug').value, description: $('category-description').value }),
+    })
+    if (!res.ok) {
+      var err = await res.json().catch(function () { return {} })
+      return alert(err.message || err.error || 'Could not create category')
+    }
+    dialog.close()
+    await load()
+  })
+  table.addEventListener('click', async function (event) {
+    var button = event.target.closest('button[data-id]')
+    if (!button || !confirm('Delete this category?')) return
+    var res = await fetch(api + '/' + button.getAttribute('data-id'), { method: 'DELETE', headers: writeHeaders() })
+    if (!res.ok) {
+      var err = await res.json().catch(function () { return {} })
+      return alert(err.message || err.error || 'Could not delete category')
+    }
+    await load()
+  })
+  search.addEventListener('input', render)
+
+  load().catch(function (error) {
+    empty.classList.remove('hidden')
+    empty.textContent = error.message || 'Unable to load CMS categories.'
+  })
+})()
+</script>
+
+@endsection

package/views/dashboard/content/comments/index.stx

@@ -0,0 +1,189 @@
+@extends('layouts/default')
+
+@section('content')
+<div class="p-6 min-h-screen text-neutral-950 dark:text-neutral-100 bg-neutral-50 dark:bg-neutral-950">
+  <div class="flex flex-col gap-6 mx-auto max-w-7xl">
+    <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>
+        <p class="font-semibold text-blue-600 text-xs tracking-wide uppercase dark:text-blue-400">CMS</p>
+        <h1 class="mt-1 font-semibold text-2xl tracking-tight">Comments</h1>
+        <p class="mt-1 text-neutral-500 text-sm dark:text-neutral-400">Moderate reader comments from the CMS comments table.</p>
+      </div>
+      <div class="flex flex-wrap gap-2">
+        <select id="comment-status-filter" class="px-3 py-2 text-sm bg-white dark:bg-neutral-950 border border-neutral-300 rounded-md dark:border-neutral-700">
+          <option value="">All statuses</option>
+          <option value="approved">Approved</option>
+          <option value="pending">Pending</option>
+          <option value="spam">Spam</option>
+          <option value="trash">Trash</option>
+        </select>
+      </div>
+    </header>
+
+    <section class="grid gap-4 md:grid-cols-4">
+      <div class="p-4 bg-white dark:bg-neutral-900 border border-neutral-200 rounded-lg dark:border-neutral-800 shadow-sm">
+        <p class="text-neutral-500 text-sm dark:text-neutral-400">Total Comments</p>
+        <p id="comment-total" class="mt-2 font-semibold text-3xl">0</p>
+      </div>
+      <div class="p-4 bg-white dark:bg-neutral-900 border border-neutral-200 rounded-lg dark:border-neutral-800 shadow-sm">
+        <p class="text-neutral-500 text-sm dark:text-neutral-400">Approved</p>
+        <p id="comment-approved" class="mt-2 font-semibold text-3xl text-green-600 dark:text-green-400">0</p>
+      </div>
+      <div class="p-4 bg-white dark:bg-neutral-900 border border-neutral-200 rounded-lg dark:border-neutral-800 shadow-sm">
+        <p class="text-neutral-500 text-sm dark:text-neutral-400">Pending</p>
+        <p id="comment-pending" class="mt-2 font-semibold text-3xl text-amber-600 dark:text-amber-400">0</p>
+      </div>
+      <div class="p-4 bg-white dark:bg-neutral-900 border border-neutral-200 rounded-lg dark:border-neutral-800 shadow-sm">
+        <p class="text-neutral-500 text-sm dark:text-neutral-400">Spam</p>
+        <p id="comment-spam" class="mt-2 font-semibold text-3xl text-red-600 dark:text-red-400">0</p>
+      </div>
+    </section>
+
+    <section class="bg-white dark:bg-neutral-900 border border-neutral-200 rounded-lg dark:border-neutral-800 shadow-sm">
+      <div class="p-4 border-b border-neutral-200 dark:border-neutral-800">
+        <input id="comment-search" type="search" placeholder="Search comments..." class="px-3 py-2 max-w-md w-full text-sm 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/20" />
+      </div>
+      <div class="overflow-x-auto">
+        <table class="min-w-full text-sm divide-neutral-200 divide-y dark:divide-neutral-800">
+          <thead class="font-semibold text-left text-neutral-500 text-xs uppercase dark:text-neutral-400 bg-neutral-50 dark:bg-neutral-900">
+            <tr>
+              <th class="px-4 py-3">Author</th>
+              <th class="px-4 py-3">Comment</th>
+              <th class="px-4 py-3">Post</th>
+              <th class="px-4 py-3">Status</th>
+              <th class="px-4 py-3">Created</th>
+              <th class="px-4 py-3 text-right">Actions</th>
+            </tr>
+          </thead>
+          <tbody id="comments-table" class="divide-neutral-200 divide-y dark:divide-neutral-800"></tbody>
+        </table>
+      </div>
+      <div id="comments-empty" class="hidden p-10 text-center text-neutral-500 text-sm dark:text-neutral-400">No comments found.</div>
+    </section>
+  </div>
+</div>
+
+<script>
+;(function () {
+  var api = '/api/dashboard/comments'
+  var comments = []
+  var table = document.getElementById('comments-table')
+  var empty = document.getElementById('comments-empty')
+  var search = document.getElementById('comment-search')
+  var statusFilter = document.getElementById('comment-status-filter')
+
+  function $(id) { return document.getElementById(id) }
+  // CSRF is default-on for POST/PATCH/DELETE via a stateless double-submit
+  // cookie: the server seeds a non-HttpOnly X-CSRF-Token cookie on safe
+  // responses and the client echoes it back in the header. The list request on
+  // page load seeds it, so the token is present by the time a moderation write
+  // can happen. See defaults/app/Middleware/Csrf.ts.
+  function writeHeaders() {
+    var headers = { 'content-type': 'application/json' }
+    var match = document.cookie.match(/(?:^|;\s*)X-CSRF-Token=([^;]*)/)
+    if (match) headers['X-CSRF-Token'] = decodeURIComponent(match[1])
+    return headers
+  }
+  function escapeHtml(value) {
+    return String(value || '').replace(/[&<>"']/g, function (ch) {
+      return ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' })[ch]
+    })
+  }
+  function formatDate(value) {
+    if (!value) return '-'
+    return new Intl.DateTimeFormat('en-US', { month: 'short', day: 'numeric', year: 'numeric' }).format(new Date(value))
+  }
+  function truncate(value, max) {
+    value = String(value || '')
+    return value.length > max ? value.slice(0, max) + '...' : value
+  }
+  function normalize(row) {
+    return {
+      id: row.id,
+      content: row.content || row.body || '',
+      authorName: row.author_name || row.authorName || row.author || '',
+      authorEmail: row.author_email || row.authorEmail || row.email || '',
+      postTitle: row.post_title || row.postTitle || row.title || '',
+      status: row.status || (row.is_approved || row.isApproved ? 'approved' : 'pending'),
+      createdAt: row.created_at || row.createdAt || '',
+    }
+  }
+  function statusClass(status) {
+    if (status === 'approved') return 'bg-green-100 text-green-800 dark:bg-green-900/40 dark:text-green-200'
+    if (status === 'spam' || status === 'trash') return 'bg-red-100 text-red-800 dark:bg-red-900/40 dark:text-red-200'
+    return 'bg-amber-100 text-amber-800 dark:bg-amber-900/40 dark:text-amber-200'
+  }
+  function render() {
+    var q = search.value.toLowerCase()
+    var status = statusFilter.value
+    var rows = comments.filter(function (comment) {
+      var haystack = [comment.content, comment.authorName, comment.authorEmail, comment.postTitle, comment.status].join(' ').toLowerCase()
+      return (!status || comment.status === status) && (!q || haystack.indexOf(q) !== -1)
+    })
+    $('comment-total').textContent = String(comments.length)
+    $('comment-approved').textContent = String(comments.filter(function (c) { return c.status === 'approved' }).length)
+    $('comment-pending').textContent = String(comments.filter(function (c) { return c.status === 'pending' }).length)
+    $('comment-spam').textContent = String(comments.filter(function (c) { return c.status === 'spam' }).length)
+    empty.classList.toggle('hidden', rows.length > 0)
+    table.innerHTML = rows.map(function (comment) {
+      return '<tr class="hover:bg-neutral-50 dark:hover:bg-neutral-950/70">' +
+        '<td class="px-4 py-3"><div class="font-medium">' + escapeHtml(comment.authorName) + '</div><div class="text-neutral-500 text-xs">' + escapeHtml(comment.authorEmail) + '</div></td>' +
+        '<td class="px-4 py-3 text-neutral-600 dark:text-neutral-300">' + escapeHtml(truncate(comment.content, 120)) + '</td>' +
+        '<td class="px-4 py-3 text-neutral-600 dark:text-neutral-300">' + escapeHtml(comment.postTitle || '-') + '</td>' +
+        '<td class="px-4 py-3"><span class="inline-flex px-2 py-0.5 font-medium text-xs rounded-full ' + statusClass(comment.status) + '">' + escapeHtml(comment.status) + '</span></td>' +
+        '<td class="px-4 py-3 text-neutral-600 dark:text-neutral-300">' + formatDate(comment.createdAt) + '</td>' +
+        '<td class="px-4 py-3 text-right"><div class="flex gap-1 justify-end">' +
+          '<button type="button" data-action="approved" data-id="' + comment.id + '" class="p-2 text-green-600 dark:text-green-400 hover:bg-green-50 dark:hover:bg-green-950/40 rounded"><span class="block h-4 w-4 i-hugeicons-checkmark-circle-02"></span></button>' +
+          '<button type="button" data-action="spam" data-id="' + comment.id + '" class="p-2 text-amber-600 dark:text-amber-400 hover:bg-amber-50 dark:hover:bg-amber-950/40 rounded"><span class="block h-4 w-4 i-hugeicons-alert-02"></span></button>' +
+          '<button type="button" data-action="delete" data-id="' + comment.id + '" class="p-2 text-red-600 dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-950/40 rounded"><span class="block h-4 w-4 i-hugeicons-waste"></span></button>' +
+        '</div></td>' +
+      '</tr>'
+    }).join('')
+  }
+  async function load() {
+    var res = await fetch(api)
+    if (!res.ok) throw new Error('Unable to load CMS comments (' + res.status + ').')
+    var json = await res.json()
+    comments = Array.isArray(json.comments) ? json.comments.map(normalize) : []
+    render()
+  }
+  async function updateStatus(id, status) {
+    var res = await fetch(api + '/' + id, {
+      method: 'PATCH',
+      headers: writeHeaders(),
+      body: JSON.stringify({ status: status }),
+    })
+    if (!res.ok) {
+      var err = await res.json().catch(function () { return {} })
+      alert(err.message || err.error || 'Could not update comment')
+      return
+    }
+    await load()
+  }
+  async function deleteComment(id) {
+    if (!confirm('Delete this comment?')) return
+    var res = await fetch(api + '/' + id, { method: 'DELETE', headers: writeHeaders() })
+    if (!res.ok) {
+      var err = await res.json().catch(function () { return {} })
+      alert(err.message || err.error || 'Could not delete comment')
+      return
+    }
+    await load()
+  }
+  table.addEventListener('click', function (event) {
+    var button = event.target.closest('button[data-action]')
+    if (!button) return
+    if (button.dataset.action === 'delete') deleteComment(button.dataset.id)
+    else updateStatus(button.dataset.id, button.dataset.action)
+  })
+  search.addEventListener('input', render)
+  statusFilter.addEventListener('change', render)
+
+  load().catch(function (error) {
+    empty.classList.remove('hidden')
+    empty.textContent = error.message || 'Unable to load CMS comments.'
+  })
+})()
+</script>
+
+@endsection