diff --git a/docs/plans/editor-reorganisation.md b/docs/plans/editor-reorganisation.md new file mode 100644 index 0000000..5bf4c93 --- /dev/null +++ b/docs/plans/editor-reorganisation.md @@ -0,0 +1,319 @@ +# Editor Panel Reorganisation + +Status: Planned + +## Problem + +The current 3-tab editor panel (Page | Theme | Settings) has gaps and unintuitive organisation: + +1. **Missing functionality** — can't edit announcement bar text, social links, header/footer nav, footer about text +2. **Scattered concerns** — shop name is in Theme (visual design) but it's business info; navigation settings are spread across multiple places +3. **Settings tab is underused** — on system/product pages it's essentially read-only with links elsewhere + +## Vision + +A user editing their shop should find everything in a logical place based on what they're trying to do: +- "I want to change what's on this page" → Page tab +- "I want to change how my site looks" → Theme tab +- "I want to change site-wide content" → Site tab + +## Proposed Structure + +### Page tab (content on this specific page) + +**For all pages:** +- Block editor (add, reorder, duplicate, delete, edit) +- Undo/redo + +**For custom CMS pages only (inline, not separate Settings tab):** +- Page title +- URL slug +- Meta description +- Published toggle +- Show in navigation toggle +- Navigation label & position (if show_in_nav) + +**For system pages:** +- Block editor only (title/slug not editable) +- "Reset to defaults" for resettable pages + +**For product/collection pages:** +- Read-only info with link to admin + +### Theme tab (visual design — how it looks) + +Keep existing structure but **remove** shop name and logo (move to Site tab): + +**Quick settings:** +- Preset grid (8 themes) +- Accent colour, hover colour, sale colour + +**Advanced (Customise accordion):** +- Typography: font style, size, heading weight +- Colours: mood (warm, neutral, cool, dark) +- Layout: grid columns, density, header layout, sticky header +- Shape: corners, shadows, button style +- Products: content width, image aspect, text alignment, hover image, show prices +- Product page: trust badges, reviews, related products + +### Site tab (site-wide content — what appears everywhere) + +New tab replacing "Settings". Contains everything that appears on every page: + +**Branding:** +- Shop name +- Logo (upload, show/hide, size, recolour, colour) +- Favicon (upload) +- Header background image (upload, zoom, position) + +**Announcement bar:** +- Show announcement bar (toggle) +- Announcement text (NEW — currently hardcoded) +- Announcement link URL (optional) +- Announcement style (info, sale, warning) + +**Header navigation:** +- Editable list of nav items +- Each item: label, link (page picker or URL), position +- "Add nav item" button + +**Footer:** +- About text (NEW — the footer blurb) +- Copyright text (NEW — currently auto-generated) +- Show newsletter signup (toggle) + +**Footer navigation:** +- Editable list of footer nav items ("Help" section) +- Each item: label, link, position + +**Social links:** +- Editable list of social links (NEW) +- Each link: platform (dropdown), URL +- Reorder via drag or arrows + +## Data Model Changes + +### New fields in Settings + +```elixir +# Announcement bar +:announcement_text, :string, default: "" +:announcement_link, :string, default: "" +:announcement_style, :string, default: "info" # info | sale | warning + +# Footer content +:footer_about, :string, default: "" +:footer_copyright, :string, default: "" # empty = auto-generate +:show_newsletter, :boolean, default: true +``` + +### New schema: SocialLink + +```elixir +schema "social_links" do + field :platform, :string # instagram, bluesky, mastodon, twitter, youtube, tiktok, etc. + field :url, :string + field :position, :integer + timestamps() +end +``` + +### New schema: NavItem + +```elixir +schema "nav_items" do + field :location, :string # "header" | "footer" + field :label, :string + field :url, :string # can be relative (/about) or absolute + field :page_id, :binary_id # optional, links to a Page + field :position, :integer + timestamps() +end +``` + +## Migration Path + +### Phase 1: Data model + Site tab skeleton (3h) + +1. Add new Settings fields (announcement_text, footer_about, etc.) +2. Create SocialLink schema and migration +3. Create NavItem schema and migration +4. Seed default nav items from current hardcoded values +5. Seed default social links from current hardcoded values +6. Create Site tab component (skeleton) + +### Phase 2: Announcement bar (1.5h) + +1. Add announcement text/link/style inputs to Site tab +2. Update shop header to read from Settings instead of hardcoded +3. Style variants for info/sale/warning + +### Phase 3: Social links editor (2h) + +1. Add social links editor to Site tab (list with add/remove/reorder) +2. Platform dropdown with icons +3. Update footer to read from SocialLink table +4. Delete hardcoded social links + +### Phase 4: Navigation editors (3h) + +1. Add header nav editor to Site tab +2. Add footer nav editor to Site tab +3. Page picker component (dropdown of published pages) +4. Update header/footer to read from NavItem table +5. Delete hardcoded nav arrays + +### Phase 5: Footer content (1h) + +1. Add footer about text input +2. Add copyright text input (with placeholder showing auto-generated) +3. Add newsletter toggle +4. Update footer component to use these values + +### Phase 6: Move branding from Theme to Site (1.5h) + +1. Move shop name input to Site tab +2. Move logo settings to Site tab +3. Move favicon settings to Site tab +4. Move header background settings to Site tab +5. Update Theme tab to remove these sections +6. Ensure Theme tab still feels complete (may need UI polish) + +### Phase 7: Merge Settings into Page (1h) + +1. For custom pages: move title/slug/meta/published/nav settings inline into Page tab +2. Remove Settings tab entirely +3. Update tab switching logic + +### Phase 8: Polish and testing (2h) + +1. Responsive design for Site tab +2. Empty states +3. Validation and error handling +4. Test all combinations (custom page, system page, product page, collection) +5. Update onboarding/help text if needed + +## Task Breakdown + +| # | Task | Depends | Est | Status | +|---|------|---------|-----|--------| +| 1 | Data model: new Settings fields + migrations | — | 1h | planned | +| 2 | Data model: SocialLink schema + seed defaults | 1 | 45m | planned | +| 3 | Data model: NavItem schema + seed defaults | 1 | 45m | planned | +| 4 | Site tab skeleton component | 1 | 30m | planned | +| 5 | Announcement bar: editor UI | 4 | 45m | planned | +| 6 | Announcement bar: read from Settings | 5 | 30m | planned | +| 7 | Announcement bar: style variants | 6 | 15m | planned | +| 8 | Social links: editor UI (list, add, remove, reorder) | 4 | 1.5h | planned | +| 9 | Social links: read from database | 8 | 30m | planned | +| 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 | +| 15 | Footer content: about, copyright, newsletter toggle | 4 | 45m | planned | +| 16 | Footer: read new fields | 15 | 30m | planned | +| 17 | Move branding settings from Theme to Site | 4 | 1h | planned | +| 18 | Theme tab: remove branding, polish remaining | 17 | 30m | planned | +| 19 | Merge page settings into Page tab | — | 45m | planned | +| 20 | Remove Settings tab | 19 | 15m | planned | +| 21 | Polish: responsive, empty states, validation | 1-20 | 1.5h | planned | +| 22 | Testing: all page types, edge cases | 21 | 30m | planned | + +**Total estimate: ~15h** + +## UI Wireframes + +### Site tab layout + +``` +┌─────────────────────────────────────┐ +│ [Page] [Theme] [Site] │ ← tabs +├─────────────────────────────────────┤ +│ │ +│ ▼ Branding │ ← collapsible section +│ Shop name: [____________] │ +│ Logo: [Upload] [Remove] │ +│ □ Show logo □ Show shop name │ +│ Logo size: ●────────○ 48px │ +│ □ Recolour logo │ +│ Favicon: [Upload] │ +│ │ +│ ▼ Announcement bar │ +│ □ Show announcement bar │ +│ Text: [Free shipping over £50___] │ +│ Link: [/delivery______________] │ +│ Style: ○ Info ● Sale ○ Warning │ +│ │ +│ ▼ Header navigation │ +│ ┌─────────────────────────────┐ │ +│ │ Shop /products ↕ │ │ +│ │ About /about ↕ │ │ +│ │ Contact /contact ↕ │ │ +│ └─────────────────────────────┘ │ +│ [+ Add nav item] │ +│ │ +│ ▼ Footer │ +│ About text: │ +│ [Handmade with love in London___] │ +│ [_______________________________] │ +│ Copyright: [________________] │ +│ (Leave blank for "© 2026 Shop") │ +│ □ Show newsletter signup │ +│ │ +│ ▼ Footer navigation │ +│ ┌─────────────────────────────┐ │ +│ │ Delivery /delivery ↕ │ │ +│ │ Returns /returns ↕ │ │ +│ │ Privacy /privacy ↕ │ │ +│ └─────────────────────────────┘ │ +│ [+ Add nav item] │ +│ │ +│ ▼ Social links │ +│ ┌─────────────────────────────┐ │ +│ │ 📷 Instagram @myshop ↕ │ │ +│ │ 🦋 Bluesky @my.bsky ↕ │ │ +│ │ ☕ Ko-fi /myshop ↕ │ │ +│ └─────────────────────────────┘ │ +│ [+ Add social link] │ +│ │ +└─────────────────────────────────────┘ +``` + +### Page tab with inline settings (custom page) + +``` +┌─────────────────────────────────────┐ +│ [Page] [Theme] [Site] │ +├─────────────────────────────────────┤ +│ │ +│ ▼ Page settings │ ← new section for custom pages +│ Title: [About Us_______________] │ +│ URL: berrypod.com/[about_______] │ +│ Meta description: │ +│ [Learn about our story...______] │ +│ □ Published │ +│ □ Show in navigation │ +│ │ +│ ▼ Content blocks │ +│ [Hero block] [↑][↓][×]│ +│ [Text block] [↑][↓][×]│ +│ [Image block] [↑][↓][×]│ +│ [+ Add block] │ +│ │ +│ [↩ Undo] [↪ Redo] │ +│ │ +└─────────────────────────────────────┘ +``` + +## Open Questions + +1. **Should header/footer nav support nested items (dropdowns)?** — Probably not for v1, keep it flat. + +2. **Should social links include "custom" option?** — Yes, allow custom label + URL for platforms we don't have icons for. + +3. **What happens to existing hardcoded nav when we migrate?** — Seed the database with current values, delete hardcoded arrays. + +4. **Should announcement bar support scheduling?** — Defer to profit-aware-pricing plan (task 71) which already includes this. + +5. **Should we keep the Settings tab for "advanced" page settings?** — No, inline is simpler. Power users can use admin pages panel.