Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Emojis larger in other contexts than just single character messages #40692

Merged
merged 42 commits into from
Jul 27, 2024

Conversation

kbieganowski
Copy link
Contributor

@kbieganowski kbieganowski commented Apr 22, 2024

Details

Fixed Issues

$ #4114

PROPOSAL: n/a

Tests

Composer:

  1. Draft a message (of any length) with only emojis
  2. Add other plain text characters in a message in the composer
  • Verify that emojis appear very large (27px) in the composer (for emojis only input)
  • Verify that emojis are larger (19pt) compared to the default size for text (15px) in the composer (emojis + text input)

Report history:

  1. Send a message with emojis only
  2. Send a message with emojis and text
  • Verify that emojis appear very large (27px) in the report history (emojis only comment)
  • Verify that emojis are larger (19px) compared to the default size for text (15pt) in the chat history and vertically centered with respect to eachother, such that the baseline of the emoji is below the plain text and the middle of the text vertically aligns with the middle of the emoji like shown here

Settings:

  1. Go to Settings -> Profile and add emoji to your last name
  • Verify that emoji appear larger (19pt) than the rest of the text (15pt) in the text input
  1. Save the changes
  2. Open LHP
  • Verify that emoji in user's last name appear larger (25px) compared to the rest of the text (22px)

Offline tests

n/a

QA Steps

Same as in Tests section

Note: If more details regarding tests flow are needed, they can be found in description of related issue

