feat: add polish and features to localization modal

[jeremydw]

• improve performance of loading the modal
• add loader with fun messages for big pages
• add ability to edit translations directly within modal
• add ability to deep link to the modal (for sharing with other users)
• synchronize the locale picker in the doc preview with the selected locale in the modal
• make the header sticky while you scroll through big translation tables
• add button to open string in strings editor (to see which tags it has)
• add ai generate button with progress effects
• add ability to filter modal by untranslated strings only
• fix scrollbar placement
• add icon showing when the doc is fully translated

[stevenle]

this doesn't seem related to this PR, mind moving it to its own PR?

[jeremydw]

reverted

[stevenle]

this doesn't feel like a react-y pattern to me, is it better to move this to a prop?

[jeremydw]

hm, turns out i can switch to useLocation from preact-iso here - is this enough or do you want a bigger change?

[stevenle]

yeah i think useLocation() works. the issue with reading from window.location directly is that it doesn't trigger any callbacks and cause reactive state changes if any other part of the app changes the url, so it's better to use some sort of hook or react system that updates the component state whenever it changes.

[jeremydw]

sg - that's done now

[stevenle]

can this use query.locale (or the urlLocale var defined above)?

[stevenle]

taking a closer look at the screenshot you provided, i feel like the green circle checkmark is too prominent and it isn't clear to me at a glance what it's for.

i'm wondering if it makes sense to show the % translated as a string instead, maybe next to the "Translations" title, something like (<num>% translated) and the color changes depending on how complete it is. if you prefer the more simple checkmark, i'd suggest lowering the icon size (maybe 20px) and moving to to the right of the "Translations" title instead.

[stevenle]

i noticed ai injected a lot of styles using the sx prop, can you move those to css?. some other ux feedback:

[jeremydw]

Should be fixed up now:

[stevenle]

some additional ux feedback. here's what worked well on my end for the icon:

                      <ActionIcon
                        className="LocalizationModal__aiBtn"
                        variant="default"
                        size="sm"
                        onClick={generateAiTranslations}
                      >
                        <IconSparkles size={14} fill="black" />
                      </ActionIcon>

[jeremydw]

done!

[stevenle]

updates look good, thanks!