feat: live message viewer

2025-10-27 20:44:57 +01:00
parent cbe13f1d84
commit 2a7d170824
5 changed files with 496 additions and 5 deletions
--- a/public/styles/main.css
+++ b/public/styles/main.css
@@ -3,6 +3,127 @@
    transform: rotate(-90deg);
    transform-origin: 50% 50%;
 }
+
+/* ========================================
+   MESSAGE LIST STYLES FOR EVENTS DRAWER
+   ======================================== */
+
+.topic-messages-container {
+    height: 100%;
+    overflow-y: auto;
+    padding: 16px;
+}
+
+.message-list-header {
+    margin-bottom: 16px;
+    padding-bottom: 16px;
+    border-bottom: 1px solid var(--border-color, rgba(255, 255, 255, 0.1));
+}
+
+.message-list-header-title {
+    color: var(--text-primary);
+    font-weight: 600;
+    margin-bottom: 8px;
+}
+
+.message-list-header-subtitle {
+    color: var(--text-secondary);
+    font-size: 0.9em;
+}
+
+.topic-code {
+    background: var(--card-background);
+    padding: 2px 6px;
+    border-radius: 4px;
+}
+
+.message-item {
+    margin-bottom: 12px;
+    padding: 12px;
+    background: var(--card-background, rgba(30, 30, 30, 0.5));
+    border-left: 3px solid var(--primary-color, #3498db);
+    border-radius: 4px;
+}
+
+.message-item-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 8px;
+}
+
+.message-id {
+    color: var(--text-secondary);
+    font-size: 0.85em;
+}
+
+.message-timestamp {
+    color: var(--text-secondary);
+    font-size: 0.85em;
+}
+
+.message-content {
+    margin: 0;
+    white-space: pre-wrap;
+    word-break: break-all;
+    font-family: monospace;
+    font-size: 0.9em;
+    color: var(--text-primary);
+}
+
+.empty-message-state {
+    text-align: center;
+    padding: 32px;
+    color: var(--text-secondary);
+}
+
+.topic-multi-indicator {
+    color: var(--text-secondary);
+}
+
+/* Message animations - only for new messages */
+.message-item-new {
+    animation: messageSlideIn 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+}
+
+@keyframes messageSlideIn {
+    0% {
+        opacity: 0;
+        transform: translateY(-15px) scale(0.98);
+        max-height: 0;
+        margin-bottom: 0;
+        padding-top: 0;
+        padding-bottom: 0;
+    }
+    50% {
+        opacity: 0.8;
+    }
+    100% {
+        opacity: 1;
+        transform: translateY(0) scale(1);
+        max-height: 1000px;
+        margin-bottom: 12px;
+        padding-top: 12px;
+        padding-bottom: 12px;
+    }
+}
+
+/* Node highlight animation - only for selected nodes */
+.node-highlight.highlighted {
+    animation: nodePulse 2s ease-in-out infinite;
+    filter: drop-shadow(0 0 3px rgba(255, 215, 0, 0.6));
+}
+
+@keyframes nodePulse {
+    0%, 100% {
+        opacity: 1;
+        transform: scale(1);
+    }
+    50% {
+        opacity: 0.6;
+        transform: scale(1.05);
+    }
+}
 * {
    margin: 0;
    padding: 0;