(SP: 3) [Frontend] Admin Blog: Posts CRUD with Tiptap editor (draft + scheduled publish) #387

Goal

Admin can create, edit, publish, schedule, and delete blog posts through the existing admin panel. Blog post body is edited via Tiptap WYSIWYG editor with image insertion. Supports draft/publish/scheduled workflows with multilingual content (uk/en/pl).

Scope

Admin routes

• app/[locale]/admin/blog/page.tsx — post list table (sort: drafts first, then by updatedAt DESC)
• app/[locale]/admin/blog/new/page.tsx — create post
• app/[locale]/admin/blog/[id]/page.tsx — edit post
• app/[locale]/admin/blog/[id]/preview/page.tsx — preview post (locale-aware, any status)

Components (components/admin/blog/)

1. BlogPostListTable.tsx — responsive table (desktop + mobile cards):

   • Status badges: Draft (amber) / Scheduled (sky) / Published (emerald)
   • Actions: Publish/Unpublish toggle (fixed width), Preview (new tab), Edit, Delete (disabled with tooltip for published posts)
   • Centered Actions column

2. BlogPostForm.tsx — combined create/edit form:

   • Locale tabs (uk/en/pl) for: title (text input) + body (Tiptap editor)
   • Single-locale fields: slug (auto-generated from EN title, editable), tags (comma-separated), resourceLink
   • Category checkboxes + inline creation (InlineBlogCategoryForm)
   • Author dropdown + inline creation (InlineBlogAuthorForm)
   • Main image upload (via BlogImageUpload)
   • Publish controls (BlogPublishControls)
   • Validation: all 3 locale titles + bodies required (no fallback to EN)
   • Edit mode: dirty tracking via JSON snapshot comparison (useRef), button disabled until changes made
   • Create mode: button disabled until required fields valid

3. BlogTiptapEditor.tsx — Tiptap instance with:

   • Extensions: StarterKit, CodeBlockLowlight (github-dark theme), @tiptap/extension-image, @tiptap/extension-link, TaskList + TaskItem (checklists)
   • Toolbar (sticky): Bold | Italic | Strike | Code | H2 | H3 | Blockquote | HR | Bullet List | Ordered List | Checklist | Code Block | Link | Image
   • Image button: opens file picker → uploads via POST /api/admin/blog/images → inserts Cloudinary URL

4. BlogImageUpload.tsx — file input for main image, uploads to Cloudinary, previews result. Supports initialUrl for edit mode.

5. BlogPublishControls.tsx — publish workflow:

   • "Save Draft" — isPublished: false
   • "Publish Now" — isPublished: true, scheduledPublishAt: null
   • "Schedule" — isPublished: true, scheduledPublishAt: <datetime picker>
   • Shows current status when editing existing post

6. InlineBlogCategoryForm.tsx — inline 3-locale category creation from post form

7. InlineBlogAuthorForm.tsx — inline 3-locale author creation from post form

API routes (app/api/admin/blog/)

• route.ts — POST (create with publish mode handling)
• [id]/route.ts — PUT (update), DELETE (draft only), PATCH (publish toggle + revalidatePath)
• images/route.ts — POST: receive File → uploadImage(file, { folder: 'blog/posts' }) → return { url, publicId }
• categories/route.ts — POST: inline category creation
• authors/route.ts — POST: inline author creation

All routes: origin guard + CSRF validation + admin auth. Protected via layout guardAdminPage().

Upsert pattern for translations (Neon HTTP, no transactions):

db.insert(blogPostTranslations).values({ postId, locale, title, body }).onConflictDoUpdate({ target: [postId, locale], set: { title, body } })

Query layer — db/queries/blog/admin-blog.ts

• getAdminBlogList() — all posts sorted by isPublished ASC, updatedAt DESC
• getAdminBlogPostById(id) — single post with all locale translations + categoryIds
• createBlogPost() — insert post + translations + category junctions
• updateBlogPost() — update post + upsert translations + sync categories
• deleteBlogPost() — delete (cascade handles translations + categories)
• toggleBlogPostPublish() — set isPublished + publishedAt + scheduledPublishAt
• getAdminBlogAuthors() / getAdminBlogCategories() — dropdown data
• createBlogCategory() / createBlogAuthor() — inline creation

Validation — lib/validation/admin-blog.ts

• createBlogPostSchema — Zod schema with 3-locale translations, nullable fields, publishMode enum, schedule date refine
• createBlogCategorySchema / createBlogAuthorSchema — inline creation schemas

BlogPostRenderer update — components/blog/BlogPostRenderer.tsx

• Added taskList node rendering (no bullets, space-y-3, [&_li_p]:mb-0)
• Added taskItem node rendering (flex + baseline alignment, checkmark icon)

AdminSidebar update

Added Blog section to NAV_SECTIONS in components/admin/AdminSidebar.tsx:

• Posts → /admin/blog
• New Post → /admin/blog/new
• Authors → /admin/blog/authors
• Categories → /admin/blog/categories

Delete constraint: button always visible, disabled with tooltip ("Unpublish first to delete") for published posts. Draft posts can be deleted with confirmation.

Verification (all passed):

1. Create post → save as draft → NOT visible on public /blog
2. Publish immediately → appears on /blog after revalidate
3. Edit published post → changes reflected after revalidate
4. Unpublish from list page → status changes to Draft
5. Delete draft → removed
6. Preview draft → renders correctly with locale switching
7. Inline category/author creation → appears in dropdowns immediately
8. Dirty tracking → Update button disabled until changes made
9. Task list items → render as checklists (not bullets) on preview
10. Code blocks → syntax highlighting with github-dark theme

Depends on: Issue #384, #386

Expected impact

Admin can write and manage all blog content without Sanity. Full draft → schedule → publish workflow. Preview before publishing. Inline category/author creation without leaving the form.

Out of scope

• Author management (Issue (SP: 2) [Frontend] Admin Blog: Authors and Categories management #388)
• Category management (Issue (SP: 2) [Frontend] Admin Blog: Authors and Categories management #388)
• Pagination on list page (not needed with current post count)