Linh - Implement Bluesky auto-poster frontend#3645
Open
linh2020 wants to merge 615 commits intodevelopmentfrom
Open
Linh - Implement Bluesky auto-poster frontend#3645linh2020 wants to merge 615 commits intodevelopmentfrom
linh2020 wants to merge 615 commits intodevelopmentfrom
Conversation
✅ Deploy Preview for highestgoodnetwork-dev ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
✅ Deploy Preview for highestgoodnetwork-dev ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
Anusha-Gali
suggested changes
Mar 19, 2026
Anusha-Gali
left a comment
Anusha-Gali
left a comment
There was a problem hiding this comment.
Hi Linh,
I have provided my comments in the backend PR - do check and let me know in case of re-review. OneCommunityGlobal/HGNRest#1452 (review)
Anusha-Gali
suggested changes
Apr 1, 2026
Anusha-Gali
left a comment
Anusha-Gali
left a comment
There was a problem hiding this comment.
Hi Linh,
I have reviewed your PR locally and the posting onto Bluesky works as per requirement. I only have two concerns:
- the surrounding page is not adapted to dark mode as well as few bluesky components as well.
- the image section, once the the post is made, the text is cleared and the post is cleared but the file name in Choose File is not cleared.
Issue
Working Screenshots
…css to prevent styling leaks.
…gn-add-capacity-filter Chirag - Add Capacity-Based Event Filters in the event Database Design Page
…ed_hover_ghost_bar_graph Aayush lessons learned hover ghost bar graph
…port_FilterUI Diya 🔥 fix(filterUI): Fixed Filter UI on Weekly Summary Reports Page
…tlist_Feature Neeraj Add Event Waitlist to Improve Event Cards in event Database Design Page
…Usage_Due_Date_Alert Neeraj Add Due Date Alerts and Visual Indicators For Resource Usage Monitoring
…bel_and_Extend_Material_Bars Neeraj Add Amount Label and Extend Graph Bars in Resource Usage Chart
…oute-issue Mani shashank Fix “Page Not Found” Issue for - Design Database Structure for Event Tracking
…oginFeatures Swathi lb dashboard login features
…states-for-events Sai Sandeep taking over for Kristin - Add Dynamic Change for Community Portal's Calendar Events
…art-for-log-attendance-page Sai Sandeep taking over for Kristin Add Different Pie Charts for Log Attendance Page
…-modules-followup-email-template Yu Yan - refactor/css modules followup email template
- Resolve SonarCloud quality gate failures - Add PropTypes validation to components - Fix cognitive complexity issues - Improve accessibility and CSS contrast - Remove unused imports and variables - Fix syntax errors in BlueskyPostDetails.jsx
- Styled toggle button with active/inactive pill state and blue highlight - Redesigned connection card with branded gradient header and App Password hint link - Added 300-char counter with color-coded progress bar (blue -> orange -> red) - Post button disabled when over character limit - Connected header bar shows @handle with green live-dot and Disconnect button - Improved post feed: avatar, emoji stats, etc
…based composer integration
…based composer integration
- Changed cache from 'yarn' to 'npm' - Updated install command from 'yarn install --frozen-lockfile' to 'npm ci' - Updated test command from 'yarn run test:changed' to 'npm run test:changed' - Updated lint command from 'yarn run lint' to 'npm run lint' - Resolves 'yarn.lock not found' error in CI/CD pipeline - Aligns with project's npm-based dependency management
- Updated test.yml: cache: yarn → npm, yarn install → npm ci, yarn test → npm test - Updated deploy.yml: cache: yarn → npm, yarn install --frozen-lockfile → npm ci, yarn run build → npm run build - Resolves 'yarn.lock not found' errors in CI/CD pipelines - Aligns all workflows with project's npm-based dependency management - Fixes both push and pull_request test workflows
Anusha-Gali
suggested changes
Apr 18, 2026
Anusha-Gali
left a comment
Anusha-Gali
left a comment
There was a problem hiding this comment.
Hi Linh,
I have reviewed your PR again and the previous issues still seem to exist even after having the latest pull. Have created a video showcasing every issue as mentioned again below. Do have a look. Thank you.
- the surrounding page is not adapted to dark mode as well as few bluesky components as well.
- the image section, once the the post is made, the text is cleared and the post is cleared but the file name in Choose File is not cleared.
3645.mov
Apply dark mode styling for Bluesky cards, inputs, drop zone, and post list Clear file input value after post/create image reset so selected filename is removed Fix Weekly Progress Editor container to properly respect dark mode Add dark mode classes for email panel container, editor, and headings
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
20 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Description
This PR implements the frontend interface for the Bluesky auto-poster functionality in the HighestGoodNetworkApp.
Implements: Bluesky auto-poster module (priority: high)
Related PRs
This frontend PR is paired with the backend PR that provides Bluesky authentication, posting, and session management.
To test this frontend PR, ensure the backend PR #1452 is checked out and running:
Main changes explained:
Create BlueskyManager component: A new UI section on the Announcements dashboard for managing Bluesky connection and posts.
Add login form: Users can connect using their Bluesky handle and app password (secured session saved in backend).
Add post form: Users can write a post, upload an image or GIF, and publish it to Bluesky.
Add post feed viewer: Displays user’s most recent posts including image/video previews, like/repost counts, and post metadata.
Add delete button: Each post in the feed can be deleted directly from the UI.
Image & GIF upload support: Accepts .jpg, .png, and .gif uploads (GIF autoplay and MP4 conversion coming soon).
Session detection: Automatically checks Bluesky session status and refreshes login prompt if expired.
Drag and drop support: Users can drag images or GIFs directly into the post form.
Media preview and validation: Uploaded files are previewed, checked for file type and size before submission.
How to test:
Check into this current backend branch
Get Bluesky App Password
To connect, you need to generate an App Password:
Visit: https://bsky.app/settings/app-passwords
Log in with your Bluesky handle (e.g., yourname.bsky.social)
Click "Create App Password"
Copy the password and use it in the frontend UI
Use Bluesky Manager
Navigate to:
http://localhost:3000/announcements → Click on Bluesky Manager tab
Log in with handle + app password
Create new posts with or without media
View your previous posts and delete if needed
GIF support is currently limited to upload and preview only. Full autoplay and conversion to MP4 are under active development.