WIP PWA for Grain
docs: add profile and gallery detail implementation plan
Covers profile pages, gallery detail pages with comments,
Instagram-style UX with 3-column gallery grid.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
+1285
+1285
docs/plans/2025-12-25-profile-and-gallery-detail.md
+1285
docs/plans/2025-12-25-profile-and-gallery-detail.md
···
1
+
# Profile & Gallery Detail Implementation Plan
2
+
3
+
> **For Claude:** REQUIRED SUB-SKILL: Use superpowers:executing-plans to implement this plan task-by-task.
4
+
5
+
**Goal:** Add profile pages and gallery detail pages with Instagram-style UX.
6
+
7
+
**Architecture:** Profile page at `/profile/:handle` shows user info, stats (galleries/followers/following), and a 3-column grid of gallery thumbnails. Clicking a thumbnail opens `/profile/:handle/gallery/:rkey` showing the full gallery with carousel, engagement bar, and comments.
8
+
9
+
**Tech Stack:** Lit 3.x web components, existing atomic design pattern, GraphQL via quickslice MCP.
10
+
11
+
---
12
+
13
+
## Phase 1: Routing & Navigation
14
+
15
+
### Task 1: Update Router with New Routes
16
+
17
+
**Files:**
18
+
- Modify: `src/router.js`
19
+
20
+
**Step 1: Add profile and gallery detail routes**
21
+
22
+
Open `src/router.js` and add the new route registrations in the `connect` method. The router needs to handle parameterized routes.
23
+
24
+
```javascript
25
+
// In firstUpdated() of grain-app.js, update route registrations:
26
+
router
27
+
.register('/', 'grain-timeline')
28
+
.register('/profile/:handle', 'grain-profile')
29
+
.register('/profile/:handle/gallery/:rkey', 'grain-gallery-detail')
30
+
.register('*', 'grain-timeline')
31
+
.connect(outlet);
32
+
```
33
+
34
+
Update the router class to parse route parameters:
35
+
36
+
```javascript
37
+
// src/router.js - update the Router class
38
+
39
+
export class Router {
40
+
#routes = [];
41
+
#outlet = null;
42
+
43
+
register(path, component) {
44
+
this.#routes.push({ path, component });
45
+
return this;
46
+
}
47
+
48
+
connect(outlet) {
49
+
this.#outlet = outlet;
50
+
window.addEventListener('popstate', () => this.#navigate());
51
+
this.#navigate();
52
+
}
53
+
54
+
push(path) {
55
+
history.pushState(null, '', path);
56
+
this.#navigate();
57
+
}
58
+
59
+
#matchRoute(pathname) {
60
+
for (const route of this.#routes) {
61
+
const params = this.#extractParams(route.path, pathname);
62
+
if (params !== null) {
63
+
return { component: route.component, params };
64
+
}
65
+
}
66
+
return null;
67
+
}
68
+
69
+
#extractParams(pattern, pathname) {
70
+
if (pattern === '*') return {};
71
+
72
+
const patternParts = pattern.split('/');
73
+
const pathParts = pathname.split('/');
74
+
75
+
if (patternParts.length !== pathParts.length) return null;
76
+
77
+
const params = {};
78
+
for (let i = 0; i < patternParts.length; i++) {
79
+
if (patternParts[i].startsWith(':')) {
80
+
params[patternParts[i].slice(1)] = decodeURIComponent(pathParts[i]);
81
+
} else if (patternParts[i] !== pathParts[i]) {
82
+
return null;
83
+
}
84
+
}
85
+
return params;
86
+
}
87
+
88
+
#navigate() {
89
+
const match = this.#matchRoute(location.pathname);
90
+
if (!match) return;
91
+
92
+
const el = document.createElement(match.component);
93
+
94
+
// Pass route params as properties
95
+
Object.assign(el, match.params);
96
+
97
+
this.#outlet.innerHTML = '';
98
+
this.#outlet.appendChild(el);
99
+
}
100
+
}
101
+
102
+
export const router = new Router();
103
+
```
104
+
105
+
**Step 2: Verify router compiles**
106
+
107
+
Run: `npm run dev`
108
+
Expected: No errors, app loads at `/`
109
+
110
+
**Step 3: Commit**
111
+
112
+
```bash
113
+
git add src/router.js
114
+
git commit -m "feat: add parameterized routing for profile and gallery pages"
115
+
```
116
+
117
+
---
118
+
119
+
### Task 2: Make Author Chip Clickable
120
+
121
+
**Files:**
122
+
- Modify: `src/components/molecules/grain-author-chip.js`
123
+
124
+
**Step 1: Import router and wrap content in link**
125
+
126
+
```javascript
127
+
import { LitElement, html, css } from 'lit';
128
+
import { router } from '../../router.js';
129
+
import '../atoms/grain-avatar.js';
130
+
131
+
export class GrainAuthorChip extends LitElement {
132
+
static properties = {
133
+
avatarUrl: { type: String },
134
+
handle: { type: String },
135
+
displayName: { type: String }
136
+
};
137
+
138
+
static styles = css`
139
+
:host {
140
+
display: block;
141
+
}
142
+
a {
143
+
display: flex;
144
+
align-items: center;
145
+
gap: var(--space-sm);
146
+
text-decoration: none;
147
+
color: inherit;
148
+
}
149
+
.info {
150
+
display: flex;
151
+
flex-direction: column;
152
+
min-width: 0;
153
+
}
154
+
.handle {
155
+
font-size: var(--font-size-sm);
156
+
font-weight: var(--font-weight-semibold);
157
+
color: var(--color-text-primary);
158
+
white-space: nowrap;
159
+
overflow: hidden;
160
+
text-overflow: ellipsis;
161
+
}
162
+
.name {
163
+
font-size: var(--font-size-xs);
164
+
color: var(--color-text-secondary);
165
+
white-space: nowrap;
166
+
overflow: hidden;
167
+
text-overflow: ellipsis;
168
+
}
169
+
`;
170
+
171
+
#handleClick(e) {
172
+
e.preventDefault();
173
+
router.push(`/profile/${this.handle}`);
174
+
}
175
+
176
+
render() {
177
+
return html`
178
+
<a href="/profile/${this.handle}" @click=${this.#handleClick}>
179
+
<grain-avatar
180
+
src=${this.avatarUrl || ''}
181
+
alt=${this.handle || ''}
182
+
size="sm"
183
+
></grain-avatar>
184
+
<div class="info">
185
+
<span class="handle">${this.handle}</span>
186
+
${this.displayName ? html`
187
+
<span class="name">${this.displayName}</span>
188
+
` : ''}
189
+
</div>
190
+
</a>
191
+
`;
192
+
}
193
+
}
194
+
195
+
customElements.define('grain-author-chip', GrainAuthorChip);
196
+
```
197
+
198
+
**Step 2: Verify author chip is clickable**
199
+
200
+
Run: `npm run dev`
201
+
Navigate to `/`, click an author chip.
202
+
Expected: URL changes to `/profile/:handle` (will show 404/blank until profile page exists)
203
+
204
+
**Step 3: Commit**
205
+
206
+
```bash
207
+
git add src/components/molecules/grain-author-chip.js
208
+
git commit -m "feat: make author chip clickable, navigates to profile"
209
+
```
210
+
211
+
---
212
+
213
+
## Phase 2: Profile Page
214
+
215
+
### Task 3: Create grain-profile-stats Molecule
216
+
217
+
**Files:**
218
+
- Create: `src/components/molecules/grain-profile-stats.js`
219
+
220
+
**Step 1: Create the stats component**
221
+
222
+
```javascript
223
+
import { LitElement, html, css } from 'lit';
224
+
225
+
export class GrainProfileStats extends LitElement {
226
+
static properties = {
227
+
galleryCount: { type: Number },
228
+
followerCount: { type: Number },
229
+
followingCount: { type: Number }
230
+
};
231
+
232
+
static styles = css`
233
+
:host {
234
+
display: flex;
235
+
gap: var(--space-lg);
236
+
}
237
+
.stat {
238
+
display: flex;
239
+
flex-direction: column;
240
+
align-items: center;
241
+
gap: 2px;
242
+
}
243
+
.count {
244
+
font-size: var(--font-size-md);
245
+
font-weight: var(--font-weight-bold);
246
+
color: var(--color-text-primary);
247
+
}
248
+
.label {
249
+
font-size: var(--font-size-xs);
250
+
color: var(--color-text-secondary);
251
+
}
252
+
`;
253
+
254
+
constructor() {
255
+
super();
256
+
this.galleryCount = 0;
257
+
this.followerCount = 0;
258
+
this.followingCount = 0;
259
+
}
260
+
261
+
#formatCount(n) {
262
+
if (n >= 1000000) return `${(n / 1000000).toFixed(1)}M`;
263
+
if (n >= 1000) return `${(n / 1000).toFixed(1)}K`;
264
+
return n.toString();
265
+
}
266
+
267
+
render() {
268
+
return html`
269
+
<div class="stat">
270
+
<span class="count">${this.#formatCount(this.galleryCount)}</span>
271
+
<span class="label">galleries</span>
272
+
</div>
273
+
<div class="stat">
274
+
<span class="count">${this.#formatCount(this.followerCount)}</span>
275
+
<span class="label">followers</span>
276
+
</div>
277
+
<div class="stat">
278
+
<span class="count">${this.#formatCount(this.followingCount)}</span>
279
+
<span class="label">following</span>
280
+
</div>
281
+
`;
282
+
}
283
+
}
284
+
285
+
customElements.define('grain-profile-stats', GrainProfileStats);
286
+
```
287
+
288
+
**Step 2: Commit**
289
+
290
+
```bash
291
+
git add src/components/molecules/grain-profile-stats.js
292
+
git commit -m "feat: add grain-profile-stats molecule"
293
+
```
294
+
295
+
---
296
+
297
+
### Task 4: Create grain-profile-header Organism
298
+
299
+
**Files:**
300
+
- Create: `src/components/organisms/grain-profile-header.js`
301
+
302
+
**Step 1: Create the header component**
303
+
304
+
```javascript
305
+
import { LitElement, html, css } from 'lit';
306
+
import '../atoms/grain-avatar.js';
307
+
import '../molecules/grain-profile-stats.js';
308
+
309
+
export class GrainProfileHeader extends LitElement {
310
+
static properties = {
311
+
profile: { type: Object }
312
+
};
313
+
314
+
static styles = css`
315
+
:host {
316
+
display: block;
317
+
padding: var(--space-md) 0;
318
+
}
319
+
.top-row {
320
+
display: flex;
321
+
align-items: center;
322
+
gap: var(--space-lg);
323
+
margin-bottom: var(--space-md);
324
+
}
325
+
.info {
326
+
flex: 1;
327
+
min-width: 0;
328
+
}
329
+
.handle {
330
+
font-size: var(--font-size-md);
331
+
font-weight: var(--font-weight-semibold);
332
+
color: var(--color-text-primary);
333
+
margin-bottom: var(--space-xs);
334
+
}
335
+
.name {
336
+
font-size: var(--font-size-sm);
337
+
font-weight: var(--font-weight-bold);
338
+
color: var(--color-text-primary);
339
+
margin-bottom: var(--space-xs);
340
+
}
341
+
.bio {
342
+
font-size: var(--font-size-sm);
343
+
color: var(--color-text-primary);
344
+
line-height: 1.4;
345
+
white-space: pre-wrap;
346
+
}
347
+
`;
348
+
349
+
render() {
350
+
if (!this.profile) return null;
351
+
352
+
const { handle, displayName, description, avatarUrl, galleryCount, followerCount, followingCount } = this.profile;
353
+
354
+
return html`
355
+
<div class="top-row">
356
+
<grain-avatar
357
+
src=${avatarUrl || ''}
358
+
alt=${handle || ''}
359
+
size="lg"
360
+
></grain-avatar>
361
+
<grain-profile-stats
362
+
galleryCount=${galleryCount || 0}
363
+
followerCount=${followerCount || 0}
364
+
followingCount=${followingCount || 0}
365
+
></grain-profile-stats>
366
+
</div>
367
+
<div class="info">
368
+
<div class="handle">@${handle}</div>
369
+
${displayName ? html`<div class="name">${displayName}</div>` : ''}
370
+
${description ? html`<div class="bio">${description}</div>` : ''}
371
+
</div>
372
+
`;
373
+
}
374
+
}
375
+
376
+
customElements.define('grain-profile-header', GrainProfileHeader);
377
+
```
378
+
379
+
**Step 2: Add "lg" size to grain-avatar**
380
+
381
+
Modify `src/components/atoms/grain-avatar.js` to support large size:
382
+
383
+
```javascript
384
+
// In the styles, update the size CSS:
385
+
static styles = css`
386
+
:host {
387
+
display: block;
388
+
}
389
+
.avatar {
390
+
border-radius: 50%;
391
+
object-fit: cover;
392
+
background: var(--color-bg-elevated);
393
+
}
394
+
:host([size="sm"]) .avatar {
395
+
width: 32px;
396
+
height: 32px;
397
+
}
398
+
:host([size="md"]) .avatar {
399
+
width: 48px;
400
+
height: 48px;
401
+
}
402
+
:host([size="lg"]) .avatar {
403
+
width: 80px;
404
+
height: 80px;
405
+
}
406
+
`;
407
+
```
408
+
409
+
**Step 3: Commit**
410
+
411
+
```bash
412
+
git add src/components/organisms/grain-profile-header.js src/components/atoms/grain-avatar.js
413
+
git commit -m "feat: add grain-profile-header organism with lg avatar size"
414
+
```
415
+
416
+
---
417
+
418
+
### Task 5: Create grain-gallery-thumbnail Molecule
419
+
420
+
**Files:**
421
+
- Create: `src/components/molecules/grain-gallery-thumbnail.js`
422
+
423
+
**Step 1: Create the thumbnail component**
424
+
425
+
```javascript
426
+
import { LitElement, html, css } from 'lit';
427
+
import { router } from '../../router.js';
428
+
429
+
export class GrainGalleryThumbnail extends LitElement {
430
+
static properties = {
431
+
handle: { type: String },
432
+
rkey: { type: String },
433
+
imageUrl: { type: String },
434
+
alt: { type: String }
435
+
};
436
+
437
+
static styles = css`
438
+
:host {
439
+
display: block;
440
+
aspect-ratio: 4 / 3;
441
+
overflow: hidden;
442
+
}
443
+
a {
444
+
display: block;
445
+
width: 100%;
446
+
height: 100%;
447
+
}
448
+
img {
449
+
width: 100%;
450
+
height: 100%;
451
+
object-fit: cover;
452
+
background: var(--color-bg-elevated);
453
+
}
454
+
`;
455
+
456
+
#handleClick(e) {
457
+
e.preventDefault();
458
+
router.push(`/profile/${this.handle}/gallery/${this.rkey}`);
459
+
}
460
+
461
+
render() {
462
+
return html`
463
+
<a
464
+
href="/profile/${this.handle}/gallery/${this.rkey}"
465
+
@click=${this.#handleClick}
466
+
>
467
+
<img
468
+
src=${this.imageUrl || ''}
469
+
alt=${this.alt || ''}
470
+
loading="lazy"
471
+
>
472
+
</a>
473
+
`;
474
+
}
475
+
}
476
+
477
+
customElements.define('grain-gallery-thumbnail', GrainGalleryThumbnail);
478
+
```
479
+
480
+
**Step 2: Commit**
481
+
482
+
```bash
483
+
git add src/components/molecules/grain-gallery-thumbnail.js
484
+
git commit -m "feat: add grain-gallery-thumbnail molecule"
485
+
```
486
+
487
+
---
488
+
489
+
### Task 6: Create grain-gallery-grid Organism
490
+
491
+
**Files:**
492
+
- Create: `src/components/organisms/grain-gallery-grid.js`
493
+
494
+
**Step 1: Create the grid component**
495
+
496
+
```javascript
497
+
import { LitElement, html, css } from 'lit';
498
+
import '../molecules/grain-gallery-thumbnail.js';
499
+
500
+
export class GrainGalleryGrid extends LitElement {
501
+
static properties = {
502
+
galleries: { type: Array },
503
+
handle: { type: String }
504
+
};
505
+
506
+
static styles = css`
507
+
:host {
508
+
display: grid;
509
+
grid-template-columns: repeat(3, 1fr);
510
+
gap: 2px;
511
+
}
512
+
`;
513
+
514
+
constructor() {
515
+
super();
516
+
this.galleries = [];
517
+
}
518
+
519
+
#extractRkey(uri) {
520
+
// Extract rkey from AT URI: at://did:plc:xxx/social.grain.gallery/rkey
521
+
const parts = uri.split('/');
522
+
return parts[parts.length - 1];
523
+
}
524
+
525
+
render() {
526
+
return html`
527
+
${this.galleries.map(gallery => html`
528
+
<grain-gallery-thumbnail
529
+
handle=${this.handle}
530
+
rkey=${this.#extractRkey(gallery.uri)}
531
+
imageUrl=${gallery.thumbnailUrl || ''}
532
+
alt=${gallery.title || ''}
533
+
></grain-gallery-thumbnail>
534
+
`)}
535
+
`;
536
+
}
537
+
}
538
+
539
+
customElements.define('grain-gallery-grid', GrainGalleryGrid);
540
+
```
541
+
542
+
**Step 2: Commit**
543
+
544
+
```bash
545
+
git add src/components/organisms/grain-gallery-grid.js
546
+
git commit -m "feat: add grain-gallery-grid organism"
547
+
```
548
+
549
+
---
550
+
551
+
### Task 7: Add getProfile Method to API Service
552
+
553
+
**Files:**
554
+
- Modify: `src/services/grain-api.js`
555
+
556
+
**Step 1: Add getProfile method**
557
+
558
+
Add this method to the `grainApi` object:
559
+
560
+
```javascript
561
+
async getProfile(handle) {
562
+
const query = `
563
+
query GetProfile($handle: String!) {
564
+
socialGrainActorProfile(first: 1, where: { actorHandle: { eq: $handle } }) {
565
+
edges {
566
+
node {
567
+
did
568
+
actorHandle
569
+
displayName
570
+
description
571
+
avatar { url(preset: "avatar") }
572
+
}
573
+
}
574
+
}
575
+
576
+
socialGrainGallery(
577
+
where: { actorHandle: { eq: $handle } }
578
+
sortBy: [{ field: createdAt, direction: DESC }]
579
+
) {
580
+
totalCount
581
+
edges {
582
+
node {
583
+
uri
584
+
title
585
+
createdAt
586
+
socialGrainGalleryItemViaGallery(first: 1) {
587
+
edges {
588
+
node {
589
+
itemResolved {
590
+
... on SocialGrainPhoto {
591
+
photo { url(preset: "feed_thumbnail") }
592
+
}
593
+
}
594
+
}
595
+
}
596
+
}
597
+
}
598
+
}
599
+
}
600
+
}
601
+
`;
602
+
603
+
const data = await this.#query(query, { handle });
604
+
605
+
const profileEdge = data.socialGrainActorProfile?.edges?.[0];
606
+
const profile = profileEdge?.node;
607
+
608
+
const galleries = data.socialGrainGallery?.edges?.map(edge => {
609
+
const node = edge.node;
610
+
const firstPhoto = node.socialGrainGalleryItemViaGallery?.edges?.[0]?.node?.itemResolved;
611
+
return {
612
+
uri: node.uri,
613
+
title: node.title,
614
+
createdAt: node.createdAt,
615
+
thumbnailUrl: firstPhoto?.photo?.url || ''
616
+
};
617
+
}) || [];
618
+
619
+
// TODO: Add follower/following counts when we have the aggregated query working
620
+
return {
621
+
handle: profile?.actorHandle || handle,
622
+
displayName: profile?.displayName || '',
623
+
description: profile?.description || '',
624
+
avatarUrl: profile?.avatar?.url || '',
625
+
did: profile?.did || '',
626
+
galleryCount: data.socialGrainGallery?.totalCount || 0,
627
+
followerCount: 0,
628
+
followingCount: 0,
629
+
galleries
630
+
};
631
+
}
632
+
```
633
+
634
+
**Step 2: Commit**
635
+
636
+
```bash
637
+
git add src/services/grain-api.js
638
+
git commit -m "feat: add getProfile method to API service"
639
+
```
640
+
641
+
---
642
+
643
+
### Task 8: Create grain-profile Page
644
+
645
+
**Files:**
646
+
- Create: `src/components/pages/grain-profile.js`
647
+
- Modify: `src/components/pages/grain-app.js`
648
+
649
+
**Step 1: Create the profile page component**
650
+
651
+
```javascript
652
+
import { LitElement, html, css } from 'lit';
653
+
import { grainApi } from '../../services/grain-api.js';
654
+
import '../templates/grain-feed-layout.js';
655
+
import '../organisms/grain-profile-header.js';
656
+
import '../organisms/grain-gallery-grid.js';
657
+
import '../atoms/grain-spinner.js';
658
+
659
+
export class GrainProfile extends LitElement {
660
+
static properties = {
661
+
handle: { type: String },
662
+
_profile: { state: true },
663
+
_loading: { state: true },
664
+
_error: { state: true }
665
+
};
666
+
667
+
static styles = css`
668
+
:host {
669
+
display: block;
670
+
}
671
+
.error {
672
+
padding: var(--space-lg);
673
+
text-align: center;
674
+
color: var(--color-error);
675
+
}
676
+
.empty {
677
+
padding: var(--space-xl);
678
+
text-align: center;
679
+
color: var(--color-text-secondary);
680
+
}
681
+
`;
682
+
683
+
constructor() {
684
+
super();
685
+
this._profile = null;
686
+
this._loading = true;
687
+
this._error = null;
688
+
}
689
+
690
+
connectedCallback() {
691
+
super.connectedCallback();
692
+
this.#loadProfile();
693
+
}
694
+
695
+
updated(changedProperties) {
696
+
if (changedProperties.has('handle') && this.handle) {
697
+
this.#loadProfile();
698
+
}
699
+
}
700
+
701
+
async #loadProfile() {
702
+
if (!this.handle) return;
703
+
704
+
try {
705
+
this._loading = true;
706
+
this._error = null;
707
+
this._profile = await grainApi.getProfile(this.handle);
708
+
} catch (err) {
709
+
this._error = err.message;
710
+
} finally {
711
+
this._loading = false;
712
+
}
713
+
}
714
+
715
+
render() {
716
+
return html`
717
+
<grain-feed-layout>
718
+
${this._loading ? html`<grain-spinner></grain-spinner>` : ''}
719
+
720
+
${this._error ? html`
721
+
<p class="error">${this._error}</p>
722
+
` : ''}
723
+
724
+
${!this._loading && this._profile ? html`
725
+
<grain-profile-header .profile=${this._profile}></grain-profile-header>
726
+
727
+
${this._profile.galleries.length > 0 ? html`
728
+
<grain-gallery-grid
729
+
handle=${this.handle}
730
+
.galleries=${this._profile.galleries}
731
+
></grain-gallery-grid>
732
+
` : html`
733
+
<p class="empty">No galleries yet</p>
734
+
`}
735
+
` : ''}
736
+
</grain-feed-layout>
737
+
`;
738
+
}
739
+
}
740
+
741
+
customElements.define('grain-profile', GrainProfile);
742
+
```
743
+
744
+
**Step 2: Import profile page in grain-app.js**
745
+
746
+
Add this import to `src/components/pages/grain-app.js`:
747
+
748
+
```javascript
749
+
// Import pages
750
+
import './grain-timeline.js';
751
+
import './grain-profile.js';
752
+
```
753
+
754
+
**Step 3: Verify profile page loads**
755
+
756
+
Run: `npm run dev`
757
+
Click an author chip on timeline.
758
+
Expected: Profile page shows with header and gallery grid.
759
+
760
+
**Step 4: Commit**
761
+
762
+
```bash
763
+
git add src/components/pages/grain-profile.js src/components/pages/grain-app.js
764
+
git commit -m "feat: add grain-profile page"
765
+
```
766
+
767
+
---
768
+
769
+
## Phase 3: Gallery Detail Page
770
+
771
+
### Task 9: Create grain-comment Molecule
772
+
773
+
**Files:**
774
+
- Create: `src/components/molecules/grain-comment.js`
775
+
776
+
**Step 1: Create the comment component**
777
+
778
+
```javascript
779
+
import { LitElement, html, css } from 'lit';
780
+
import { router } from '../../router.js';
781
+
782
+
export class GrainComment extends LitElement {
783
+
static properties = {
784
+
handle: { type: String },
785
+
text: { type: String },
786
+
createdAt: { type: String }
787
+
};
788
+
789
+
static styles = css`
790
+
:host {
791
+
display: block;
792
+
padding: var(--space-xs) 0;
793
+
}
794
+
.content {
795
+
font-size: var(--font-size-sm);
796
+
color: var(--color-text-primary);
797
+
line-height: 1.4;
798
+
}
799
+
.handle {
800
+
font-weight: var(--font-weight-semibold);
801
+
cursor: pointer;
802
+
}
803
+
.handle:hover {
804
+
text-decoration: underline;
805
+
}
806
+
.text {
807
+
margin-left: var(--space-xs);
808
+
}
809
+
`;
810
+
811
+
#handleClick(e) {
812
+
e.preventDefault();
813
+
router.push(`/profile/${this.handle}`);
814
+
}
815
+
816
+
render() {
817
+
return html`
818
+
<div class="content">
819
+
<span class="handle" @click=${this.#handleClick}>@${this.handle}</span>
820
+
<span class="text">${this.text}</span>
821
+
</div>
822
+
`;
823
+
}
824
+
}
825
+
826
+
customElements.define('grain-comment', GrainComment);
827
+
```
828
+
829
+
**Step 2: Commit**
830
+
831
+
```bash
832
+
git add src/components/molecules/grain-comment.js
833
+
git commit -m "feat: add grain-comment molecule"
834
+
```
835
+
836
+
---
837
+
838
+
### Task 10: Create grain-comment-list Organism
839
+
840
+
**Files:**
841
+
- Create: `src/components/organisms/grain-comment-list.js`
842
+
843
+
**Step 1: Create the comment list component**
844
+
845
+
```javascript
846
+
import { LitElement, html, css } from 'lit';
847
+
import '../molecules/grain-comment.js';
848
+
849
+
export class GrainCommentList extends LitElement {
850
+
static properties = {
851
+
comments: { type: Array },
852
+
totalCount: { type: Number }
853
+
};
854
+
855
+
static styles = css`
856
+
:host {
857
+
display: block;
858
+
padding: var(--space-sm) 0;
859
+
}
860
+
.header {
861
+
font-size: var(--font-size-sm);
862
+
color: var(--color-text-secondary);
863
+
margin-bottom: var(--space-sm);
864
+
}
865
+
.no-comments {
866
+
font-size: var(--font-size-sm);
867
+
color: var(--color-text-secondary);
868
+
font-style: italic;
869
+
}
870
+
`;
871
+
872
+
constructor() {
873
+
super();
874
+
this.comments = [];
875
+
this.totalCount = 0;
876
+
}
877
+
878
+
render() {
879
+
if (this.totalCount === 0) {
880
+
return html`<p class="no-comments">No comments yet</p>`;
881
+
}
882
+
883
+
return html`
884
+
${this.totalCount > this.comments.length ? html`
885
+
<div class="header">View all ${this.totalCount} comments</div>
886
+
` : ''}
887
+
888
+
${this.comments.map(comment => html`
889
+
<grain-comment
890
+
handle=${comment.actorHandle}
891
+
text=${comment.text}
892
+
createdAt=${comment.createdAt}
893
+
></grain-comment>
894
+
`)}
895
+
`;
896
+
}
897
+
}
898
+
899
+
customElements.define('grain-comment-list', GrainCommentList);
900
+
```
901
+
902
+
**Step 2: Commit**
903
+
904
+
```bash
905
+
git add src/components/organisms/grain-comment-list.js
906
+
git commit -m "feat: add grain-comment-list organism"
907
+
```
908
+
909
+
---
910
+
911
+
### Task 11: Add getGalleryDetail Method to API Service
912
+
913
+
**Files:**
914
+
- Modify: `src/services/grain-api.js`
915
+
916
+
**Step 1: Add getGalleryDetail method**
917
+
918
+
Add this method to the `grainApi` object:
919
+
920
+
```javascript
921
+
async getGalleryDetail(handle, rkey) {
922
+
const query = `
923
+
query GetGalleryDetail($handle: String!, $rkey: String!) {
924
+
socialGrainGallery(
925
+
first: 1
926
+
where: { actorHandle: { eq: $handle }, rkey: { eq: $rkey } }
927
+
) {
928
+
edges {
929
+
node {
930
+
uri
931
+
did
932
+
actorHandle
933
+
title
934
+
description
935
+
createdAt
936
+
937
+
socialGrainGalleryItemViaGallery(first: 50) {
938
+
edges {
939
+
node {
940
+
itemResolved {
941
+
... on SocialGrainPhoto {
942
+
uri
943
+
alt
944
+
aspectRatio { width height }
945
+
photo { url(preset: "feed_fullsize") }
946
+
}
947
+
}
948
+
}
949
+
}
950
+
}
951
+
952
+
socialGrainFavoriteViaSubject {
953
+
totalCount
954
+
}
955
+
956
+
socialGrainCommentViaSubject(
957
+
first: 20
958
+
sortBy: [{ field: createdAt, direction: ASC }]
959
+
) {
960
+
totalCount
961
+
edges {
962
+
node {
963
+
text
964
+
createdAt
965
+
actorHandle
966
+
}
967
+
}
968
+
}
969
+
}
970
+
}
971
+
}
972
+
973
+
socialGrainActorProfile(first: 1, where: { actorHandle: { eq: $handle } }) {
974
+
edges {
975
+
node {
976
+
actorHandle
977
+
displayName
978
+
avatar { url(preset: "avatar") }
979
+
}
980
+
}
981
+
}
982
+
}
983
+
`;
984
+
985
+
const data = await this.#query(query, { handle, rkey });
986
+
987
+
const galleryNode = data.socialGrainGallery?.edges?.[0]?.node;
988
+
if (!galleryNode) {
989
+
throw new Error('Gallery not found');
990
+
}
991
+
992
+
const profileNode = data.socialGrainActorProfile?.edges?.[0]?.node;
993
+
994
+
const photos = galleryNode.socialGrainGalleryItemViaGallery?.edges
995
+
?.map(edge => edge.node?.itemResolved)
996
+
?.filter(Boolean)
997
+
?.map(photo => ({
998
+
uri: photo.uri,
999
+
url: photo.photo?.url || '',
1000
+
alt: photo.alt || '',
1001
+
aspectRatio: photo.aspectRatio
1002
+
? photo.aspectRatio.width / photo.aspectRatio.height
1003
+
: 1
1004
+
})) || [];
1005
+
1006
+
const comments = galleryNode.socialGrainCommentViaSubject?.edges?.map(edge => ({
1007
+
text: edge.node.text,
1008
+
createdAt: edge.node.createdAt,
1009
+
actorHandle: edge.node.actorHandle
1010
+
})) || [];
1011
+
1012
+
return {
1013
+
uri: galleryNode.uri,
1014
+
title: galleryNode.title,
1015
+
description: galleryNode.description,
1016
+
createdAt: galleryNode.createdAt,
1017
+
handle: galleryNode.actorHandle,
1018
+
displayName: profileNode?.displayName || '',
1019
+
avatarUrl: profileNode?.avatar?.url || '',
1020
+
photos,
1021
+
favoriteCount: galleryNode.socialGrainFavoriteViaSubject?.totalCount || 0,
1022
+
commentCount: galleryNode.socialGrainCommentViaSubject?.totalCount || 0,
1023
+
comments
1024
+
};
1025
+
}
1026
+
```
1027
+
1028
+
**Step 2: Commit**
1029
+
1030
+
```bash
1031
+
git add src/services/grain-api.js
1032
+
git commit -m "feat: add getGalleryDetail method to API service"
1033
+
```
1034
+
1035
+
---
1036
+
1037
+
### Task 12: Create grain-gallery-detail Page
1038
+
1039
+
**Files:**
1040
+
- Create: `src/components/pages/grain-gallery-detail.js`
1041
+
- Modify: `src/components/pages/grain-app.js`
1042
+
1043
+
**Step 1: Create the gallery detail page component**
1044
+
1045
+
```javascript
1046
+
import { LitElement, html, css } from 'lit';
1047
+
import { router } from '../../router.js';
1048
+
import { grainApi } from '../../services/grain-api.js';
1049
+
import '../templates/grain-feed-layout.js';
1050
+
import '../molecules/grain-author-chip.js';
1051
+
import '../organisms/grain-image-carousel.js';
1052
+
import '../organisms/grain-engagement-bar.js';
1053
+
import '../organisms/grain-comment-list.js';
1054
+
import '../atoms/grain-spinner.js';
1055
+
import '../atoms/grain-icon.js';
1056
+
1057
+
export class GrainGalleryDetail extends LitElement {
1058
+
static properties = {
1059
+
handle: { type: String },
1060
+
rkey: { type: String },
1061
+
_gallery: { state: true },
1062
+
_loading: { state: true },
1063
+
_error: { state: true }
1064
+
};
1065
+
1066
+
static styles = css`
1067
+
:host {
1068
+
display: block;
1069
+
}
1070
+
.header-bar {
1071
+
display: flex;
1072
+
align-items: center;
1073
+
padding: var(--space-sm) 0;
1074
+
border-bottom: 1px solid var(--color-border);
1075
+
}
1076
+
.back-button {
1077
+
display: flex;
1078
+
align-items: center;
1079
+
justify-content: center;
1080
+
background: none;
1081
+
border: none;
1082
+
padding: var(--space-sm);
1083
+
margin-left: calc(-1 * var(--space-sm));
1084
+
cursor: pointer;
1085
+
color: var(--color-text-primary);
1086
+
}
1087
+
.author-section {
1088
+
padding: var(--space-sm) 0;
1089
+
}
1090
+
.content {
1091
+
padding: var(--space-sm) 0;
1092
+
}
1093
+
.title {
1094
+
font-size: var(--font-size-sm);
1095
+
font-weight: var(--font-weight-semibold);
1096
+
color: var(--color-text-primary);
1097
+
margin-bottom: var(--space-xs);
1098
+
}
1099
+
.description {
1100
+
font-size: var(--font-size-sm);
1101
+
color: var(--color-text-secondary);
1102
+
margin-bottom: var(--space-sm);
1103
+
}
1104
+
.timestamp {
1105
+
font-size: var(--font-size-xs);
1106
+
color: var(--color-text-secondary);
1107
+
text-transform: uppercase;
1108
+
}
1109
+
.error {
1110
+
padding: var(--space-lg);
1111
+
text-align: center;
1112
+
color: var(--color-error);
1113
+
}
1114
+
`;
1115
+
1116
+
constructor() {
1117
+
super();
1118
+
this._gallery = null;
1119
+
this._loading = true;
1120
+
this._error = null;
1121
+
}
1122
+
1123
+
connectedCallback() {
1124
+
super.connectedCallback();
1125
+
this.#loadGallery();
1126
+
}
1127
+
1128
+
updated(changedProperties) {
1129
+
if ((changedProperties.has('handle') || changedProperties.has('rkey')) && this.handle && this.rkey) {
1130
+
this.#loadGallery();
1131
+
}
1132
+
}
1133
+
1134
+
async #loadGallery() {
1135
+
if (!this.handle || !this.rkey) return;
1136
+
1137
+
try {
1138
+
this._loading = true;
1139
+
this._error = null;
1140
+
this._gallery = await grainApi.getGalleryDetail(this.handle, this.rkey);
1141
+
} catch (err) {
1142
+
this._error = err.message;
1143
+
} finally {
1144
+
this._loading = false;
1145
+
}
1146
+
}
1147
+
1148
+
#handleBack() {
1149
+
router.push(`/profile/${this.handle}`);
1150
+
}
1151
+
1152
+
#formatDate(iso) {
1153
+
const date = new Date(iso);
1154
+
const now = new Date();
1155
+
const diffMs = now - date;
1156
+
const diffDays = Math.floor(diffMs / (1000 * 60 * 60 * 24));
1157
+
1158
+
if (diffDays === 0) return 'Today';
1159
+
if (diffDays === 1) return 'Yesterday';
1160
+
if (diffDays < 7) return `${diffDays} days ago`;
1161
+
1162
+
return date.toLocaleDateString('en-US', {
1163
+
month: 'short',
1164
+
day: 'numeric'
1165
+
});
1166
+
}
1167
+
1168
+
render() {
1169
+
return html`
1170
+
<grain-feed-layout>
1171
+
<div class="header-bar">
1172
+
<button class="back-button" @click=${this.#handleBack}>
1173
+
<grain-icon name="back" size="20"></grain-icon>
1174
+
</button>
1175
+
</div>
1176
+
1177
+
${this._loading ? html`<grain-spinner></grain-spinner>` : ''}
1178
+
1179
+
${this._error ? html`
1180
+
<p class="error">${this._error}</p>
1181
+
` : ''}
1182
+
1183
+
${!this._loading && this._gallery ? html`
1184
+
<div class="author-section">
1185
+
<grain-author-chip
1186
+
avatarUrl=${this._gallery.avatarUrl}
1187
+
handle=${this._gallery.handle}
1188
+
displayName=${this._gallery.displayName}
1189
+
></grain-author-chip>
1190
+
</div>
1191
+
1192
+
<grain-image-carousel
1193
+
.photos=${this._gallery.photos}
1194
+
></grain-image-carousel>
1195
+
1196
+
<grain-engagement-bar
1197
+
favoriteCount=${this._gallery.favoriteCount}
1198
+
commentCount=${this._gallery.commentCount}
1199
+
></grain-engagement-bar>
1200
+
1201
+
<div class="content">
1202
+
<p class="title">${this._gallery.title}</p>
1203
+
${this._gallery.description ? html`
1204
+
<p class="description">${this._gallery.description}</p>
1205
+
` : ''}
1206
+
<time class="timestamp">${this.#formatDate(this._gallery.createdAt)}</time>
1207
+
</div>
1208
+
1209
+
<grain-comment-list
1210
+
.comments=${this._gallery.comments}
1211
+
totalCount=${this._gallery.commentCount}
1212
+
></grain-comment-list>
1213
+
` : ''}
1214
+
</grain-feed-layout>
1215
+
`;
1216
+
}
1217
+
}
1218
+
1219
+
customElements.define('grain-gallery-detail', GrainGalleryDetail);
1220
+
```
1221
+
1222
+
**Step 2: Add back icon to grain-icon**
1223
+
1224
+
Modify `src/components/atoms/grain-icon.js` to add the back icon:
1225
+
1226
+
```javascript
1227
+
const ICONS = {
1228
+
heart: 'fa-regular fa-heart',
1229
+
heartFilled: 'fa-solid fa-heart',
1230
+
comment: 'fa-regular fa-comment',
1231
+
share: 'fa-solid fa-paper-plane',
1232
+
back: 'fa-solid fa-arrow-left'
1233
+
};
1234
+
```
1235
+
1236
+
**Step 3: Import gallery detail page in grain-app.js**
1237
+
1238
+
Add this import to `src/components/pages/grain-app.js`:
1239
+
1240
+
```javascript
1241
+
// Import pages
1242
+
import './grain-timeline.js';
1243
+
import './grain-profile.js';
1244
+
import './grain-gallery-detail.js';
1245
+
```
1246
+
1247
+
**Step 4: Verify gallery detail page loads**
1248
+
1249
+
Run: `npm run dev`
1250
+
Navigate to a profile, click a gallery thumbnail.
1251
+
Expected: Gallery detail page shows with carousel, engagement bar, and comments.
1252
+
1253
+
**Step 5: Commit**
1254
+
1255
+
```bash
1256
+
git add src/components/pages/grain-gallery-detail.js src/components/pages/grain-app.js src/components/atoms/grain-icon.js
1257
+
git commit -m "feat: add grain-gallery-detail page with comments"
1258
+
```
1259
+
1260
+
---
1261
+
1262
+
## Summary
1263
+
1264
+
**12 tasks total:**
1265
+
- Phase 1 (Routing): 2 tasks
1266
+
- Phase 2 (Profile): 6 tasks
1267
+
- Phase 3 (Gallery Detail): 4 tasks
1268
+
1269
+
**New files created:**
1270
+
- `src/components/molecules/grain-profile-stats.js`
1271
+
- `src/components/molecules/grain-gallery-thumbnail.js`
1272
+
- `src/components/molecules/grain-comment.js`
1273
+
- `src/components/organisms/grain-profile-header.js`
1274
+
- `src/components/organisms/grain-gallery-grid.js`
1275
+
- `src/components/organisms/grain-comment-list.js`
1276
+
- `src/components/pages/grain-profile.js`
1277
+
- `src/components/pages/grain-gallery-detail.js`
1278
+
1279
+
**Modified files:**
1280
+
- `src/router.js`
1281
+
- `src/components/molecules/grain-author-chip.js`
1282
+
- `src/components/atoms/grain-avatar.js`
1283
+
- `src/components/atoms/grain-icon.js`
1284
+
- `src/services/grain-api.js`
1285
+
- `src/components/pages/grain-app.js`