Add floating day indicator (WhatsApp-style) + fix orphaned date dividers on per-channel clear#78
Open
maxlamagna wants to merge 1 commit into
Open
Add floating day indicator (WhatsApp-style) + fix orphaned date dividers on per-channel clear#78maxlamagna wants to merge 1 commit into
maxlamagna wants to merge 1 commit into
Conversation
… dividers on per-channel clear
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Closes #77
What this does
While scrolling, a small floating capsule appears top-centre showing the day the messages at the top of the view belong to ("Today", "Yesterday", or the full date; same formatting as the existing separators), and fades out ~1.2s after scrolling stops. In busy channels the in-flow day separators are often hundreds of messages above the viewport; this keeps the day visible without them. The separators themselves are untouched, nothing shifts, only the small transient capsule overlays content, and clicks pass through it.
Also fixes a pre-existing bug this feature would otherwise expose (reproducible on current
main): per-channel Clear leaves orphaned day separators in the DOM: the clear loop matches onlydataset.id, dividers carry onlydataset.channel, andfilterMessagesByChannelonly toggles visibility. Cleared channels kept their old separators and duplicated one on the next message.How it works
<div id="day-float" aria-hidden="true"><span></span></div>as the first child of#timeline. It has zero height andposition: sticky; top: 8px, so CSS keeps it pinned and centred (including during panel resizes) with no scroll-position bookkeeping.pointer-events: noneon the host (inherited by the capsule) guarantees click-through;align-items: flex-startkeeps the capsule's intrinsic padded height inside the zero-height flex line.z-indexsits above message content and below panels/menus.HTMLCollectionof.date-dividerelements (getElementsByClassNameon#messages; follows divider add/remove automatically, survives full clear since the container node persists). The scan runs at most once perrequestAnimationFrame, triggered from the existingsetupScrolllistener; it skips other channels' hidden dividers and breaks at the first divider below the scrollport edge (<=so handoff lands exactly at the edge). Cost scales with day-divider count (tens), not message count (thousands)..visibleclass + 1200ms fade timer reset; opacity transition 0.25s. No divider above the viewport → hide immediately and cancel the timer.dayFloatRefresh()recomputes the label without starting the show/fade cycle; called at both exits ofswitchChannel(guardedtypeof, since channels.js loads before chat.js) and after both clear paths, so a channel switch or clear can never leave a stale day on screen even when no scroll event fires.dataset.id) or.date-dividers of the cleared channel; the next message re-creates exactly one divider (itslastMessageDatesentry is reset, as before).?v=bumped forstyle.css,channels.js,chat.js.Scope: 4 static files, ≈110 lines, no server changes, no settings, no dependencies.
Test plan
node --check static/chat.jsandnode --check static/channels.jspass.