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]>
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]>
- Add docs/capacitor-native-app-plan.md to hex-lint ignore list (code examples
naturally reference hex colors in Capacitor config)
- Replace direct console.error/console.log calls with logger utility in
historyView.js, profileCache.js, EventDetailsModal.js, ZapInterface.js,
and notificationController.js
- Update CI workflow from Node 20 to Node 22 to match package.json engines
https://claude.ai/code/session_01LzErpH9FNw4hAPsjoYb1v9
- 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]>
Use module-level variables to track if the peek animation has played for ConversationList and MessageThread, ensuring it only runs once per page session to avoid annoying scrolling behavior.
Co-authored-by: PR0M3TH3AN <[email protected]>
- Added a forced refresh button to the conversation list in the DM tab (via `onRefreshConversations` in `ProfileModalController`).
- Updated the DM settings gear icon to use `icon-button accent-action-button` classes, matching the `VideoCard` style.
- Ensured the `dm-app-shell` container has a transparent background when rendered inside the profile modal to prevent visual clashes with the modal backdrop.
- Add a refresh button to `ConversationList` header.
- Make DM sidebar background transparent.
- Update DM settings gear icon to match `VideoCard` style.
- Wire up refresh action in `ProfileModalController` to force-fetch messages.
- 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.
- 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 using `IntersectionObserver` to trigger only when the container becomes visible.
- Ensure CSS build is updated with new utilities.
- 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.
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.
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.
- 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.
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.
