[HOLD for payment 2023-03-21] [$1000] [Feature] Create autosuggestion UI for :emoji_codes:

[roryabraham]

Let's add an auto-suggestion UI for emojis so that they can be added inline in messages. Right now, typing :smile: works, but only if you know that it works. Let's make it easier to add emojis to messages using an inline emoji selector.

It will work like this:

1. As soon as you type colon and two more characters without a space (e.g. :sm) we start searching (using the suggestEmojis function)
2. We display the matches in the auto-suggestion modal, in the order returned by the function, with the closest match at the top
   a. We display the top suggestion highlighted.
   b. Pressing enter or tab selects the highlighted option.
   c. The arrow keys allow you to cycle through the options. The list should “wrap”, such that if you have the first element in the list highlighted and you press ArrowUp, then you are taken to the last element to the list. Similarly, if you have the last element in the list highlighted and you press ArrowDown, then you are taken back up to the first element in the list
   d. Every time your search query updates (i.e: you type another letter), then the first item is refocused. The reason for this is that when you update the search query we should assume that the “best result” is the one displayed first in the list, so that’s the one you’re most likely to want
3. If there are no matches, we don't display the auto-suggestion modal
4. If the user types a space or a colon (e.g. :smi or :smi:) we stop searching and don't show the auto-suggestion modal
5. If they tap, click, press enter, or press tab on one of the emoji options then we finish the text (e.g. :smi becomes :smile: ) and add a space so that the user can continue typing
   a. When we finish the text, we should just replace it with the actual emoji code from emoji.js (which is returned by the search method) instead of the :<name>: since that would then need to be converted again

[melvin-bot]

Current assignee @shawnborton is eligible for the Design assigner, not assigning anyone new.

[melvin-bot]

Triggered auto assignment to @stephanieelliott (External), see https://stackoverflow.com/c/expensify/questions/8582 for more details.

[melvin-bot]

Triggered auto assignment to Contributor-plus team member for initial proposal review - @mananjadhav (External)

[melvin-bot]

Current assignees @stitesExpensify and @roryabraham are eligible for the External assigner, not assigning anyone new.

[roryabraham]

@stephanieelliott I think we should probably start this issue at $1000

[stephanieelliott]

Thanks @roryabraham!

Posted the job to Upwork :https://www.upwork.com/jobs/~01a345ace891dbce3d

[getusha]

Should the emoji popup appear after we typed :emojicode: or while we typing e.g :emo... and suggestions will start to appear
What do you think?

[mananjadhav]

@getusha It'll start showing up the top 5 suggestions as you start typing the :emo... code.

[stitesExpensify]

This is a (really old) mockup we made when we first started thinking about this feature months ago. From this slack thread it sounds like @shawnborton is going to take another look at it though and potentially make some changes

[shawnborton]

Yup, happy to take a fresh look here. Did we ever have mobile mocks for this one too?

[stitesExpensify]

Yup, happy to take a fresh look here. Did we ever have mobile mocks for this one too?

No, not that I could find at least.

[getusha]

isn't that great if the suggested emojies aligned horizontally?

[afmire877]

What is there a list of emojis that should be available, as there could be literally infinite?

I found this list => https://unicode.org/emoji/charts/full-emoji-list.html but as a user, I would not expect some of these.

[stitesExpensify]

This is our list of emojis https://github.com/Expensify/App/blob/main/assets/emojis.js

There is already a trie data structure that will get suggestions here. This issue is mostly just UI and keybinds utilizing the existing code

[getusha]

@stitesExpensify @shawnborton @mananjadhav
Take a look at this.

New.Expensify.2.mp4

What do you think about this. Kindly share your idea and I will submit the proposal.

[stitesExpensify]

Looks like Shawn is OOO, so let's move forward with the static version! @perunt LMK when the PR is ready for review!

[mananjadhav]

Quick bump here as @shawnborton is back I guess.

[shawnborton]

Works for me too!

[JmillsExpensify]

Confirming that everything is unblocked now?

[stitesExpensify]

Yep! The PR is being reviewed

[MelvinBot]

@JmillsExpensify, @shawnborton, @mananjadhav, @stitesExpensify, @roryabraham, @perunt Whoops! This issue is 2 days overdue. Let's get this updated quick!

[JmillsExpensify]

Still working through the linked PR.

[MelvinBot]

@JmillsExpensify, @shawnborton, @mananjadhav, @stitesExpensify, @roryabraham, @perunt Eep! 4 days overdue now. Issues have feelings too...

[MelvinBot]

@JmillsExpensify, @shawnborton, @mananjadhav, @stitesExpensify, @roryabraham, @perunt Still overdue 6 days?! Let's take care of this!

[stitesExpensify]

This PR has been heavily reviewed, and my best guess is that it should be live in the next 7-10 days

…

On Wed, Mar 1, 2023 at 1:32 PM MelvinBot ***@***.***> wrote: @JmillsExpensify <https://github.com/JmillsExpensify>, @shawnborton <https://github.com/shawnborton>, @mananjadhav <https://github.com/mananjadhav>, @stitesExpensify <https://github.com/stitesExpensify>, @roryabraham <https://github.com/roryabraham>, @perunt <https://github.com/perunt> Still overdue 6 days?! Let's take care of this! — Reply to this email directly, view it on GitHub <#12188 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AKDNO7BF5P6JEZJWGQ3FSIDWZ6W37ANCNFSM6AAAAAARQFGZEY> . You are receiving this because you were mentioned.Message ID: ***@***.***>

[stitesExpensify]

2 approvals, just waiting for a final C+ review and we'll be good to go!

[JmillsExpensify]

Let's get this one over the finish line this week! Can we resolve conflicts in the PR, make the requested updates, and merge today?

[stitesExpensify]

Yep it was just updated again last night and should be merged today!

[MelvinBot]

Reviewing label has been removed, please complete the "BugZero Checklist".

[MelvinBot]

The solution for this issue has been 🚀 deployed to production 🚀 in version 1.2.83-3 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• Static emoji autosuggestion  #14686

If no regressions arise, payment will be issued on 2023-03-21. 🎊

After the hold period is over and BZ checklist items are completed, please complete any of the applicable payments for this issue, and check them off once done.

• External issue reporter
• Contributor that fixed the issue
• Contributor+ that helped on the issue and/or PR

As a reminder, here are the bonuses/penalties that should be applied for any External issue:

• Merged PR within 3 business days of assignment - 50% bonus
• Merged PR more than 9 business days after assignment - 50% penalty

[roryabraham]

@JmillsExpensify bump for C+ payment

[JmillsExpensify]

Sorry for the delay! On it.

[JmillsExpensify]

@mananjadhav hired you for the Upwork job: https://www.upwork.com/jobs/~0170a22b1e34ba0ade.

[mananjadhav]

Accepted @JmillsExpensify

[JmillsExpensify]

Awesome, all paid out! We should be all done here, closing the issue.