feat(gallery): reveal tiles on image load + single initial fetch

The 5×10 metadata batching only staggered the cheap layer (JSON);
thumbnails load as independent <img> requests and clustered, so tiles
"popped in together" after a wait. Two changes:

- GalleryItem reveals each tile when ITS OWN thumbnail fires @load (with
  an onMounted complete-check for cached thumbs), playing a showcase-style
  flip-up entrance. Tiles now cascade in natural load order instead of all
  at once. Honors prefers-reduced-motion.
- gallery store does ONE initial fetch (limit=50) instead of 10 serial
  /scroll round-trips. Fewer RTTs, faster first paint; the reveal-on-load
  is what makes appearance progressive now. Infinite scroll pulls 25/trigger.

Tests: GalleryItem gains is-loaded only after @load; loadInitial issues
exactly one scroll request at the initial limit.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

frontend/test/components/galleryItem.spec.js

@@ -0,0 +1,28 @@
+// @vitest-environment happy-dom
+import { describe, it, expect } from 'vitest'
+
+import GalleryItem from '../../src/components/gallery/GalleryItem.vue'
+import { freshPinia, mountComponent } from '../support/mountComponent.js'
+
+describe('GalleryItem', () => {
+  const image = {
+    id: 7, sha256: 'a'.repeat(64), mime: 'image/jpeg',
+    width: 100, height: 100,
+    thumbnail_url: '/images/thumbs/aa/abc.jpg', artist: null,
+  }
+
+  it('reveals the thumbnail only once it has loaded, so tiles fade in individually', async () => {
+    const pinia = freshPinia()
+    const w = mountComponent(GalleryItem, { props: { image }, pinia })
+    const img = w.find('img')
+    expect(img.exists()).toBe(true)
+
+    // Pre-load: the tile must NOT be revealed, so it can fade in when its
+    // own thumbnail lands rather than pop together with its API batch.
+    expect(img.classes()).not.toContain('is-loaded')
+
+    await img.trigger('load')
+
+    expect(img.classes()).toContain('is-loaded')
+  })
+})

frontend/test/gallery.spec.js

@@ -49,4 +49,19 @@ describe('gallery store: tag/post filter exclusivity', () => {
     expect(scrollCall).toContain('post_id=7')
     expect(scrollCall).not.toContain('tag_id=')
   })
+
+  it('loadInitial issues exactly one scroll request at the initial limit', async () => {
+    const s = useGalleryStore()
+    const urls = []
+    // Non-null cursor: the old 10×serial-batch loop would have fired ten
+    // requests here. The single-fetch path must fire exactly one.
+    stubFetch((url) => {
+      urls.push(url)
+      return { status: 200, body: { images: [], date_groups: [], next_cursor: 'c1' } }
+    })
+    await s.loadInitial()
+    const scrollCalls = urls.filter(u => u.includes('/api/gallery/scroll'))
+    expect(scrollCalls).toHaveLength(1)
+    expect(scrollCalls[0]).toContain('limit=50')
+  })
 })