feat: prompt users to start Telegram bot for notifications

frontend/src/webapp/TelegramNotificationsBanner.svelte

@@ -0,0 +1,42 @@
+<script>
+  import { Send } from "$components/ui/icons.js";
+  import Button from "$components/ui/button.svelte";
+  import Card from "$components/ui/card.svelte";
+  import { AttentionDot } from "$components/ui/index.js";
+
+  export let startLink = "";
+  export let status = "unknown";
+  export let onOpenBot = () => {};
+  export let t = (key) => key;
+
+  $: isBlocked = status === "blocked";
+  $: title = isBlocked
+    ? t("wa_telegram_notifications_blocked_title")
+    : t("wa_telegram_notifications_banner_title");
+  $: description = isBlocked
+    ? t("wa_telegram_notifications_blocked_text")
+    : t("wa_telegram_notifications_banner_text");
+</script>
+
+<Card class="telegram-notifications-card attention-wrap">
+  <AttentionDot class="telegram-notifications-dot" />
+  <div class="telegram-notifications-icon">
+    <Send size={20} />
+  </div>
+  <div class="telegram-notifications-copy">
+    <strong>{title}</strong>
+    <small>{description}</small>
+  </div>
+  <div class="telegram-notifications-actions">
+    <Button
+      variant="telegram"
+      size="sm"
+      class="telegram-notifications-primary"
+      onclick={onOpenBot}
+      data-start-link={startLink}
+    >
+      <Send size={15} />
+      {t("wa_telegram_notifications_open_bot")}
+    </Button>
+  </div>
+</Card>

frontend/src/webapp/screens/HomeScreen.svelte

@@ -13,6 +13,7 @@
   import BrandMark from "$lib/webapp/BrandMark.svelte";
   import Button from "$components/ui/button.svelte";
   import Card from "$components/ui/card.svelte";
+  import TelegramNotificationsBanner from "../TelegramNotificationsBanner.svelte";
   import { LinearProgress } from "$components/patterns/webapp/index.js";
   import { formatTrafficGb } from "../../lib/webapp/formatters.js";
   import {
@@ -38,6 +39,9 @@
   export let hasActiveTariffSubscription = false;
   export let hasMultipleTariffs = false;
   export let subscription = {};
+  export let telegramNotificationsNeedPrompt = false;
+  export let telegramNotificationsStartLink = "";
+  export let telegramNotificationsStatus = "unknown";
   export let trafficMode = false;
   export let trialBusy = false;
   export let termUnitLabel = () => ""; // We need this passed from App or context. Actually, App.svelte doesn't pass it yet. We'll pass it.
@@ -110,6 +114,7 @@
   export let activateTrial = () => {};
   export let openConnectLink = () => {};
   export let openPaymentModal = () => {};
+  export let openTelegramNotificationsBot = () => {};
   export let openRegularTopupModal = () => {};
   export let openPremiumTopupModal = () => {};
   export let openTariffChangeModal = () => {};
@@ -123,6 +128,15 @@
     <h1>{brandTitle}</h1>
   </div>
 
+  {#if telegramNotificationsNeedPrompt}
+    <TelegramNotificationsBanner
+      startLink={telegramNotificationsStartLink}
+      status={telegramNotificationsStatus}
+      onOpenBot={openTelegramNotificationsBot}
+      {t}
+    />
+  {/if}
+
   <div class="home-bottom">
     <Card class={`status-card${subscription.active ? "" : " status-card-inactive"}`}>
       {#if subscription.active}

frontend/src/webapp/screens/SettingsScreen.svelte

@@ -13,6 +13,7 @@
   import Card from "$components/ui/card.svelte";
   import { AttentionDot } from "$components/ui/index.js";
   import { LanguageSelect } from "$components/patterns/webapp/index.js";
+  import TelegramNotificationsBanner from "../TelegramNotificationsBanner.svelte";
 
   export let currentLang = "ru";
   export let currentLanguageOption = null;
@@ -30,6 +31,9 @@
   export let profileEmail = "";
   export let profileTelegramId = "";
   export let supportUrl = "";
+  export let telegramNotificationsNeedPrompt = false;
+  export let telegramNotificationsStartLink = "";
+  export let telegramNotificationsStatus = "unknown";
   export let telegramProfileName = "";
   export let user = {};
   export let userAgreementUrl = "";
@@ -37,6 +41,7 @@
   export let showLogout = true;
 
   export let linkTelegramAccount = () => {};
+  export let openTelegramNotificationsBot = () => {};
   export let logout = () => {};
   export let openAdminPanel = () => {};
   export let openExternalLink = () => {};
@@ -67,6 +72,14 @@
       <small>{profileTelegramId}</small>
     </div>
   </Card>
+  {#if telegramNotificationsNeedPrompt}
+    <TelegramNotificationsBanner
+      startLink={telegramNotificationsStartLink}
+      status={telegramNotificationsStatus}
+      onOpenBot={openTelegramNotificationsBot}
+      {t}
+    />
+  {/if}
   {#if isAdmin}
     <div class="settings-admin-block">
       <div class="settings-divider" aria-hidden="true"></div>