WIP PWA for Grain
feat: add grain-comment-list organism
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
+54
+54
src/components/organisms/grain-comment-list.js
+54
src/components/organisms/grain-comment-list.js
···
1
1
+
import { LitElement, html, css } from 'lit';
2
2
+
import '../molecules/grain-comment.js';
3
3
+
4
4
+
export class GrainCommentList extends LitElement {
5
5
+
static properties = {
6
6
+
comments: { type: Array },
7
7
+
totalCount: { type: Number }
8
8
+
};
9
9
+
10
10
+
static styles = css`
11
11
+
:host {
12
12
+
display: block;
13
13
+
padding: var(--space-sm) 0;
14
14
+
}
15
15
+
.header {
16
16
+
font-size: var(--font-size-sm);
17
17
+
color: var(--color-text-secondary);
18
18
+
margin-bottom: var(--space-sm);
19
19
+
}
20
20
+
.no-comments {
21
21
+
font-size: var(--font-size-sm);
22
22
+
color: var(--color-text-secondary);
23
23
+
font-style: italic;
24
24
+
}
25
25
+
`;
26
26
+
27
27
+
constructor() {
28
28
+
super();
29
29
+
this.comments = [];
30
30
+
this.totalCount = 0;
31
31
+
}
32
32
+
33
33
+
render() {
34
34
+
if (this.totalCount === 0) {
35
35
+
return html`<p class="no-comments">No comments yet</p>`;
36
36
+
}
37
37
+
38
38
+
return html`
39
39
+
${this.totalCount > this.comments.length ? html`
40
40
+
<div class="header">View all ${this.totalCount} comments</div>
41
41
+
` : ''}
42
42
+
43
43
+
${this.comments.map(comment => html`
44
44
+
<grain-comment
45
45
+
handle=${comment.actorHandle}
46
46
+
text=${comment.text}
47
47
+
createdAt=${comment.createdAt}
48
48
+
></grain-comment>
49
49
+
`)}
50
50
+
`;
51
51
+
}
52
52
+
}
53
53
+
54
54
+
customElements.define('grain-comment-list', GrainCommentList);