Refactor page builder: @dnd-kit DnD, component decomposition, extensible block registry#155
Draft
Copilot wants to merge 12 commits intocodex/build-dynamic-marketing-page-creatorfrom
Conversation
…block registry and renderer - Replace native HTML5 DnD with @dnd-kit/core + @dnd-kit/sortable for smooth drag animations, proper drag handles, visual feedback, and keyboard accessibility - Decompose monolithic AdminPageBuilderPage (459 lines) into focused sub-components: - BuilderCanvas: @dnd-kit sortable canvas with drag handles, selection state, empty state - BlockPalette: categorized block palette with variant counts and category icons - BlockEditor: section editor with pill-based variant picker (replaces raw text input) - FeatureListEditor: controlled feature editing with expandable fields (description, icon, link) - ActionListEditor: controlled action editing with variant dropdown, icon field, external toggle - builder-types: shared types for builder components - AdminPageBuilderPage is now a thin orchestrator (~250 lines) composing sub-components - Fix direct data mutation anti-pattern in feature/action editing (was: feature.title = e.target.value) - Add 'about' block type to registry (matches Next.js homepage slots) - Add registerCustomBlock() API for apps to extend the block registry at runtime - Improve MarketingPageRenderer with slot-aware visual rendering (hero gradient, feature cards/grid/list, CTA banner variant, navbar, footer) instead of generic bordered sections - Add vitest include pattern for worker/ test directory - Update and expand tests: 4 tests covering registry, custom registration, core slots, variants Agent-Logs-Url: https://github.com/thinkdj/ottabase/sessions/1935a94b-0dd9-49a6-8696-3a0791c05a64
…code slug in preview URL Agent-Logs-Url: https://github.com/thinkdj/ottabase/sessions/1935a94b-0dd9-49a6-8696-3a0791c05a64
Copilot
AI
changed the title
[WIP] Analyze homepages and marketing pages implementation
Refactor page builder: @dnd-kit DnD, component decomposition, extensible block registry
Mar 31, 2026
Owner
|
@copilot make a list of enhancements possible to make this homepage feature the top notch for saas founders |
…oadmap - Add AboutSection to MarketingPageRenderer SLOT_RENDERERS (was defined as block but not rendered, falling back to GenericSection) - Create ENHANCEMENTS.md: 24 prioritized enhancements for SaaS founders organized by P0 (ship-critical), P1 (high-impact), P2 (differentiators), P3 (polish) Agent-Logs-Url: https://github.com/thinkdj/ottabase/sessions/331dbe2c-0d6c-403c-8fbd-d19c9d51f1fe
Author
Created a comprehensive 24-item enhancement roadmap in P0 — Ship-Critical (5 items):
P1 — High-Impact (5 items): P2 — Differentiators (8 items): P3 — Polish (6 items): Full details with architecture notes in |
Add helpers to normalize legacy and modern OttaORM CRUD payloads (normalizeCrudListPayload, extractCrudMutationRecord, extractCrudDetailRecord) and tests. Update AdminPageBuilderPage and AdminPagesListPage to use these helpers, switch list query params from filters to where, and adapt mutations to the { id, data } shape. Update marketing-pages worker to safely read model fields and toJSON via modelGet/modelToJson helpers. Add README note about tolerant payload shapes for list/detail/mutation responses.
Add shadcn AlertDialog confirmations for destructive actions in admin editors (ActionListEditor, FeatureListEditor, BlockEditor) and modal flows for duplicate/delete in AdminPagesListPage with disabled/pending states and accessibility attributes. Refactor MarketingPageRenderer: introduce typed MarketingSection/SectionAction, add DarkModeToggle, RouterLink/useLocation, external link icons, and many specialized slot renderers (hero, features, cta, navbar, footer, about) with variant handling and a resolveRenderer mapper so the public page mirrors the Next.js homepage variant family. Also update README notes to mention the renderer parity and confirmation dialogs.
Add mediaUrl/mediaAlt fields to page sections and features (DB schema, models, and types). Integrate an @ottabase/medialibrary picker (mediaPicker utility) into BlockEditor and FeatureListEditor to select images, show previews, and persist image data. Add a live preview panel in the admin page builder with desktop/tablet/mobile viewport switching and refresh (iframe-based, bumps on edits). Update marketing renderer and worker route to surface and render section/feature images. Update admin list page mappings and README notes to document the new capabilities.
Introduce an AI Copy Assistant for the admin BlockEditor: update README to mention the feature and modify BlockEditor.tsx to add AI controls and per-field buttons. Changes include new imports (api, toast, Sparkles), type definitions for tone/operation/fields, AI state and loading handling, prompt construction, API call to /api/cloudflare/ai/universal/chat (Workers AI + Llama 3.1), per-field generate/operation handlers, a Generate All action, and UI elements (tone/action selects, context input, AI buttons) with success/error toasts and disabled/loading states.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Uh oh!
There was an error while loading. Please reload this page.