@stacksjs/defaults 0.75.1 → 0.75.2

package/app/Actions/Dashboard/Content/CommentDestroyAction.ts

@@ -4,6 +4,7 @@ import { db } from '@stacksjs/database/runtime'
 import { transaction } from '@stacksjs/orm'
 import { response } from '@stacksjs/router'
 import { dashboardOperationalError } from '../dashboard-response'
+import { COMMENT_SOURCES, parseCommentSource } from './comment-input'
 import { rowExists, rowId } from './content-input'
 
 /**
@@ -11,6 +12,9 @@ import { rowExists, rowId } from './content-input'
  *
  * A hard delete. The `trash` status exists for the reversible case, and the
  * page's delete button confirms first.
+ *
+ * `?source=commentables` deletes a comment the `commentable` trait wrote; the
+ * two tables number their rows independently, so the id alone is ambiguous.
  */
 export default new Action({
   name: 'CommentDestroyAction',
@@ -22,19 +26,24 @@ export default new Action({
     if (!id)
       return response.json({ message: 'A valid comment id is required.' }, 422)
 
+    const source = parseCommentSource(request.get('source'))
+
+    if (!source)
+      return response.json({ message: `Source must be one of: ${COMMENT_SOURCES.join(', ')}.` }, 422)
+
     try {
       const deleted = await transaction(async (rawTrx) => {
         const trx = rawTrx as unknown as typeof db
-        if (!await rowExists('comments', id, trx))
+        if (!await rowExists(source, id, trx))
           return false
-        await trx.deleteFrom('comments').where('id', '=', id).execute()
+        await trx.deleteFrom(source).where('id', '=', id).execute()
         return true
       })
 
       if (!deleted)
         return response.json({ message: 'Comment not found.' }, 404)
 
-      return response.json({ message: 'Comment deleted.', id })
+      return response.json({ message: 'Comment deleted.', id, source })
     }
     catch (error) {
       return dashboardOperationalError(error, 'Comment could not be deleted.', 'CommentDestroyAction', 500)

package/app/Actions/Dashboard/Content/CommentIndexAction.ts

@@ -1,7 +1,8 @@
 import { Action } from '@stacksjs/actions'
 import { db } from '@stacksjs/database/runtime'
 import { dashboardOperationalError } from '../dashboard-response'
-import { normalizeCommentStatus } from './comment-input'
+import type { CommentableRow, DashboardComment } from './comment-input'
+import { commentableRecord, isMissingTableError, isSafeTableName, newestFirst, normalizeCommentStatus } from './comment-input'
 
 interface CommentRow {
   id: number
@@ -16,9 +17,82 @@ interface CommentRow {
   updated_at: string | null
 }
 
+/**
+ * What each trait comment was left on, keyed `type:id`: the owner's title, else
+ * its name, else `posts #3`. `commentables_type` is the owner's table, so this
+ * is a join done per type, because one SQL join cannot follow a polymorphic
+ * key. A type that is not a safe identifier, has no such table, or has neither
+ * column falls back to the plain label rather than failing the whole list.
+ */
+async function ownerLabels(rows: CommentableRow[]): Promise<Map<string, string>> {
+  const labels = new Map<string, string>()
+  const idsByType = new Map<string, number[]>()
+
+  for (const row of rows) {
+    const type = String(row.commentables_type || '')
+    labels.set(`${type}:${row.commentables_id}`, `${type} #${row.commentables_id}`)
+    if (isSafeTableName(type))
+      idsByType.set(type, [...(idsByType.get(type) ?? []), Number(row.commentables_id)])
+  }
+
+  for (const [type, ids] of idsByType) {
+    for (const column of ['title', 'name']) {
+      try {
+        const owners = await (db as any)
+          .selectFrom(type)
+          .select(['id', column])
+          .whereIn('id', [...new Set(ids)])
+          .execute() as Array<Record<string, unknown>>
+
+        for (const owner of owners) {
+          const label = String(owner[column] ?? '').trim()
+          if (label)
+            labels.set(`${type}:${owner.id}`, label)
+        }
+        break
+      }
+      catch {
+        // No such table or no such column: try the next column, then keep
+        // the fallback label.
+      }
+    }
+  }
+
+  return labels
+}
+
+/**
+ * Comments the `commentable` trait wrote. An app that has never migrated the
+ * trait tables has none, which is not an error; any other failure is.
+ */
+async function commentableComments(): Promise<DashboardComment[]> {
+  let rows: CommentableRow[]
+  try {
+    rows = await db
+      .selectFrom('commentables')
+      .selectAll()
+      .orderBy('created_at', 'desc')
+      .execute() as unknown as CommentableRow[]
+  }
+  catch (error) {
+    if (isMissingTableError(error))
+      return []
+    throw error
+  }
+
+  const labels = await ownerLabels(rows)
+
+  return rows.map(row => commentableRecord(row, labels.get(`${row.commentables_type}:${row.commentables_id}`) ?? ''))
+}
+
 /**
  * `GET /api/dashboard/comments` — backs `views/dashboard/content/comments/index.stx`.
  *
+ * Lists both places a comment can live, newest first: the model-backed
+ * `comments` table and the polymorphic `commentables` table the `commentable`
+ * trait writes. Their ids overlap, so every record carries its `source` and a
+ * `key` unique across both, and the moderation writes take `source` back.
+ *
  * Reads the `comments` table via `db`. The previous `Comment.orderBy(...)` call
  * threw on every request (the ORM model exposes no query methods) and the catch
  * turned that into an empty list, so a broken read looked like a CMS with no
@@ -41,7 +115,9 @@ export default new Action({
         .orderBy('created_at', 'desc')
         .execute() as unknown as CommentRow[]
 
-      const comments = rows.map(row => ({
+      const legacy: DashboardComment[] = rows.map(row => ({
+        key: `comments:${row.id}`,
+        source: 'comments',
         id: Number(row.id),
         author_name: String(row.author_name || ''),
         author_email: String(row.author_email || ''),
@@ -53,6 +129,8 @@ export default new Action({
         updated_at: row.updated_at || null,
       }))
 
+      const comments = [...legacy, ...await commentableComments()].sort(newestFirst)
+
       return { comments }
     }
     catch (error) {

package/app/Actions/Dashboard/Content/CommentUpdateAction.ts

@@ -4,7 +4,8 @@ import { db } from '@stacksjs/database/runtime'
 import { transaction } from '@stacksjs/orm'
 import { response } from '@stacksjs/router'
 import { dashboardOperationalError } from '../dashboard-response'
-import { COMMENT_STATUSES, parseCommentStatus } from './comment-input'
+import type { CommentableRow } from './comment-input'
+import { COMMENT_SOURCES, COMMENT_STATUSES, commentableRecord, commentableStatusFor, parseCommentSource, parseCommentStatus } from './comment-input'
 import { findRow, rowExists, rowId, timestamp } from './content-input'
 
 /**
@@ -16,6 +17,11 @@ import { findRow, rowExists, rowId, timestamp } from './content-input'
  * `is_approved` is kept in step with `status` so the two never disagree — the
  * table carries both, and the page falls back to `is_approved` when a row has
  * no status.
+ *
+ * `source: 'commentables'` moderates a comment the `commentable` trait wrote
+ * instead. That table only knows pending, approved and rejected, so spam and
+ * trash both store as rejected, and the response carries the status the page
+ * should now show rather than echoing the one it asked for.
  */
 export default new Action({
   name: 'CommentUpdateAction',
@@ -32,6 +38,47 @@ export default new Action({
     if (!status)
       return response.json({ message: `Status must be one of: ${COMMENT_STATUSES.join(', ')}.` }, 422)
 
+    const source = parseCommentSource(request.get('source'))
+
+    if (!source)
+      return response.json({ message: `Source must be one of: ${COMMENT_SOURCES.join(', ')}.` }, 422)
+
+    if (source === 'commentables') {
+      try {
+        const comment = await transaction(async (rawTrx) => {
+          const trx = rawTrx as unknown as typeof db
+          if (!await rowExists('commentables', id, trx))
+            return null
+
+          const stored = commentableStatusFor(status)
+          const now = Date.now()
+          await trx
+            .updateTable('commentables')
+            .set({
+              status: stored,
+              approved_at: stored === 'approved' ? now : null,
+              rejected_at: stored === 'rejected' ? now : null,
+              updated_at: timestamp(),
+            } as any)
+            .where('id', '=', id)
+            .execute()
+
+          const updated = await findRow('commentables', id, trx)
+          if (!updated)
+            throw new Error('Updated comment could not be loaded.')
+          return updated as CommentableRow
+        })
+
+        if (!comment)
+          return response.json({ message: 'Comment not found.' }, 404)
+
+        return response.json(commentableRecord(comment))
+      }
+      catch (error) {
+        return dashboardOperationalError(error, 'Comment could not be updated.', 'CommentUpdateAction', 500)
+      }
+    }
+
     try {
       const comment = await transaction(async (rawTrx) => {
         const trx = rawTrx as unknown as typeof db

package/app/Actions/Dashboard/Content/comment-input.ts

@@ -33,3 +33,137 @@ export function parseCommentStatus(value: unknown): CommentStatus | undefined {
 
   return isCommentStatus(status) ? status : undefined
 }
+
+/**
+ * Where a dashboard comment lives.
+ *
+ * `comments` is the model-backed table the CMS form writes. `commentables` is
+ * the polymorphic table the `commentable` model trait writes
+ * (`post.addComment(...)`), with its own ids, so the two can both have a
+ * comment 1. Every write names its source; an absent one means `comments`,
+ * which is what every caller sent before trait comments were listed.
+ */
+export const COMMENT_SOURCES = ['comments', 'commentables'] as const
+
+export type CommentSource = typeof COMMENT_SOURCES[number]
+
+export function parseCommentSource(value: unknown): CommentSource | undefined {
+  const source = str(value).trim().toLowerCase()
+  if (!source)
+    return 'comments'
+
+  return (COMMENT_SOURCES as readonly string[]).includes(source) ? source as CommentSource : undefined
+}
+
+/** The statuses the `commentable` trait, the CMS and `buddy comments:*` use. */
+export type CommentableStatus = 'pending' | 'approved' | 'rejected'
+
+/**
+ * A dashboard status as the trait stores it. The trait has one way to hide a
+ * comment, `rejected`, so spam and trash both land there: writing either
+ * spelling would hide it from `rejectedComments()` and the CLI's filter.
+ */
+export function commentableStatusFor(status: CommentStatus): CommentableStatus {
+  if (status === 'approved' || status === 'pending')
+    return status
+
+  return 'rejected'
+}
+
+/** A stored trait status as the dashboard shows it; `rejected` reads as spam. */
+export function dashboardStatusForCommentable(value: unknown): CommentStatus {
+  const status = str(value).toLowerCase()
+  if (status === 'approved')
+    return 'approved'
+  if (status === 'rejected')
+    return 'spam'
+
+  return 'pending'
+}
+
+export interface CommentableRow {
+  id: number
+  title?: string | null
+  body: string | null
+  status: string | null
+  commentables_id: number
+  commentables_type: string
+  user_id?: number | null
+  author_name?: string | null
+  author_email?: string | null
+  created_at: string | null
+  updated_at?: string | null
+}
+
+/** One row of the dashboard's comment list, from either table. */
+export interface DashboardComment {
+  key: string
+  source: CommentSource
+  id: number
+  author_name: string
+  author_email: string
+  content: string
+  post_title: string
+  status: CommentStatus
+  is_approved: boolean
+  created_at: string | null
+  updated_at: string | null
+}
+
+/**
+ * A trait comment in the dashboard's shape. `ownerLabel` names what it was
+ * left on, e.g. the post title, since the row only carries a type and an id.
+ *
+ * `author_email` is included because this is the moderation view, the one
+ * place a site owner needs it. It is not for display anywhere else.
+ */
+export function commentableRecord(row: CommentableRow, ownerLabel = ''): DashboardComment {
+  const status = dashboardStatusForCommentable(row.status)
+  const author = str(row.author_name) || (row.user_id ? `User #${row.user_id}` : '')
+  // The trait's title is optional and usually empty; when a caller did give
+  // one it is part of what the reader wrote, so keep it above the body.
+  const title = str(row.title).trim()
+  const body = str(row.body)
+
+  return {
+    key: `commentables:${row.id}`,
+    source: 'commentables',
+    id: Number(row.id),
+    author_name: author,
+    author_email: str(row.author_email),
+    content: title ? `${title}\n\n${body}` : body,
+    post_title: ownerLabel,
+    status,
+    is_approved: status === 'approved',
+    created_at: row.created_at || null,
+    updated_at: row.updated_at || null,
+  }
+}
+
+/** A table name read from `commentables_type`, safe to use as an identifier. */
+export function isSafeTableName(value: string): boolean {
+  return /^[a-z_][a-z0-9_]*$/i.test(value) && value.length <= 64
+}
+
+/**
+ * Newest first across both tables. `comments` writes `YYYY-MM-DD HH:MM:SS`
+ * and the trait writes `YYYY-MM-DDTHH:MM:SS`, so compare the normalized form
+ * rather than the raw strings, which would sort every ISO timestamp after
+ * every space-separated one on the same day.
+ */
+export function newestFirst(a: DashboardComment, b: DashboardComment): number {
+  const at = (value: string | null) => str(value).replace('T', ' ').slice(0, 19)
+
+  return at(b.created_at).localeCompare(at(a.created_at)) || b.key.localeCompare(a.key)
+}
+
+/**
+ * Whether a database error means the table is not there at all: SQLite's
+ * "no such table", MySQL's "Table '…' doesn't exist", Postgres's "relation
+ * … does not exist". Narrow on purpose, a missing COLUMN is a real fault.
+ */
+export function isMissingTableError(error: unknown): boolean {
+  const message = error instanceof Error ? error.message : String(error)
+
+  return /no such table|table \S+ doesn't exist|relation \S+ does not exist/i.test(message)
+}

package/ide/vscode/package.json

@@ -2,7 +2,7 @@
   "publisher": "Stacks",
   "name": "vscode-stacks",
   "displayName": "Stacks",
-  "version": "0.75.1",
+  "version": "0.75.2",
   "description": "A modern Stacks development environment.",
   "license": "MIT",
   "funding": "https://github.com/sponsors/chrisbbreuer",

package/package.json

@@ -2,7 +2,7 @@
   "name": "@stacksjs/defaults",
   "type": "module",
   "sideEffects": false,
-  "version": "0.75.1",
+  "version": "0.75.2",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/stacksjs/stacks.git",
@@ -55,7 +55,7 @@
   "dependencies": {
     "@iconify-json/f7": "^1.2.2",
     "@iconify-json/hugeicons": "^1.2.27",
-    "@stacksjs/mobile": "^0.75.1",
+    "@stacksjs/mobile": "^0.75.2",
     "@stacksjs/sanitizer": "^0.2.113",
     "ts-qr-codes": "^0.1.8"
   }

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

@@ -4,7 +4,14 @@ import { pushToast } from '../../../../functions/toasts'
 
 type CommentStatus = 'pending' | 'approved' | 'spam' | 'trash'
 
+// `comments` is the CMS table, `commentables` the one the `commentable` model
+// trait writes. Their ids overlap, so a record is identified by `key` and every
+// write says which table it is for.
+type CommentSource = 'comments' | 'commentables'
+
 interface CommentRecord {
+  key: string
+  source: CommentSource
   id: string
   authorName: string
   authorEmail: string
@@ -24,15 +31,23 @@ const deletingComment = state<CommentRecord | null>(null)
 const deleting = state(false)
 const deleteError = state('')
 
+function normalizeStatus(value: unknown): CommentStatus | null {
+  const status = String(value || '').toLowerCase()
+  return ['pending', 'approved', 'spam', 'trash'].includes(status) ? status as CommentStatus : null
+}
+
 function normalize(record: any): CommentRecord {
-  const rawStatus = String(record?.status || 'pending').toLowerCase()
+  const source: CommentSource = record?.source === 'commentables' ? 'commentables' : 'comments'
+  const id = String(record?.id || '')
   return {
-    id: String(record?.id || ''),
+    key: String(record?.key || `${source}:${id}`),
+    source,
+    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',
+    status: normalizeStatus(record?.status) ?? 'pending',
     createdAt: String(record?.created_at || ''),
   }
 }
@@ -87,14 +102,17 @@ async function loadComments(): Promise<void> {
 }
 
 async function setStatus(comment: CommentRecord, status: CommentStatus): Promise<void> {
-  updatingId.set(comment.id)
+  updatingId.set(comment.key)
   try {
-    await dashboardApi(`/api/dashboard/comments/${comment.id}`, {
+    const updated = await dashboardApi<{ status?: string }>(`/api/dashboard/comments/${comment.id}`, {
       method: 'PATCH',
-      body: { status },
+      body: { status, source: comment.source },
     })
-    comments.set(comments().map(record => record.id === comment.id ? { ...record, status } : record))
-    pushToast('success', `Comment marked ${status}`)
+    // The server says what the comment now is: a trait comment has one hidden
+    // state, so asking for trash comes back as spam.
+    const next = normalizeStatus(updated?.status) ?? status
+    comments.set(comments().map(record => record.key === comment.key ? { ...record, status: next } : record))
+    pushToast('success', `Comment marked ${next}`)
   }
   catch (error) {
     pushToast('error', 'Could not update comment', {
@@ -127,8 +145,8 @@ async function deleteComment(): Promise<void> {
   deleting.set(true)
   deleteError.set('')
   try {
-    await dashboardApi(`/api/dashboard/comments/${comment.id}`, { method: 'DELETE' })
-    comments.set(comments().filter(record => record.id !== comment.id))
+    await dashboardApi(`/api/dashboard/comments/${comment.id}?source=${comment.source}`, { method: 'DELETE' })
+    comments.set(comments().filter(record => record.key !== comment.key))
     deletingComment.set(null)
     pushToast('success', 'Comment permanently deleted')
   }
@@ -165,7 +183,7 @@ onMount(() => {
     <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>
+      <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' && comment.source === 'comments'" 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>