FabledCurator/frontend/src/components/discovery/MasonryGrid.vue

<template>
  <div class="fc-masonry" ref="containerEl">
    <div class="fc-masonry__cols">
      <div v-for="(col, ci) in columns" :key="ci" class="fc-masonry__col">
        <button
          v-for="item in col" :key="item.id"
          class="fc-masonry__item"
          :class="{ 'fc-masonry__item--anim': shouldAnimate(item) }"
          :style="itemStyle(item)"
          type="button"
          @click="$emit('open', item.id)"
        >
          <img
            :src="item.thumbnail_url" :alt="`image ${item.id}`"
            loading="lazy"
            :style="aspectStyle(item)"
          />
        </button>
      </div>
    </div>

    <div v-if="loading" class="fc-masonry__sentinel">
      <v-progress-circular indeterminate color="accent" size="28" />
    </div>
    <div v-else-if="hasMore" ref="sentinelEl" class="fc-masonry__sentinel" />
    <div v-else-if="items.length" class="fc-masonry__end text-caption">
      End.
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, onUnmounted, watch } from 'vue'
import { usePolyMasonry } from '../../composables/usePolyMasonry.js'

const props = defineProps({
  items: { type: Array, default: () => [] },
  loading: { type: Boolean, default: false },
  hasMore: { type: Boolean, default: false },
  // Items at indices >= animateFromIndex get the stagger fade-in. Opt-in
  // — defaults to Infinity (no animation) so views that don't want it
  // (ArtistView, etc.) don't pay the layout-shift cost. ShowcaseView
  // uses 0 on initial load / shuffle and prevCount on infinite-scroll
  // appends.
  animateFromIndex: { type: Number, default: Number.POSITIVE_INFINITY },
})
const emit = defineEmits(['load-more', 'open'])

const containerEl = ref(null)
const sentinelEl = ref(null)
const { columnCount, distribute } = usePolyMasonry(containerEl)

const columns = computed(() => distribute(props.items, columnCount.value))

// id → index lookup so we can derive the stagger from natural reading
// order even after the masonry distributes items across columns.
const idxById = computed(() => {
  const m = new Map()
  props.items.forEach((it, i) => m.set(it.id, i))
  return m
})

function shouldAnimate(item) {
  const idx = idxById.value.get(item.id)
  return idx !== undefined && idx >= props.animateFromIndex
}

function itemStyle(item) {
  if (!shouldAnimate(item)) return {}
  const idx = idxById.value.get(item.id) - props.animateFromIndex
  return { '--stagger-index': idx }
}

function aspectStyle(item) {
  const w = Number(item.width)
  const h = Number(item.height)
  if (!w || !h) return {}
  return { aspectRatio: `${w} / ${h}` }
}

let observer = null
function attachObserver() {
  if (observer) observer.disconnect()
  if (!sentinelEl.value) return
  observer = new IntersectionObserver(([entry]) => {
    if (entry.isIntersecting && props.hasMore && !props.loading) {
      emit('load-more')
    }
  }, { rootMargin: '600px' })
  observer.observe(sentinelEl.value)
}
watch(sentinelEl, attachObserver)
onMounted(attachObserver)
onUnmounted(() => observer && observer.disconnect())
</script>

<style scoped>
.fc-masonry__cols { display: flex; gap: 8px; align-items: flex-start; }
.fc-masonry__col { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.fc-masonry__item {
  display: block; padding: 0; border: 0; background: none;
  cursor: pointer; width: 100%;
}
.fc-masonry__item img {
  width: 100%; height: auto; display: block; border-radius: 4px;
  background: rgb(var(--v-theme-surface-light));
}
.fc-masonry__sentinel {
  display: flex; justify-content: center; padding: 32px 0; min-height: 60px;
}
.fc-masonry__end { text-align: center; padding: 32px 0; }

/* IR-parity stagger fade-in for showcase entry / shuffle. 60ms between
   items, 250ms each — matches IR's `itemFadeIn` keyframe (style.css
   ~line 1834). Honors prefers-reduced-motion. */
@keyframes fc-masonry-item-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.fc-masonry__item--anim {
  animation: fc-masonry-item-in 0.25s ease forwards;
  animation-delay: calc(var(--stagger-index, 0) * 60ms);
  opacity: 0;
}
@media (prefers-reduced-motion: reduce) {
  .fc-masonry__item--anim {
    animation: none;
    opacity: 1;
  }
}
</style>