Fix remaining characters UI being cut off with multiple langs selected on small devices

[khuddite]

Fixes: #6178

1. Summary
   The footer component of the composer dialog gets messed up when multiple langs are selected on small devices like iPhone SE 3rd Gen. We display the circle/pie progress bar next to the number of remaining characters, and it seems it can be optimized so that text lives inside the progress bar. It will create a room for the composer footer so that all components in it can fit nicely.

2. Solution
   I referenced how X handles it, and it seemed quite reasonable.

• The number doesn't appear until we approach the limit. (-20) It will help prevent the text width from getting bigger than the progress bar when the number is more than 2 digits, like 250.
• The progress bar disappears when the input is far above the limit. (+10) same reason as above

3. Recording
   https://github.com/user-attachments/assets/a29201db-3eec-472d-9f7d-fed1fb965f43

I'd love to receive any feedback/comments on these changes.

[JoshMLeslie]

Hi! New here so I'm not familiar with the overall styling but imo since you're bothering to make a styles object, move the flex styles into that too just to declutter the HTML a bit

[khuddite]

I figured we could just reuse globally available styles as much as possible. I am also not sure what is the best approach here to comply with Bluesky guidelines. I will wait until someone from a core team jumps in and makes recommendations/suggestions here.

[JoshMLeslie]

Where are you getting 20 and -10 from? Are these experimentally computed?

[JoshMLeslie]

Also, is there ever a possibility that both shouldShowText and shouldShowCircle will be true? Will the UI elements conflict in that case? Would it be more sensible to use a single var?

[khuddite]

Yes, shouldShowText and shouldShowCircle can be true at the same time when remainingCount > -10 && remainingCount <= 20, and that's when we display the number at the center of the progress circle.

Creating two variables was intentional, and I can not think of a way to use a single variable.

20 and -10 are from X

[gaearon]

Let's get this rebased.

[khuddite]

Oops! Something went wrong! :(

ESLint: 8.47.0

ESLint couldn't find the config "preact" to extend from. Please check that the name of the config is correct.

The config "preact" was referenced from the config file in "/Users/admin/Work/Personal/OpenSources/social-app/bskyembed/.eslintrc".

If you still have problems, please stop by https://eslint.org/chat/help to chat with the team.

husky - pre-commit hook exited with code 1 (error)

I am not sure what's changed recently, but I cannot commit the merged changes because of the above issue. Husky fails on eslint for some reason.

[khuddite]

@gaearon I merged main by bypassing husky pre-commit hook with --no-verify flag. I am not sure exactly why it was failing. However, after merging, I confirmed no lint errors by running yarn lint. It's still mysterious to me 🤔

I think it's probably related to the recent eslint config update made in this commit. And maybe, husky doesn't handle it well with git merge --continue command especially when there were merge conflicts. 🧐