wiki/.cursor/plans/admin_3110ce96.plan.md

name, overview, todos

name	overview	todos
Admin	Build a comprehensive admin dashboard at /dashboard for managing posts, pages, site configuration, newsletter, imports, stats, and sync operations. Uses existing UI patterns from Write.tsx and NewsletterAdmin.tsx with a config generator approach for siteConfig.ts and downloadable markdown for content editing.

Admin Dashboard Implementation Plan

Architecture Overview

flowchart TB
    subgraph dashboard [Dashboard /dashboard]
        LeftSidebar[Left Sidebar Nav]
        Header[Header with Sync/Search]
        MainContent[Main Content Area]
        RightSidebar[Right Sidebar - Editor Only]
    end

    subgraph sections [Dashboard Sections]
        Posts[Posts List/Edit]
        Pages[Pages List/Edit]
        Write[Write Clone]
        Agent[AI Agent]
        Newsletter[Newsletter Admin]
        Import[Firecrawl Import]
        Config[Config Generator]
        Stats[Stats Clone]
        Sync[Sync Commands]
    end

    LeftSidebar --> sections
    MainContent --> sections

Key Decisions

| Feature | Approach | Rationale |

| ---------------- | ------------------------------ | ------------------------------------------------------ |

| Content Editing | Generate downloadable markdown | Keeps markdown files as source of truth, safe workflow |

| Config Editing | Config generator UI | Visual form outputs TypeScript code for siteConfig.ts |

| Newsletter Admin | Move into dashboard | Consolidates admin features |

| Sync Commands | Copy-to-clipboard buttons | Safe, uses existing CLI scripts |

---

Phase 1: Dashboard Foundation

Goal: Create the base dashboard layout with navigation structure

Files to create/modify:

• Create src/pages/Dashboard.tsx - Main dashboard component
• Create src/components/dashboard/DashboardLayout.tsx - Layout wrapper
• Create src/components/dashboard/DashboardSidebar.tsx - Left sidebar navigation
• Create src/components/dashboard/DashboardHeader.tsx - Header with sync buttons and search
• Modify src/App.tsx - Add /dashboard route
• Add dashboard styles to src/styles/global.css

Key patterns to follow:

• Use existing Write.tsx sidebar structure as template
• Use Phosphor icons (primary), Lucide (backup)
• Match existing theme CSS variables

---

Phase 2: Posts & Pages List Views

Goal: WordPress-style list views with edit/view/publish actions

Files to create/modify:

• Create src/components/dashboard/PostsList.tsx - Posts list with actions
• Create src/components/dashboard/PagesList.tsx - Pages list with actions
• Create convex/dashboard.ts - Dashboard queries (getAllPostsAdmin, getAllPagesAdmin, togglePublished)

Features:

• Table/list view with columns: Title, Date, Edit, View, Published
• Click row to edit
• Pagination (Prev/Next)
• Published toggle (updates Convex, requires re-sync to persist to markdown)

---

Phase 3: Post/Page Editor View

Goal: Markdown editor with live preview and frontmatter sidebar

Files to create/modify:

• Create src/components/dashboard/ContentEditor.tsx - Main editor component
• Create src/components/dashboard/MarkdownPreview.tsx - Live preview renderer
• Create src/components/dashboard/FrontmatterEditor.tsx - Right sidebar form
• Create src/utils/frontmatterParser.ts - Parse/generate frontmatter

Features:

• Toggle between "Markdown view" and "Live view"
• Right sidebar with all frontmatter fields (from POST_FIELDS/PAGE_FIELDS in Write.tsx)
• "Copy Markdown" button - copies full file with frontmatter
• "Download File" button - downloads as .md file
• Image path helper (shows available images in /public/images)

---

Phase 4: Config Generator

Goal: Visual form to generate siteConfig.ts code

Files to create/modify:

• Create src/components/dashboard/ConfigGenerator.tsx - Main config form
• Create src/components/dashboard/ConfigSection.tsx - Reusable section component
• Create src/utils/configCodeGenerator.ts - Generate TypeScript code

Features:

• Form sections for each siteConfig area (basic info, blog page, footer, newsletter, etc.)
• Pre-populated with current siteConfig values
• Live TypeScript code preview
• "Copy Config" button
• Instructions for saving to siteConfig.ts

---

