feat: prompt users to start Telegram bot for notifications

frontend/src/styles/webapp.css

@@ -1957,6 +1957,78 @@ a {
   justify-content: center;
 }
 
+.telegram-notifications-card {
+  display: grid;
+  grid-template-columns: 38px minmax(0, 1fr);
+  gap: 10px;
+  align-items: center;
+  width: 100%;
+  border-color: color-mix(in srgb, #ff4b4b 46%, var(--border));
+  background:
+    linear-gradient(135deg, rgba(255, 75, 75, 0.11), rgba(0, 254, 122, 0.05)), var(--card);
+}
+
+.home-layout > .telegram-notifications-card {
+  align-self: end;
+}
+
+.telegram-notifications-dot {
+  top: 9px;
+  right: 9px;
+  transform: none;
+}
+
+.telegram-notifications-icon {
+  display: grid;
+  width: 38px;
+  height: 38px;
+  place-items: center;
+  border-radius: 10px;
+  background: color-mix(in srgb, #ff4b4b 16%, var(--surface));
+  color: #ff6b6b;
+}
+
+.telegram-notifications-copy {
+  display: grid;
+  min-width: 0;
+  gap: 3px;
+}
+
+.telegram-notifications-copy strong {
+  color: var(--text);
+  font-size: 14px;
+  line-height: 1.2;
+}
+
+.telegram-notifications-copy small {
+  color: var(--muted);
+  font-size: 12px;
+  line-height: 1.35;
+}
+
+.telegram-notifications-actions {
+  grid-column: 1 / -1;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  gap: 8px;
+  align-items: center;
+}
+
+.telegram-notifications-actions .btn {
+  min-width: 0;
+  width: 100%;
+  white-space: nowrap;
+}
+
+.telegram-notifications-actions .btn svg {
+  flex: 0 0 auto;
+}
+
+.telegram-notifications-primary {
+  grid-column: 1;
+  grid-row: 1;
+}
+
 .attention-wrap {
   position: relative;
 }