mirror of
https://github.com/PR0M3TH3AN/bitvid.git
synced 2026-10-27 07:52:24 +00:00
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:
1 parent
2803f6b56f
commit
610935ac03
10 files changed
+233
-10
No files matched your search
@@ -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;
|
||||
|
||||
Reference in new issue
Block a user