@stacksjs/defaults 0.75.480 → 0.75.483

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

@@ -30,6 +30,24 @@ const deletingPage = state<PageRecord | null>(null)
 const deleting = state(false)
 const deleteError = state('')
 
+// The list is paged, searched and sorted by the server, and these are what
+// it was last asked for (stacksjs/stacks#3192). The cards count every page.
+const listPage = state(1)
+const perPage = state(25)
+const search = state('')
+const sort = state('')
+const sortDirection = state('asc')
+const total = state(0)
+const allCount = state(0)
+const viewCount = state(0)
+const conversionCount = state(0)
+const newestTitle = state('')
+let listRequestId = 0
+let searchTimer: ReturnType<typeof setTimeout> | undefined
+
+/** The server's name for each sortable column. */
+const SORT_KEYS: Record<string, string> = { title: 'title', publishState: 'published' }
+
 function normalize(record: any): PageRecord {
   return {
     id: String(record?.id || ''),
@@ -64,7 +82,7 @@ const ROW_ACTIONS = [
   { action: 'delete', label: 'Delete page', icon: 'i-hugeicons-delete-02', class: 'text-red-500' },
 ]
 
-/** `UI/Table` owns the search; the cells each read a field, so derive them. */
+/** The rows are the page the server chose; the cells each read a field, so derive them. */
 function visiblePages(): PageRecord[] {
   return pages().map(page => ({
     ...page,
@@ -82,14 +100,6 @@ function handleRowAction(payload: { action: string, row: PageRecord }): void {
     openDelete(payload.row)
 }
 
-function totalViews(): number {
-  return pages().reduce((sum, page) => sum + page.views, 0)
-}
-
-function totalConversions(): number {
-  return pages().reduce((sum, page) => sum + page.conversions, 0)
-}
-
 function formatNumber(value: number): string {
   return new Intl.NumberFormat('en-US').format(value)
 }
@@ -103,24 +113,89 @@ function formatDate(value: string): string {
     : new Intl.DateTimeFormat('en-US', { month: 'short', day: 'numeric', year: 'numeric' }).format(date)
 }
 
+interface PageListResponse {
+  pages?: unknown[]
+  total?: number
+  page?: number
+  allCount?: number
+  totalViews?: number
+  totalConversions?: number
+  newestTitle?: string
+}
+
+function listQuery(): string {
+  const params = new URLSearchParams({ page: String(listPage()), per_page: String(perPage()) })
+  if (search())
+    params.set('search', search())
+  if (sort()) {
+    params.set('sort', sort())
+    params.set('direction', sortDirection())
+  }
+  return params.toString()
+}
+
 async function loadPages(): Promise<void> {
+  // Only the newest request may land: typing, paging and sorting can each
+  // start one while another is still out.
+  const requestId = ++listRequestId
   loading.set(true)
   loadError.set('')
   try {
-    const data = await dashboardApi<{ pages?: unknown[] }>('/api/dashboard/pages')
+    const data = await dashboardApi<PageListResponse>(`/api/dashboard/pages?${listQuery()}`)
+    if (requestId !== listRequestId)
+      return
     if (!Array.isArray(data.pages))
       throw new TypeError('Pages were not returned in the expected shape.')
     pages.set(data.pages.map(normalize))
+    total.set(Number(data.total || 0))
+    // The server moves back to the last page when a delete or a narrower
+    // search leaves this one past the end.
+    listPage.set(Number(data.page || 1))
+    allCount.set(Number(data.allCount || 0))
+    viewCount.set(Number(data.totalViews || 0))
+    conversionCount.set(Number(data.totalConversions || 0))
+    newestTitle.set(String(data.newestTitle || ''))
   }
   catch (error) {
+    if (requestId !== listRequestId)
+      return
     loadError.set(error instanceof Error ? error.message : String(error))
     pushToast('error', 'Could not load pages', { detail: loadError() })
   }
   finally {
-    loading.set(false)
+    if (requestId === listRequestId)
+      loading.set(false)
   }
 }
 
+function changePage(next: number): void {
+  listPage.set(next)
+  void loadPages()
+}
+
+function changePageSize(size: number): void {
+  perPage.set(size)
+  listPage.set(1)
+  void loadPages()
+}
+
+function changeSearch(term: string): void {
+  if (searchTimer)
+    clearTimeout(searchTimer)
+  searchTimer = setTimeout(() => {
+    search.set(String(term || '').trim())
+    listPage.set(1)
+    void loadPages()
+  }, 250)
+}
+
+function changeSort(next: { key: string, direction: string }): void {
+  sort.set(SORT_KEYS[next.key] || '')
+  sortDirection.set(next.direction === 'desc' ? 'desc' : 'asc')
+  listPage.set(1)
+  void loadPages()
+}
+
 function openCreate(): void {
   editingPage.set(null)
   saveError.set('')
@@ -208,10 +283,10 @@ onMount(() => {
   <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="loadPages()">Retry</Button></div>
 
   <section aria-label="Page metrics" class="grid gap-3 grid-cols-1 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">{{ pages().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">Views</p><p class="mt-2 font-semibold text-2xl text-gray-900 dark:text-white">{{ formatNumber(totalViews()) }}</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">Conversions</p><p class="mt-2 font-semibold text-2xl text-gray-900 dark:text-white">{{ formatNumber(totalConversions()) }}</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">Newest</p><p class="mt-2 font-semibold text-gray-900 text-lg truncate dark:text-white">{{ pages()[0]?.title || 'None' }}</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">Total</p><p class="mt-2 font-semibold text-2xl text-gray-900 dark:text-white">{{ allCount() }}</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">Views</p><p class="mt-2 font-semibold text-2xl text-gray-900 dark:text-white">{{ formatNumber(viewCount()) }}</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">Conversions</p><p class="mt-2 font-semibold text-2xl text-gray-900 dark:text-white">{{ formatNumber(conversionCount()) }}</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">Newest</p><p class="mt-2 font-semibold text-gray-900 text-lg truncate dark:text-white">{{ newestTitle() || 'None' }}</p></article>
   </section>
 
   <section class="overflow-hidden bg-white dark:bg-neutral-800 border border-gray-200 rounded-lg dark:border-neutral-700">
@@ -222,12 +297,21 @@ onMount(() => {
       :row-actions="ROW_ACTIONS"
       action-label-key="title"
       searchable
+      manual-search
       search-placeholder="Search pages"
       paginated
-      :page-size="25"
+      manual-pagination
+      manual-sort
+      :total="total()"
+      :current-page="listPage()"
+      :page-size="perPage()"
       empty-title="No pages found"
       empty-description="Adjust the search or create a page."
       @row-action="handleRowAction"
+      @page-change="changePage"
+      @page-size-change="changePageSize"
+      @search="changeSearch"
+      @sort="changeSort"
     />
   </section>
 </div>

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

@@ -6,7 +6,6 @@ interface PostRecord {
   id: string
   title: string
   excerpt: string
-  content: string
   poster: string
   status: PostStatus
   authorId: string
@@ -36,6 +35,12 @@ const editing = useReactiveProp('post', null as PostRecord | null)
 const categories = useReactiveProp('categories', [] as OptionRecord[])
 const tags = useReactiveProp('tags', [] as OptionRecord[])
 const authors = useReactiveProp('authors', [] as AuthorRecord[])
+// The list row carries a preview, not the body, so the parent reads the body
+// when an edit opens and hands it in here (stacksjs/stacks#3191), as the blog
+// editor does.
+const loadedContent = useReactiveProp('loadedContent', '')
+const contentLoading = useReactiveProp('contentLoading', false)
+const contentLoadFailed = useReactiveProp('contentLoadFailed', false)
 const busy = useReactiveProp('busy', false)
 const error = useReactiveProp('error', '')
 const title = state('')
@@ -47,16 +52,18 @@ const authorId = state('')
 const featured = state(false)
 const categoryIds = state<string[]>([])
 const tagIds = state<string[]>([])
-const emit = defineEmits(['close', 'submit'])
+const emit = defineEmits(['close', 'submit', 'retry'])
 let wasOpen = false
+let activeId = ''
 
 effect(() => {
   const isOpen = open()
   if (isOpen && !wasOpen) {
     const record = editing()
+    activeId = record?.id || ''
     title.set(record?.title || '')
     excerpt.set(record?.excerpt || '')
-    content.set(record?.content || '')
+    content.set('')
     poster.set(record?.poster || '')
     status.set(record?.status || 'draft')
     authorId.set(record?.authorId || '')
@@ -67,9 +74,15 @@ effect(() => {
   wasOpen = isOpen
 })
 
+effect(() => {
+  if (open() && activeId && editing()?.id === activeId && !contentLoading())
+    content.set(loadedContent())
+})
+
 function valid(): boolean {
   const excerptLength = excerpt().trim().length
-  return title().trim().length >= 3 && title().trim().length <= 255
+  return !contentLoading() && !contentLoadFailed()
+    && title().trim().length >= 3 && title().trim().length <= 255
     && content().trim().length >= 10 && content().length <= 100000
     && (excerptLength === 0 || excerptLength >= 10) && excerpt().length <= 500
 }
@@ -139,8 +152,14 @@ function submit(): void {
       <span class="block mt-1 text-gray-500 text-xs dark:text-gray-400">{{ 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="flex gap-3 items-center justify-between">
+        <span class="font-medium text-gray-700 text-sm dark:text-neutral-200">Content</span>
+        <span :if="contentLoading()" role="status" class="inline-flex gap-1.5 items-center text-gray-500 text-xs dark:text-neutral-400">
+          <span aria-hidden="true" class="h-3.5 w-3.5 animate-spin i-hugeicons-loading-03"></span>
+          Loading content
+        </span>
+      </span>
+      <textarea x-model="content" name="content" required minlength="10" maxlength="100000" rows="10" :disabled="contentLoading() || contentLoadFailed()" 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 disabled:opacity-60"></textarea>
       <span class="block mt-1 text-gray-500 text-xs dark:text-gray-400">{{ content().length }}/100000</span>
     </label>
     <div class="grid gap-4 lg:grid-cols-2">
@@ -165,8 +184,9 @@ function submit(): void {
     </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 :if="error()" role="alert" class="flex flex-wrap gap-3 items-center justify-between 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">
+    <span>{{ error() }}</span>
+    <Button :if="contentLoadFailed()" variant="secondary" size="sm" @click="emit('retry')">Retry loading content</Button>
   </div>
 
   <template #footer>

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

@@ -17,7 +17,7 @@ interface PostRecord {
   id: string
   title: string
   excerpt: string
-  content: string
+  preview: string
   poster: string
   status: PostStatus
   views: number
@@ -47,6 +47,27 @@ const loading = state(true)
 const loadError = state('')
 const statusFilter = state('all')
 
+// The list is paged, searched and sorted by the server, and these are what
+// it was last asked for (stacksjs/stacks#3191). The cards count every post.
+const page = state(1)
+const perPage = state(25)
+const search = state('')
+const sort = state('')
+const sortDirection = state('asc')
+const total = state(0)
+const allCount = state(0)
+const publishedCount = state(0)
+const draftCount = state(0)
+const archivedCount = state(0)
+const totalViewCount = state(0)
+let listRequestId = 0
+let searchTimer: ReturnType<typeof setTimeout> | undefined
+
+const loadedContent = state('')
+const contentLoading = state(false)
+const contentLoadFailed = state(false)
+let contentRequestId = 0
+
 const formOpen = state(false)
 const editingPost = state<PostRecord | null>(null)
 const saving = state(false)
@@ -69,7 +90,7 @@ function normalizePost(record: any): PostRecord {
     id: String(record?.id || ''),
     title: String(record?.title || ''),
     excerpt: String(record?.excerpt || ''),
-    content: String(record?.content || ''),
+    preview: String(record?.preview || ''),
     poster: String(record?.poster || ''),
     status: normalizedStatus(record?.status),
     views: Number(record?.views || 0),
@@ -116,16 +137,15 @@ const ROW_ACTIONS = [
 ]
 
 /**
- * `UI/Table` owns the search, so this applies only the status filter. The
- * labels are derived onto the row because a slot body reads fields rather than
- * calling back into the component.
+ * The rows are already the page the server chose, so this only derives the
+ * labels onto each one, because a slot body reads fields rather than calling
+ * back into the component.
  */
 function visiblePosts(): PostRecord[] {
   return posts()
-    .filter(post => statusFilter() === 'all' || post.status === statusFilter())
     .map(post => ({
       ...post,
-      summaryLabel: post.excerpt || post.content,
+      summaryLabel: post.excerpt || post.preview,
       authorLabel: authorName(post),
       categoriesLabel: optionNames(post.categoryIds, categories()),
       tagsLabel: optionNames(post.tagIds, tags()),
@@ -141,11 +161,7 @@ function handleRowAction(payload: { action: string, row: PostRecord }): void {
 }
 
 function postCount(value: PostStatus): number {
-  return posts().filter(post => post.status === value).length
-}
-
-function totalViews(): number {
-  return posts().reduce((sum, post) => sum + post.views, 0)
+  return value === 'published' ? publishedCount() : value === 'draft' ? draftCount() : archivedCount()
 }
 
 function formatNumber(value: number): string {
@@ -168,30 +184,159 @@ function optionNames(ids: string[], options: OptionRecord[]): string {
   return names.length ? names.join(', ') : 'None'
 }
 
+interface PostPageResponse {
+  posts?: unknown[]
+  categories?: unknown[]
+  tags?: unknown[]
+  authors?: unknown[]
+  total?: number
+  page?: number
+  allCount?: number
+  publishedCount?: number
+  draftCount?: number
+  archivedCount?: number
+  totalViews?: number
+}
+
+function listQuery(): string {
+  const params = new URLSearchParams({ page: String(page()), per_page: String(perPage()) })
+  if (search())
+    params.set('search', search())
+  if (statusFilter() !== 'all')
+    params.set('status', statusFilter())
+  if (sort()) {
+    params.set('sort', sort())
+    params.set('direction', sortDirection())
+  }
+  return params.toString()
+}
+
 async function loadPosts(): Promise<void> {
+  // Only the newest request may land: typing, paging and filtering can each
+  // start one while another is still out.
+  const requestId = ++listRequestId
   loading.set(true)
   loadError.set('')
   try {
-    const data = await dashboardApi<{ posts?: unknown[], categories?: unknown[], tags?: unknown[], authors?: unknown[] }>('/api/dashboard/posts')
+    const data = await dashboardApi<PostPageResponse>(`/api/dashboard/posts?${listQuery()}`)
+    if (requestId !== listRequestId)
+      return
     if (!Array.isArray(data.posts) || !Array.isArray(data.categories) || !Array.isArray(data.tags) || !Array.isArray(data.authors))
       throw new TypeError('Posts were not returned in the expected shape.')
     posts.set(data.posts.map(normalizePost))
     categories.set(data.categories.map(normalizeOption))
     tags.set(data.tags.map(normalizeOption))
     authors.set(data.authors.map(normalizeAuthor))
+    total.set(Number(data.total || 0))
+    // The server moves back to the last page when a delete or a narrower
+    // search leaves this one past the end.
+    page.set(Number(data.page || 1))
+    allCount.set(Number(data.allCount || 0))
+    publishedCount.set(Number(data.publishedCount || 0))
+    draftCount.set(Number(data.draftCount || 0))
+    archivedCount.set(Number(data.archivedCount || 0))
+    totalViewCount.set(Number(data.totalViews || 0))
   }
   catch (error) {
+    if (requestId !== listRequestId)
+      return
     loadError.set(error instanceof Error ? error.message : String(error))
     pushToast('error', 'Could not load posts', { detail: loadError() })
   }
   finally {
-    loading.set(false)
+    if (requestId === listRequestId)
+      loading.set(false)
   }
 }
 
-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 changePage(next: number): void {
+  page.set(next)
+  void loadPosts()
+}
+
+function changePageSize(size: number): void {
+  perPage.set(size)
+  page.set(1)
+  void loadPosts()
+}
+
+function changeSearch(term: string): void {
+  if (searchTimer)
+    clearTimeout(searchTimer)
+  searchTimer = setTimeout(() => {
+    search.set(String(term || '').trim())
+    page.set(1)
+    void loadPosts()
+  }, 250)
+}
+
+function changeSort(next: { key: string, direction: string }): void {
+  sort.set(next.key || '')
+  sortDirection.set(next.direction === 'desc' ? 'desc' : 'asc')
+  page.set(1)
+  void loadPosts()
+}
+
+function changeStatus(event: Event): void {
+  statusFilter.set((event.target as HTMLSelectElement).value)
+  page.set(1)
+  void loadPosts()
+}
+
+async function loadEditorContent(post: PostRecord): Promise<void> {
+  const requestId = ++contentRequestId
+  contentLoading.set(true)
+  contentLoadFailed.set(false)
+  saveError.set('')
+  try {
+    const data = await dashboardApi<{ content?: string }>(`/api/dashboard/posts/${post.id}`)
+    if (requestId === contentRequestId && formOpen() && editingPost()?.id === post.id)
+      loadedContent.set(String(data.content || ''))
+  }
+  catch (error) {
+    if (requestId === contentRequestId) {
+      contentLoadFailed.set(true)
+      saveError.set(`Couldn't load this post's content: ${error instanceof Error ? error.message : String(error)}`)
+    }
+  }
+  finally {
+    if (requestId === contentRequestId)
+      contentLoading.set(false)
+  }
+}
+
+function retryEditorContent(): void {
+  const post = editingPost()
+  if (post)
+    void loadEditorContent(post)
+}
+
+function openCreate(): void {
+  contentRequestId += 1
+  editingPost.set(null)
+  loadedContent.set('')
+  contentLoading.set(false)
+  contentLoadFailed.set(false)
+  saveError.set('')
+  formOpen.set(true)
+}
+
+function openEdit(post: PostRecord): void {
+  editingPost.set(post)
+  loadedContent.set('')
+  contentLoading.set(true)
+  contentLoadFailed.set(false)
+  saveError.set('')
+  formOpen.set(true)
+  void loadEditorContent(post)
+}
+
+function closeForm(): void {
+  if (saving())
+    return
+  contentRequestId += 1
+  formOpen.set(false)
+}
 function openDelete(post: PostRecord): void { deletingPost.set(post); deleteError.set('') }
 function closeDelete(): void { if (!deleting()) deletingPost.set(null) }
 
@@ -253,10 +398,10 @@ onMount(() => { void loadPosts() })
   <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="loadPosts()">Retry</Button></div>
 
   <section aria-label="Post 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">{{ posts().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">Total</p><p class="mt-2 font-semibold text-2xl text-gray-900 dark:text-white">{{ allCount() }}</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">Published</p><p class="mt-2 font-semibold text-2xl text-green-700 dark:text-green-300">{{ postCount('published') }}</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">Drafts</p><p class="mt-2 font-semibold text-2xl text-yellow-700 dark:text-yellow-300">{{ postCount('draft') }}</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">Views</p><p class="mt-2 font-semibold text-2xl text-gray-900 dark:text-white">{{ formatNumber(totalViews()) }}</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">Views</p><p class="mt-2 font-semibold text-2xl text-gray-900 dark:text-white">{{ formatNumber(totalViewCount()) }}</p></article>
   </section>
 
   <section class="overflow-hidden bg-white dark:bg-neutral-800 border border-gray-200 rounded-lg dark:border-neutral-700">
@@ -267,17 +412,26 @@ onMount(() => { void loadPosts() })
       :row-actions="ROW_ACTIONS"
       action-label-key="title"
       searchable
+      manual-search
       search-placeholder="Search title, excerpt, or content"
       paginated
-      :page-size="25"
+      manual-pagination
+      manual-sort
+      :total="total()"
+      :current-page="page()"
+      :page-size="perPage()"
       empty-title="No posts found"
       empty-description="Adjust the search or status filter."
       @row-action="handleRowAction"
+      @page-change="changePage"
+      @page-size-change="changePageSize"
+      @search="changeSearch"
+      @sort="changeSort"
     >
       <template #toolbar>
         <label>
           <span class="sr-only">Filter by status</span>
-          <select x-model="statusFilter" class="px-2.5 py-1.5 text-sm bg-white dark:bg-neutral-800 border border-stone-300 rounded-lg dark:border-neutral-600">
+          <select :value="statusFilter()" @change="changeStatus($event)" class="px-2.5 py-1.5 text-sm bg-white dark:bg-neutral-800 border border-stone-300 rounded-lg dark:border-neutral-600">
             <option value="all">All statuses</option>
             <option value="published">Published</option>
             <option value="draft">Draft</option>
@@ -310,10 +464,14 @@ onMount(() => { void loadPosts() })
   :categories="categories()"
   :tags="tags()"
   :authors="authors()"
+  :loadedContent="loadedContent()"
+  :contentLoading="contentLoading()"
+  :contentLoadFailed="contentLoadFailed()"
   :busy="saving()"
   :error="saveError()"
   @close="closeForm"
   @submit="savePost"
+  @retry="retryEditorContent"
 />
 
 <ConfirmDialog