Skip to content

fix(telegram): show copyable /start command for pairing #2584

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
koala73 merged 5 commits into from
Mar 31, 2026
+162 −19
Merged

fix(telegram): show copyable /start command for pairing #2584

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
9c07efc
fix(telegram): show /start command with copy button instead of unreli…
koala73 Mar 31, 2026
2aa2697
fix(telegram): add Open Telegram button alongside copy command
koala73 Mar 31, 2026
cf401c7
feat(telegram): add QR code to pairing UI for mobile users
koala73 Mar 31, 2026
2bc7964
fix(telegram): implement full layered pairing UX
koala73 Mar 31, 2026
a6b661b
fix(telegram): fix clipboard fallback for unavailable Clipboard API
koala73 Mar 31, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

3 changes: 2 additions & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -110,9 +110,9 @@
"fast-xml-parser": "^5.3.7",
"globe.gl": "^2.45.0",
"hls.js": "^1.6.15",
"jose": "^6.0.11",
"i18next": "^25.8.10",
"i18next-browser-languagedetector": "^8.2.1",
"jose": "^6.0.11",
"maplibre-gl": "^5.16.0",
"marked": "^17.0.3",
"onnxruntime-web": "^1.23.2",
Expand All @@ -123,6 +123,7 @@
"supercluster": "^8.0.1",
"telegram": "^2.26.22",
"topojson-client": "^3.1.0",
"uqr": "^0.1.2",
"ws": "^8.19.0",
"youtubei.js": "^16.0.1"
},
Expand Down
86 changes: 70 additions & 16 deletions src/services/preferences-content.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import type { StreamQuality } from '@/services/ai-flow-settings';
import { getThemePreference, setThemePreference, type ThemePreference } from '@/utils/theme-manager';
import { getFontFamily, setFontFamily, type FontFamily } from '@/services/font-settings';
import { escapeHtml } from '@/utils/sanitize';
import { renderSVG } from 'uqr';
import { trackLanguageChange } from '@/services/analytics';
import { exportSettings, importSettings, type ImportResult } from '@/utils/settings-persistence';
import {
Expand Down Expand Up @@ -808,23 +809,57 @@ export function renderPreferences(host: PreferencesHost): PreferencesResult {
container.addEventListener('click', (e) => {
const target = e.target as HTMLElement;

if (target.closest('#usConnectTelegram')) {
const rowEl = target.closest('.us-notif-ch-row') as HTMLElement | null;
if (!rowEl) return;
if (target.closest('.us-notif-tg-copy-btn')) {
const btn = target.closest('.us-notif-tg-copy-btn') as HTMLButtonElement;
const cmd = btn.dataset.cmd ?? '';
const markCopied = () => {
btn.textContent = 'Copied!';
setTimeout(() => { btn.textContent = 'Copy'; }, 2000);
};
const execFallback = () => {
const ta = document.createElement('textarea');
ta.value = cmd;
ta.style.cssText = 'position:fixed;opacity:0;pointer-events:none';
document.body.appendChild(ta);
ta.select();
try { document.execCommand('copy'); markCopied(); } catch { /* ignore */ }
document.body.removeChild(ta);
};
if (navigator.clipboard?.writeText) {
navigator.clipboard.writeText(cmd).then(markCopied).catch(execFallback);
} else {
execFallback();
}
return;
}

const startTelegramPairing = (rowEl: HTMLElement) => {
rowEl.innerHTML = `<div class="us-notif-ch-icon">${channelIcon('telegram')}</div><div class="us-notif-ch-body"><div class="us-notif-ch-name">Telegram</div><div class="us-notif-ch-sub">Generating code…</div></div>`;
createPairingToken().then(({ token, expiresAt }) => {
if (signal.aborted) return;
const botUsername = (typeof import.meta !== 'undefined' && import.meta.env?.VITE_TELEGRAM_BOT_USERNAME as string | undefined) ?? 'WorldMonitorBot';
const deepLink = `https://t.me/${botUsername}?start=${token}`;
const deepLink = `https://t.me/${String(botUsername)}?start=${token}`;
const startCmd = `/start ${token}`;
const secsLeft = Math.max(0, Math.floor((expiresAt - Date.now()) / 1000));
const qrSvg = renderSVG(deepLink, { ecc: 'M', border: 1 });
rowEl.innerHTML = `
<div class="us-notif-ch-icon">${channelIcon('telegram')}</div>
<div class="us-notif-ch-body">
<div class="us-notif-ch-name">Telegram</div>
<div class="us-notif-ch-sub">Waiting for pairing...</div>
<div class="us-notif-ch-name">Connect Telegram</div>
<div class="us-notif-ch-sub">Open the bot. If Telegram doesn't send the code automatically, paste this command.</div>
<div class="us-notif-tg-pair-layout">
<div class="us-notif-tg-cmd-col">
<a href="${escapeHtml(deepLink)}" target="_blank" rel="noopener noreferrer" class="us-notif-tg-link">Open Telegram</a>
<div class="us-notif-tg-cmd-row">
<code class="us-notif-tg-cmd">${escapeHtml(startCmd)}</code>
<button type="button" class="us-notif-tg-copy-btn" data-cmd="${escapeHtml(startCmd)}">Copy</button>
</div>
</div>
<div class="us-notif-tg-qr" title="Scan with mobile Telegram">${qrSvg}</div>
</div>
</div>
<div class="us-notif-ch-actions">
<a href="${escapeHtml(deepLink)}" target="_blank" rel="noopener noreferrer" class="us-notif-tg-link">Open Telegram</a>
<span class="us-notif-tg-countdown" id="usTgCountdown">${secsLeft}s</span>
<span class="us-notif-tg-countdown" id="usTgCountdown">Waiting… ${secsLeft}s</span>
</div>
`;
let remaining = secsLeft;
Expand All @@ -833,20 +868,39 @@ export function renderPreferences(host: PreferencesHost): PreferencesResult {
if (signal.aborted) { clearNotifPoll(); return; }
remaining -= 3;
const countdownEl = container.querySelector<HTMLElement>('#usTgCountdown');
if (countdownEl) countdownEl.textContent = `${Math.max(0, remaining)}s`;
if (countdownEl) countdownEl.textContent = `Waiting… ${Math.max(0, remaining)}s`;
const expired = remaining <= 0;
if (expired) clearNotifPoll();
if (expired) {
clearNotifPoll();
rowEl.innerHTML = `
<div class="us-notif-ch-icon">${channelIcon('telegram')}</div>
<div class="us-notif-ch-body">
<div class="us-notif-ch-name">Telegram</div>
<div class="us-notif-ch-sub us-notif-tg-expired">Code expired</div>
</div>
<div class="us-notif-ch-actions">
<button type="button" class="us-notif-ch-btn us-notif-ch-btn-primary us-notif-tg-regen">Generate new code</button>
</div>
`;
return;
}
getChannelsData().then((data) => {
const tg = data.channels.find(c => c.channelType === 'telegram');
if (tg?.verified || expired) {
if (tg?.verified) saveRuleWithNewChannel('telegram');
if (tg?.verified) {
saveRuleWithNewChannel('telegram');
reloadNotifSection();
}
}).catch(() => {
if (expired) reloadNotifSection();
});
}).catch(() => {});
}, 3000);
}).catch(() => {});
}).catch(() => {
rowEl.innerHTML = `<div class="us-notif-ch-icon">${channelIcon('telegram')}</div><div class="us-notif-ch-body"><div class="us-notif-ch-name">Telegram</div><div class="us-notif-ch-sub us-notif-tg-expired">Failed to generate code</div></div><div class="us-notif-ch-actions"><button type="button" class="us-notif-ch-btn us-notif-ch-btn-primary us-notif-tg-regen">Try again</button></div>`;
});
};

if (target.closest('#usConnectTelegram') || target.closest('.us-notif-tg-regen')) {
const rowEl = target.closest('.us-notif-ch-row') as HTMLElement | null;
if (!rowEl) return;
startTelegramPairing(rowEl);
return;
}

Expand Down
88 changes: 88 additions & 0 deletions src/styles/settings-window.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1255,9 +1255,97 @@ tr.diag-err td { color: var(--settings-red); }
background: color-mix(in srgb, var(--settings-accent) 85%, white);
}

