Admin star badge on admin avatars across the app

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]>
This commit is contained in:
thePR0M3TH3ANandClaude Opus 4.8 committed 2026-07-07 10:10:19 -04:00
1 parent 2803f6b56f
commit 610935ac03
10 files changed
+233 -10

No files matched your search

+37
View File
@@ -252,6 +252,34 @@
display: block;
}
/* Admin "verified" star — sits in the corner opposite the notification dot.
A gold star on a page-colored disc so it stays legible on any avatar, and
pairs visually with the red dot. Positioned top-left by default (the dot is
top-right); per-surface rules below tune the inset for larger avatars. */
.admin-star {
position: absolute;
top: 0;
left: 0;
z-index: 3;
display: inline-flex;
align-items: center;
justify-content: center;
width: var(--space-sm);
height: var(--space-sm);
border-radius: var(--radius-full);
border: var(--border-width-hairline) solid var(--color-page);
background-color: var(--status-warning);
color: var(--color-warning-on);
font-size: var(--font-size-3xs);
line-height: 1;
pointer-events: none;
}
#profileButton .admin-star {
top: var(--space-2xs);
left: var(--space-2xs);
}
.header-icon-toggle[data-theme-state="light"]:hover,
.header-icon-toggle[data-theme-state="light"]:focus-visible {
color: var(--color-text);
@@ -2706,6 +2734,7 @@
}
.comment-thread__avatar {
position: relative;
inline-size: var(--comment-avatar-size);
block-size: var(--comment-avatar-size);
}
@@ -5731,6 +5760,14 @@
font-size: var(--font-size-3xs);
}
/* Non-clipped relative shell used only when a DM avatar needs an admin star
in its corner (the .dm-avatar itself clips to a circle). */
.dm-avatar-wrap {
position: relative;
display: inline-flex;
flex-shrink: 0;
}
.dm-avatar {
display: inline-flex;
align-items: center;