bvandeusen
8979e0e377
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>
81 lines
2.2 KiB
Vue
81 lines
2.2 KiB
Vue
<template>
|
|
<div class="fc-artist-posts">
|
|
<v-alert v-if="store.error" type="error" variant="tonal" closable class="mb-3">
|
|
{{ String(store.error) }}
|
|
</v-alert>
|
|
|
|
<div v-if="store.loading && store.items.length === 0" class="fc-artist-posts__loading">
|
|
<v-progress-circular indeterminate color="accent" size="36" />
|
|
</div>
|
|
|
|
<div v-else-if="store.items.length === 0 && store.done" class="fc-artist-posts__empty">
|
|
<p>No posts for this artist yet. Switch to
|
|
<a href="#" @click.prevent="$emit('switch-tab', 'gallery')">Gallery</a>
|
|
to see imported images, or visit
|
|
<RouterLink to="/subscriptions">Subscriptions</RouterLink>
|
|
to start capturing posts.
|
|
</p>
|
|
</div>
|
|
|
|
<div v-else>
|
|
<PostCard v-for="p in store.items" :key="p.id" :post="p" />
|
|
<div ref="sentinel" class="fc-artist-posts__sentinel">
|
|
<v-progress-circular v-if="store.loading" indeterminate color="accent" size="24" />
|
|
<span v-else-if="store.done" class="fc-artist-posts__end">End of stream</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { onMounted, ref, watch } from 'vue'
|
|
import { RouterLink } from 'vue-router'
|
|
|
|
import { usePostsStore } from '../../stores/posts.js'
|
|
import { useInfiniteScroll } from '../../composables/useInfiniteScroll.js'
|
|
import PostCard from '../posts/PostCard.vue'
|
|
|
|
const props = defineProps({
|
|
artistId: { type: Number, required: true },
|
|
})
|
|
|
|
defineEmits(['switch-tab'])
|
|
|
|
const store = usePostsStore()
|
|
const sentinel = ref(null)
|
|
|
|
async function reload () {
|
|
await store.loadInitial({ artist_id: props.artistId, platform: null })
|
|
}
|
|
|
|
watch(() => props.artistId, reload)
|
|
|
|
useInfiniteScroll(sentinel, () => store.loadMore(), { rootMargin: '400px 0px' })
|
|
|
|
onMounted(reload)
|
|
</script>
|
|
|
|
<style scoped>
|
|
.fc-artist-posts {
|
|
max-width: 1600px;
|
|
margin: 0 auto;
|
|
}
|
|
.fc-artist-posts__loading,
|
|
.fc-artist-posts__empty {
|
|
display: flex;
|
|
justify-content: center;
|
|
padding: 2rem;
|
|
color: rgb(var(--v-theme-on-surface-variant));
|
|
}
|
|
.fc-artist-posts__sentinel {
|
|
display: flex;
|
|
justify-content: center;
|
|
padding: 1.5rem 0;
|
|
min-height: 2rem;
|
|
}
|
|
.fc-artist-posts__end {
|
|
color: rgb(var(--v-theme-on-surface-variant));
|
|
font-size: 0.85rem;
|
|
}
|
|
</style>
|