WIP PWA for Grain
feat: make gallery card clickable to navigate to detail
Clicking carousel or content navigates to /profile/:handle/gallery/:rkey
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
+19
-4
+19
-4
src/components/organisms/grain-gallery-card.js
+19
-4
src/components/organisms/grain-gallery-card.js
···
1
1
import { LitElement, html, css } from 'lit';
2
+
import { router } from '../../router.js';
2
3
import '../molecules/grain-author-chip.js';
3
4
import './grain-image-carousel.js';
4
5
import './grain-engagement-bar.js';
···
40
41
margin-top: var(--space-sm);
41
42
text-transform: uppercase;
42
43
}
44
+
.clickable {
45
+
cursor: pointer;
46
+
}
43
47
`;
44
48
45
49
#formatDate(iso) {
···
58
62
});
59
63
}
60
64
65
+
#handleClick() {
66
+
const { gallery } = this;
67
+
if (!gallery?.uri || !gallery?.handle) return;
68
+
69
+
// Extract rkey from uri (at://did:plc:xxx/social.grain.gallery/rkey)
70
+
const rkey = gallery.uri.split('/').pop();
71
+
router.push(`/profile/${gallery.handle}/gallery/${rkey}`);
72
+
}
73
+
61
74
render() {
62
75
if (!this.gallery) return null;
63
76
···
72
85
></grain-author-chip>
73
86
</header>
74
87
75
-
<grain-image-carousel
76
-
.photos=${gallery.photos || []}
77
-
></grain-image-carousel>
88
+
<div class="clickable" @click=${this.#handleClick}>
89
+
<grain-image-carousel
90
+
.photos=${gallery.photos || []}
91
+
></grain-image-carousel>
92
+
</div>
78
93
79
94
<grain-engagement-bar
80
95
favoriteCount=${gallery.favoriteCount || 0}
81
96
commentCount=${gallery.commentCount || 0}
82
97
></grain-engagement-bar>
83
98
84
-
<div class="content">
99
+
<div class="content clickable" @click=${this.#handleClick}>
85
100
<p class="title">${gallery.title}</p>
86
101
${gallery.description ? html`
87
102
<p class="description">${gallery.description}</p>