Gutenberg sidebar: Unify PTI and DMS editor experiences

[chubes4]

Context

Both PTI and DMS register Gutenberg sidebar panels in the post editor. When both are active, users see two separate sidebars. The DMS sidebar should absorb all PTI functionality and become the single entry point.

PTI Sidebar Features to Absorb

Components

1. AuthPanel — App ID/Secret input form (Instagram-specific)
2. CustomImageSelectModal — Grid of post images with selection ordering, "Posted" badges
3. CropImageModal — react-easy-crop with aspect ratios, drag-and-drop reorder, numbered thumbnails
4. CaptionInput — Textarea with label
5. ScheduledPosts — Tabbed "This Post" / "All Posts" with scheduled post listing
6. SidebarPanelContent — Conditional auth state rendering

Hooks

1. useInstagramAuth — Auth state management, popup OAuth, disconnect
2. useInstagramPostActions — Full posting pipeline: crop → upload → post → poll → complete

UI States

1. Not configured → Show credentials form
2. Configured but not authenticated → Show "Connect" button
3. Authenticated → Full workflow (select images → crop → caption → post/schedule)

DMS Sidebar Features (Current)

• Platform selection checkboxes (all 6 platforms)
• Image selection and cropping with aspect ratios
• Caption editing with per-platform character count
• Cross-platform posting
• Auth status per platform

Gap

DMS sidebar is multi-platform but missing PTI's polish:

• No async posting progress overlay
• No scheduled posts management
• No "already shared" image badges
• No drag-and-drop image reordering
• No per-platform auth setup flow (credentials form)

Tasks

• Merge PTI's image selection with "Posted" badges into DMS
• Port drag-and-drop reorder to DMS crop modal
• Add async processing overlay to DMS post flow
• Add scheduling UI with DateTimePicker to DMS sidebar
• Add scheduled posts listing (tabbed This Post / All Posts)
• Ensure only DMS sidebar registers (disable PTI sidebar when DMS active)
• Port PTI's useInstagramPostActions polling logic

Related

• Absorb post-to-instagram: Full Instagram OAuth flow with auto token refresh #9 — OAuth absorption
• Absorb post-to-instagram: Async container polling and carousel publishing #10 — Async container polling
• Absorb post-to-instagram: Post scheduling with WP-Cron and server-side cropping #11 — Scheduling system
• Absorb post-to-instagram: Image cropping, reordering, and temp file management #12 — Image cropping and reordering