@stacksjs/defaults 0.70.362 → 0.70.365

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

@@ -0,0 +1,93 @@
+<script client>
+interface PageRecord {
+  id: string
+  title: string
+  template: string
+  publishedAt: string
+}
+
+interface PageDraft {
+  title: string
+  template: string
+  published: boolean
+}
+
+const open = useReactiveProp('open', false)
+const page = useReactiveProp('page', null as PageRecord | null)
+const busy = useReactiveProp('busy', false)
+const error = useReactiveProp('error', '')
+const title = state('')
+const template = state('default')
+const published = state(false)
+const emit = defineEmits()
+let wasOpen = false
+
+effect(() => {
+  const isOpen = open()
+  if (isOpen && !wasOpen) {
+    const record = page()
+    title.set(record?.title || '')
+    template.set(record?.template || 'default')
+    published.set(Boolean(record?.publishedAt))
+  }
+  wasOpen = isOpen
+})
+
+function close(): void {
+  if (!busy())
+    emit('close')
+}
+
+function submit(): void {
+  const draft: PageDraft = {
+    title: title().trim(),
+    template: template(),
+    published: published(),
+  }
+  emit('submit', draft)
+}
+</script>
+
+<Modal
+  :isOpen="open()"
+  :title="page() ? 'Edit page' : 'New page'"
+  description="Configure the page template and publishing state."
+  :closable="!busy()"
+  @close="close"
+>
+  <form id="page-editor-form" class="grid gap-4" @submit.prevent="submit">
+    <label>
+      <span class="font-medium text-gray-700 text-sm dark:text-neutral-200">Title</span>
+      <input x-model="title" name="title" required minlength="3" maxlength="255" class="mt-1 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" />
+    </label>
+    <label>
+      <span class="font-medium text-gray-700 text-sm dark:text-neutral-200">Template</span>
+      <select x-model="template" name="template" class="mt-1 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="default">Default</option>
+        <option value="landing">Landing</option>
+        <option value="blog">Blog</option>
+        <option value="contact">Contact</option>
+      </select>
+    </label>
+    <label class="flex gap-3 items-start p-3 bg-gray-50 dark:bg-neutral-900/50 border border-gray-200 rounded-lg dark:border-neutral-700">
+      <input x-model="published" name="published" type="checkbox" class="mt-0.5 h-4 w-4 rounded" />
+      <span>
+        <span class="block font-medium text-gray-700 text-sm dark:text-neutral-200">Published</span>
+        <span class="block mt-1 text-gray-500 text-xs dark:text-neutral-400">Published pages receive a timestamp. Clearing this returns the page to draft.</span>
+      </span>
+    </label>
+  </form>
+
+  <div :if="error()" 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">
+    {{ error() }}
+  </div>
+
+  <template #footer>
+    <div class="flex gap-2 justify-end w-full">
+      <Button :disabled="busy()" variant="secondary" @click="close">Cancel</Button>
+      <Button type="submit" form="page-editor-form" :disabled="title().trim().length < 3" :loading="busy()">
+        {{ page() ? 'Save changes' : 'Create page' }}
+      </Button>
+    </div>
+  </template>
+</Modal>

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

@@ -11,15 +11,18 @@ interface PageRecord {
   publishedAt: string
 }
 
+interface PageDraft {
+  title: string
+  template: string
+  published: boolean
+}
+
 const pages = state<PageRecord[]>([])
 const loading = state(true)
 const loadError = state('')
 const search = state('')
 const formOpen = state(false)
 const editingPage = state<PageRecord | null>(null)
-const title = state('')
-const template = state('default')
-const published = state(false)
 const saving = state(false)
 const saveError = state('')
 const deletingPage = state<PageRecord | null>(null)
@@ -82,21 +85,15 @@ async function loadPages(): Promise<void> {
   }
 }
 