PR Author Checklist

  • I linked the correct issue in the ### Fixed Issues section above
  • I wrote clear testing steps that cover the changes made in this PR
    • I added steps for local testing in the Tests section
    • I added steps for the expected offline behavior in the Offline steps section
    • I added steps for Staging and/or Production testing in the QA steps section
    • I added steps to cover failure scenarios (i.e. verify an input displays the correct error message if the entered data is not correct)
    • I turned off my network connection and tested it while offline to ensure it matches the expected behavior (i.e. verify the default avatar icon is displayed if app is offline)
    • I tested this PR with a High Traffic account against the staging or production API to ensure there are no regressions (e.g. long loading states that impact usability).
  • I included screenshots or videos for tests on all platforms
  • I ran the tests on all platforms & verified they passed on:
    • Android: Native
    • Android: mWeb Chrome
    • iOS: Native
    • iOS: mWeb Safari
    • MacOS: Chrome / Safari
    • MacOS: Desktop
  • I verified there are no console errors (if there's a console error not related to the PR, report it or open an issue for it to be fixed)
  • I followed proper code patterns (see Reviewing the code)
    • I verified that any callback methods that were added or modified are named for what the method does and never what callback they handle (i.e. toggleReport and not onIconClick)
    • I verified that the left part of a conditional rendering a React component is a boolean and NOT a string, e.g. myBool && <MyComponent />.
    • I verified that comments were added to code that is not self explanatory
    • I verified that any new or modified comments were clear, correct English, and explained "why" the code was doing something instead of only explaining "what" the code was doing.
    • I verified any copy / text shown in the product is localized by adding it to src/languages/* files and using the translation method
      • If any non-english text was added/modified, I verified the translation was requested/reviewed in #expensify-open-source and it was approved by an internal Expensify engineer. Link to Slack message:
    • I verified all numbers, amounts, dates and phone numbers shown in the product are using the localization methods
    • I verified any copy / text that was added to the app is grammatically correct in English. It adheres to proper capitalization guidelines (note: only the first word of header/labels should be capitalized), and is either coming verbatim from figma or has been approved by marketing (in order to get marketing approval, ask the Bug Zero team member to add the Waiting for copy label to the issue)
    • I verified proper file naming conventions were followed for any new files or renamed files. All non-platform specific files are named after what they export and are not named "index.js". All platform-specific files are named for the platform the code supports as outlined in the README.
    • I verified the JSDocs style guidelines (in STYLE.md) were followed
  • If a new code pattern is added I verified it was agreed to be used by multiple Expensify engineers
  • x ] I followed the guidelines as stated in the Review Guidelines
  • I tested other components that can be impacted by my changes (i.e. if the PR modifies a shared library or component like Avatar, I verified the components using Avatar are working as expected)
  • I verified all code is DRY (the PR doesn't include any logic written more than once, with the exception of tests)
  • I verified any variables that can be defined as constants (ie. in CONST.js or at the top of the file that uses the constant) are defined as such
  • I verified that if a function's arguments changed that all usages have also been updated correctly
  • If any new file was added I verified that:
    • The file has a description of what it does and/or why is needed at the top of the file if the code is not self explanatory
  • If a new CSS style is added I verified that:
    • A similar style doesn't already exist
    • The style can't be created with an existing StyleUtils function (i.e. StyleUtils.getBackgroundAndBorderStyle(theme.componentBG))
  • If the PR modifies code that runs when editing or sending messages, I tested and verified there is no unexpected behavior for all supported markdown - URLs, single line code, code blocks, quotes, headings, bold, strikethrough, and italic.
  • If the PR modifies a generic component, I tested and verified that those changes do not break usages of that component in the rest of the App (i.e. if a shared library or component like Avatar is modified, I verified that Avatar is working as expected in all cases)
  • If the PR modifies a component related to any of the existing Storybook stories, I tested and verified all stories for that component are still working as expected.
  • If the PR modifies a component or page that can be accessed by a direct deeplink, I verified that the code functions as expected when the deeplink is used - from a logged in and logged out account.
  • If the PR modifies the form input styles:
    • I verified that all the inputs inside a form are aligned with each other.
    • I added Design label so the design team can review the changes.
  • If a new page is added, I verified it's using the ScrollView component to make it scrollable when more elements are added to the page.
  • If the main branch was merged into this PR after a review, I tested again and verified the outcome was still expected according to the Test steps.

Screenshots/Videos

Android: Native native_android_chat native_android_settings
Android: mWeb Chrome web_android_chat web_android_settings web_android_settings_input
iOS: Native native_ios_chat native_ios_settings
iOS: mWeb Safari web_ios_chat web_ios_settings web_ios_settings_input
MacOS: Chrome / Safari
chrome_chat.mp4
chrome_settings_LHP chrome_settings_input
MacOS: Desktop
desktop_chat.mp4
desktop_settings

@kbieganowski kbieganowski mentioned this pull request Apr 22, 2024
50 tasks
Copy link

melvin-bot bot commented Apr 23, 2024

Hey! I see that you made changes to our Form component. Make sure to update the docs in FORMS.md accordingly. Cheers!

*/

// Surrogate pairs (combined emojis)
const highSurrogateStart = 0xd800;
Copy link
Contributor

Choose a reason for hiding this comment

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

Let's use SCREAMING_SNAKE_CASE for all these constants

Copy link
Contributor Author

Choose a reason for hiding this comment

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

sure! updated

const variationModifierStart = 0xfe00; // Request text presentation of emoji
const variationModifierEnd = 0xfe0f; // Indicate that the character should be displayed as an emoji

const codePointFromSurrogatePair = (pair: string) => {
Copy link
Contributor

Choose a reason for hiding this comment

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

let's use the function keyword instead of arrow functions, just because it's the more common pattern in this codebase

import FontUtils from '@styles/utils/FontUtils';
import variables from '@styles/variables';
import useTheme from './useTheme';

function useMarkdownStyle(message: string | null = null): MarkdownStyle {
function useMarkdownStyle(containsEmojisOnly?: boolean): MarkdownStyle {
Copy link
Contributor

Choose a reason for hiding this comment

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

please stay with containsOnlyEmojis or textContainsOnlyEmojis

Copy link
Contributor Author

Choose a reason for hiding this comment

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

fair point, changed to inputContainsOnlyEmojis

return 2; // Variations and non-BMP characters
}

function splitTextWithEmojis(text: string): string[] {
Copy link
Contributor

@fabioh8010 fabioh8010 Apr 24, 2024

Choose a reason for hiding this comment

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

I think we could vastly simplify this code if we use a combination of regex + this logic @roryabraham designed in the past.

First, we need to update CONST.REGEX.EMOJIS to include the new d flag which I've implemented in the past for this issue and is available now on Hermes engine:

diff --git a/src/CONST.ts b/src/CONST.ts
index f0139d82e6..ebe0ab7549 100755
--- a/src/CONST.ts
+++ b/src/CONST.ts
@@ -1760,8 +1760,8 @@ const CONST = {
 
         // eslint-disable-next-line max-len, no-misleading-character-class
         EMOJI: /[\p{Extended_Pictographic}\u200d\u{1f1e6}-\u{1f1ff}\u{1f3fb}-\u{1f3ff}\u{e0020}-\u{e007f}\u20E3\uFE0F]|[#*0-9]\uFE0F?\u20E3/gu,
-        // eslint-disable-next-line max-len, no-misleading-character-class
-        EMOJIS: /[\p{Extended_Pictographic}](\u200D[\p{Extended_Pictographic}]|[\u{1F3FB}-\u{1F3FF}]|[\u{E0020}-\u{E007F}]|\uFE0F|\u20E3)*|[\u{1F1E6}-\u{1F1FF}]{2}|[#*0-9]\uFE0F?\u20E3/gu,
+        // eslint-disable-next-line max-len, no-misleading-character-class, no-empty-character-class
+        EMOJIS: /[\p{Extended_Pictographic}](\u200D[\p{Extended_Pictographic}]|[\u{1F3FB}-\u{1F3FF}]|[\u{E0020}-\u{E007F}]|\uFE0F|\u20E3)*|[\u{1F1E6}-\u{1F1FF}]{2}|[#*0-9]\uFE0F?\u20E3/dgu,
         // eslint-disable-next-line max-len, no-misleading-character-class
         EMOJI_SKIN_TONES: /[\u{1f3fb}-\u{1f3ff}]/gu,
 

Then, let's implement the splitTextWithEmojis function which will use the regex and indices feature and is based on Rory's initial idea:

type TextWithEmoji = {
    text: string;
    isEmoji: boolean;
};

function splitTextWithEmojis(text: string): TextWithEmoji[] {
    if (!text) {
        return [];
    }

    // The regex needs to be cloned because `exec()` is a stateful operation and maintains the state inside
    // the regex variable itself, so we must have a independent instance for each function's call.
    const emojisRegex = new RegExp(CONST.REGEX.EMOJIS, CONST.REGEX.EMOJIS.flags);

    const splitText: TextWithEmoji[] = [];
    let regexResult: RegExpExecArray | null;
    let lastMatchIndexEnd = 0;
    do {
        regexResult = emojisRegex.exec(text);

        if (regexResult?.indices) {
            const matchIndexStart = regexResult.indices[0][0];
            const matchIndexEnd = regexResult.indices[0][1];

            if (matchIndexStart > lastMatchIndexEnd) {
                splitText.push({
                    text: text.slice(lastMatchIndexEnd, matchIndexStart),
                    isEmoji: false,
                });
            }

            splitText.push({
                text: text.slice(matchIndexStart, matchIndexEnd),
                isEmoji: true,
            });

            lastMatchIndexEnd = matchIndexEnd;
        }
    } while (regexResult !== null);

    if (lastMatchIndexEnd < text.length) {
        splitText.push({
            text: text.slice(lastMatchIndexEnd, text.length),
            isEmoji: false,
        });
    }

    return splitText;
}

You'll notice some TS errors in the function regarding indices not being existent. We'll need to add declarations for ES2022 RegExp in tsconfig.json file:

diff --git a/tsconfig.json b/tsconfig.json
index 7f7b7479f4..ca3cdfa4fa 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -20,7 +20,8 @@
             "es2022.object",
             "es2022.string",
             "ES2021.Intl",
-            "ES2023.Array"
+            "ES2023.Array",
+            "ES2022.RegExp"
         ],
         "allowJs": true,
         "checkJs": false,

Let's test this function now! If I pass this string Hello world 🙂🙂🙂 ! 😶‍🌫️😶‍🌫️😶‍🌫️ test 😶‍🌫️ 😶‍🌫️ test2 👍👍🏿 which has some normal and surrogate emojis, the output will be:

[
    {"isEmoji":false,"text":"Hello world "},
    {"isEmoji":true,"text":"🙂"},
    {"isEmoji":true,"text":"🙂"},
    {"isEmoji":true,"text":"🙂"},
    {"isEmoji":false,"text":" ! "},
    {"isEmoji":true,"text":"😶‍🌫️"},
    {"isEmoji":true,"text":"😶‍🌫️"},
    {"isEmoji":true,"text":"😶‍🌫️"},
    {"isEmoji":false,"text":" test "},
    {"isEmoji":true,"text":"😶‍🌫️"},
    {"isEmoji":false,"text":" "},
    {"isEmoji":true,"text":"😶‍🌫️"},
    {"isEmoji":false,"text":" test2 "},
    {"isEmoji":true,"text":"👍"},
    {"isEmoji":true,"text":"👍🏿"}
]

You can adjust the function to just return an array withe the separated tokens if you want, could you give it a try and see if it suits your needs in the PR?

Copy link
Contributor

Choose a reason for hiding this comment

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

Update: we are still testing the regex solution

Copy link
Contributor

Choose a reason for hiding this comment

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

@kbieganowski I've updated my previous solution:

  1. Fixed splitTextWithEmojis function to always create a separate regex instance on each call, thus preventing the issue we were discussing internally.
  2. Simplified solution to the TS errors regarding indices.

Copy link
Contributor

@fabioh8010 fabioh8010 Apr 26, 2024

Choose a reason for hiding this comment

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

@kbieganowski After internal discussions, we noticed that having the g (global) flag on CONST.REGEX.EMOJIS can result in hard-to-detect bugs throughout the App due to the stateful nature of the regex when it has the g flag. For example, repeatedly calls to test() with same input will sometimes return different results because the regex is being used globally.

So, I would suggest to remove the g flag from CONST.REGEX.EMOJIS:

        // eslint-disable-next-line max-len, no-misleading-character-class, no-empty-character-class
        EMOJIS: /[\p{Extended_Pictographic}](\u200D[\p{Extended_Pictographic}]|[\u{1F3FB}-\u{1F3FF}]|[\u{E0020}-\u{E007F}]|\uFE0F|\u20E3)*|[\u{1F1E6}-\u{1F1FF}]{2}|[#*0-9]\uFE0F?\u20E3/du,

And then adding it when cloning the regex inside splitTextWithEmojis:

    // We clone the regex and add the `g` (global) flag in order to `exec()` be stateful and work properly.
    // Adding the flag directly to CONST.ts can result in bugs throughout the App due to the stateful nature
    // of the regex when it has the `g` flag.
    const emojisRegex = new RegExp(CONST.REGEX.EMOJIS, CONST.REGEX.EMOJIS.flags.concat('g'));

This change will require testing in all areas of the app that uses CONST.REGEX.EMOJIS since we removed the g flag now.

I would advice doing the same for CONST.REGEX.EMOJI and CONST.REGEX.EMOJI_SKIN_TONES, that could be done in a follow-up PR to avoid regressions on this one.

@kbieganowski kbieganowski force-pushed the feat/enlarge-emojis-font-size branch 2 times, most recently from bd26c68 to 797cfeb Compare April 26, 2024 11:38
@kbieganowski kbieganowski force-pushed the feat/enlarge-emojis-font-size branch from 5cec5d3 to 1508719 Compare May 6, 2024 11:26
@kbieganowski
Copy link
Contributor Author

Hey @fabioh8010, I've validated other usages of the regex and everything seems to work as expected. Ready for a re-review

Copy link
Contributor

@fabioh8010 fabioh8010 left a comment

Choose a reason for hiding this comment

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

Few comments, also please make sure all places where CONST.REGEX.EMOJIS is used (src/components/InlineCodeBlock/WrappedText.tsx, src/libs/EmojiUtils.ts, src/libs/ValidationUtils.ts) are properly handled after removing the g flag.

@@ -65,7 +67,7 @@ function Composer(
}, [shouldClear, onClear]);

const maxHeightStyle = useMemo(() => StyleUtils.getComposerMaxHeightStyle(maxLines, isComposerFullSize), [StyleUtils, isComposerFullSize, maxLines]);
const composerStyle = useMemo(() => StyleSheet.flatten(style), [style]);
const composerStyle = useMemo(() => StyleSheet.flatten([style, textContainsOnlyEmojis ? {lineHeight: 32} : null]), [style, textContainsOnlyEmojis]);
Copy link
Contributor

Choose a reason for hiding this comment

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

Suggested change
const composerStyle = useMemo(() => StyleSheet.flatten([style, textContainsOnlyEmojis ? {lineHeight: 32} : null]), [style, textContainsOnlyEmojis]);
const composerStyle = useMemo(() => StyleSheet.flatten([style, textContainsOnlyEmojis ? {lineHeight: variables.lineHeightXXXLarge} : null]), [style, textContainsOnlyEmojis]);

Maybe did you want to use lineHeightXXXLarge (or perhaps a different variable)?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

I went with new variables rather than using existing ones because this styles are strictly related to composer/input and I didn't want potential changes to the UI in future to break composer or inputs as well but no more magic numbers

@@ -380,6 +380,7 @@ function BaseTextInput(
// Add disabled color theme when field is not editable.
inputProps.disabled && styles.textInputDisabled,
styles.pointerEventsAuto,
isMarkdownEnabled ? {lineHeight: 18} : null,
Copy link
Contributor

Choose a reason for hiding this comment

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

Suggested change
isMarkdownEnabled ? {lineHeight: 18} : null,
isMarkdownEnabled ? {lineHeight: variables.lineHeightLarge} : null,

makes sense (or perhaps a different variable)?

@@ -21,7 +19,7 @@ function useMarkdownStyle(message: string | null = null): MarkdownStyle {
fontSize: variables.fontSizeLarge,
},
emoji: {
fontSize: emojiFontSize,
fontSize: inputContainsOnlyEmojis ? 27 : 19,
Copy link
Contributor

Choose a reason for hiding this comment

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

Same, shouldn't we use already defined variables for those values, or create new ones if they are new?

isEdited?: boolean;
emojisOnly?: boolean;
};
function TextWithEmojiFragment({message, passedStyles, styleAsDeleted, styleAsMuted, isSmallScreenWidth, isEdited, emojisOnly}: ComponentProps) {
Copy link
Contributor

Choose a reason for hiding this comment

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

Suggested change
function TextWithEmojiFragment({message, passedStyles, styleAsDeleted, styleAsMuted, isSmallScreenWidth, isEdited, emojisOnly}: ComponentProps) {
function TextWithEmojiFragment({message, passedStyles, styleAsDeleted, styleAsMuted, isSmallScreenWidth, isEdited, emojisOnly}: ComponentProps) {

import variables from '@styles/variables';
import CONST from '@src/CONST';

type ComponentProps = {
Copy link
Contributor

Choose a reason for hiding this comment

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

Suggested change
type ComponentProps = {
type TextWithEmojiFragmentProps = {

Also, please add descriptions for each prop


type ComponentProps = {
message: string;
passedStyles: StyleProp<TextStyle>;
Copy link
Contributor

Choose a reason for hiding this comment

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

Suggested change
passedStyles: StyleProp<TextStyle>;
passedStyles?: StyleProp<TextStyle>;

Style props are optional by convention.

Copy link
Contributor

@fabioh8010 fabioh8010 left a comment

Choose a reason for hiding this comment

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

Just one nitpick, amazing work! LGTM 🚀

Comment on lines 12 to 33
type TextWithEmojiFragmentProps = {
/** The message to be displayed */
message: string;
/** Additional styles to add after local styles. */
passedStyles?: StyleProp<TextStyle>;
/** Should this message fragment be styled as deleted? */
styleAsDeleted?: boolean;
/** Should this message fragment be styled as muted? */
styleAsMuted?: boolean;
/** Is message displayed on narrow screen? */
isSmallScreenWidth?: boolean;
/** Should "(edited)" suffix be rendered? */
isEdited?: boolean;
/** Does message contain only emojis? */
emojisOnly?: boolean;
};
Copy link
Contributor

Choose a reason for hiding this comment

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

Suggested change
type TextWithEmojiFragmentProps = {
/** The message to be displayed */
message: string;
/** Additional styles to add after local styles. */
passedStyles?: StyleProp<TextStyle>;
/** Should this message fragment be styled as deleted? */
styleAsDeleted?: boolean;
/** Should this message fragment be styled as muted? */
styleAsMuted?: boolean;
/** Is message displayed on narrow screen? */
isSmallScreenWidth?: boolean;
/** Should "(edited)" suffix be rendered? */
isEdited?: boolean;
/** Does message contain only emojis? */
emojisOnly?: boolean;
};
type TextWithEmojiFragmentProps = {
/** The message to be displayed */
message: string;
/** Additional styles to add after local styles. */
passedStyles?: StyleProp<TextStyle>;
/** Should this message fragment be styled as deleted? */
styleAsDeleted?: boolean;
/** Should this message fragment be styled as muted? */
styleAsMuted?: boolean;
/** Is message displayed on narrow screen? */
isSmallScreenWidth?: boolean;
/** Should "(edited)" suffix be rendered? */
isEdited?: boolean;
/** Does message contain only emojis? */
emojisOnly?: boolean;
};

Add spaces between the props

@kbieganowski kbieganowski force-pushed the feat/enlarge-emojis-font-size branch from 9b4a01a to d10aeb2 Compare May 16, 2024 13:15
@kbieganowski kbieganowski marked this pull request as ready for review May 16, 2024 13:16
@kbieganowski kbieganowski requested review from a team as code owners May 16, 2024 13:16
@melvin-bot melvin-bot bot requested review from parasharrajat and removed request for a team May 16, 2024 13:16
Copy link

melvin-bot bot commented May 16, 2024

@parasharrajat Please copy/paste the Reviewer Checklist from here into a new comment on this PR and complete it. If you have the K2 extension, you can simply click: [this button]

@VickyStash
Copy link
Contributor

@roryabraham I've applied your suggestions, please take another look

@melvin-bot melvin-bot bot requested a review from roryabraham July 26, 2024 20:39
@roryabraham roryabraham merged commit 5e65276 into Expensify:main Jul 27, 2024
16 checks passed
@OSBotify
Copy link
Contributor

✋ This PR was not deployed to staging yet because QA is ongoing. It will be automatically deployed to staging after the next production release.

@parasharrajat
Copy link
Member

@VickyStash How are we going to handle follow-up fixes? #40692 (comment)

@VickyStash
Copy link
Contributor

@VickyStash How are we going to handle follow-up fixes? #40692 (comment)

@parasharrajat I can open the issues for the @expensify/react-native-live-markdown related problems.
As for the app-related one I'm going to investigate it today
What do you think?

@VickyStash
Copy link
Contributor

@parasharrajat The follow-up PR for the app is ready, please take a look

@parasharrajat
Copy link
Member

Sound awesome. Please tag me to the new issues.

@VickyStash
Copy link
Contributor

@parasharrajat I've created two issues in @expensify/react-native-live-markdown lib:

Expensify/react-native-live-markdown#443
Expensify/react-native-live-markdown#444

I have some doubts about the input dancing bug cause today, during re-testing, I had an idea of how it could be fixed by updating styles on the app side. If it works, I'll open one more follow-up

@OSBotify
Copy link
Contributor

🚀 Cherry-picked to staging by https://github.com/roryabraham in version: 9.0.14-1 🚀

platform result
🤖 android 🤖 success ✅
🖥 desktop 🖥 success ✅
🍎 iOS 🍎 success ✅
🕸 web 🕸 success ✅

@Expensify/applauseleads please QA this PR and check it off on the deploy checklist if it passes.

@OSBotify
Copy link
Contributor

🚀 Deployed to production by https://github.com/roryabraham in version: 9.0.14-6 🚀

platform result
🤖 android 🤖 success ✅
🖥 desktop 🖥 success ✅
🍎 iOS 🍎 success ✅
🕸 web 🕸 success ✅

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.