.us-notif-tg-inline-link {
color: var(--settings-accent);
text-decoration: none;
}

.us-notif-tg-inline-link:hover {
text-decoration: underline;
}

.us-notif-tg-pair-layout {
display: flex;
align-items: flex-start;
gap: 10px;
margin-top: 6px;
}

.us-notif-tg-qr {
flex-shrink: 0;
width: 88px;
height: 88px;
border-radius: 6px;
overflow: hidden;
background: #fff;
padding: 3px;
box-sizing: border-box;
}

.us-notif-tg-qr svg {
width: 100%;
height: 100%;
display: block;
}

.us-notif-tg-cmd-col {
display: flex;
flex-direction: column;
gap: 6px;
justify-content: center;
min-width: 0;
}

.us-notif-tg-cmd-row {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 6px;
}

.us-notif-tg-cmd {
font-family: monospace;
font-size: 11px;
background: var(--settings-bg-secondary, rgba(0,0,0,0.15));
border: 1px solid var(--settings-border, rgba(255,255,255,0.1));
border-radius: 4px;
padding: 2px 6px;
color: var(--settings-text-primary);
user-select: all;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 180px;
}

.us-notif-tg-copy-btn {
font: inherit;
font-size: 10px;
font-weight: 600;
padding: 2px 8px;
background: transparent;
border: 1px solid var(--settings-accent);
border-radius: 4px;
color: var(--settings-accent);
cursor: pointer;
white-space: nowrap;
transition: background 0.15s, color 0.15s;
}

.us-notif-tg-copy-btn:hover {
background: var(--settings-accent);
color: #fff;
}

.us-notif-tg-expired {
color: var(--settings-text-secondary);
font-style: italic;
}

.us-notif-tg-countdown {
font-size: 10px;
color: var(--settings-text-secondary);
white-space: nowrap;
}

.us-notif-signin {
Expand Down
Loading