Activity Library v2: favourite activities UI

[nickoferrall]

Figma designs: https://www.figma.com/file/PmE9A2ryODVzFPjZFJn7qi/Parabol-Activity-Library?type=design&node-id=1036-28426&mode=design&t=EUnFT9A69gLQn38c-0

AC

• Add favourites section next to "Quick Start" with a heart emoji
• Add empty state
• Add heart button to activity cards
• Add heart button to selected template
• Move heart button to toolbar on mobile
• Clicking the heart icon updates the UI but doesn't do anything more than that. Logic will be handled in a subsequent PR
• Include tooltip when hovering over heart button

[nickoferrall]

@enriquesanchez just want to check whether the heart button would appear at the bottom right of all activity cards? I see the design below doesn't have them:

I'd imagine it would show the heart button in red. Clicking it would remove it from the favourites section?

[enriquesanchez]

@nickoferrall Ah yes, you are correct! The heart should be there for any activity you have favorited. Apologies, the heart in the card idea came after I worked on those mockups.

One thing that was left inconclusive and we need to revisit as part of this effort is the fact that the current hover interaction for cards shows the activity's contents:

This hover effect clashes with the action of favoriting an activity, since both trigger on hover. This is something we can look into together and find a better solution, @acressall would you be interested? I can't remember who nor where, but it was suggested to use the side-sheet pattern for showing activity details instead. I think there may be potential for a better solution there.

[nickoferrall]

Makes sense, thanks!

@enriquesanchez I saw this design for the hover: #9116

Would that work with the heart action?

[enriquesanchez]

Would that work with the heart action?

I think it'll be tricky, since the tooltip would sit on top of the heart toggle. This is one we need to pause and think more about. One immediate solution I can think of is to move the heart toggle to the left (bottom or top), since that's an are where it'll be unlikely for the tooltip to cover.

This is one where ideally we can sit together and find a better solution. Maybe Alicia, you and I can schedule some sync time?

[acressall]

@enriquesanchez feel free to put some time in my calendar!

[nickoferrall]

Perhaps the tooltip could open to the left instead of the right? That way, the heart could remain in the same place, and it wouldn't be covered by the tooltip?

Also, happy to chat sync!

[nickoferrall]

@enriquesanchez & @acressall just checking if this came up in the design meeting? Perhaps I could implement the tooltip opening to the left as a starting point and it could be changed later on?

[enriquesanchez]

@nickoferrall We didn't review this, but I prefer the heart to the left (this also avoids conflicts with the Premium tag placement) and the tooltip opening as expected to the right.

I still want to look at the side sheet pattern I mentioned above but I need a little more time. I will try to carve some time tomorrow to look at it.

[nickoferrall]

@enriquesanchez & @acressall sounds good. I think we should ship the activity library card UI (this PR #9168) asap, but we'll need to have a tooltip or some UI that shows the template prompts first.

Perhaps I can implement the tooltip UI that you designed (see below), we ship the tooltip and card UI to production, and then I pause development until the designs that factor in the heart UI & premium label are ready?

[enriquesanchez]

but we'll need to have a tooltip or some UI that shows the template prompts first.

I think it's worth trying the tooltip. We did have one concern around timing between hover and displaying the tooltip, we want to make sure it's not annoying, as in you see tooltips all over the place as you move the pointer around. Maybe a short delay helps with this.

Perhaps I can implement the tooltip UI that you designed (see below), we ship the tooltip and card UI to production, and then I pause development until the designs that factor in the heart UI & premium label are ready?

I like this plan 👍

[jordanh]

I feel it would be safe to release the AL to everybody, and then follow on with this. Will prioritize accordingly to the backlog now

[nickoferrall]

Hey @ackernaut, for the empty state, is there a good way to export the image from figma? When I click on the image and click export PNG, I see this:

If not, I can work on recreating it with CSS.

Also, in the design, the heart emoji is white with a purple background, but this is the background colour for "Quick Start", so I think we need something else. Maybe the heart could be red? Not sure about the background colour.

[ackernaut]

@nickoferrall thanks for asking!

Re: fav background image

It looks bad in preview because of the transparency. It should look good over a white background in the app. Here are a couple of files where I rasterized the image in Figma. (2x and 3x sizing)

That makes it simple enough to drop in but the text isn’t HTML. We could consider just using the background shape and making the heart, circle, and text in code.

[ackernaut]

Re: favorites nav tab

I like it how it was designed, I think it’s cleaner. They shouldn’t both be selected at the same time. I think of quick start and favorites as functional tabs whereas the others are colorized category tabs. Perhaps it makes some sense to have the first two the same selected color. I’d recommended going with the design. I appreciate the attention to detail and feedback.

[nickoferrall]

Thank you, Terry! That's very helpful 🙏