forust/telegram-scraper
1
0
Fork 0
Code Issues Pull Requests Actions Packages Activity

Redesign message viewer as Telegram-style chat with bubbles, replies, infinite scroll, and orientation

Browse Source 
- Chat bubbles with 1px border-radius, angular tail arrows
- Own messages right (blue), others left (dark) via sender_id vs user_id
- Reply preview with left border accent, clickable scroll to original
- Infinite scroll up via IntersectionObserver on scroll-sentinel
- Date separators (Today/Yesterday/date) between messages
- Full-height messages panel with sidebar (channels) + header
- Backend: reply_to_message data in load_messages(), user_id exposed in auth snapshot
- Auto-scroll to bottom on channel load (triple scrollTop fallback)
- history.scrollRestoration = manual to prevent mid-page jumps
This commit is contained in:
mr-forust
2026-05-27 01:01:18 +02:00
parent 1dfe41950e
commit c5361f2271
4 changed files with 532 additions and 106 deletions
Download Patch File Download Diff File Expand all files Collapse all files
webui/viewer.html
+18 -14
View File
@@ -6,7 +6,7 @@
<title>Telegram Scraper Viewer</title>
<link rel="stylesheet" href="/static/style.css" />
</head>
<body class="viewer-body">
<body>
<div class="viewer-shell">
<aside class="viewer-sidebar">
<div class="viewer-sidebar-head">
@@ -25,12 +25,11 @@
<h2 id="viewer-title">Select a channel</h2>
<p id="viewer-subtitle" class="muted">Reading messages from the local SQLite database.</p>
</div>
<div class="viewer-actions">
<button class="button" id="load-older-btn" disabled>Load older</button>
</div>
</header>
<section id="messages-list" class="messages-list"></section>
<section id="messages-list" class="messages-list">
<div id="scroll-sentinel" class="scroll-sentinel"></div>
</section>
</main>
</div>
@@ -42,16 +41,21 @@
</template>
<template id="message-template">
<article class="message-card">
<div class="message-meta">
<span class="message-author"></span>
<span class="message-date"></span>
<div class="chat-bubble-wrap">
<div class="chat-bubble">
<div class="chat-sender"></div>
<div class="chat-reply">
<div class="chat-reply-border"></div>
<div class="chat-reply-body">
<div class="chat-reply-author"></div>
<div class="chat-reply-text"></div>
</div>
</div>
<div class="chat-text"></div>
<div class="chat-media"></div>
<div class="chat-footer"></div>
</div>
<div class="message-reply muted small"></div>
<div class="message-text"></div>
<div class="message-media"></div>
<div class="message-footer muted small"></div>
</article>
</div>
</template>
<script src="/static/viewer.js"></script>