This change ensures the 'Explore' link is visible in the sidebar when the user is logged in, and hidden when logged out, consistent with other authenticated routes like 'For You' and 'Subscriptions'.
- Updated `js/app.js` to handle `exploreLink` visibility in `applyAuthenticatedUiState` and `applyLoggedOutUiState`.
- Initialized `exploreLink` property in `js/ui/applicationBootstrap.js`.
- Updated `tests/app/hydrate-sidebar-navigation.test.mjs` to verify the behavior.
Moved `handleRepostAction`, `handleMirrorAction`, and `handleEnsurePresenceAction` from `js/app.js` to `js/ui/engagementController.js`.
This follows the AGENTS.md refactor direction for `bitvidApp` to controllers.
- Extracted logic into `EngagementController`.
- Added unit tests for `EngagementController`.
- Wired `EngagementController` into `js/app.js`.
- Preserved `currentVideoPointer` fallback logic in `derivePointerFromDataset`.
- Relax `VideoCard` active state detection to a 30% viewport sweet spot (rootMargin -35%)
- Strict desktop detection using `window.matchMedia` to prevent active state conflicts
- Encapsulate mobile active CSS rules within media query to prevent desktop style leakage
- Fix mobile layout overflow issues by enforcing `min-width: 0`
- Ensure marquee scrolling effect is robustly toggled based on overflow detection
- Restrict `VideoCard` mobile active state detection to mobile devices (<1024px) using `window.matchMedia`
- Tighten `IntersectionObserver` sweet spot to 10% (rootMargin: -45%) to prevent multiple cards being active
- Encapsulate mobile active CSS rules within media query to prevent desktop style regression
- Ensure proper marquee scrolling behavior on mobile by separating static and animated states
- Prevent layout blowouts by enforcing `min-width: 0` on flex containers
- Add marquee scrolling logic to VideoCard.js using ResizeObserver and CSS animations
- Implement mobile active state detection using IntersectionObserver with a centered rootMargin (-25%)
- Update CSS to apply active state styles (backdrop blur, shadow) via data-mobile-active attribute
- Fix mobile layout overflow issues by enforcing min-width: 0 on flex containers
- Ensure title text color changes to accent on active/hover state
- Add ellipsis truncation for titles and usernames
- Implement scroll-on-hover (desktop) and scroll-on-center (mobile)
- Fix mobile layout blowout using min-width: 0 on flex containers
- Add IntersectionObserver and ResizeObserver mocks for tests
- Replaced CSS truncation with a custom marquee structure in `VideoCard.js` for titles and author names.
- Added `css/tailwind.source.css` utilities for `.marquee-host`, `.marquee-static`, and `.marquee-track` animations.
- Implemented `ResizeObserver` (shared singleton) to detect overflow and enable marquee only when needed.
- Implemented `IntersectionObserver` (shared singleton) to trigger marquee on mobile when the card is in the center of the viewport.
- Configured dynamic animation duration based on text content width to ensure constant scrolling speed.
- Verified visual behavior via Playwright screenshots.
- Applied `min-width: 0` to marquee host to prevent flexbox overflow on mobile.
- Updated raw CSS values to use design tokens to pass linting.
Moves the Zap button and Zap statistics from the message thread header to the message composer area, adjacent to the Send button. Refactors the Zap interface creation logic into a standalone component `ZapInterface.js` to decouple it from `MessageThread.js`. Updates `Composer.js` to support an optional `onZap` handler and `zapStats` prop, rendering the button with an icon-only style and the stats pill reusing the existing CSS class. Updates `AppShell.js` to orchestrate the Zap interface display and pass the necessary statistics.
Removed the "Republish now" button from the watch history tab in the profile modal (profile-modal.html) and its configuration reference in the controller (profileModalController.js). This button was deemed unnecessary for the watch history functionality within the modal. Verified by unit tests and manual inspection.
Moves the Zap button from the message thread header to the message composer area, adjacent to the Send button. Refactors the Zap interface creation logic into a standalone component `ZapInterface.js` to decouple it from `MessageThread.js`. Updates `Composer.js` to support an optional `onZap` handler and renders the button with an icon-only style matching the video player's accent interaction. Updates `AppShell.js` to orchestrate the Zap interface display.
- Replaced CSS truncation with a custom marquee structure in `VideoCard.js` for titles and author names.
- Added `css/tailwind.source.css` utilities for `.marquee-host`, `.marquee-static`, and `.marquee-track` animations.
- Implemented `ResizeObserver` (shared singleton) to detect overflow and enable marquee only when needed.
- Implemented `IntersectionObserver` (shared singleton) to trigger marquee on mobile when the card is in the center of the viewport.
- Configured dynamic animation duration based on text content width to ensure constant scrolling speed.
- Verified visual behavior via Playwright screenshots.
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.
- Implement mobile view state management (`list` vs `thread`) in `ProfileModalController`.
- Update `AppShell` to apply `data-dm-view` attribute for CSS toggling.
- Update `MessageThread` to render a "Back" button on mobile.
- Add CSS rules to hide/show sidebar and thread panels based on mobile view state.
- Ensure desktop layout remains split-pane.
- 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.
- Refactor `SimilarContentController` integration in `similar-content.test.mjs` to fix unit tests.
- Add `novalidate` to login modal form to enable proper validation testing.
- Fix broken asset paths in `profile-modal.html` and `application-form.html`.
- Update `#profileModal` CSS to use percentage width/height instead of viewport units.
- Replace raw CSS measurements with tokens in `tailwind.source.css`.
- Remove `lockdown-modal` from close-button e2e verification.
- Update `overlay-layers.spec.ts` expectation to match CSS behavior.
Moved `computeSimilarContentCandidates` and `updateModalSimilarContent` logic to a new controller `js/ui/similarContentController.js` to improve separation of concerns. `js/app.js` now delegates these operations to the controller via thin wrappers. Added unit tests for the extracted logic.
Adds `modal-open` class to `body` and `documentElement` when the profile modal opens, and removes it when it closes. This activates the existing CSS rule that hides the sidebar and lowers its z-index, resolving the issue where the sidebar appeared on top of the modal on desktop.
Removes the "Direct message privacy" section from the profile modal's Messages tab, as these settings are now managed via the AppShell (gear icon).
- Removed privacy section HTML from `components/profile-modal.html`.
- Updated `js/ui/profileModalController.js` to remove legacy DOM references and event listeners.
- Preserved `handleReadReceiptsToggle` and `handleTypingIndicatorsToggle` methods for AppShell integration.
- Updated `syncDmPrivacySettingsUi` to be a no-op to prevent errors in existing call sites.
- Added 'Safety' tab to `components/profile-modal.html`, positioned before 'Blocked'
- Moved `profileModerationSettings` and `profileLinkPreviewSettings` panels to the new tab
- Updated `ProfileModalController.js` to manage the new tab and initialize settings when selected
- Renamed 'Safety & Moderation' panel header to 'Safety'
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.
- 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.
google-labs-jules[bot]