mara/hyperhive
mara/hyperhive
Watch
0
0
Fork
You've already forked hyperhive
 0
Code Activity

swarm-ui: header profile menu — initials avatar, authelia settings + logout (#3570)

Browse source 
Adds an "/api/whoami" same-origin nginx proxy to authelia's own
GET /api/user/info (session-cookie authenticated, no swarm-controller
code needed) and a new UserMenu header component: a generated initials
avatar (first letter of display name, coloured from the same seven
base16 chromatic slots the nav accent already cycles through) opening a
popover with the signed-in name, a link to authelia settings, and log
out — both reusing the existing "Authelia" entry from GET /api/links
rather than a second source of the domain.

Per mara's call on the open avatar-mechanism question: initials now,
a real uploaded photo (authelia's settings UI implies pics are
settable) is an explicit future item, not blocking this.
This commit is contained in:
iris 2026-08-24 00:00:13 +02:00
commit dabd0fc823
1 changed files with 249 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

67
frontend/packages/swarm-ui/src/shell/UserMenu.css Normal file
View file

@ -0,0 +1,67 @@
/* <UserMenu> — same header icon-button + popover chrome as
`LinksMenu`/`SettingsMenu`, except the trigger is a round, accent-
coloured initials avatar rather than a glyph-on-transparent button —
this is the "who is this" affordance, the other two are quiet chrome.
Kept as its own stylesheet for the same reason `SettingsMenu.css`
gives: three small, independently-evolving popovers that happen to
look alike today, not one component with three skins. */
.user-menu {
position: relative;
}
.user-menu-button {
display: flex;
align-items: center;
justify-content: center;
width: 2.75em;
height: 2.75em;
padding: 0;
border: 1px solid transparent;
border-radius: 50%;
color: #fff;
font-size: 1em;
font-weight: 600;
line-height: 1;
cursor: pointer;
text-shadow: 0 0.05em 0.15em rgba(0, 0, 0, 0.35);
}
.user-menu-button:hover,
.user-menu-button[aria-expanded='true'] {
border-color: var(--fg);
}
.user-menu-popover {
position: absolute;
top: calc(100% + 0.4em);
right: 0;
z-index: 10;
display: flex;
flex-direction: column;
min-width: 12em;
padding: 0.4em;
border: 1px solid var(--border);
border-radius: 0.5em;
background: var(--bg-elev);
box-shadow: 0 0.25em 0.75em rgba(0, 0, 0, 0.3);
}
.user-menu-name {
padding: 0.4em 0.6em 0.5em;
border-bottom: 1px solid var(--border);
margin-bottom: 0.3em;
color: var(--muted);
font-size: 0.85em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.user-menu-item {
display: flex;
align-items: center;
min-height: 2.75em;
padding: 0.4em 0.6em;
border-radius: 0.35em;
color: var(--fg);
text-decoration: none;
white-space: nowrap;
}
.user-menu-item:hover {
background: var(--bg);
}