Mark some options in the share modal be "suggested"

[andrewtavis]

Terms

• [X] I have searched open and closed design issues
• [X] I agree to follow activist's Code of Conduct

Description

This issue would look into design changes to the frontend/components/modal/ModalSharePage.vue such that some of the options would be suggested and others wouldn't be. This would be a step of curation for the platform to communicate to users that some options are more safe than others to use. We'd also need a way to convey the reason why some options are suggested to the user, which is open to suggestions :)

Contribution

Happy to work on this with people and discuss how best to have this function!

[andrewtavis]

@GrandSuccess87: let me know what you think on this one!

[Mahendradoak]

should it be similar to this?

[andrewtavis]

I'd say that we can maybe simplify it and add say an apostrophe to the icon and have a line under it that says that those are the ones that we'd suggest people use. This suggestion visual element should be included in the component for a ModalSharePage element such that we can toggle it.

Would you like to work on this, @Mahendradoak? :)

[Mahendradoak]

i would love to try

[andrewtavis]

Sure thing :) Please let us know if you need any assistance!

CC @UnknownSean8 here as well as he's been working on the share component and made the component we'll be editing 😊

[Mahendradoak]

yes, will do

[Mahendradoak]

The key updates i have tried to include:

New showSuggestions prop: This allows the component to conditionally display a suggestion note and icons next to specific social media buttons.

suggestedOptions array: A new array holds the names of suggested social media components (e.g., Telegram, Mastodon, Email, Signal), and these buttons are marked with a small suggestion icon when relevant.

Updated button components: Conditional rendering of the suggestion icon for the listed platforms.

[andrewtavis]

We're not going to need the prop to show suggestions as they will be shown always, @Mahendradoak :)

[andrewtavis]

Hey @Mahendradoak 👋 Checking in to see if you still plan on opening a PR for this issue :) Please let us know if you need any support! 😊

[andrewtavis]

Unassigning for now, @Mahendradoak, but please let us know if you'd like to work on something else in the future!

[felipe-lemos]

Hey @andrewtavis is it still open? I'd be happy to help!

[andrewtavis]

Hey @felipe-lemos 👋 Thanks for your interest here and sorry for the late reply! It's been a busy week, and I was also checking what the plans are here. I think the general plan now is that we want to switch the current segmentation that we have from "online" and "offline" to "suggested" and "other". The current UI is the following:

This is a bit out of date at this point, so it'd be great if we did the following:

• Switched the headers so we have "Suggested" and "Other"
• Within "Suggested" we'd have Signal, Mastodon, Matrix, View QR Code and Copy link in that order
• Within "Other" we'd have Telegram, Instagram, Messenger, Facebook, Twitter and Email in that order
  • In the above we should switch our handle on Twitter to just Twitter for the label as we're not using it
  • I cannot bring myself to actually suggest we have X as the label and icon, so let's just leave it at that

From there, it'd be great if for a next issue we add in Bluesky as an option. You could also do that here, or we could do the above and then I could make another issue for it.

Let me know if the above sounds good! I'll assign you, but please feel free to ask further questions! 😊

[andrewtavis]

Changes for this would be in ModalSharePage.vue, btw :)

[andrewtavis]

Quick check in here, @felipe-lemos 👋 Would you still have interest in working on this? :)

[andrewtavis]

Please let us know if there's anything we can do to support!

[gkau306]

@andrewtavis is this issue still open would love to try?

[andrewtavis]

Adding you to the assignees here, @gkau306 :) Feel free to start working on a PR, and maybe @felipe-lemos can support or do part of the work 😊

[Sravan-k-177]

As the issue is still open, I would like to work on this!

[andrewtavis]

Sure! Adding you to the assignees here, @Sravan-k-177! Please let us know if you need any support!

[andrewtavis]

We also have our community development meeting later today, with the details for that being in the Development room on Matrix. You'd be welcome to join and get some support on this!

[andrewtavis]

Closed by #1306 🚀🚀 Thanks so much for the great first contribution, @Sravan-k-177! Hope we can work with you again soon :) Please let us know if another issue is of interest! 😊