beacon.html "just shows a spinner": the `data-ds="new"` redesign's
`.ds-overlay-backdrop { display: flex }` (an author rule) overrides the UA
`[hidden] { display: none }`, so the processing overlay — `hidden` in the markup
— rendered on load as a full-screen backdrop over the whole page. (Not the #28
watchdog, which is compiled into the bundle correctly.)
Add `.ds-overlay-backdrop[hidden] { display: none }` (specificity 0,2,0 beats the
base rule) so the `hidden` attribute actually hides it — the same guard the video
modal already uses. No JS change; the JS inline-style toggle still works. The
overlay now only shows while a torrent is being added. Rebuilt CSS + dist.
Co-Authored-By: Claude Opus 4.8 <[email protected]>
Extends the .profile-account-card pattern to the remaining compact account
lists so they all behave consistently on phones:
- Admin lists (whitelist/blacklist/editors): use the shared
.profile-account-card / __actions classes (was bespoke responsive utilities;
now full-width equal-width action buttons on mobile like the others).
- Moderation overrides: the summary+actions row (a nested flex inside an
already-padded card) uses a new padding-less .profile-account-card__row
variant so it stacks on phones too.
The account switcher (single tap-button with a column meta-stack) and DM
conversation rows (tap-to-open, no action buttons) are already mobile-friendly
and structurally different, so they're intentionally left as-is.
Co-Authored-By: Claude Opus 4.8 <[email protected]>
These cards were `flex justify-between` — three action buttons squeezed the
name/npub into a tiny column, so the (break-all) npub wrapped to 4 lines and
the whole card looked crammed on phones.
- Shared .profile-account-card + .profile-account-card__actions classes on the
Subscriptions, Friends and Blocked cards (was raw utility soup).
- Desktop keeps the row layout (summary left, actions right).
- Phones (<sm) stack it: summary on top at full width (name truncates on one
line, npub fits on one line), actions as a full-width row of equal-width
buttons with tighter padding below.
Co-Authored-By: Claude Opus 4.8 <[email protected]>
The mobile tab grid reshaped btn-ghost pills, so tiles were rounded-full
ellipses that turned into circles once a label wrapped, and a single 2-line
label ("Admin (Moderation)") stretched its whole row taller than the rest.
- Uniform tile height via grid-auto-rows (a 2-line label can no longer
stretch its row); token renamed to --profile-modal-nav-tile-height (5rem).
- Consistent card radius (--radius-xl) instead of rounded-full.
- Subtle --color-panel fill so tiles read as solid cards, not floating
outlines (the active tile's bg-primary keeps winning on specificity).
- overflow:hidden + block-size:100% so content fills each equal tile cleanly.
Co-Authored-By: Claude Opus 4.8 <[email protected]>
Onboarding tour (tourEngine.js):
- On narrow viewports (<640px) dock the popover as a fixed BOTTOM SHEET
instead of anchoring it — kills the off-screen/jump-to-center glitches
caused by short viewports, wrapping buttons and URL-bar resize. The
spotlight still highlights the target, scrolled to center so it sits above
the sheet.
- On desktop, measure the ACTUAL popover size (getBoundingClientRect) and
feed it to computeTourPlacement, instead of the fixed 240/336 guesses that
pushed tall popovers off-screen.
Profile modal mobile tab grid (CSS):
- Equal-height tiles via a min-height token + centered content, so long
labels no longer leave a ragged grid.
- Move the unread dot to the tile's top-right corner (was landing in the
grid gutter at the vertical-nav left edge).
- Tighter line-height/padding + non-shrinking glyph.
Co-Authored-By: Claude Opus 4.8 <[email protected]>
The .profile-nav__unread-dot is absolutely positioned (top:50%, left:-6px),
but the nav buttons weren't a positioning context (.btn/.focus-ring set no
position), so the Admin (and latent Messages) dot resolved against the whole
nav column — showing mid-height at the far left instead of on its button.
Make .profile-modal__nav > button position:relative so each dot anchors to
its own button.
Co-Authored-By: Claude Opus 4.8 <[email protected]>
- adminBadge.js: add applyAdminRing(el, id) for surfaces that already place the
star on a specific element and just need the ring.
- comments: ring + star on admin authors' avatars; round the comment avatar box
so the ring reads as a circle.
- channel page: ring the inner rounded avatar box (star already on the wrap).
- Notification dots: red dot on the profile modal's Admin nav tab and on the
Submissions subtab button when there are pending submissions, so admins know
where to look. profileModalController.setSubmissionsUnreadIndicator toggles
both (Admin nav dot gated on the tab being visible); driven from
applyProfileNotificationDot off app._submissionsPending.
Co-Authored-By: Claude Opus 4.8 <[email protected]>
Add a reusable decorateAdminAvatar(avatarEl, id) that applies BOTH the gold
ring (box-shadow, not clipped by the avatar's overflow) and the corner star
(hung off a non-clipped .admin-avatar-wrap it ensures around the avatar).
Idempotent; works on attached or freshly-built detached avatars.
Wired onto:
- profile modal "Acting as" identity pill
- account-switcher saved-profile avatars
- video card creator avatars
- video player creator avatar
- DM conversation list + message bubbles (upgraded from star-only to ring+star)
adminBadge.js: split the star decision from its DOM (setAdminStar) so the
ring and star share one isAdminActor check; added ADMIN_RING_CLASS /
ADMIN_WRAP_CLASS. tests: decorateAdminAvatar (wrap/ring/star, idempotency,
non-admin, detached).
Co-Authored-By: Claude Opus 4.8 <[email protected]>
Make the super-admin/admin signal unmistakable on your own profile button:
a gold ring around the avatar (with a thin page-colored gap so it reads as
a ring, not a border) in addition to the corner star.
- applicationBootstrap.js: refreshAdminStar toggles an is-admin class on the
profile button using applyAdminStar's return value.
- CSS: #profileButton.is-admin > div draws the gold ring (box-shadow, not
clipped by the avatar's overflow).
- uiCoordinator.js: refresh the admin star/ring inside applyAuthenticatedUiState
so it also lights on session restore, not only a fresh login — the likely
reason it wasn't showing.
Co-Authored-By: Claude Opus 4.8 <[email protected]>
Extend the admin star to per-message avatars: incoming bubbles from an
admin peer now show the gold star. MessageBubble gains an opt-in adminId
and wraps its avatar img in a non-clipped shell only when the author is an
admin (non-admin bubbles keep the bare <img>). MessageThread passes the
peer pubkey for incoming bubbles; outgoing bubbles are the current user,
whose admin status is already shown on the profile button.
Co-Authored-By: Claude Opus 4.8 <[email protected]>
Show a small gold "verified admin" star in the corner opposite the red
notification dot whenever a rendered profile belongs to a bitvid admin
(the super admin or a current list editor).
- adminBadge.js (new): isAdminActor(hex|npub) sync check against
accessControl, and applyAdminStar(container, id) which adds/removes a
single `.admin-star` in a non-clipped, positioned container. Idempotent.
- CSS: `.admin-star` (top-left gold disc, mirrors the top-right dot),
`.dm-avatar-wrap`, and position:relative on the comment avatar wrapper.
- Profile button: app.refreshAdminStar() lights the logged-in user's star;
re-runs on login/logout and on accessControl.onEditorsChange (so a
late-loading editor list still resolves).
- Comments: star on comment-author avatars (commentNodeFactory).
- Channel page: wrap the clipped avatar and star the channel owner.
- DMs: Avatar gains an opt-in adminId — only admin avatars get wrapped so
non-admin rows are byte-identical; ContactRow passes the peer pubkey.
- tests: admin-badge unit coverage (recognition, idempotency, removal).
Co-Authored-By: Claude Opus 4.8 <[email protected]>
Make each admin action self-explanatory and give content appeals a real
effect instead of a dead-end "Dismiss".
- submissionsSection.js: per-type action sets, each button paired with a
one-line description. Applications show Approve (adds to whitelist) / Deny;
appeals that name a real event show "Approve & unblock" (removes the video
from the event block list) / "Keep blocked"; other types show "Mark handled".
- submissionService.js: parse an appeal's `e` tag into targetEventId (trusted
only when it's a well-formed 64-char hex id).
- iframe-content-appeals-form.html: add a required "Blocked video link or
event ID" field; regex-validate + normalize a share link / nevent / note /
hex to the hex event id, tag it as `e`, and include it in the body. Block
submission when no valid reference is provided.
- CSS: stacked action + hint styling; iframe-form .form-hint.
- tests: cover targetEventId parsing (valid, malformed, absent).
Co-Authored-By: Claude Opus 4.8 <[email protected]>
Submission cards showed the raw form markdown ("### Bug Report", "- npub: …").
Added a tiny, SAFE renderer: `#…###` headings → bold lines, leading `- `/`* `
bullet markers stripped, `**bold**` honored inline — built entirely with
textContent/createTextNode + <strong>, so no HTML is ever parsed from the
content (submissions are untrusted public events; rendering raw markdown/HTML
would be an XSS hole). Lint (innerHTML check) + build clean; tests 26/26.
Co-Authored-By: Claude Opus 4.8 <[email protected]>
Videos within a playlist can now be dragged to reorder (desktop), on top of the
↑/↓ buttons kept for touch/accessibility. HTML5 DnD delegated on the list:
dragstart records the row's playlist + index, dragover highlights the drop
target (accent inset bar) and allows the drop, drop reorders via
reorderPlaylistItems and publishes optimistically. Drag is scoped to a single
playlist (can't cross playlists); dragging row dims to 0.5; grab/grabbing cursor.
Lint + build clean; profile-modal-controller tests 26/26.
Co-Authored-By: Claude Opus 4.8 <[email protected]>
A central management surface, a sibling tab to "My Videos" (gated by
FEATURE_PLAYLISTS — hidden when off).
- components/profile-modal.html: "Playlists" nav item + #profilePanePlaylists.
- js/ui/profileModal/ProfilePlaylistsController.js: lists the user's playlists
(incl. empty) with a collapsible row each — Rename, Delete, and an expand to a
video sublist with ↑/↓ reorder and Remove. Fetches the referenced creators'
videos so the sublist shows real titles/thumbnails. Edits are optimistic and
re-sync on failure; publishes via the facade; dispatches
bitvid:playlists-changed so the channel section + this pane stay in sync.
- profileModalController.js: instantiate + bind nav/pane + cache DOM + register
listeners + selectPane("playlists") refresh; hide the tab when the flag is off.
- promptDialog.js: showTextPrompt (plain text prompt) for rename.
- playlistFacade.js: deletePlaylist — NIP-09 kind-5 (a + e refs) plus an empty
republish so kind-5-ignoring readers also drop it.
- tailwind.source.css: .playlist-row* styles (token-only).
Lint + build clean; profile-modal-controller tests 26/26.
Co-Authored-By: Claude Opus 4.8 <[email protected]>
Design polish from feedback:
- Playlist cards are now a "stack of clips" cover: the first video's thumbnail
fills a 16:9 tile with two offset/rotated layers peeking behind it (::before/
::after). A themed gradient scrim (accent-strong→accent→clear, via color-mix)
darkens the base so the title sits BOLD and WHITE over the cover instead of
small grey text underneath. Video count moved to a pill in the top-right.
channelPlaylists.js resolves the cover from the app's active videos
(buildVideoAddressPointer → video.thumbnail), falling back to playlist.image.
- Back button on the playlist view: was a bare "← Back to channel" text link, now
a proper .btn-ghost (sm) pill with a chevron icon — matches the site's buttons
and is theme-aware.
- tokens.css: added --size-4px/--size-5px for the stack offsets (token lint).
Scrim/title use --color-white (always light — the scrim is always dark
regardless of theme). Lint + build clean.
Co-Authored-By: Claude Opus 4.8 <[email protected]>
- constants.js: FEATURE_PLAYLISTS (default OFF) so nothing is user-visible until
the whole playlist UI ships; flip to preview on unstable.
- js/channelPlaylists.js: wireChannelPlaylists(pubkey) fetches the creator's
playlists (facade) and renders a responsive row of cards (thumbnail + video
count + title) linking to `#view=playlist&pubkey=…&id=…`. Hidden when the flag
is off, no playlists, or the container is missing; a nav-token guards against a
stale fetch resolving after a channel switch. DOM built with textContent (no
innerHTML). Kept out of the 5729-line-capped channelProfile.js.
- channelProfile.js: one-line wireChannelPlaylists(currentChannelHex) hook next
to wireChannelZapTotal (no-op while the flag is off).
- views/channel-profile.html: #channelPlaylistsSection above the video grid.
- tailwind.source.css: .playlist-grid / .playlist-card* (token-only; responsive
via @apply like .bv-grid-video).
Lint + build clean. The playlist view the cards link to lands next.
Co-Authored-By: Claude Opus 4.8 <[email protected]>
The per-video Popularity modal now plots a second, orange zaps-over-time line
beside the red views line, with a legend and — new — VISIBLE x-axis date ticks
(the old chart only put the range in the aria-label).
- buildZapSatsTimeSeries: buckets cumulative SATS from 9735 receipts + verified
bitvid tallies, deduped by payment_hash (same rule as the badge store) so the
chart and badge agree.
- buildPopularityChartSvg: two token-colored cumulative lines on a shared time
x-axis, each with its OWN y scale (independent per-series — D5), plus date-tick
<text> labels. Views = .text-accent, zaps = .text-zap (new --color-zap
utility). Legend is plain DOM in the modal; headline gains "· N sats zapped".
- js/zapEventsFacade.js: lists a pointer's [9735, ZAP_TALLY_KIND] events via the
L1 SubscriptionManager for the chart; modal re-renders on onZapTotalsChanged.
- All flag-gated (FEATURE_ZAP_TALLY); the existing views-only chart + its test
are untouched (buildViewCountChartSvg kept).
Verified live earlier that imports resolve (app builds/runs). Tests:
tests/zap-time-series-chart.test.mjs (5) + existing view-count-chart green.
Lint + build green.
Co-Authored-By: Claude Opus 4.8 <[email protected]>
The zap-totals store's pointerKey only understood {type,value} objects, but
deriveVideoPointerInfo produces tag-style ARRAYS (["a", value, relay?]) — so
every card-badge lookup keyed to nothing, no receipt fetch was ever
scheduled, and the Most Zapped ranking metric silently read 0 for every
video. pointerKey now normalizes both shapes; tests use the array shape the
app actually passes.
Also adds the orange sats badge to the video player modal's meta row
(right side via the row's existing justify-between; views stay left),
driven by the same cache/change-signal as the cards and torn down with the
view-count subscription.
Co-Authored-By: Claude Fable 5 <[email protected]>
Video cards show the total sats from the shared zapTotals cache: new
--color-zap token (bitcoin orange, both themes), badge pushed to the
engagement row's end so views/comments stay left-aligned, hidden until a
nonzero total is known. The list view's zap binder fills [data-zap-total]
on bind (also scheduling the batched receipt fetch) and one shared change
listener updates every bound card as receipt batches land.
Co-Authored-By: Claude Fable 5 <[email protected]>
Identity pill top-center on every pane, straddling the header divider, so
users always see which profile they're acting as (e.g. before uploading).
Populated in renderSavedProfiles (same resolveMeta path as the Account pane
card, so it refreshes on profile switch), hidden when logged out, and
click-through jumps to the Account pane.
Co-Authored-By: Claude Fable 5 <[email protected]>
CSS custom properties are invalid inside @media conditions — Chromium/Brave drop
the whole block — so every `@media (max-width: calc(theme("screens.lg") -
var(--breakpoint-edge-offset)))` was DEAD. The offset token was added to satisfy the
design-token lint, but `0.02px` is already exempt there, so the token was never
needed and silently broke the queries.
Swapped var(--breakpoint-edge-offset) → 0.02px in all 4 @media conditions (valid,
lint-clean, exclusive breakpoint preserved). Verified valid via matchMedia. This
re-activates 3 previously-dead mobile blocks that were intended but never worked:
full-screen modals on mobile, profile-modal menu/pane switching, and the video-card
tap-active state (plus the profile-nav app-grid).
Co-Authored-By: Claude Opus 4.8 <[email protected]>
The profile-modal nav app-grid never applied because its @media condition used
`calc(theme("screens.lg") - var(--breakpoint-edge-offset))` — CSS custom
properties are invalid inside @media conditions, so Chromium/Brave drop the whole
block (confirmed via matchMedia). My earlier in-browser preview used !important,
which bypassed the media query and masked it.
Moved the grid rules into a valid `@media (max-width: theme("screens.lg"))` block
(theme() resolves to a literal at build time). Cascade verified without !important:
display:grid, 3 columns, flex-direction:column. Lint clean.
Filed #40: the same var()-in-@media pattern silently breaks many other responsive
rules (it was added to satisfy the token lint) — needs a broader audit.
Co-Authored-By: Claude Opus 4.8 <[email protected]>
On mobile (<1024px, the full-width menu view), the profile modal's tab nav
(Account, Relays, Wallet, Storage, …) renders as a 3-column grid of icon tiles
with the title centered below each icon, instead of the vertical list. Desktop
(>=lg) keeps its vertical nav, unchanged.
Scoped to `.profile-modal__nav` inside the existing mobile media query; token-only;
labels wrap at spaces. Validated live in-browser.
(Note: the earlier sidebar app-grid was a misread of the request and was reverted;
this is the intended component.)
Co-Authored-By: Claude Opus 4.8 <[email protected]>
Below the desktop breakpoint (<1024px), the open/expanded sidebar's primary nav
renders as a 3-column grid of icon tiles with the title centered below each icon
(app-grid feel), instead of the desktop vertical list. Desktop and the collapsed
icon rail are unchanged.
- Scoped to `.sidebar-nav` so the footer "More" links are untouched.
- Token-only (no raw measurements), high specificity via the sidebar-expanded
prefix (no !important). Labels wrap at spaces, not mid-word.
- Validated live in-browser; lint clean.
Option A (grid shows on the open mobile menu). An always-on variant was deferred —
it would require widening/overlaying the mobile sidebar.
Co-Authored-By: Claude Opus 4.8 <[email protected]>
A "Popularity" item in the video ⋯ menu opens a public views-over-time chart
(view data is public). Builds on the now-trustworthy view counts (#4).
- buildViewCountTimeSeries buckets raw kind-30079 view events by the counter's
dedupe window (one view per viewer per day) into a cumulative series.
- buildViewCountChartSvg renders a token-colored (currentColor / text-accent)
SVG area+line chart — no charting library, no raw colors.
- The modal fetches via listVideoViewEventsWithDefaultClient, shows the total,
and updates LIVE by subscribing to view events (debounced re-render); cleans
up on close (Esc / backdrop / ✕). Lazy-loaded from the menu handler so it
only ships when opened.
New size tokens for the modal; reuses .ds-overlay-backdrop for the scrim.
Tests: tests/view-count-chart.test.mjs (cumulative dedupe, junk filtering,
SVG line/area + empty/single-point).
Co-Authored-By: Claude Opus 4.8 <[email protected]>
The active contact row only swapped to --surface-sunken with a --border-strong
border, nearly identical to the hover state, so it was hard to tell which
conversation was selected. Give it an accent-tinted background, an accent
border, an inset left accent bar, and accent-colored bold name text.
Co-Authored-By: Claude Opus 4.8 <[email protected]>
Root cause of "have to click the Zap button several times before it opens":
the button is intentionally hidden+disabled until the creator's Lightning
address resolves (~2s profile fetch), but .video-modal__action-button sets
display: inline-flex, which overrode the UA `[hidden] { display:none }`. So
the button rendered and looked clickable while still a disabled no-op, and
disabled buttons don't fire click events. Add
`.video-modal__action-button[hidden] { display:none }` so it only appears
once enabled/ready (restoring the intended "show zap only when zappable"
behaviour).
Co-Authored-By: Claude Opus 4.8 <[email protected]>
- discussionCountService now counts getAllowedCommentKinds() (NIP-22 kind 1111
+ legacy kind 1) instead of 1111-only, so the discussion badge no longer
undercounts threads that contain legacy comments. The count filters are
derived from the same source the thread display uses, so they can't drift.
- Add white-space: pre-wrap to .comment-thread__body so comments with line
breaks/paragraphs preserve them instead of collapsing into one run-on line
(long lines still wrap via word-break: break-word).
Test: spec-corrected discussion-count-service to assert the count filters use
getAllowedCommentKinds() (reverting to 1111-only fails the deepEqual).
Co-Authored-By: Claude Opus 4.8 <[email protected]>
Force click on sidebar collapse toggle in visual tests to resolve headless visibility flake. Removed redundant CSS media queries for sidebar elements.
Co-authored-by: PR0M3TH3AN <[email protected]>
This change removes a block of CSS in `css/tailwind.source.css` that was incorrectly applying `!important` layout overrides to the main video modal (`.video-modal__*`, `#modalVideo`), causing visual regressions. These overrides were likely intended for the embed view but were scoped too broadly. `embed.html` uses distinct selectors and remains unaffected, as verified by visual tests.
- Removed destructive `!important` rules for `.video-modal__*` and `#modalVideo`.
- Preserved `.bv-logo__accent` theming rule.
- Rebuilt CSS.
The #playerModal ID selector in `css/tailwind.source.css` incorrectly set `display: none`. This ID selector has higher specificity than the `.hidden` utility class (applied by Tailwind) used by `VideoModal.js` to toggle visibility.
When `VideoModal.js` removed the `.hidden` class to show the modal, the ID selector's `display: none` remained active, keeping the modal hidden.
Also removed the `#playerModal.flex` rule as `.bv-modal` already provides flex behavior.
This fixes the issue where clicking a video card would trigger the logic but fail to display the player.
Enforce full-width/height video display and dynamic object-fit logic to prevent letterboxing and layout gaps.
- Add robust CSS overrides to 'css/tailwind.source.css' to ensure video fills the stage.
- Update 'VideoModal.js' to dynamically switch between 'cover' and 'contain' based on aspect ratio match.
- Handle ambient canvas positioning to prevent layout shifts.
- Changed embed video sizing to `object-fit: cover` and `width: 100%` to eliminate black bars/letterboxing.
- Updated `embed.html` and `css/tailwind.source.css` to enforce these styles on `.video-modal__media`, `.video-modal__video`, and `#embedVideo`.
- Wired the embed logo accent color to use the instance configuration (`THEME_ACCENT_OVERRIDES` from `config/instance-config.js`) via a `--bitvid-accent` CSS variable injected in `js/embed.js`.
- Added unit and visual tests to verify styling and configuration logic.
- Adds --z-modal-always-top: 200 token in css/tokens.css
- Adds .modal-always-on-top utility class in css/tailwind.source.css
- Applies class to EventDetailsModal, EmbedVideoModal, and ShareNostrModal
- Fix `npm run lint` failure by replacing inline style with CSS class in `js/ui/components/SearchFilterModal.js`.
- Fix `npm run lint:tokens` failure by defining `--size-40rem` in `css/tokens.css` and using it in `css/tailwind.source.css`.
- Update `CONTRIBUTING.md` with troubleshooting tips for unit test hangs and linting failures.
- Attempt to update `caniuse-lite` to silence build warning (may persist due to environment/cache).
Replaces hardcoded breakpoint values in `VideoCard.js` and `tailwind.source.css` with token constants and valid CSS calculations. Updates the token linting script to enforce these rules by removing the previous allowlists for these files. This ensures that all UI elements are defined by the central styling system.
- Implemented split-pane layout for Conversations and Message History.
- Added independent vertical scrolling for desktop views.
- Enforced full-height containers to prevent parent modal scrolling on desktop.
- Preserved mobile scrolling behavior by wrapping height constraints in media queries.
- Added avatars, message bubbles, and alignment styling.
- Removed space-y utility from profile modal container to prevent layout issues.
- Updated tailwind source CSS with new scrollbar utilities and overrides.
- Updated `css/tailwind.source.css` to enforce full height and independent scrolling for DM columns.
- Targeted `#profilePaneMessages` to `height: 100%` to prevent modal body scrolling interference.
- Updated `dm-app-shell` containers to manage overflow internally.
- Verified scroll positions and animations in `ConversationList.js` and `MessageThread.js`.
- Cleaned up redundant headers in `ConversationList.js`.
- Verified layout via Playwright script (`verify_dm_v2.py`).
- Refactored `AppShell` to implement a split-pane layout for Conversations and Message History.
- Removed `NotificationCenter` from the DM view to declutter the interface.
- Updated `MessageThread` and `ConversationList` to support independent vertical scrolling with hidden scrollbars.
- Added avatars to message bubbles and conversation list items.
- Implemented right/left alignment for outgoing/incoming messages.
- Added "peak" bounce animations for list boundaries.
- Cleaned up redundant headers in the sidebar.
- Applied responsive CSS improvements in `tailwind.source.css`.
- Update AppShell.js to split view into Conversations and Message History.
- Rename sidebar title to "Conversations".
- Update MessageThread.js to pass avatar URLs to bubbles.
- Update MessageBubble.js to render avatars and use flex layout for alignment.
- Update CSS to style message rows, avatars, and bubbles.
- Fix CSS scrolling logic to ensure individual columns scroll independently within the modal.
- Ensure peak animations match hashtag strip timing (600ms/800ms).
- Fix avatar resolution logic for outgoing messages.
- Update AppShell.js to split view into Conversations and Message History.
- Rename sidebar title to "Conversations".
- Update MessageThread.js to pass avatar URLs to bubbles.
- Update MessageBubble.js to render avatars and use flex layout for alignment.
- Update CSS to style message rows, avatars, and bubbles.
- Ensure peak animations match hashtag strip timing (600ms/800ms).
- Add `.no-scrollbar` utility to hide scrollbars while keeping scrollability.
- Apply `.no-scrollbar` to ConversationList and MessageThread containers.
- Implement "peek" animation:
- ConversationList: scrolls down 40px then back up on load.
- MessageThread: scrolls up 40px then back down (to bottom) on load.
- Animation only triggers if content overflows.
Update the z-index for the Share on Nostr modal to use the "peak" tier (165+), ensuring it renders above the video player (130).
Adjust the CSS selector to target `#shareNostrModal` directly, as it is wrapped in an anonymous div in the DOM, causing the previous `#modalContainer >` combinator to fail.
Add `!important` to enforce the stacking order.
Fixes the issue where the share modal rendered behind the video player.
Ensure the Share on Nostr modal renders above the video player modal by applying the higher z-index tier variables (z-modal-top-root, etc.), similar to the Profile modal.
Fixes an issue where the share modal was obscured by the video player.
Hidden scrollbars for `.video-tag-strip--scroll` in CSS to improve aesthetics.
Implemented a "peek" (bounce) animation in `HashtagStripHelper` that triggers when the tag list is rendered and overflows the container, indicating to the user that the list is scrollable.
Added unit tests for the new logic.
