feat(comments): add sorting and liking functionality

Support sorting by oldest, latest, most-liked, and most-replied.
Implement like/unlike actions for Life and Entity Discussion comments.
This commit is contained in:
2026-05-04 17:29:09 +08:00
parent 504849c14a
commit 2ff2519647
10 changed files with 993 additions and 65 deletions

View File

@@ -3262,7 +3262,8 @@ button:disabled,
font-weight: 950;
}
.life-comments__header span {
.life-comments__header > span,
.life-comments__header > div > span {
min-width: 32px;
padding: 2px 8px;
border: 1px solid var(--line);
@@ -3274,6 +3275,25 @@ button:disabled,
text-align: center;
}
.life-comments__sort {
display: inline-flex;
align-items: center;
gap: 8px;
color: var(--muted);
font-size: 13px;
font-weight: 800;
}
.life-comments__sort select {
min-height: 34px;
border: 1px solid var(--line);
border-radius: var(--radius-control);
background: var(--surface);
color: var(--ink);
font-size: 13px;
font-weight: 800;
}
.life-comment-form {
display: grid;
gap: 8px;
@@ -3386,6 +3406,13 @@ button:disabled,
gap: 8px;
}
.life-comment__action-count {
min-width: 1ch;
font-size: 12px;
font-weight: 900;
line-height: 1;
}
.life-comments__empty {
margin: 0;
}
@@ -4529,6 +4556,26 @@ button:disabled,
font-weight: 800;
}
.entity-discussion-sort {
display: inline-flex;
align-items: center;
gap: 8px;
width: fit-content;
color: var(--muted);
font-size: 13px;
font-weight: 800;
}
.entity-discussion-sort select {
min-height: 34px;
border: 1px solid var(--line);
border-radius: var(--radius-control);
background: var(--surface);
color: var(--ink);
font-size: 13px;
font-weight: 800;
}
.entity-discussion-skeleton,
.entity-discussion-form,
.entity-discussion-list {