feat(panel): auto tg link host + theme switcher

mtproto status now derives advertised host from request when MTPRO_PUBLIC_HOST/CLIENT_CONFIG_ENDPOINT are unset, so tg:// always works with the host:port the admin uses. Adds copy button. Adds theme selector (auto/light/dark) persisted in localStorage with prefers-color-scheme fallback.

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
Андрей Бобырев
2026-05-15 04:03:00 +03:00
parent bb007ad644
commit 9d751922fb
5 changed files with 288 additions and 28 deletions

View File

@@ -1,4 +1,5 @@
:root {
:root,
:root[data-theme="light"] {
--bg: #eef2f7;
--card: #ffffff;
--raised: #f8fafc;
@@ -19,6 +20,26 @@
font-family: "DM Sans", system-ui, sans-serif;
}
:root[data-theme="dark"] {
--bg: #0b1018;
--card: #161d2b;
--raised: #1f2738;
--line: rgba(148, 163, 184, 0.22);
--text: #e6edf6;
--muted: #9aa5b5;
--accent: #7dd3fc;
--accent-light: #38bdf8;
--danger: #f87171;
--ok: #4ade80;
--shadow: 0 18px 50px rgba(0, 0, 0, 0.55);
--input-bg: #0f1623;
--pre-bg: #0c1320;
--pre-text: #cbd5f5;
--code-bg: rgba(255, 255, 255, 0.07);
--footer-bg: #0e1622;
--surface-soft: rgba(14, 165, 233, 0.14);
}
code.inline {
font-family: "JetBrains Mono", ui-monospace, monospace;
font-size: 0.82em;
@@ -101,6 +122,106 @@ body.page {
white-space: nowrap;
}
.theme-switch {
display: flex;
flex-direction: column;
gap: 0.25rem;
margin-bottom: 0.6rem;
}
.theme-switch-label {
font-size: 0.78rem;
}
.theme-select {
width: 100%;
padding: 0.45rem 0.55rem;
border-radius: 10px;
border: 1px solid var(--line);
background: var(--input-bg);
color: var(--text);
font: inherit;
font-size: 0.85rem;
}
.mtproto-link-card {
margin: 0.65rem 0 0.85rem;
padding: 0.75rem 0.9rem;
border-radius: 12px;
border: 1px solid rgba(14, 165, 233, 0.45);
background: var(--surface-soft);
display: flex;
flex-direction: column;
gap: 0.45rem;
}
.mtproto-link-card.hidden {
display: none;
}
.mtproto-link-row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.4rem 0.75rem;
}
.mtproto-link-label {
color: var(--text);
font-weight: 700;
}
.mtproto-link-anchor {
flex: 1 1 auto;
word-break: break-all;
color: var(--accent);
font-family: "JetBrains Mono", ui-monospace, monospace;
font-size: 0.84rem;
}
:root[data-theme="dark"] .panel-promo-strip {
border-bottom-color: rgba(125, 211, 252, 0.28);
background: linear-gradient(90deg, rgba(30, 41, 59, 0.92), rgba(15, 23, 42, 0.92));
}
:root[data-theme="dark"] .panel-promo-a {
color: #fde68a;
}
:root[data-theme="dark"] .badge.on {
border-color: rgba(74, 222, 128, 0.4);
color: #bbf7d0;
background: rgba(34, 197, 94, 0.16);
}
:root[data-theme="dark"] .badge.off {
border-color: rgba(148, 163, 184, 0.35);
color: #cbd5f5;
background: rgba(148, 163, 184, 0.16);
}
:root[data-theme="dark"] .btn.warn {
border-color: rgba(248, 113, 113, 0.45);
background: rgba(248, 113, 113, 0.16);
color: #fecdd3;
}
:root[data-theme="dark"] .status.err {
color: #fecaca;
}
:root[data-theme="dark"] .status.ok {
color: #bbf7d0;
}
:root[data-theme="dark"] .ip {
color: #bae6fd;
}
:root[data-theme="dark"] .clock-zone-diff--accent {
color: #bae6fd;
}
.shell {
flex: 1 0 auto;
max-width: min(1120px, 100%);