Marcus implements x autopost fe

[marcusyi1]

Description

Implements the X (Twitter) manual-assist posting UI to match the backend pivot away from auto-posting. The X tab now uses a "Copy & Post" workflow: the app composes and schedules posts, copies content to the clipboard, and opens x.com with pre-filled text so the user can post manually with a few clicks.
This mirrors the Truth Social pattern already in the codebase — no auto-posting, local DB history, and explicit status tracking.

Related PRS (if any):

This frontend PR is related to the #XXX backend PR (Marcus-finishes-x-auto-poster).
…

Main changes explained:

• Update src/components/Announcements/SocialMediaComposer.jsx:
  • Added copyAndOpenX() helper — copies post content to clipboard via navigator.clipboard.writeText() and opens https://x.com/intent/tweet?text=... in a new tab
  • Modified handlePostNow — when platform is X, calls copyAndOpenX after the backend saves the record instead of showing the normal success toast
  • Modified handlePostScheduledNow — for X, does copy+redirect then calls PATCH /api/x/schedule/:id/mark-posted to mark the post as completed
  • Added handleMarkAsPosted() — calls PATCH /api/x/schedule/:id/mark-posted for posts the user already posted manually
  • Added handleSkipPost() — calls PATCH /api/x/schedule/:id/skip to skip a scheduled post
  • Changed "Post Now" button label to "Copy & Post to X" when platform is X (both in composer and preview modal)
  • Added yellow info banner: "Auto-posting to X is not currently supported. Compose your posts here and post them manually with just a few clicks."
  • Updated scheduled posts list with X-specific status badges (⏰ Ready to Post / 🕐 Pending / ✓ Posted / — Skipped) and color-coded card backgrounds
  • Added Mark as Posted (✓) and Skip (⊘) action buttons for pending/ready X posts
  • Updated confirmation modal with X-specific messaging: "This will copy the content to your clipboard and open X."
  • Simplified X history rendering — removed references to post.xPostId, post.source, post.errorMessage (no longer in data model), replaced with simple "Posted" badge and timestamp
  • Removed "View on X" link (no post ID available for manual posts)
• Rename SocialMediaComposer.module.css → SocialMediaComposer.css (or update to use styles object import) — the CSS module was scoping class names, breaking the sub-tab rendering for all platforms

…

How to test:

1. check into current branch
2. do npm install and npm run start:local to run this PR locally
3. Clear site data/cache
4. log as admin user or any user that has the "send emails" permissions enabled
5. go to dashboard→ other links→ send emails → "x"
6. Ensure the following env vars are set in .env (write operations use OAuth 1.0a):
   X_API_KEY=...
   X_API_SECRET=...
   X_ACCESS_TOKEN=...
   X_ACCESS_TOKEN_SECRET=...
   X_BEARER_TOKEN=...
7. Verify the yellow info banner appears: "Auto-posting to X is not currently supported..."
8. Verify sub-tabs are visible and clickable: Composer, Scheduled, History, Details
   Test immediate post:
9. In the Composer tab, type a message (under 280 chars)
10. Click "Copy & Post to X"
11. Verify: toast appears saying "Content copied to clipboard! X is opening — paste and post.", x.com opens in a new tab with pre-filled text
12. Switch to History tab — verify the post appears with a "✓ Posted" badge
    Test scheduling:
13. In the Composer tab, type a message and set a future date/time
14. Click "Schedule Post"
15. Switch to the Scheduled tab — verify the post appears with a 🕐 Pending badge (blue)
16. Wait for the scheduled time to pass + up to 60s for the cron — the badge should change to ⏰ Ready to Post (yellow highlight on card)
17. Test scheduled post actions:
18. On a Ready/Pending post, click the green ✔ button — verify clipboard copy + x.com opens, and the post disappears from the scheduled list (marked as posted)
19. On another post, click the gray ✓ (Mark as Posted) — verify it's marked as posted without opening X
20. On another post, click ⊘ (Skip) — verify the card grays out with a "Skipped" badge
21. Click the ✏️ (Edit) button on a pending post — verify it loads back into the composer for editing
    Test validation:
22. Try typing more than 280 characters — the character counter should go red and posting should be blocked
    Test Mastodon is unaffected:
23. Switch to the Mastodon tab — verify it works exactly as before (no banner, normal "Post Now" button, no status badges)

Screenshots or videos of changes:

Note:

Please slack me "marcus yi" for any changes requested as I am more likely to respond there than github inbox.

[netlify]

✅ Deploy Preview for highestgoodnetwork-dev ready!

Name	Link
🔨 Latest commit	1e1685f
🔍 Latest deploy log	https://app.netlify.com/projects/highestgoodnetwork-dev/deploys/69d01700f50af2000862aaa3
😎 Deploy Preview	https://deploy-preview-5101--highestgoodnetwork-dev.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[sonarqubecloud]

Quality Gate passed

Issues
11 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud