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]>
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]>
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]>
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]>
- 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).
\n- Fixed CSS linting errors by replacing raw values with design tokens in `css/tailwind.source.css`.
- Updated `scripts/check-design-tokens.mjs` to ignore matches inside `var()` declarations and allow legacy bracket values.
- Fixed a failing unit test in `tests/ui/similar-content-card.test.mjs` to match current component behavior.
- Updated `CONTRIBUTING.md` to include `npm run build:css` and clarify linting requirements.
- Enhanced `.devcontainer/devcontainer.json` to include `npm run build:css` in `postCreateCommand`.
Run `npm run format` and `npm run lint`.
Fix stylelint configuration to correctly parse variables with units in their names.
Migrate raw CSS measurements to tokens in `css/tokens.css` and update usages in `css/tailwind.source.css` and HTML templates.
Improve `scripts/check-design-tokens.mjs` to handle variable names with unit-like suffixes.
Files changed:
- css/tailwind.source.css (formatted and fixed lint)
- css/tokens.css (added tokens)
- stylelint.config.cjs (fixed regex)
- scripts/check-design-tokens.mjs (improved detection logic)
- components/profile-modal.html (fixed arbitrary values)
- index.html (fixed arbitrary values)
- Reduced width of "Similar Content" sidebar in the video modal (further reduced from 40rem to 35rem).
- Adjusted responsive widths for the sidebar:
- LG: 30vw (was 36vw)
- XL: 28vw (was 32vw)
- Added bottom padding to the primary video column (`.video-modal__primary`) to ensure the comments box does not touch the bottom of the scroll container.
- Updated `css/tokens.css` and `css/tailwind.source.css`.
- Regenerated `css/tailwind.generated.css`.
Reduced the width of the "Similar Content" sidebar by approximately 10% to provide more space for the video player.
- Updated `css/tokens.css` to reduce `--video-modal-secondary-max` from 44rem to 40rem.
- Updated `css/tailwind.source.css` to reduce the viewport width percentage clamp values:
- LG breakpoint: 40vw -> 36vw
- XL breakpoint: 36vw -> 32vw
- Regenerated `css/tailwind.generated.css`.
