feat: UI for telegram user notifications

[goooseman]

Telegram user notifications

Resolves #830

This PR adds telegram subscription in case:

1. Telegram is configured on BE and NOTIFY_USERS var contains user. In this case config.telegram_notifications should be true which was implemented by @paskal at #1648.
2. User is logged in with any of the providers

UI for a user which did not subscribe yet:

If user is already subscribed, he will see "Subscribed" UI from the very beginning:

Other changes

1. TelegramLink component is created not to repeat UI of Telegram link + QR
2. Common components/button component is used inside TelegramLink instead of one used before from the components/auth/components/button folder
3. Global style to make links to be white in dark theme added.

Before

After

i18n

I do not see how the translation process is organized in the repo. Tell me if I need to update any of the .json files with the new.

[codecov[bot]]

Codecov Report

Patch coverage: 94.53% and project coverage change: +2.83 :tada:

Comparison is base (497f3ce) 58.71% compared to head (9f93506) 61.55%.

Additional details and impacted files

```diff @@ Coverage Diff @@ ## master #1649 +/- ## ========================================== + Coverage 58.71% 61.55% +2.83% ========================================== Files 128 133 +5 Lines 2885 3004 +119 Branches 697 759 +62 ========================================== + Hits 1694 1849 +155 + Misses 1187 1038 -149 - Partials 4 117 +113 ``` | [Impacted Files](https://app.codecov.io/gh/umputun/remark42/pull/1649?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=Umputun) | Coverage Δ | | |---|---|---| | [...pps/remark42/app/components/auth/auth.messsages.ts](https://app.codecov.io/gh/umputun/remark42/pull/1649?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=Umputun#diff-ZnJvbnRlbmQvYXBwcy9yZW1hcms0Mi9hcHAvY29tcG9uZW50cy9hdXRoL2F1dGgubWVzc3NhZ2VzLnRz) | `100.00% <ø> (ø)` | | | [frontend/apps/remark42/app/common/api.ts](https://app.codecov.io/gh/umputun/remark42/pull/1649?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=Umputun#diff-ZnJvbnRlbmQvYXBwcy9yZW1hcms0Mi9hcHAvY29tbW9uL2FwaS50cw==) | `70.83% <60.00%> (-1.26%)` | :arrow_down: | | [...y-telegram/comment-form\_\_subscribe-by-telegram.tsx](https://app.codecov.io/gh/umputun/remark42/pull/1649?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=Umputun#diff-ZnJvbnRlbmQvYXBwcy9yZW1hcms0Mi9hcHAvY29tcG9uZW50cy9jb21tZW50LWZvcm0vX19zdWJzY3JpYmUtYnktdGVsZWdyYW0vY29tbWVudC1mb3JtX19zdWJzY3JpYmUtYnktdGVsZWdyYW0udHN4) | `93.50% <93.50%> (ø)` | | | [frontend/apps/remark42/app/common/settings.ts](https://app.codecov.io/gh/umputun/remark42/pull/1649?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=Umputun#diff-ZnJvbnRlbmQvYXBwcy9yZW1hcms0Mi9hcHAvY29tbW9uL3NldHRpbmdzLnRz) | `90.90% <100.00%> (+0.43%)` | :arrow_up: | | [...rontend/apps/remark42/app/components/auth/auth.tsx](https://app.codecov.io/gh/umputun/remark42/pull/1649?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=Umputun#diff-ZnJvbnRlbmQvYXBwcy9yZW1hcms0Mi9hcHAvY29tcG9uZW50cy9hdXRoL2F1dGgudHN4) | `81.42% <100.00%> (+0.17%)` | :arrow_up: | | [...end/apps/remark42/app/components/button/button.tsx](https://app.codecov.io/gh/umputun/remark42/pull/1649?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=Umputun#diff-ZnJvbnRlbmQvYXBwcy9yZW1hcms0Mi9hcHAvY29tcG9uZW50cy9idXR0b24vYnV0dG9uLnRzeA==) | `100.00% <100.00%> (ø)` | | | [...ents/comment-form/\_\_subscribe-by-telegram/index.ts](https://app.codecov.io/gh/umputun/remark42/pull/1649?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=Umputun#diff-ZnJvbnRlbmQvYXBwcy9yZW1hcms0Mi9hcHAvY29tcG9uZW50cy9jb21tZW50LWZvcm0vX19zdWJzY3JpYmUtYnktdGVsZWdyYW0vaW5kZXgudHM=) | `100.00% <100.00%> (ø)` | | | [...ark42/app/components/comment-form/comment-form.tsx](https://app.codecov.io/gh/umputun/remark42/pull/1649?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=Umputun#diff-ZnJvbnRlbmQvYXBwcy9yZW1hcms0Mi9hcHAvY29tcG9uZW50cy9jb21tZW50LWZvcm0vY29tbWVudC1mb3JtLnRzeA==) | `53.30% <100.00%> (+1.59%)` | :arrow_up: | | [...remark42/app/components/telegram/telegram-link.tsx](https://app.codecov.io/gh/umputun/remark42/pull/1649?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=Umputun#diff-ZnJvbnRlbmQvYXBwcy9yZW1hcms0Mi9hcHAvY29tcG9uZW50cy90ZWxlZ3JhbS90ZWxlZ3JhbS1saW5rLnRzeA==) | `100.00% <100.00%> (ø)` | | | [...ark42/app/components/telegram/telegram.messages.ts](https://app.codecov.io/gh/umputun/remark42/pull/1649?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=Umputun#diff-ZnJvbnRlbmQvYXBwcy9yZW1hcms0Mi9hcHAvY29tcG9uZW50cy90ZWxlZ3JhbS90ZWxlZ3JhbS5tZXNzYWdlcy50cw==) | `100.00% <100.00%> (ø)` | | | ... and [1 more](https://app.codecov.io/gh/umputun/remark42/pull/1649?src=pr&el=tree-more&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=Umputun) | | ... and [23 files with indirect coverage changes](https://app.codecov.io/gh/umputun/remark42/pull/1649/indirect-changes?src=pr&el=tree-more&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=Umputun)

:umbrella: View full report in Codecov by Sentry.
:loudspeaker: Do you have feedback about the report comment? Let us know in this issue.

[paskal]

Thanks a lot!

1. Opening the subscribe window calls /api/v1/telegram/subscribe?site=SITE every time, which should be done only once after the page load. There is no need to store the results after the page reload, but within a single page load, it doesn't make sense to call it more than once.
2. After subscription and closing the subscription window I can't unsubscribe, the interface tries to subscribe me again unsuccessfully:

   Please check how email subscription knows that the user is already subscribed.

[goooseman]

@paskal

Opening the subscribe window calls /api/v1/telegram/subscribe?site=SITE every time, which should be done only once after the page load. There is no need to store the results after the page reload, but within a single page load, it doesn't make sense to call it more than once.

Fixed. @Mavrin @akellbl4 FYI I've used a new custom useSessionStorage hook to save API call instead of redux which looks like project's standard, because I do not believe we need this state at other components of the application -> I do not believe global state should be used here. As per Uncle Bob global state can be a source of bugs, so I try to avoid using it to avoid application level side-effects. But please tell me if I need to use redux, I can refactor the code

After subscription and closing the subscription window I can't unsubscribe, the interface tries to subscribe me again unsuccessfully

Thanks for the bug. I did test the use-case where user refreshes the page, but did not test when user tries to unsubscribe immediately. A new integration test is created to cover this use-case and bug is fixed.

@paskal Another weird stuff: when I was testing yesterday I was receiving { "code": 17, "error": "already subscribed", ... } from GET /telegram/subscribe in case of user is already subscribed.

Today I receive 409 status code with empty response from the same endpoint for the same use-case.

Which is weird, because I test it on my remote deployment of remark42, which was not changed since yesterday. Anyway, I've covered this additional response in the spec file and implemented it the same as { "code": 17, "error": "already subscribed", ... }

[goooseman]

@Mavrin @akellbl4 And what about i18n? I see that if I run pnpm run translation-check && pnpm run translation-check I have json files regenerated.

Shall I do it in this PR or it is a separate process? Can't find it in the project readme.

Also, do I need to extract common sentences to some common namespace? Like common.unsubscribe instead of subscribeByTelegram.unsubscribe and subscribeByEmail.unsubscribe?

[goooseman]

@Mavrin @paskal @akellbl4 @umputun just pinging in case this PR has been fallen into cracks

[goooseman]

@Mavrin thank you for your comments, everything is fixed

[goooseman]

@Mavrin It has happened because of size check using npm install eventhough pnpm install used already in the same container. I've created a potential fix to skip npm install, but this fix requires your approval to be ran on CI to check if it helps

[umputun]

@goooseman could you pls rebase the PR to make a reasonable number of logically-consistent commits pls? Squashing it on my side will make a single one and I'm not sure if this is a good idea

[goooseman]

@umputun done, but need re-apporval of CI files to run pipeline