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>
This commit is contained in:
2026-05-29 14:03:49 -04:00
co-authored by Claude Opus 4.7
parent 00e2608ba1
commit 8979e0e377
7 changed files with 57 additions and 79 deletions
+4 -7
View File
@@ -61,15 +61,15 @@
</template>
<script setup>
import { onMounted, onUnmounted, ref } from 'vue'
import { onMounted, ref } from 'vue'
import { useRoute } from 'vue-router'
import { useSeriesManageStore, moveItem } from '../stores/seriesManage.js'
import { useInfiniteScroll } from '../composables/useInfiniteScroll.js'
const route = useRoute()
const store = useSeriesManageStore()
const dragFrom = ref(null)
const sentinel = ref(null)
let observer = null
function onDrop(toIdx) {
if (dragFrom.value === null || dragFrom.value === toIdx) return
@@ -80,15 +80,12 @@ function onDrop(toIdx) {
store.reorder(ordered)
}
useInfiniteScroll(sentinel, () => store.loadPicker())
onMounted(async () => {
await store.load(parseInt(route.params.tagId, 10))
await store.loadPicker(true)
observer = new IntersectionObserver(([e]) => {
if (e.isIntersecting) store.loadPicker()
}, { rootMargin: '600px' })
if (sentinel.value) observer.observe(sentinel.value)
})
onUnmounted(() => observer && observer.disconnect())
</script>
<style scoped>