-function resetForm(page: PageRecord | null): void {
-  editingPage.set(page)
-  title.set(page?.title || '')
-  template.set(page?.template || 'default')
-  published.set(Boolean(page?.publishedAt))
-  saveError.set('')
-}
-
 function openCreate(): void {
-  resetForm(null)
+  editingPage.set(null)
+  saveError.set('')
   formOpen.set(true)
 }
 
 function openEdit(page: PageRecord): void {
-  resetForm(page)
+  editingPage.set(page)
+  saveError.set('')
   formOpen.set(true)
 }
 
@@ -105,14 +102,14 @@ function closeForm(): void {
     formOpen.set(false)
 }
 
-async function savePage(): Promise<void> {
+async function savePage(draft: PageDraft): Promise<void> {
   const page = editingPage()
   saving.set(true)
   saveError.set('')
   try {
     await dashboardApi(page ? `/api/dashboard/pages/${page.id}` : '/api/dashboard/pages', {
       method: page ? 'PATCH' : 'POST',
-      body: { title: title().trim(), template: template(), published: published() },
+      body: draft,
     })
     formOpen.set(false)
     pushToast('success', page ? 'Page updated' : 'Page created')
@@ -136,6 +133,11 @@ function closeDelete(): void {
     deletingPage.set(null)
 }
 
+function deleteDescription(): string {
+  const page = deletingPage()
+  return page ? `${page.title} will be permanently removed.` : ''
+}
+
 async function deletePage(): Promise<void> {
   const page = deletingPage()
   if (!page)
@@ -186,14 +188,22 @@ onMount(() => {
   </section>
 </div>
 
-<div :if="formOpen()" 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 page dialog" class="absolute inset-0 bg-black/45" @click="closeForm()"></button>
-  <section role="dialog" aria-modal="true" :aria-label="editingPage() ? 'Edit page' : 'New page'" class="relative max-w-lg w-full bg-white dark:bg-neutral-800 border border-gray-200 rounded-xl dark:border-neutral-700 shadow-xl">
-    <form @submit.prevent="savePage"><div class="p-6"><h2 class="font-semibold text-gray-900 text-lg dark:text-white">{{ editingPage() ? 'Edit page' : 'New page' }}</h2><div :if="saveError()" 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">{{ saveError() }}</div><div class="grid gap-4 mt-5"><label><span class="font-medium text-gray-700 text-sm dark:text-neutral-200">Title</span><input x-model="title" required minlength="3" maxlength="255" class="mt-1 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" /></label><label><span class="font-medium text-gray-700 text-sm dark:text-neutral-200">Template</span><select x-model="template" class="mt-1 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="default">Default</option><option value="landing">Landing</option><option value="blog">Blog</option><option value="contact">Contact</option></select></label><label class="flex gap-3 items-start p-3 bg-gray-50 dark:bg-neutral-900/50 border border-gray-200 rounded-lg dark:border-neutral-700"><input x-model="published" type="checkbox" class="mt-0.5 h-4 w-4 rounded" /><span><span class="block font-medium text-gray-700 text-sm dark:text-neutral-200">Published</span><span class="block mt-1 text-gray-500 text-xs dark:text-neutral-400">Published pages receive a timestamp. Clearing this returns the page to draft.</span></span></label></div></div><footer class="flex gap-2 justify-end px-6 py-4 bg-gray-50 dark:bg-neutral-900/50 border-gray-200 border-t dark:border-neutral-700"><Button :disabled="saving()" variant="secondary" @click="closeForm()">Cancel</Button><Button type="submit" :disabled="saving() || title().trim().length < 3" :loading="saving()">{{ editingPage() ? 'Save changes' : 'Create page' }}</Button></footer></form>
-  </section>
-</div>
-
-<div :if="Boolean(deletingPage())" 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 page dialog" class="absolute inset-0 bg-black/45" @click="closeDelete()"></button>
-  <section role="dialog" aria-modal="true" aria-label="Delete page?" 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">Delete page?</h2><p class="mt-2 text-gray-500 text-sm dark:text-neutral-400"><strong>{{ deletingPage()?.title || '' }}</strong> will be permanently removed.</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="deletePage()">Delete page</Button></div></section>
-</div>
+<PageEditorDialog
+  :open="formOpen()"
+  :page="editingPage()"
+  :busy="saving()"
+  :error="saveError()"
+  @close="closeForm"
+  @submit="savePage"
+/>
+
+<ConfirmDialog
+  :isOpen="Boolean(deletingPage())"
+  title="Delete page?"
+  :description="deleteDescription()"
+  confirmLabel="Delete page"
+  :busy="deleting()"
+  :error="deleteError()"
+  @close="closeDelete"
+  @confirm="deletePage"
+/>

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

@@ -0,0 +1,176 @@
+<script client>
+type PostStatus = 'draft' | 'published' | 'archived'
+interface OptionRecord { id: string, name: string, slug: string }
+interface AuthorRecord { id: string, name: string, email: string }
+interface PostRecord {
+  id: string
+  title: string
+  excerpt: string
+  content: string
+  poster: string
+  status: PostStatus
+  authorId: string
+  featured: boolean
+  categoryIds: string[]
+  tagIds: string[]
+}
+
+interface PostDraft {
+  title: string
+  excerpt: string
+  content: string
+  poster: string
+  status: PostStatus
+  authorId: string | null
+  featured: boolean
+  categoryIds: string[]
+  tagIds: string[]
+}
+
+const open = useReactiveProp('open', false)
+const post = useReactiveProp('post', null as PostRecord | null)
+const categories = useReactiveProp('categories', [] as OptionRecord[])
+const tags = useReactiveProp('tags', [] as OptionRecord[])
+const authors = useReactiveProp('authors', [] as AuthorRecord[])
+const busy = useReactiveProp('busy', false)
+const error = useReactiveProp('error', '')
+const title = state('')
+const excerpt = state('')
+const content = state('')
+const poster = state('')
+const status = state<PostStatus>('draft')
+const authorId = state('')
+const featured = state(false)
+const categoryIds = state<string[]>([])
+const tagIds = state<string[]>([])
+const emit = defineEmits()
+let wasOpen = false
+
+effect(() => {
+  const isOpen = open()
+  if (isOpen && !wasOpen) {
+    const record = post()
+    title.set(record?.title || '')
+    excerpt.set(record?.excerpt || '')
+    content.set(record?.content || '')
+    poster.set(record?.poster || '')
+    status.set(record?.status || 'draft')
+    authorId.set(record?.authorId || '')
+    featured.set(Boolean(record?.featured))
+    categoryIds.set(record ? [...record.categoryIds] : [])
+    tagIds.set(record ? [...record.tagIds] : [])
+  }
+  wasOpen = isOpen
+})
+
+function valid(): boolean {
+  const excerptLength = excerpt().trim().length
+  return title().trim().length >= 3 && title().trim().length <= 255
+    && content().trim().length >= 10 && content().length <= 100000
+    && (excerptLength === 0 || excerptLength >= 10) && excerpt().length <= 500
+}
+
+function close(): void {
+  if (!busy())
+    emit('close')
+}
+
+function submit(): void {
+  const draft: PostDraft = {
+    title: title().trim(),
+    excerpt: excerpt().trim(),
+    content: content().trim(),
+    poster: poster().trim(),
+    status: status(),
+    authorId: authorId() || null,
+    featured: featured(),
+    categoryIds: [...categoryIds()],
+    tagIds: [...tagIds()],
+  }
+  emit('submit', draft)
+}
+</script>
+
+<Modal
+  :isOpen="open()"
+  :title="post() ? 'Edit post' : 'New post'"
+  description="Content, ownership, and taxonomies are persisted together."
+  size="xl"
+  :closable="!busy()"
+  @close="close"
+>
+  <form id="post-editor-form" class="grid gap-5" @submit.prevent="submit">
+    <label>
+      <span class="font-medium text-gray-700 text-sm dark:text-neutral-200">Title</span>
+      <input x-model.trim="title" name="title" required minlength="3" maxlength="255" class="mt-1 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" />
+    </label>
+    <div class="grid gap-4 sm:grid-cols-3">
+      <label>
+        <span class="font-medium text-gray-700 text-sm dark:text-neutral-200">Status</span>
+        <select x-model="status" name="status" class="mt-1 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="draft">Draft</option>
+          <option value="published">Published</option>
+          <option value="archived">Archived</option>
+        </select>
+      </label>
+      <label>
+        <span class="font-medium text-gray-700 text-sm dark:text-neutral-200">Author</span>
+        <select x-model="authorId" name="author_id" class="mt-1 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="">No author</option>
+          <template :for="author in authors()"><option :value="author.id">{{ author.name }} ({{ author.email }})</option></template>
+        </select>
+      </label>
+      <label class="flex gap-3 items-center self-end px-3 py-2 min-h-10 bg-gray-50 dark:bg-neutral-900/60 border border-gray-200 rounded-md dark:border-neutral-700">
+        <input x-model="featured" name="featured" type="checkbox" class="h-4 w-4 text-blue-600 border-gray-300 rounded" />
+        <span class="font-medium text-gray-700 text-sm dark:text-neutral-200">Featured post</span>
+      </label>
+    </div>
+    <label>
+      <span class="font-medium text-gray-700 text-sm dark:text-neutral-200">Poster URL</span>
+      <input x-model.trim="poster" name="poster" type="url" inputmode="url" maxlength="255" placeholder="https://example.com/poster.jpg" class="mt-1 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" />
+    </label>
+    <label>
+      <span class="font-medium text-gray-700 text-sm dark:text-neutral-200">Excerpt</span>
+      <textarea x-model="excerpt" name="excerpt" rows="3" maxlength="500" placeholder="Optional, at least 10 characters when provided" class="mt-1 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"></textarea>
+      <span class="block mt-1 text-gray-400 text-xs">{{ excerpt().length }}/500</span>
+    </label>
+    <label>
+      <span class="font-medium text-gray-700 text-sm dark:text-neutral-200">Content</span>
+      <textarea x-model="content" name="content" required minlength="10" maxlength="100000" rows="10" class="mt-1 px-3 py-2 w-full font-mono text-gray-900 text-sm dark:text-white bg-white dark:bg-neutral-900 border border-gray-300 rounded-md dark:border-neutral-700"></textarea>
+      <span class="block mt-1 text-gray-400 text-xs">{{ content().length }}/100000</span>
+    </label>
+    <div class="grid gap-4 lg:grid-cols-2">
+      <fieldset class="p-4 border border-gray-200 rounded-lg dark:border-neutral-700">
+        <legend class="px-1 font-semibold text-gray-700 text-sm dark:text-neutral-200">Categories, {{ categoryIds().length }} selected</legend>
+        <div :if="categories().length === 0" class="text-gray-500 text-sm dark:text-neutral-400">No categories available.</div>
+        <div :else class="grid gap-2">
+          <template :for="categoryOption in categories()">
+            <label class="flex gap-2 items-center"><input x-model="categoryIds" name="category_ids" type="checkbox" :value="categoryOption.id" class="h-4 w-4 text-blue-600 border-gray-300 rounded" /><span class="text-gray-700 text-sm dark:text-neutral-200">{{ categoryOption.name }}</span></label>
+          </template>
+        </div>
+      </fieldset>
+      <fieldset class="p-4 border border-gray-200 rounded-lg dark:border-neutral-700">
+        <legend class="px-1 font-semibold text-gray-700 text-sm dark:text-neutral-200">Tags, {{ tagIds().length }} selected</legend>
+        <div :if="tags().length === 0" class="text-gray-500 text-sm dark:text-neutral-400">No tags available.</div>
+        <div :else class="grid gap-2 sm:grid-cols-2">
+          <template :for="tag in tags()">
+            <label class="flex gap-2 items-center"><input x-model="tagIds" name="tag_ids" type="checkbox" :value="tag.id" class="h-4 w-4 text-blue-600 border-gray-300 rounded" /><span class="text-gray-700 text-sm dark:text-neutral-200">{{ tag.name }}</span></label>
+          </template>
+        </div>
+      </fieldset>
+    </div>
+  </form>
+
+  <div :if="error()" 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">
+    {{ error() }}
+  </div>
+
+  <template #footer>
+    <div class="flex gap-2 justify-end w-full">
+      <Button :disabled="busy()" variant="secondary" @click="close">Cancel</Button>
+      <Button type="submit" form="post-editor-form" :disabled="!valid()" :loading="busy()">
+        {{ post() ? 'Save changes' : 'Create post' }}
+      </Button>
+    </div>
+  </template>
+</Modal>

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

@@ -25,6 +25,17 @@ interface PostRecord {
   categoryIds: string[]
   tagIds: string[]
 }
+interface PostDraft {
+  title: string
+  excerpt: string
+  content: string
+  poster: string
+  status: PostStatus
+  authorId: string | null
+  featured: boolean
+  categoryIds: string[]
+  tagIds: string[]
+}
 
 const posts = state<PostRecord[]>([])
 const categories = state<OptionRecord[]>([])
@@ -37,15 +48,6 @@ const statusFilter = state('all')
 
 const formOpen = state(false)
 const editingPost = state<PostRecord | null>(null)
-const title = state('')
-const excerpt = state('')
-const content = state('')
-const poster = state('')
-const status = state<PostStatus>('draft')
-const authorId = state('')
-const featured = state(false)
-const categoryIds = state<string[]>([])
-const tagIds = state<string[]>([])
 const saving = state(false)
 const saveError = state('')
 const deletingPost = state<PostRecord | null>(null)
@@ -151,51 +153,25 @@ async function loadPosts(): Promise<void> {
   }
 }
 
-function resetForm(post: PostRecord | null): void {
-  editingPost.set(post)
-  title.set(post?.title || '')
-  excerpt.set(post?.excerpt || '')
-  content.set(post?.content || '')
-  poster.set(post?.poster || '')
-  status.set(post?.status || 'draft')
-  authorId.set(post?.authorId || '')
-  featured.set(Boolean(post?.featured))
-  categoryIds.set(post ? [...post.categoryIds] : [])
-  tagIds.set(post ? [...post.tagIds] : [])
-  saveError.set('')
-}
-
-function openCreate(): void { resetForm(null); formOpen.set(true) }
-function openEdit(post: PostRecord): void { resetForm(post); formOpen.set(true) }
+function openCreate(): void { editingPost.set(null); saveError.set(''); formOpen.set(true) }
+function openEdit(post: PostRecord): void { editingPost.set(post); saveError.set(''); formOpen.set(true) }
 function closeForm(): void { if (!saving()) formOpen.set(false) }
 function openDelete(post: PostRecord): void { deletingPost.set(post); deleteError.set('') }
 function closeDelete(): void { if (!deleting()) deletingPost.set(null) }
 
-function formValid(): boolean {
-  const excerptLength = excerpt().trim().length
-  return title().trim().length >= 3 && title().trim().length <= 255
-    && content().trim().length >= 10 && content().length <= 100000
-    && (excerptLength === 0 || excerptLength >= 10) && excerpt().length <= 500
+function deleteDescription(): string {
+  const post = deletingPost()
+  return post ? `${post.title} and its category and tag links will be permanently removed.` : ''
 }
 
-async function savePost(): Promise<void> {
+async function savePost(draft: PostDraft): Promise<void> {
   const post = editingPost()
   saving.set(true)
   saveError.set('')
   try {
     await dashboardApi(post ? `/api/dashboard/posts/${post.id}` : '/api/dashboard/posts', {
       method: post ? 'PATCH' : 'POST',
-      body: {
-        title: title().trim(),
-        excerpt: excerpt().trim(),
-        content: content().trim(),
-        poster: poster().trim(),
-        status: status(),
-        authorId: authorId() || null,
-        featured: featured(),
-        categoryIds: categoryIds(),
-        tagIds: tagIds(),
-      },
+      body: draft,
     })
     formOpen.set(false)
     pushToast('success', post ? 'Post updated' : 'Post created')
@@ -252,30 +228,30 @@ onMount(() => { void loadPosts() })
     <div class="overflow-x-auto"><table class="min-w-full divide-gray-200 divide-y dark:divide-neutral-700"><thead class="bg-gray-50 dark:bg-neutral-900/50"><tr><th class="px-4 py-3 font-semibold text-gray-600 text-left text-xs dark:text-neutral-300">Post</th><th class="px-4 py-3 font-semibold text-gray-600 text-left text-xs dark:text-neutral-300">Taxonomy</th><th class="px-4 py-3 font-semibold text-gray-600 text-left text-xs dark:text-neutral-300">Publishing</th><th class="px-4 py-3 font-semibold text-gray-600 text-left text-xs dark:text-neutral-300">Views</th><th class="px-4 py-3"><span class="sr-only">Actions</span></th></tr></thead><tbody class="divide-gray-200 divide-y dark:divide-neutral-700">
       <template :if="loading()"><tr><td colspan="5" class="px-4 py-12 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 posts</td></tr></template>
       <template :else-if="visiblePosts().length === 0"><tr><td colspan="5" class="px-4 py-14 text-center"><span class="inline-block h-6 w-6 text-gray-400 i-hugeicons-quill-write-02"></span><p class="mt-2 font-medium text-gray-900 text-sm dark:text-white">No posts found</p><p class="mt-1 text-gray-500 text-sm dark:text-neutral-400">Adjust the filters or create a post.</p></td></tr></template>
-      <template :else><template :for="post in visiblePosts()"><tr><td class="px-4 py-3 max-w-md"><div class="flex gap-2 items-center"><p class="font-medium text-gray-900 text-sm truncate dark:text-white">{{ post.title }}</p><span :if="post.featured" title="Featured" class="flex-shrink-0 h-4 w-4 text-amber-500 i-hugeicons-star"></span></div><p class="mt-1 text-gray-500 text-xs truncate dark:text-neutral-400">{{ post.excerpt || post.content }}</p><p class="mt-1 text-gray-400 text-xs dark:text-neutral-500">{{ authorName(post) }}</p></td><td class="px-4 py-3 max-w-xs text-gray-500 text-xs dark:text-neutral-400"><p class="truncate"><span class="font-medium text-gray-700 dark:text-neutral-200">Categories:</span> {{ optionNames(post.categoryIds, categories()) }}</p><p class="mt-1 truncate"><span class="font-medium text-gray-700 dark:text-neutral-200">Tags:</span> {{ optionNames(post.tagIds, tags()) }}</p></td><td class="px-4 py-3"><span :class="statusClass(post.status)">{{ post.status }}</span><p class="mt-2 text-gray-400 text-xs dark:text-neutral-500">{{ formatDate(post.publishedAt) }}</p></td><td class="px-4 py-3 text-gray-500 text-sm dark:text-neutral-400">{{ formatNumber(post.views) }}</td><td class="px-4 py-3"><div class="flex justify-end"><Button variant="ghost" size="sm" iconOnly :ariaLabel="'Edit post ' + post.title" @click="openEdit(post)"><span class="block h-4 w-4 text-blue-500 i-hugeicons-edit-02"></span></Button><Button variant="ghost" size="sm" iconOnly :ariaLabel="'Delete post ' + post.title" @click="openDelete(post)"><span class="block h-4 w-4 text-red-500 i-hugeicons-delete-02"></span></Button></div></td></tr></template></template>
+      <template :else><template :for="post in visiblePosts()"><tr><td class="px-4 py-3 max-w-md"><div class="flex gap-2 items-center"><p class="font-medium text-gray-900 text-sm truncate dark:text-white">{{ post.title }}</p><span :if="post.featured" x-tooltip="Featured" title="Featured" class="flex-shrink-0 h-4 w-4 text-amber-500 i-hugeicons-star"></span></div><p class="mt-1 text-gray-500 text-xs truncate dark:text-neutral-400">{{ post.excerpt || post.content }}</p><p class="mt-1 text-gray-400 text-xs dark:text-neutral-500">{{ authorName(post) }}</p></td><td class="px-4 py-3 max-w-xs text-gray-500 text-xs dark:text-neutral-400"><p class="truncate"><span class="font-medium text-gray-700 dark:text-neutral-200">Categories:</span> {{ optionNames(post.categoryIds, categories()) }}</p><p class="mt-1 truncate"><span class="font-medium text-gray-700 dark:text-neutral-200">Tags:</span> {{ optionNames(post.tagIds, tags()) }}</p></td><td class="px-4 py-3"><span :class="statusClass(post.status)">{{ post.status }}</span><p class="mt-2 text-gray-400 text-xs dark:text-neutral-500">{{ formatDate(post.publishedAt) }}</p></td><td class="px-4 py-3 text-gray-500 text-sm dark:text-neutral-400">{{ formatNumber(post.views) }}</td><td class="px-4 py-3"><div class="flex justify-end"><Button variant="ghost" size="sm" iconOnly :ariaLabel="'Edit post ' + post.title" @click="openEdit(post)"><span class="block h-4 w-4 text-blue-500 i-hugeicons-edit-02"></span></Button><Button variant="ghost" size="sm" iconOnly :ariaLabel="'Delete post ' + post.title" @click="openDelete(post)"><span class="block h-4 w-4 text-red-500 i-hugeicons-delete-02"></span></Button></div></td></tr></template></template>
     </tbody></table></div>
   </section>
 </div>
 
-<div :if="formOpen()" 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 post editor" class="absolute inset-0 bg-black/45" @click="closeForm()"></button>
-  <section role="dialog" aria-modal="true" :aria-label="editingPost() ? 'Edit post' : 'New post'" class="flex relative flex-col max-h-[calc(100dvh-2rem)] max-w-4xl w-full bg-white dark:bg-neutral-800 border border-gray-200 rounded-xl dark:border-neutral-700 shadow-xl">
-    <form class="flex flex-col min-h-0" @submit.prevent="savePost()">
-      <header class="px-6 py-4 border-b border-gray-200 dark:border-neutral-700"><h2 class="font-semibold text-gray-900 text-lg dark:text-white">{{ editingPost() ? 'Edit post' : 'New post' }}</h2><p class="mt-1 text-gray-500 text-sm dark:text-neutral-400">Content, ownership, and taxonomies are persisted together.</p></header>
-      <div class="overflow-y-auto p-6"><div :if="saveError()" role="alert" class="mb-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">{{ saveError() }}</div><div class="grid gap-5">
-        <label><span class="font-medium text-gray-700 text-sm dark:text-neutral-200">Title</span><input x-model.trim="title" required minlength="3" maxlength="255" class="mt-1 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" /></label>
-        <div class="grid gap-4 sm:grid-cols-3"><label><span class="font-medium text-gray-700 text-sm dark:text-neutral-200">Status</span><select x-model="status" class="mt-1 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="draft">Draft</option><option value="published">Published</option><option value="archived">Archived</option></select></label><label><span class="font-medium text-gray-700 text-sm dark:text-neutral-200">Author</span><select x-model="authorId" class="mt-1 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="">No author</option><template :for="author in authors()"><option :value="author.id">{{ author.name }} ({{ author.email }})</option></template></select></label><label class="flex gap-3 items-center self-end px-3 py-2 min-h-10 bg-gray-50 dark:bg-neutral-900/60 border border-gray-200 rounded-md dark:border-neutral-700"><input x-model="featured" type="checkbox" class="h-4 w-4 text-blue-600 border-gray-300 rounded" /><span class="font-medium text-gray-700 text-sm dark:text-neutral-200">Featured post</span></label></div>
-        <label><span class="font-medium text-gray-700 text-sm dark:text-neutral-200">Poster URL</span><input x-model.trim="poster" type="url" maxlength="255" placeholder="https://example.com/poster.jpg" class="mt-1 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" /></label>
-        <label><span class="font-medium text-gray-700 text-sm dark:text-neutral-200">Excerpt</span><textarea x-model="excerpt" rows="3" maxlength="500" placeholder="Optional, at least 10 characters when provided" class="mt-1 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"></textarea><span class="block mt-1 text-gray-400 text-xs">{{ excerpt().length }}/500</span></label>
-        <label><span class="font-medium text-gray-700 text-sm dark:text-neutral-200">Content</span><textarea x-model="content" required minlength="10" maxlength="100000" rows="10" class="mt-1 px-3 py-2 w-full font-mono text-gray-900 text-sm dark:text-white bg-white dark:bg-neutral-900 border border-gray-300 rounded-md dark:border-neutral-700"></textarea><span class="block mt-1 text-gray-400 text-xs">{{ content().length }}/100000</span></label>
-        <div class="grid gap-4 lg:grid-cols-2"><fieldset class="p-4 border border-gray-200 rounded-lg dark:border-neutral-700"><legend class="px-1 font-semibold text-gray-700 text-sm dark:text-neutral-200">Categories, {{ categoryIds().length }} selected</legend><div :if="categories().length === 0" class="text-gray-500 text-sm dark:text-neutral-400">No categories available.</div><div :else class="grid gap-2"><template :for="categoryOption in categories()"><label class="flex gap-2 items-center"><input x-model="categoryIds" type="checkbox" :value="categoryOption.id" class="h-4 w-4 text-blue-600 border-gray-300 rounded" /><span class="text-gray-700 text-sm dark:text-neutral-200">{{ categoryOption.name }}</span></label></template></div></fieldset><fieldset class="p-4 border border-gray-200 rounded-lg dark:border-neutral-700"><legend class="px-1 font-semibold text-gray-700 text-sm dark:text-neutral-200">Tags, {{ tagIds().length }} selected</legend><div :if="tags().length === 0" class="text-gray-500 text-sm dark:text-neutral-400">No tags available.</div><div :else class="grid gap-2 sm:grid-cols-2"><template :for="tag in tags()"><label class="flex gap-2 items-center"><input x-model="tagIds" type="checkbox" :value="tag.id" class="h-4 w-4 text-blue-600 border-gray-300 rounded" /><span class="text-gray-700 text-sm dark:text-neutral-200">{{ tag.name }}</span></label></template></div></fieldset></div>
-      </div></div>
-      <footer class="flex gap-2 justify-end px-6 py-4 bg-gray-50 dark:bg-neutral-900/50 border-gray-200 border-t dark:border-neutral-700"><Button :disabled="saving()" variant="secondary" @click="closeForm()">Cancel</Button><Button type="submit" :disabled="saving() || !formValid()" :loading="saving()">{{ editingPost() ? 'Save changes' : 'Create post' }}</Button></footer>
-    </form>
-  </section>
-</div>
+<PostEditorDialog
+  :open="formOpen()"
+  :post="editingPost()"
+  :categories="categories()"
+  :tags="tags()"
+  :authors="authors()"
+  :busy="saving()"
+  :error="saveError()"
+  @close="closeForm"
+  @submit="savePost"
+/>
 
-<div :if="Boolean(deletingPost())" 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 post dialog" class="absolute inset-0 bg-black/45" @click="closeDelete()"></button>
-  <section role="dialog" aria-modal="true" aria-label="Delete post?" 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">Delete post?</h2><p class="mt-2 text-gray-500 text-sm dark:text-neutral-400"><strong>{{ deletingPost()?.title || '' }}</strong> and its category and tag links will be permanently removed.</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="deletePost()">Delete post</Button></div></section>
-</div>
+<ConfirmDialog
+  :isOpen="Boolean(deletingPost())"
+  title="Delete post?"
+  :description="deleteDescription()"
+  confirmLabel="Delete post"
+  :busy="deleting()"
+  :error="deleteError()"
+  @close="closeDelete"
+  @confirm="deletePost"
+/>