refactor(I4): extract useInfiniteScroll composable; migrate 6 consumers

The IntersectionObserver-on-a-sentinel infinite-scroll pattern was copy-
pasted in 7 places. New composables/useInfiniteScroll(sentinelRef, cb)
owns the observer lifecycle (attach on mount, re-attach when the ref
changes, disconnect on unmount). Migrated GalleryGrid, MasonryGrid
(gallery+showcase), ArtistPostsTab, ArtistsView, TagsView, SeriesManageView.
PostsView left manual on purpose — its anchored mode does bidirectional
scroll-position preservation that doesn't fit the simple composable.

I4(a) (timestamps) is effectively already done: the UTC displays were
converted earlier; the remaining toLocaleString uses already render local
time, so they're left as-is rather than churned for format-only consistency.

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

frontend/src/components/gallery/GalleryGrid.vue

@@ -32,8 +32,9 @@
 </template>
 
 <script setup>
-import { onMounted, onUnmounted, ref, watch } from 'vue'
+import { ref } from 'vue'
 import { useGalleryStore } from '../../stores/gallery.js'
+import { useInfiniteScroll } from '../../composables/useInfiniteScroll.js'
 import GalleryItem from './GalleryItem.vue'
 
 defineEmits(['open'])
@@ -41,22 +42,9 @@ defineEmits(['open'])
 const store = useGalleryStore()
 const sentinelEl = ref(null)
 
-let observer = null
-
-function attachObserver() {
-  if (observer) observer.disconnect()
-  if (!sentinelEl.value) return
-  observer = new IntersectionObserver(([entry]) => {
-    if (entry.isIntersecting && store.hasMore && !store.loading) {
-      store.loadMore()
-    }
-  }, { rootMargin: '600px' })
-  observer.observe(sentinelEl.value)
-}
-
-watch(sentinelEl, attachObserver)
-onMounted(() => attachObserver())
-onUnmounted(() => observer && observer.disconnect())
+useInfiniteScroll(sentinelEl, () => {
+  if (store.hasMore && !store.loading) store.loadMore()
+})
 
 function dateHeaderId(group) { return `fc-month-${group.year}-${group.month}` }