WIP PWA for Grain
feat: make follower/following stats clickable
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
+31
-4
+31
-4
src/components/molecules/grain-profile-stats.js
+31
-4
src/components/molecules/grain-profile-stats.js
···
1
1
import { LitElement, html, css } from 'lit';
2
+
import { router } from '../../router.js';
2
3
3
4
export class GrainProfileStats extends LitElement {
4
5
static properties = {
6
+
handle: { type: String },
5
7
galleryCount: { type: Number },
6
8
followerCount: { type: Number },
7
9
followingCount: { type: Number }
···
16
18
.stat {
17
19
display: inline;
18
20
}
21
+
.stat-link {
22
+
display: inline;
23
+
background: none;
24
+
border: none;
25
+
padding: 0;
26
+
font: inherit;
27
+
cursor: pointer;
28
+
color: inherit;
29
+
}
30
+
.stat-link:hover .label {
31
+
text-decoration: underline;
32
+
}
19
33
.count {
20
34
font-weight: var(--font-weight-bold);
21
35
color: var(--color-text-primary);
···
27
41
28
42
constructor() {
29
43
super();
44
+
this.handle = '';
30
45
this.galleryCount = 0;
31
46
this.followerCount = 0;
32
47
this.followingCount = 0;
···
38
53
return n.toString();
39
54
}
40
55
56
+
#handleFollowersClick() {
57
+
if (this.handle) {
58
+
router.push(`/profile/${this.handle}/followers`);
59
+
}
60
+
}
61
+
62
+
#handleFollowingClick() {
63
+
if (this.handle) {
64
+
router.push(`/profile/${this.handle}/following`);
65
+
}
66
+
}
67
+
41
68
render() {
42
69
return html`
43
70
<div class="stat">
44
71
<span class="count">${this.#formatCount(this.galleryCount)}</span>
45
72
<span class="label">galleries</span>
46
73
</div>
47
-
<div class="stat">
74
+
<button class="stat-link" @click=${this.#handleFollowersClick}>
48
75
<span class="count">${this.#formatCount(this.followerCount)}</span>
49
76
<span class="label">followers</span>
50
-
</div>
51
-
<div class="stat">
77
+
</button>
78
+
<button class="stat-link" @click=${this.#handleFollowingClick}>
52
79
<span class="count">${this.#formatCount(this.followingCount)}</span>
53
80
<span class="label">following</span>
54
-
</div>
81
+
</button>
55
82
`;
56
83
}
57
84
}