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>

public/app.js

@@ -29,6 +29,11 @@ const mtprotoBanner = document.querySelector("#mtproto-banner");
 const mtprotoHostPortInput = document.querySelector("#mtproto-host-port");
 const mtprotoSecretInput = document.querySelector("#mtproto-secret-opt");
 const mtprotoCalloutEl = document.querySelector("#mtproto-callout");
+const mtprotoLinkCardEl = document.querySelector("#mtproto-link-card");
+const mtprotoLinkAnchorEl = document.querySelector("#mtproto-link-anchor");
+const mtprotoLinkCopyBtn = document.querySelector("#mtproto-link-copy");
+const mtprotoLinkCopyState = document.querySelector("#mtproto-link-copy-state");
+const themeSelect = document.querySelector("#theme-select");
 
 const cascadePanel = document.querySelector("#cascade-panel");
 const usersPanel = document.querySelector("#users-panel");
@@ -469,18 +474,19 @@ async function refreshMtprotoPanel() {
       mtprotoActionsEl.appendChild(imgHint);
     }
 
-    if (snap.tgLink) {
-      const link = document.createElement("div");
-      link.className = "mtproto-deep-link muted warp-muted";
-      const lab = document.createElement("strong");
-      lab.textContent = "Ссылка в Telegram: ";
-      const a = document.createElement("a");
-      a.href = snap.tgLink;
-      a.textContent = snap.tgLink;
-      a.target = "_blank";
-      a.rel = "noopener noreferrer";
-      link.append(lab, a);
-      mtprotoActionsEl.appendChild(link);
+    if (mtprotoLinkCardEl) {
+      if (snap.tgLink) {
+        mtprotoLinkCardEl.classList.remove("hidden");
+        mtprotoLinkCardEl.dataset.tgLink = snap.tgLink;
+        if (mtprotoLinkAnchorEl) {
+          mtprotoLinkAnchorEl.href = snap.tgLink;
+          mtprotoLinkAnchorEl.textContent = snap.tgLink;
+        }
+        if (mtprotoLinkCopyState) mtprotoLinkCopyState.textContent = "";
+      } else {
+        mtprotoLinkCardEl.classList.add("hidden");
+        delete mtprotoLinkCardEl.dataset.tgLink;
+      }
     }
 
     const row = document.createElement("div");
@@ -563,6 +569,10 @@ async function refreshMtprotoPanel() {
       mtprotoCalloutEl.textContent = "";
       mtprotoCalloutEl.classList.add("hidden");
     }
+    if (mtprotoLinkCardEl) {
+      mtprotoLinkCardEl.classList.add("hidden");
+      delete mtprotoLinkCardEl.dataset.tgLink;
+    }
     if (mtprotoLogsTailEl) mtprotoLogsTailEl.textContent = "";
     const err = document.createElement("p");
     err.className = "muted warp-muted err";
@@ -1659,5 +1669,83 @@ async function boot() {
   }
 }
 
+function applyThemePref(pref) {
+  const root = document.documentElement;
+  const p = pref === "light" || pref === "dark" ? pref : "auto";
+  const resolved =
+    p === "auto"
+      ? window.matchMedia?.("(prefers-color-scheme: dark)").matches
+        ? "dark"
+        : "light"
+      : p;
+  root.setAttribute("data-theme-pref", p);
+  root.setAttribute("data-theme", resolved);
+  try {
+    localStorage.setItem("amnezia.theme", p);
+  } catch {
+    /* приватный режим — не критично */
+  }
+}
+
+function initThemeSwitch() {
+  let saved = "auto";
+  try {
+    const v = localStorage.getItem("amnezia.theme");
+    if (v === "light" || v === "dark" || v === "auto") saved = v;
+  } catch {
+    /* приватный режим — не критично */
+  }
+  applyThemePref(saved);
+  if (themeSelect) {
+    themeSelect.value = saved;
+    themeSelect.addEventListener("change", () => applyThemePref(themeSelect.value));
+  }
+  const mql = window.matchMedia?.("(prefers-color-scheme: dark)");
+  if (mql) {
+    const handler = () => {
+      const pref = document.documentElement.getAttribute("data-theme-pref") || "auto";
+      if (pref === "auto") applyThemePref("auto");
+    };
+    if (typeof mql.addEventListener === "function") mql.addEventListener("change", handler);
+    else if (typeof mql.addListener === "function") mql.addListener(handler);
+  }
+}
+
+function initMtprotoLinkCopy() {
+  if (!mtprotoLinkCopyBtn) return;
+  mtprotoLinkCopyBtn.addEventListener("click", async () => {
+    const link =
+      mtprotoLinkCardEl?.dataset?.tgLink ||
+      mtprotoLinkAnchorEl?.href ||
+      "";
+    if (!link) return;
+    try {
+      if (navigator.clipboard?.writeText) await navigator.clipboard.writeText(link);
+      else {
+        const ta = document.createElement("textarea");
+        ta.value = link;
+        ta.style.position = "fixed";
+        ta.style.opacity = "0";
+        document.body.appendChild(ta);
+        ta.select();
+        document.execCommand("copy");
+        ta.remove();
+      }
+      if (mtprotoLinkCopyState) {
+        mtprotoLinkCopyState.textContent = "Скопировано";
+        setTimeout(() => {
+          if (mtprotoLinkCopyState) mtprotoLinkCopyState.textContent = "";
+        }, 2000);
+      }
+    } catch (e) {
+      if (mtprotoLinkCopyState) {
+        mtprotoLinkCopyState.textContent = "Не удалось скопировать — выделите вручную.";
+      }
+    }
+  });
+}
+
+initThemeSwitch();
+initMtprotoLinkCopy();
 void hydratePanelPromoFooter();
 boot();

public/index.html

@@ -7,7 +7,20 @@
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;600;700&family=JetBrains+Mono:wght@400;600&display=swap" rel="stylesheet">
-  <link rel="stylesheet" href="/styles.css?v=1.2.20">
+  <link rel="stylesheet" href="/styles.css?v=1.2.21">
+  <script>
+    (function () {
+      try {
+        var saved = localStorage.getItem("amnezia.theme");
+        var t = saved === "light" || saved === "dark" ? saved : "auto";
+        var resolved = t === "auto"
+          ? (window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light")
+          : t;
+        document.documentElement.setAttribute("data-theme-pref", t);
+        document.documentElement.setAttribute("data-theme", resolved);
+      } catch (e) {}
+    })();
+  </script>
 </head>
 <body class="page">
   <aside id="panel-promo-strip" class="panel-promo-strip hidden" role="complementary" aria-label="Поддержка проекта">
@@ -43,6 +56,14 @@
         <p class="sub">Базовая открытая панель: просмотр клиентов AmneziaWG и (после входа) установка Telegram MTProto‑прокси в Docker без PRO. Полное управление peer, экспорт .conf, каскад, Cloudflare WARP и синхронизация времени хоста — в версии PRO.</p>
       </div>
       <div class="token-box">
+        <div class="theme-switch" role="group" aria-label="Тема оформления">
+          <label for="theme-select" class="theme-switch-label muted">Тема</label>
+          <select id="theme-select" class="theme-select" aria-label="Тема оформления">
+            <option value="auto">Системная</option>
+            <option value="light">Светлая</option>
+            <option value="dark">Тёмная</option>
+          </select>
+        </div>
         <div class="session-actions">
           <button type="button" id="logout" class="btn ghost full">Выйти</button>
         </div>
@@ -143,6 +164,16 @@
           Сохраните <strong>секрет</strong>, который показывается один раз после установки — в интерфейсе он маскируется.
         </p>
         <p id="mtproto-callout" class="mtproto-callout hidden" role="note"></p>
+        <div id="mtproto-link-card" class="mtproto-link-card hidden" role="region" aria-label="Ссылка для Telegram">
+          <div class="mtproto-link-row">
+            <strong class="mtproto-link-label">Ссылка в Telegram</strong>
+            <a id="mtproto-link-anchor" class="mtproto-link-anchor" target="_blank" rel="noopener noreferrer"></a>
+          </div>
+          <div class="mtproto-link-row mtproto-link-actions">
+            <button type="button" id="mtproto-link-copy" class="btn small ghost">Скопировать</button>
+            <span id="mtproto-link-copy-state" class="muted warp-muted"></span>
+          </div>
+        </div>
         <div class="mtproto-fields">
           <label for="mtproto-host-port">Порт хоста (необязательно — по умолчанию см. MTPRO_PUBLISH_PORT, обычно 8443)</label>
           <input id="mtproto-host-port" type="number" min="512" max="65535" autocomplete="off" placeholder="8443 или другой свободный порт">
@@ -277,6 +308,6 @@
     </div>
   </dialog>
 
-  <script src="/app.js?v=1.2.20" type="module"></script>
+  <script src="/app.js?v=1.2.21" type="module"></script>
 </body>
 </html>

public/styles.css

@@ -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%);