grain.social is a photo sharing platform built on atproto.
grain.social
atproto
photography
appview
feat: add multi-photo icon to gallery grid thumbnails
Show a filled stacked squares icon (SF Symbols style) in the top-right
corner of gallery thumbnails when a gallery contains more than one photo.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
+19
+19
app/lib/components/organisms/GalleryGrid.svelte
+19
app/lib/components/organisms/GalleryGrid.svelte
···
30
30
return photos[0]?.thumb
31
31
}
32
32
33
+
function photoCount(gallery: GalleryView): number {
34
+
return ((gallery.items ?? []) as PhotoView[]).length
35
+
}
36
+
33
37
function rkey(uri: string): string {
34
38
return uri.split('/').pop() ?? ''
35
39
}
···
63
67
onload={(e) => (e.currentTarget as HTMLImageElement).classList.add('loaded')}
64
68
/>
65
69
{/if}
70
+
{#if photoCount(gallery) > 1}
71
+
<div class="multi-icon">
72
+
<svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor">
73
+
<path transform="matrix(0.807,0,0,0.807,-0.41,18.81)" d="M18.43-20.72L6.67-20.72C4.22-20.72 2.99-19.50 2.99-17.09L2.99-5.24C2.99-2.82 4.22-1.61 6.67-1.61L18.43-1.61C20.88-1.61 22.10-2.81 22.10-5.24L22.10-17.09C22.10-19.51 20.88-20.72 18.43-20.72ZM27.79-11.67C27.79-14.09 26.57-15.29 24.12-15.29L23.71-15.29L23.71-5.24C23.71-1.92 21.76 0 18.43 0L8.67 0L8.67 0.19C8.67 2.60 9.90 3.82 12.35 3.82L24.12 3.82C26.57 3.82 27.79 2.61 27.79 0.19Z" />
74
+
</svg>
75
+
</div>
76
+
{/if}
66
77
<div class="overlay">
67
78
<span class="overlay-title">{gallery.title}</span>
68
79
</div>
···
100
111
}
101
112
.cell img:global(.loaded) {
102
113
opacity: 1;
114
+
}
115
+
.multi-icon {
116
+
position: absolute;
117
+
top: 6px;
118
+
right: 6px;
119
+
color: #fff;
120
+
filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
121
+
z-index: 1;
103
122
}
104
123
.overlay {
105
124
position: absolute;