WIP PWA for Grain
feat: add grain-gallery-detail page with comments
- Add back icon to grain-icon
- Create gallery detail page with carousel, engagement, comments
- Use uri contains filter for gallery lookup
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
+178
-2
+2
-1
src/components/atoms/grain-icon.js
+2
-1
src/components/atoms/grain-icon.js
+1
src/components/pages/grain-app.js
+1
src/components/pages/grain-app.js
+174
src/components/pages/grain-gallery-detail.js
+174
src/components/pages/grain-gallery-detail.js
···
1
+
import { LitElement, html, css } from 'lit';
2
+
import { router } from '../../router.js';
3
+
import { grainApi } from '../../services/grain-api.js';
4
+
import '../templates/grain-feed-layout.js';
5
+
import '../molecules/grain-author-chip.js';
6
+
import '../organisms/grain-image-carousel.js';
7
+
import '../organisms/grain-engagement-bar.js';
8
+
import '../organisms/grain-comment-list.js';
9
+
import '../atoms/grain-spinner.js';
10
+
import '../atoms/grain-icon.js';
11
+
12
+
export class GrainGalleryDetail extends LitElement {
13
+
static properties = {
14
+
handle: { type: String },
15
+
rkey: { type: String },
16
+
_gallery: { state: true },
17
+
_loading: { state: true },
18
+
_error: { state: true }
19
+
};
20
+
21
+
static styles = css`
22
+
:host {
23
+
display: block;
24
+
}
25
+
.header-bar {
26
+
display: flex;
27
+
align-items: center;
28
+
padding: var(--space-sm) 0;
29
+
border-bottom: 1px solid var(--color-border);
30
+
}
31
+
.back-button {
32
+
display: flex;
33
+
align-items: center;
34
+
justify-content: center;
35
+
background: none;
36
+
border: none;
37
+
padding: var(--space-sm);
38
+
margin-left: calc(-1 * var(--space-sm));
39
+
cursor: pointer;
40
+
color: var(--color-text-primary);
41
+
}
42
+
.author-section {
43
+
padding: var(--space-sm) 0;
44
+
}
45
+
.content {
46
+
padding: var(--space-sm) 0;
47
+
}
48
+
.title {
49
+
font-size: var(--font-size-sm);
50
+
font-weight: var(--font-weight-semibold);
51
+
color: var(--color-text-primary);
52
+
margin-bottom: var(--space-xs);
53
+
}
54
+
.description {
55
+
font-size: var(--font-size-sm);
56
+
color: var(--color-text-secondary);
57
+
margin-bottom: var(--space-sm);
58
+
}
59
+
.timestamp {
60
+
font-size: var(--font-size-xs);
61
+
color: var(--color-text-secondary);
62
+
text-transform: uppercase;
63
+
}
64
+
.error {
65
+
padding: var(--space-lg);
66
+
text-align: center;
67
+
color: var(--color-error);
68
+
}
69
+
`;
70
+
71
+
constructor() {
72
+
super();
73
+
this._gallery = null;
74
+
this._loading = true;
75
+
this._error = null;
76
+
}
77
+
78
+
connectedCallback() {
79
+
super.connectedCallback();
80
+
this.#loadGallery();
81
+
}
82
+
83
+
updated(changedProperties) {
84
+
if ((changedProperties.has('handle') || changedProperties.has('rkey')) && this.handle && this.rkey) {
85
+
this.#loadGallery();
86
+
}
87
+
}
88
+
89
+
async #loadGallery() {
90
+
if (!this.handle || !this.rkey) return;
91
+
92
+
try {
93
+
this._loading = true;
94
+
this._error = null;
95
+
this._gallery = await grainApi.getGalleryDetail(this.handle, this.rkey);
96
+
} catch (err) {
97
+
this._error = err.message;
98
+
} finally {
99
+
this._loading = false;
100
+
}
101
+
}
102
+
103
+
#handleBack() {
104
+
router.push(`/profile/${this.handle}`);
105
+
}
106
+
107
+
#formatDate(iso) {
108
+
const date = new Date(iso);
109
+
const now = new Date();
110
+
const diffMs = now - date;
111
+
const diffDays = Math.floor(diffMs / (1000 * 60 * 60 * 24));
112
+
113
+
if (diffDays === 0) return 'Today';
114
+
if (diffDays === 1) return 'Yesterday';
115
+
if (diffDays < 7) return `${diffDays} days ago`;
116
+
117
+
return date.toLocaleDateString('en-US', {
118
+
month: 'short',
119
+
day: 'numeric'
120
+
});
121
+
}
122
+
123
+
render() {
124
+
return html`
125
+
<grain-feed-layout>
126
+
<div class="header-bar">
127
+
<button class="back-button" @click=${this.#handleBack}>
128
+
<grain-icon name="back" size="20"></grain-icon>
129
+
</button>
130
+
</div>
131
+
132
+
${this._loading ? html`<grain-spinner></grain-spinner>` : ''}
133
+
134
+
${this._error ? html`
135
+
<p class="error">${this._error}</p>
136
+
` : ''}
137
+
138
+
${!this._loading && this._gallery ? html`
139
+
<div class="author-section">
140
+
<grain-author-chip
141
+
avatarUrl=${this._gallery.avatarUrl}
142
+
handle=${this._gallery.handle}
143
+
displayName=${this._gallery.displayName}
144
+
></grain-author-chip>
145
+
</div>
146
+
147
+
<grain-image-carousel
148
+
.photos=${this._gallery.photos}
149
+
></grain-image-carousel>
150
+
151
+
<grain-engagement-bar
152
+
favoriteCount=${this._gallery.favoriteCount}
153
+
commentCount=${this._gallery.commentCount}
154
+
></grain-engagement-bar>
155
+
156
+
<div class="content">
157
+
<p class="title">${this._gallery.title}</p>
158
+
${this._gallery.description ? html`
159
+
<p class="description">${this._gallery.description}</p>
160
+
` : ''}
161
+
<time class="timestamp">${this.#formatDate(this._gallery.createdAt)}</time>
162
+
</div>
163
+
164
+
<grain-comment-list
165
+
.comments=${this._gallery.comments}
166
+
totalCount=${this._gallery.commentCount}
167
+
></grain-comment-list>
168
+
` : ''}
169
+
</grain-feed-layout>
170
+
`;
171
+
}
172
+
}
173
+
174
+
customElements.define('grain-gallery-detail', GrainGalleryDetail);
+1
-1
src/services/grain-api.js
+1
-1
src/services/grain-api.js