logicspike/docs

Content Engine

Content Engine: Frontend Pages & Components

Status: 📋 Planning Phase Target: apps/content-engine (Frontend UI)

This document outlines all the frontend pages, modals, and core UI components required to build the Content Engine user interface, based on the defined user journeys and system scope.

1. Global Navigation & Layout

  • Location: Left Sidebar / Main Navigation
  • Elements:
    • Calendar (Default view)
    • Review Queue (Shows badge with count of slots pending_review)
    • Recurring Schedules
    • Campaigns
    • Settings (Contains Connected Accounts, Preferences)

2. Content Calendar (Main Dashboard)

URL: /dashboard/content-engine/calendar
Purpose: The central hub for planning and visualizing all social media content.

Key UI Elements:

  • View Toggles: Switch between Month, Week (default), and Day views.
  • Filters: Dropdowns to filter by Platform (Twitter, LinkedIn, etc.), Status (Draft, Scheduled, Published), Campaign, and Label.
  • Calendar Grid:
    • Displays Content Slot Cards precisely at their scheduled times.
    • Drag-and-Drop: Ability to drag a slot card to a new day/time to reschedule it.
  • Content Slot Cards (in grid):
    • Show platform icons (e.g., small Twitter logo).
    • Truncated text/caption.
    • Status badge (e.g., 🟡 Draft, 🔵 Scheduled, 🟢 Published, 🔴 Failed).
    • Thumbnail of attached media (if any).
  • "New Post" Action: Floating Action Button (FAB) or clicking an empty time slot opens the Content Slot Builder.

3. Content Slot Builder (Create / Edit Modal)

URL: Modal over Calendar, or dedicated route /dashboard/content-engine/slots/:id
Purpose: Where users actually compose their posts, select platforms, attach media, and schedule times.

Key UI Elements:

  • Target Platforms: Row of toggle buttons (Twitter, LinkedIn, Instagram, Facebook) to select where the post goes.
  • Composition Area:
    • Text area for the main caption.
    • Variable insertion tool (if supporting specific placeholders).
    • Character counter (adapts based on selected platforms, e.g., 280 for Twitter).
  • Media Upload Section:
    • Drag-and-drop zone for images/videos.
    • Integration with the global Media Service (select existing from library or upload new).
    • Media preview carousel.
  • Metadata:
    • Campaign Selector: Dropdown to assign to a campaign.
    • Labels/Tags Input: Multi-select for internal tagging.
  • Scheduling Controls:
    • Date and Time picker (defaults to the clicked slot time).
    • Timezone indicator (read-only, shows workspace default).
  • Action Buttons:
    • "Save as Draft" (draft)
    • "Submit for Review" (pending_review - if approval workflow is enabled)
    • "Schedule" (scheduled - instantly queues it if user has permissions)
  • Status Timeline (for existing slots): Shows event history (Created -> Approved -> Published/Failed) with retry options if failed.

4. Review Queue (Approval Workflow)

URL: /dashboard/content-engine/review
Purpose: For managers/owners to review content submitted by team members before it automatically publishes.

Key UI Elements:

  • List/Grid View: Shows all slots currently in pending_review state.
  • Slot Detail Preview: Expanding a row shows the full caption, media, and target platforms natively formatted (mimicking how it will look on the platform).
  • Review Actions (Per Slot):
    • "Approve" Button: Moves status to scheduled.
    • "Reject" Button: Opens a sub-modal.
  • Rejection Modal:
    • Text area to provide a reason for rejection (e.g., "Caption is too long for Twitter").
    • Submitting changes status back to draft and notifies the creator with the comment.

5. Connected Accounts (Settings)

URL: /dashboard/content-engine/settings/accounts
Purpose: Setup and management of OAuth connections to social media platforms.

Key UI Elements:

  • Available Platforms Grid: Cards for Twitter/X, Instagram, LinkedIn, Facebook Pages.
  • Connection Cards:
    • Provide a "Connect" button which redirects to the respective OAuth flow.
  • Active Connections List:
    • Shows avatar/handle of the connected account (e.g., @MyBrand).
    • Status Indicator: "✅ Connected" or "⚠️ Token Expired (Reconnect)".
    • "Disconnect" / "Revoke" button.

6. Recurring Schedules (Automation)

URL: /dashboard/content-engine/recurring
Purpose: Set up "set-and-forget" patterns like "Motivation Mondays" or "Throwback Thursdays".

Key UI Elements:

  • List of Patterns: Table showing active recurring schedules.
  • "New Recurring Schedule" Builder:
    • Recurrence Rule: UI to build cron-like patterns (e.g., "Weekly on Monday at 10:00 AM").
    • Template Builder: Similar to the Content Slot Builder, but accepts variables/placeholders (e.g., {quote}).
    • Auto-Approve Toggle: "Skip review and schedule automatically?" (Yes/No).
    • Save Rule button.

7. Campaigns & Labels (Optional/Settings)

URL: /dashboard/content-engine/campaigns
Purpose: Grouping and categorizing content.

Key UI Elements:

  • Campaigns Table: List of campaigns with Name, Start/End Date, Status (Active, Completed), and a count of attached content slots.
  • "New Campaign" Modal: Fields for Name, Description, Dates.
  • Labels Manager: Simple tag management (Create, Rename, Delete labels and assign colors).
Content Engine