Kingsmai/pokopiawiki.tootaio.com
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(life): add Life Post reaction users modal and API

Browse Source 
Add GET /api/life-posts/:id/reactions endpoint with pagination
Add LifeReactionUsersModal to view and filter reaction users
Make reaction summaries clickable in feeds, details, and profiles
This commit is contained in:
xiaomai
2026-05-04 10:10:38 +08:00
parent 7ff7e18b94
commit 579d092020
10 changed files with 583 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

130
frontend/src/styles/main.css
View File

@@ -2670,6 +2670,21 @@ button:disabled,
color: var(--ink-soft);
}
.life-reaction-summary--button {
padding: 0;
border: 0;
background: transparent;
cursor: pointer;
text-align: left;
}
.life-reaction-summary--button:hover .life-reaction-summary__item,
.life-reaction-summary--button:focus-visible .life-reaction-summary__item {
border-color: color-mix(in srgb, var(--pokemon-blue) 45%, var(--line));
background: color-mix(in srgb, var(--pokemon-blue) 10%, var(--surface-soft));
color: var(--pokemon-blue-deep);
}
.life-action-tooltip {
position: absolute;
z-index: 30;
@@ -2868,6 +2883,101 @@ button:disabled,
margin: 0;
}
.life-reaction-users-modal {
display: grid;
gap: 14px;
}
.life-reaction-users-modal__count {
margin: 0;
color: var(--muted);
font-size: 14px;
font-weight: 850;
}
.life-reaction-user-list {
display: grid;
gap: 10px;
}
.life-reaction-user {
min-width: 0;
display: grid;
grid-template-columns: auto minmax(0, 1fr);
align-items: center;
gap: 10px;
padding: 10px;
border: 1px solid var(--line);
border-radius: var(--radius-card);
background: var(--surface-soft);
}
.life-reaction-user__avatar {
width: 38px;
height: 38px;
display: grid;
place-items: center;
border: 2px solid var(--line);
border-radius: var(--radius-control);
background: var(--surface);
color: var(--pokemon-blue-deep);
font-family: var(--font-display);
font-weight: 950;
text-decoration: none;
}
.life-reaction-user__avatar:hover {
border-color: color-mix(in srgb, var(--pokemon-blue) 45%, var(--line));
background: color-mix(in srgb, var(--pokemon-blue) 10%, var(--surface));
}
.life-reaction-user__copy {
display: grid;
gap: 3px;
min-width: 0;
}
.life-reaction-user__copy > span {
display: inline-flex;
flex-wrap: wrap;
align-items: center;
gap: 6px;
color: var(--muted);
font-size: 13px;
font-weight: 800;
}
.life-reaction-user__copy .ui-icon {
width: 18px;
height: 18px;
color: var(--pokemon-blue);
}
.life-reaction-users-empty {
display: grid;
justify-items: center;
gap: 8px;
padding: 22px 14px;
border: 1px dashed var(--line);
border-radius: var(--radius-card);
background: var(--surface-soft);
text-align: center;
}
.life-reaction-users-empty h3 {
margin: 0;
color: var(--ink-soft);
font-family: var(--font-display);
font-size: 20px;
font-weight: 950;
}
.life-reaction-users-empty__icon {
width: 34px;
height: 34px;
color: var(--pokemon-blue);
}
.life-empty {
width: min(100%, 680px);
justify-self: center;
@@ -5870,6 +5980,26 @@ button:disabled,
gap: 6px;
}
.profile-reaction-open-button {
min-height: 32px;
display: inline-flex;
align-items: center;
gap: 6px;
padding: 2px 0;
border: 0;
background: transparent;
color: inherit;
cursor: pointer;
font-weight: inherit;
text-align: left;
}
.profile-reaction-open-button:hover {
color: var(--pokemon-blue-deep);
text-decoration: underline;
text-underline-offset: 3px;
}
.profile-feed-card__detail-link,
.profile-post-preview__detail {
display: inline-flex;