Add live visitor monitoring

This commit is contained in:
rajchales-monito
2026-07-24 11:28:03 +02:00
parent 6c7c2b2b43
commit c72e6f3ed1
5 changed files with 280 additions and 2 deletions
+79 -1
View File
@@ -61,7 +61,7 @@ label { display: grid; gap: 6px; color: var(--muted); font-size: 13px; }
height: 100vh;
min-height: 0;
display: grid;
grid-template-columns: 330px minmax(0, 1fr);
grid-template-columns: 330px minmax(0, 1fr) 320px;
overflow: hidden;
}
.sidebar {
@@ -358,6 +358,83 @@ label { display: grid; gap: 6px; color: var(--muted); font-size: 13px; }
flex-direction: column;
gap: 12px;
}
.visitor-panel {
min-height: 0;
overflow: hidden;
display: grid;
grid-template-rows: auto minmax(0, 1fr);
border-left: 1px solid var(--line);
background: var(--panel);
}
.visitor-panel header {
padding: 14px;
border-bottom: 1px solid var(--line);
display: flex;
justify-content: space-between;
gap: 10px;
align-items: center;
}
.visitor-panel h2 { margin: 0; font-size: 18px; }
.visitor-panel header span { color: var(--muted); font-size: 12px; }
.visitor-list {
min-height: 0;
overflow: auto;
}
.visitor-card {
padding: 12px 14px;
border-bottom: 1px solid var(--line);
background: white;
}
.visitor-card-head {
display: grid;
grid-template-columns: 34px minmax(0, 1fr) 10px;
gap: 9px;
align-items: center;
margin-bottom: 10px;
}
.visitor-card-head strong,
.visitor-card-head small {
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.visitor-card-head small { color: var(--muted); font-size: 12px; margin-top: 2px; }
.visitor-avatar {
width: 34px;
height: 34px;
display: grid;
place-items: center;
border-radius: 8px;
background: #eaf6f1;
color: var(--brand);
font-weight: 800;
font-size: 13px;
}
.online-dot {
width: 9px;
height: 9px;
border-radius: 50%;
background: #2f9e44;
box-shadow: 0 0 0 4px rgb(47 158 68 / 14%);
}
.visitor-card dl {
display: grid;
grid-template-columns: 68px minmax(0, 1fr);
gap: 5px 8px;
margin: 0;
font-size: 12px;
}
.visitor-card dt { color: var(--muted); }
.visitor-card dd {
min-width: 0;
margin: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.visitor-card a { color: var(--ink); text-decoration: none; }
.visitor-card a:hover { color: var(--brand); text-decoration: underline; }
.message {
max-width: min(680px, 86%);
padding: 10px 12px;
@@ -599,4 +676,5 @@ pre {
.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; }
.visitor-panel { display: none; }
}