add nav editors to Site tab with live preview
All checks were successful
deploy / deploy (push) Successful in 3m27s

- Add header and footer nav editors to Site tab with drag-to-reorder,
  add/remove items, and destination picker (pages, collections, external)
- Live preview updates as you edit nav items
- Remove legacy /admin/navigation page and controller (was saving to
  Settings table, now uses nav_items table)
- Update error_html.ex and pages/editor.ex to load nav from nav_items table
- Update link_scanner to read from nav_items table, edit path now /?edit=site
- Add Site.default_header_nav/0 and default_footer_nav/0 for previews/errors
- Remove fallback logic from theme_hook.ex (database is now source of truth)
- Seed default nav items and social links during setup

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
jamey
2026-03-28 22:19:48 +00:00
parent 5a5103bc42
commit 7c07805df8
24 changed files with 1068 additions and 1130 deletions

View File

@@ -206,11 +206,11 @@ end
| 7 | Announcement bar: style variants | 6 | 15m | done |
| 8 | Social links: editor UI (list, add, remove, reorder) | 4 | 1.5h | done |
| 9 | Social links: read from database | 8 | 30m | done |
| 10 | Header nav: editor UI | 4 | 1h | planned |
| 11 | Header nav: page picker component | 10 | 30m | planned |
| 12 | Header nav: read from database | 11 | 30m | planned |
| 13 | Footer nav: editor UI | 10 | 30m | planned |
| 14 | Footer nav: read from database | 13 | 30m | planned |
| 10 | Header nav: editor UI | 4 | 1h | done |
| 11 | Header nav: page picker component | 10 | 30m | done |
| 12 | Header nav: read from database | 11 | 30m | done |
| 13 | Footer nav: editor UI | 10 | 30m | done |
| 14 | Footer nav: read from database | 13 | 30m | done |
| 15 | Footer content: about, copyright, newsletter toggle | 4 | 45m | done |
| 16 | Footer: read new fields | 15 | 30m | done |
| 17 | Move branding settings from Theme to Site | 4 | 1h | planned |
@@ -250,10 +250,11 @@ The social links feature supports 40+ platforms grouped into 9 categories:
- Returns "custom" for unknown domains
**Data flow:**
- Database → `Site.list_social_links/0` → raw structs
- Database → `Site.list_social_links/0` → raw structs loaded into original and current state
- Shop display → `Site.social_links_for_shop/0` → filtered (no empty URLs), formatted maps
- Editor preview → `format_social_links_for_shop/1` in layout.ex → same filtering
- Social links card block now uses database data via `assigns[:social_links]`
- Changes preview immediately, persist on Save button via `sync_social_links/2`
**Files:**
- `lib/berrypod/site.ex` - Site context with social links CRUD
@@ -262,6 +263,43 @@ The social links feature supports 40+ platforms grouped into 9 categories:
- `lib/berrypod_web/page_editor_hook.ex` - Event handlers
- `test/berrypod/site_test.exs` - 35 tests covering all functionality
### Completed: Navigation Editors (Tasks 10-14)
Header and footer navigation items are managed through a unified `nav_editor` component.
**Features:**
- Add/edit/delete/reorder nav items
- Label input with live preview
- Link type selector: Page (dropdown) or Custom URL (text input)
- Page picker shows linkable system pages (home, about, delivery, privacy, terms, contact) and published custom pages
- Move up/down buttons with disabled state at boundaries
- Changes preview immediately, persist on Save button
**Event handlers:**
- `site_add_nav_item` - Creates temporary item in local state
- `site_update_nav_item` - Updates label, URL, or page selection in local state based on `_target`
- `site_remove_nav_item` - Removes item from local state
- `site_move_nav_item` - Reorders items in local state
**Save/revert behavior:**
- All nav item and social link changes participate in the unified dirty state system
- `compute_site_dirty/1` compares current state against original state loaded at editor open
- On Save: `sync_nav_items/2` and `sync_social_links/2` diff current vs original and create/update/delete as needed
- On Discard: reverts to original state from `site_editor_original`
- Navigation warning modal appears when navigating with unsaved changes
**Data flow:**
- Database → `Site.list_nav_items/1` → raw structs loaded into original and current state
- Shop display → `Site.nav_items_for_shop/1` → formatted maps with computed href/slug
- Header/footer components already wired to use `@header_nav_items`/`@footer_nav_items`
**Files:**
- `lib/berrypod/site.ex` - NavItem CRUD and reorder functions
- `lib/berrypod/site/nav_item.ex` - Schema with location, label, url, page_id, position
- `lib/berrypod_web/components/shop_components/site_editor.ex` - `nav_editor` component
- `lib/berrypod_web/page_editor_hook.ex` - Event handlers, sync functions, dirty state
- `assets/css/admin/components.css` - Styles for nav editor
## UI Wireframes
### Site tab layout