grain.social is a photo sharing platform built on atproto. grain.social
atproto photography appview
47
fork

Configure Feed

Select the types of activity you want to include in your feed.

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
··· 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;