Phase 5: Newsletter Admin Migration

Goal: Move NewsletterAdmin.tsx functionality into dashboard

Files to modify:

• Integrate existing src/pages/NewsletterAdmin.tsx features
• Create src/components/dashboard/NewsletterSection.tsx - Container for newsletter features

Subsections:

• Subscribers (All, Active, Unsubscribed)
• Send Post
• Write Email
• Recent Sends
• Email Stats

---

Phase 6: Import UI (Firecrawl)

Goal: UI for importing external URLs as markdown posts

Files to create/modify:

• Create src/components/dashboard/ImportSection.tsx - Import UI
• Create convex/import.ts - Import action using Firecrawl

Features:

• URL input field
• "Import" button triggers Firecrawl scrape
• Preview imported content with generated frontmatter
• Edit before copying/downloading
• Uses existing pattern from scripts/import-url.ts

---

Phase 7: Stats Clone

Goal: Dashboard version of Stats page

Files to create/modify:

• Create src/components/dashboard/StatsSection.tsx - Stats display

Features:

• Clone Stats.tsx functionality
• Same real-time stats (active visitors, total views, etc.)
• Visitor map (if enabled)
• Does not follow siteConfig.statsPage settings (always visible in dashboard)

---

Phase 8: Sync Section

Goal: UI for all sync commands

Files to create/modify:

• Create src/components/dashboard/SyncSection.tsx - Sync commands UI

Commands to expose:

• npm run sync - Sync to dev
• npm run sync:prod - Sync to production
• npm run sync:all - Sync posts, pages, and discovery files (dev)
• npm run sync:all:prod - Sync all to production

Features:

• Button for each command (copies to clipboard)
• Description of what each command does
• Link to terminal instructions

---

Phase 9: Write & Agent Clone

Goal: Clone Write.tsx and AI Agent into dashboard sections

Files to create/modify:

• Create src/components/dashboard/WriteSection.tsx - Write page clone
• Create src/components/dashboard/AgentSection.tsx - AI chat section

Features:

• Write section: Full Write.tsx functionality (template generation, frontmatter reference)
• Agent section: AIChatView with "write-dashboard" context
• Both work independently from main /write page

---

Phase 10: Search & Polish

Goal: Dashboard search, mobile optimization, final polish

Files to modify:

• Add search functionality to DashboardHeader
• Ensure all dashboard components are mobile responsive
• Run TypeScript type checks
• Test all themes (dark, light, tan, cloud)

Search scope:

• Post/page titles and content
• Dashboard section names
• Config field names

---

File Structure Summary

src/
├── pages/
│   └── Dashboard.tsx                 # Main dashboard page
├── components/
│   └── dashboard/
│       ├── DashboardLayout.tsx       # Layout wrapper
│       ├── DashboardSidebar.tsx      # Left nav
│       ├── DashboardHeader.tsx       # Header with sync/search
│       ├── PostsList.tsx             # Posts list view
│       ├── PagesList.tsx             # Pages list view
│       ├── ContentEditor.tsx         # Markdown editor
│       ├── MarkdownPreview.tsx       # Live preview
│       ├── FrontmatterEditor.tsx     # Right sidebar form
│       ├── ConfigGenerator.tsx       # Config UI
│       ├── ConfigSection.tsx         # Config form section
│       ├── NewsletterSection.tsx     # Newsletter admin
│       ├── ImportSection.tsx         # Firecrawl import
│       ├── StatsSection.tsx          # Stats clone
│       ├── SyncSection.tsx           # Sync commands
│       ├── WriteSection.tsx          # Write clone
│       └── AgentSection.tsx          # AI chat
├── utils/
│   ├── frontmatterParser.ts          # Frontmatter utilities
│   └── configCodeGenerator.ts        # Config code generation
convex/
├── dashboard.ts                      # Dashboard queries/mutations
└── import.ts                         # Firecrawl import action

---

Implementation Notes

1. No breaking changes - Existing pages (/write, /newsletter-admin, /stats) continue to work
2. Convex patterns - Use indexed queries, idempotent mutations, avoid write conflicts
3. Theme support - All components use CSS variables from global.css
4. Mobile first - All components responsive across breakpoints
5. Type safety - Full TypeScript with Convex validators
6. Login placeholder - Bottom left link, no auth implementation yet