Refactored `js/searchView.js` to use safe DOM APIs (`document.createElement`, `replaceChildren`, `textContent`) instead of `innerHTML`.
This reduces the attack surface for XSS vulnerabilities.
Updated `scripts/check-innerhtml.mjs` baseline.
Verified with unit tests and a frontend verification script.
Co-authored-by: PR0M3TH3AN <[email protected]>
- Created `DMSettingsModalController` to manage the new settings modal UI.
- Added `components/dm-settings-modal.html` with sections for Privacy and DM Relay Hints.
- Updated `AppShell.js` to delegate the settings action to `onOpenSettings` callback, bypassing the legacy popover.
- Updated `ProfileModalController.js` to wire up the new modal controller, handling state persistence for relays and privacy settings.
- This improves the UX for managing NIP-17 DM relay hints and privacy options.
Co-authored-by: PR0M3TH3AN <[email protected]>
- Remove separate relay health panel from profile modal.
- Merge health indicators (latency, errors) directly into the relay list items.
- Consolidate refresh logic to update both list configuration and health status.
- Move telemetry toggle to the bottom of the relay section.
Co-authored-by: PR0M3TH3AN <[email protected]>
- Add `bg-transparent` to `#embedVideo` to fix visual gap/letterboxing issues.
- Inline the BitVid logo SVG in `embed.html` and use `bv-logo` class with `data-variant="inverse"` to ensure correct white wordmark and themed accent color on the dark overlay.
- Removed background colors from `embed.html` for transparency.
- Added a hover-triggered overlay with "Watch on BitVid" button and stats (views, likes, dislikes).
- Updated `js/ui/components/EmbedPlayerModal.js` to implement stats update methods and handle the overlay elements.
- Updated `js/embed.js` to set the share URL on the overlay after video resolution.
- Verified visual changes with Playwright.
- Updated `js/app.js` to pass `authorName` from the video creator/author details to the modal payload.
- Updated `js/ui/components/ShareNostrModal.js` to display `authorName` if available, falling back to `pubkey`.
- Verified the fix with a local reproduction script and a frontend verification screenshot.
- Added a "Show More" button to `views/search.html`.
- Implemented responsive truncation logic in `css/tailwind.source.css` using `nth-child` selectors to show 5 items on mobile, 6 on desktop (LG), and 8 on large screens (XL).
- Updated `js/searchView.js` to handle the logic for displaying the button and toggling the limit class.
- Compiled CSS.
Adds a clickable info icon next to the "For You" title that displays a popover explaining the feed's filtering logic ("Most Recent Video - Disinterests Tags - Watch History + Interests Tags"). Implemented as a reusable helper `attachFeedInfoPopover` in `js/ui/components/FeedInfoPopover.js` to support future use on other feed pages. Updated `views/for-you.html` and `js/forYouView.js` to integrate the new component. Verified with Playwright.
- Added a new mobile-specific "Logout" button to the profile navigation list, visible only on screens smaller than `lg`.
- Hid the existing footer logout button on mobile screens.
- Updated `ProfileModalController` to bind the logout logic to the new mobile button.
- Applied `data-variant="critical"` and spacing to the new button to match styling requirements.
- Update `.profile-nav__unread-dot` to center vertically and hang off the left edge (-6px).
- Change `.profile-modal__nav` from `overflow-x: hidden` to `visible` to prevent clipping the dot.
- Verified visually via Playwright screenshot.
Explicitly set `size: "md"` in ContactRow and added `min-width` / `min-height` to avatar CSS classes to prevent flexbox squashing. This ensures consistent avatar rendering in the conversations column.
- Add `flex-shrink: 0` to `.dm-avatar` in `css/tailwind.source.css` to prevent flexbox from resizing avatars inconsistently when space is constrained.
- Rebuild `css/tailwind.generated.css` to apply the changes.
- Verify changes with Playwright script and manual CSS inspection.
- Maximized profile modal to be full-screen for better content visibility.
- Cleaned up DM conversation list by removing message previews and timestamps.
- Updated DM badges and outgoing messages to use theme accent color instead of generic blue.
- Refactored DM composer to move privacy and zap toggles into a "More" menu.
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)
Updates the mobile search FAB (#mobileSearchFab) to use `bg-accent-strong` instead of `bg-critical`.
This ensures the icon color matches the "Upload Video" button, respecting the active theme override (which sets the accent color to red).
Verified visually using a Playwright script and screenshot validation.
Verified by running `npm run build:css` and `npm run test:unit`.
- Replaced `w-full` with `w-56 max-w-full` in `.watch-history-card__thumbnail` class.
- This ensures thumbnails are constrained to ~224px (14rem) on all viewports, fixing the "bleeding" issue on mobile while maintaining the desktop layout.
- The `max-w-full` ensures safety on very narrow screens.
- Updates Upload Modal UI labels to be provider-agnostic (e.g., 'Storage Credentials', 'Endpoint').
- Implements a read-only 'Summary View' for configured storage connections, collapsing the editable form by default.
- Adds 'Manage Storage' button that navigates to the Profile Modal's storage pane.
- Updates `initUploadModal.js` to inject the navigation callback.
- Updates `r2Service.js` status messages to be generic.
- Fixes unlock flow to ensure UI updates after storage unlock.
- Create `assets/svg/upload-content-icon.svg`
- Create `content/upload-content.md` with Cloudflare R2 setup instructions
- Create `views/upload-content.html` to render the guide
- Add "Upload Content" link to `components/sidebar.html`
- Add styled "Learn How" button to `components/upload-modal.html` in the R2 credentials section
- Create `assets/svg/upload-content-icon.svg`
- Create `content/upload-content.md` with Cloudflare R2 setup instructions
- Create `views/upload-content.html` to render the guide
- Add "Learn How" link to `components/upload-modal.html` in the R2 credentials section
Integrates WebTorrent client-side seeding into the Cloudflare R2 upload path.
- Adds `uploadFile` to `r2Service` for generic file uploads.
- Updates `UploadModal` to offer an optional "Create torrent & seed" flow.
- Generates magnet links and .torrent files in the browser after R2 upload.
- Uploads the .torrent file to R2 and populates `xs` tag.
- Populates `ws` (Web Seed) with the R2 public URL.
- Adds UI progress indicators for hashing and torrent upload.
- Enforces a 2GB file size limit for browser seeding to prevent crashes.
- Adds a mandatory legal rights confirmation checkbox for R2 uploads.
