Skip to content

Feat: implemented Share Modal UI for improved UX#747

Open
LaveUI wants to merge 9 commits intoaccordproject:mainfrom
LaveUI:feat_shareModel
Open

Feat: implemented Share Modal UI for improved UX#747
LaveUI wants to merge 9 commits intoaccordproject:mainfrom
LaveUI:feat_shareModel

Conversation

@LaveUI
Copy link
Contributor

@LaveUI LaveUI commented Feb 24, 2026

Problem
Currently, clicking the "Share" button in the template playground silently copies a very long URL to the clipboard. While functional, it lacks a standard, accessible UI for users to see the link or share it easily to other platforms.
Solution
This PR introduces a dedicated [ShareModal] component that triggers when a user clicks "Share".

  • Better UX: Displays the generated URL in a read-only input.
  • Clear Feedback: The "Copy Link" button provides clear, immediate feedback (Copied!).
  • Social Sharing: Added quick links to share the template to Twitter/X, LinkedIn, or via Email.
  • State Management: Integrated the modal's visibility into the global useAppStore for easy access across the app.
  • Aesthetic Alignment: Matches the project's existing dark-mode design system and Tailwind typography.
    Testing
  • Added unit tests for the new [ShareModal] UI component.
  • Updated existing [PlaygroundSidebar] tests to reflect the new state-driven behavior instead of direct clipboard copying.
  • Manually verified UI consistency in both Light and Dark themes.
image

Signed-off-by: LaveUI <vaibhavgupta1612@gmail.com>
@LaveUI LaveUI requested a review from a team as a code owner February 24, 2026 18:22
@netlify
Copy link

netlify bot commented Feb 24, 2026

Deploy Preview for ap-template-playground failed.

Name Link
🔨 Latest commit cc1639a
🔍 Latest deploy log https://app.netlify.com/projects/ap-template-playground/deploys/69a727bde1a63e0008e9ff23

Signed-off-by: LaveUI <vaibhavgupta1612@gmail.com>
Copy link
Member

@mttrbrts mttrbrts left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for the PR @LaveUI, can you remove the social sharing?

Copy link
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Adds a dedicated Share modal workflow to the Template Playground so users can view/copy the generated share URL and access quick social-share actions, instead of silently copying a long link on click.

Changes:

  • Introduces a new ShareModal component and renders it from PlaygroundSidebar.
  • Updates Share triggers (PlaygroundSidebar, UseShare) to open the modal via Zustand state (isShareModalOpen).
  • Updates existing unit/e2e tests to reflect the modal-based share flow.

Reviewed changes

Copilot reviewed 6 out of 6 changed files in this pull request and generated 6 comments.

Show a summary per file
File Description
src/tests/components/PlaygroundSidebar.test.tsx Mocks and asserts presence of the new Share modal in the sidebar test setup.
src/store/store.ts Adds global Zustand state to control Share modal visibility.
src/components/UseShare.tsx Replaces direct clipboard-copy behavior with opening the Share modal.
src/components/ShareModal.tsx New modal UI for share URL display/copy and social-share actions.
src/components/PlaygroundSidebar.tsx Wires “Share” nav item to open the Share modal and renders the modal.
e2e/share.spec.ts Updates Playwright flows to copy from within the modal and validate the shared URL.

@LaveUI
Copy link
Contributor Author

LaveUI commented Feb 26, 2026

Sure @mttrbrts , I'll remove the social sharing options and keep it limited to generating and copying the sharable link

Signed-off-by: LaveUI <vaibhavgupta1612@gmail.com>
@LaveUI LaveUI requested a review from mttrbrts February 26, 2026 06:32
@LaveUI LaveUI changed the title Feat: implemented Share Modal UI for improved UX and social sharing Feat: implemented Share Modal UI for improved UX Feb 26, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants