Improve admin visitor context layout

2026-07-23 23:15:52 +02:00
parent 273056284c
commit 571770b1c3
4 changed files with 197 additions and 15 deletions
@@ -10,7 +10,7 @@
 }

 * { box-sizing: border-box; }
-body { margin: 0; background: var(--bg); color: var(--ink); }
+body { margin: 0; background: var(--bg); color: var(--ink); overflow: hidden; }
 button, input, textarea, select { font: inherit; }
 button {
  border: 0;
@@ -47,15 +47,19 @@ label { display: grid; gap: 6px; color: var(--muted); font-size: 13px; }
 .error { min-height: 20px; color: #b42318; margin: 0; }

 .app {
-  min-height: 100vh;
+  height: 100vh;
+  min-height: 0;
  display: grid;
  grid-template-columns: 330px minmax(0, 1fr);
+  overflow: hidden;
 }
 .sidebar {
  border-right: 1px solid var(--line);
  background: var(--panel);
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr);
+  min-height: 0;
+  overflow: hidden;
 }
 .brand, .sitebar {
  display: flex;
@@ -76,7 +80,7 @@ label { display: grid; gap: 6px; color: var(--muted); font-size: 13px; }
 }
 .list-tools label { color: var(--muted); }

-.conversation-list { overflow: auto; }
+.conversation-list { overflow: auto; min-height: 0; }
 .conversation-item {
  border: 0;
  border-bottom: 1px solid var(--line);
@@ -173,10 +177,12 @@ label { display: grid; gap: 6px; color: var(--muted); font-size: 13px; }
  font-size: 13px;
 }

-.conversation { display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto; min-width: 0; }
+.conversation { display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto; min-width: 0; min-height: 0; overflow: hidden; }
 .conversation-header {
  min-height: 74px;
-  padding: 16px 20px;
+  max-height: 42vh;
+  overflow: auto;
+  padding: 14px 20px;
  background: white;
  border-bottom: 1px solid var(--line);
  display: flex;
@@ -186,8 +192,95 @@ label { display: grid; gap: 6px; color: var(--muted); font-size: 13px; }
 .conversation-header h2 { margin: 0 0 5px; font-size: 20px; }
 .conversation-header p { margin: 0; color: var(--muted); font-size: 13px; }
 .conversation-header select { width: 150px; align-self: start; }
+.visitor-head { width: 100%; min-width: 0; display: grid; gap: 7px; }
+.visitor-title-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
+.visitor-title-row h2 { margin: 0; }
+.country-pill {
+  border: 1px solid #e4ebe6;
+  border-radius: 999px;
+  padding: 3px 8px;
+  background: #f8fbf9;
+  color: var(--muted);
+  font-size: 12px;
+}
+.visitor-quick {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  color: var(--muted);
+  font-size: 12px;
+}
+.visitor-quick span {
+  border: 1px solid #e4ebe6;
+  border-radius: 999px;
+  padding: 2px 7px;
+  background: #f8fbf9;
+}
+.visitor-details {
+  max-width: 980px;
+  color: var(--muted);
+  font-size: 12px;
+}
+.visitor-details summary {
+  width: fit-content;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  cursor: pointer;
+  user-select: none;
+  color: var(--ink);
+}
+.visitor-details summary::-webkit-details-marker { display: none; }
+.visitor-details summary span {
+  width: 20px;
+  height: 20px;
+  display: grid;
+  place-items: center;
+  border-radius: 50%;
+  background: var(--brand);
+  color: white;
+  font-size: 12px;
+  font-weight: 700;
+}
+.visitor-detail-grid {
+  display: grid;
+  grid-template-columns: 76px minmax(0, 1fr);
+  gap: 5px 10px;
+  margin-top: 8px;
+}
+.visitor-detail-grid span { color: var(--muted); }
+.visitor-detail-grid a,
+.history-list a {
+  min-width: 0;
+  color: var(--brand);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.visitor-detail-grid em {
+  min-width: 0;
+  color: var(--muted);
+  font-style: normal;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.history-list {
+  margin: 8px 0 0;
+  padding-left: 20px;
+  display: grid;
+  gap: 4px;
+}
+.history-list li {
+  min-width: 0;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  gap: 10px;
+}
+.history-list small { color: var(--muted); }
 .messages {
  overflow: auto;
+  min-height: 0;
  padding: 20px;
  display: flex;
  flex-direction: column;
@@ -400,7 +493,8 @@ pre {
 }

@media (max-width: 820px) {
-  .app { grid-template-columns: 1fr; }
-  .sidebar { min-height: 42vh; border-right: 0; border-bottom: 1px solid var(--line); }
-  .conversation { min-height: 58vh; }
+  body { overflow: auto; }
+  .app { height: auto; min-height: 100vh; grid-template-columns: 1fr; overflow: visible; }
+  .sidebar { height: 42vh; border-right: 0; border-bottom: 1px solid var(--line); }
+  .conversation { height: 58vh; }
 }
@@ -40,7 +40,6 @@
                <option value="new">nove</option>
                <option value="open">otevrene</option>
                <option value="resolved">vyresene</option>
-                <option value="spam">spam</option>
              </select>
            </label>
          </div>
@@ -270,10 +270,17 @@ function renderConversations() {
 function renderActive() {
  const { conversation, messages } = state.active;
  $("#conversationHeader").innerHTML = `
-    <div>
-      <h2>${escapeHtml(conversation.visitor.name || conversation.visitor.email || "Navstevnik")}</h2>
-      <p>${visitorCountry(conversation)} ${escapeHtml(conversation.currentUrl || "")}</p>
-      <p>${escapeHtml(conversation.device.userAgent || "")}</p>
+    <div class="visitor-head">
+      <div class="visitor-title-row">
+        <h2>${escapeHtml(conversation.visitor.name || conversation.visitor.email || "Navstevnik")}</h2>
+        <span class="country-pill">${visitorCountry(conversation)}</span>
+      </div>
+      <div class="visitor-quick">
+        <span title="Doba na webu">${formatDuration(conversation.sessionSeconds)}</span>
+        <span title="Navstivene stranky">${Number(conversation.pageCount || 0)} str.</span>
+        <span title="Pocet chatu">${Number(conversation.visitorConversationCount || 1)}x chat</span>
+      </div>
+      ${visitorDetails(conversation)}
    </div>
  `;
  $("#replyForm").classList.remove("hidden");
@@ -306,10 +313,37 @@ function statusButtons(item) {
 }

 function visitorCountry(item) {
-  const countryCode = item.countryCode || countryFromLanguage(item.language);
+  const countryCode = item.countryCode || countryFromLanguage(item.language) || countryFromTimezone(item.timezone);
  return countryCode ? `${flag(countryCode)} ${escapeHtml(countryCode)}` : "zeme ?";
 }

+function visitorDetails(conversation) {
+  const history = Array.isArray(conversation.browsingHistory) ? conversation.browsingHistory : [];
+  const historyItems = history.length ? history.slice().reverse().map((item) => `
+    <li>
+      <a href="${escapeHtml(item.url || "#")}" target="_blank" rel="noreferrer">${escapeHtml(pageLabel(item))}</a>
+      <small>${escapeHtml(formatVisitedAt(item.at))}</small>
+    </li>
+  `).join("") : `<li><span>Zatim bez historie.</span></li>`;
+  return `
+    <details class="visitor-details">
+      <summary title="Detail navstevnika">
+        <span aria-hidden="true">i</span>
+        <strong>Detail navstevnika</strong>
+      </summary>
+      <div class="visitor-detail-grid">
+        <span>Aktualne</span>
+        <a href="${escapeHtml(conversation.currentUrl || "#")}" target="_blank" rel="noreferrer">${escapeHtml(shortUrl(conversation.currentUrl) || "-")}</a>
+        <span>Prisiel z</span>
+        ${conversation.referrer ? `<a href="${escapeHtml(conversation.referrer)}" target="_blank" rel="noreferrer">${escapeHtml(shortUrl(conversation.referrer))}</a>` : `<em>primy vstup / nezname</em>`}
+        <span>Zarizeni</span>
+        <em>${escapeHtml(deviceLabel(conversation.device, conversation.language, conversation.timezone))}</em>
+      </div>
+      <ol class="history-list">${historyItems}</ol>
+    </details>
+  `;
+}
+
 function formatDuration(seconds) {
  const value = Number(seconds || 0);
  if (value < 60) return `${Math.max(0, value)}s`;
@@ -415,6 +449,44 @@ function countryFromLanguage(language) {
  return match ? match[1].toUpperCase() : null;
 }

+function countryFromTimezone(timezone) {
+  const zones = {
+    "Europe/Prague": "CZ",
+    "Europe/Bratislava": "SK",
+    "Europe/Warsaw": "PL",
+    "Europe/Berlin": "DE",
+    "Europe/Vienna": "AT",
+    "Europe/Budapest": "HU"
+  };
+  return zones[String(timezone || "")] || null;
+}
+
+function shortUrl(value) {
+  if (!value) return "";
+  try {
+    const url = new URL(value);
+    const path = `${url.pathname}${url.search}`.replace(/\/$/, "");
+    return `${url.hostname}${path || "/"}`;
+  } catch {
+    return String(value);
+  }
+}
+
+function pageLabel(item) {
+  return item.title || shortUrl(item.url) || item.url || "stranka";
+}
+
+function formatVisitedAt(value) {
+  if (!value) return "";
+  const date = new Date(value);
+  if (Number.isNaN(date.getTime())) return "";
+  return date.toLocaleTimeString("cs-CZ", { hour: "2-digit", minute: "2-digit" });
+}
+
+function deviceLabel(device = {}, language, timezone) {
+  return [device.platform, device.viewport, language, timezone].filter(Boolean).join(" | ");
+}
+
 function openPhotoPreview(url, name) {
  let modal = $("#photoModal");
  if (!modal) {