nav-carte/components/FichesPanel.vue

<!--
  FichesPanel — B3-M3
  Panneau « toutes les fiches » : reçoit une liste déjà filtrée (recherche +
  filtres en cours côté page), l'affiche en grille de FicheMiniCard, et
  expose ses propres chips de filtrage branchées sur le MÊME état que la
  page appelante (pas un second état — voir vérification du brief).
  Ne crée pas de second champ de recherche : `query` sert uniquement à
  nuancer le message d'état vide.
-->
<template>
  <div class="fiches-panel">
    <div class="fiches-panel__head">
      <p class="fiches-panel__intention">{{ intention }}</p>

      <div class="fiches-panel__count">
        {{ fiches.length }} fiche{{ fiches.length > 1 ? 's' : '' }}
      </div>

      <ChipGroup v-if="hashtags.length" aria-label="Filtrer les fiches" class="fiches-panel__chips">
        <Chip
          v-for="tag in visibleHashtags"
          :key="tag"
          :label="tag"
          variant="fonction"
          :active="selected.includes(tag)"
          @toggle="toggle(tag)"
        />
        <Chip
          v-if="isCollapsible"
          :label="expanded ? 'Réduire' : `Voir les ${hiddenCount} autres`"
          variant="echelle"
          :active="expanded"
          @toggle="expanded = !expanded"
        />
      </ChipGroup>
    </div>

    <div class="fiches-panel__body">
      <p v-if="fiches.length === 0" class="fiches-panel__empty">
        Aucun résultat<template v-if="query"> pour « {{ query }} »</template>.
      </p>

      <div v-else class="fiches-panel__grid">
        <FicheMiniCard
          v-for="fiche in fiches"
          :key="`${fiche.kind}-${fiche.id}`"
          :fiche="fiche"
          @open="emit('open', fiche)"
        />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import type { MiniFiche } from '~/composables/useFicheAdapter'

const props = defineProps<{
  fiches: MiniFiche[]
  hashtags: string[]
  selected: string[]
  query: string
  intention: string
}>()

const emit = defineEmits<{
  'update:selected': [value: string[]]
  open: [fiche: MiniFiche]
}>()

// Hashtags repliés (B3-M4) — au-delà de COLLAPSE_THRESHOLD chips, n'affiche
// que les premières + un Chip-bouton « voir les N autres ». Les chips déjà
// actives restent toujours visibles même repliées. `/` (10 fonctions) ne
// dépasse jamais le seuil ; `/agences` (~60 hashtags) se replie. État
// déplié non persistant (ref locale, reset à chaque montage du composant).
const COLLAPSE_THRESHOLD = 14
const expanded = ref(false)

const isCollapsible = computed(() => props.hashtags.length > COLLAPSE_THRESHOLD)

const visibleHashtags = computed(() => {
  if (expanded.value || !isCollapsible.value) return props.hashtags
  const head = props.hashtags.slice(0, COLLAPSE_THRESHOLD)
  const headSet = new Set(head)
  const activeOutsideHead = props.hashtags.filter(
    (tag) => props.selected.includes(tag) && !headSet.has(tag)
  )
  return [...head, ...activeOutsideHead]
})

const hiddenCount = computed(() => props.hashtags.length - visibleHashtags.value.length)

function toggle(tag: string) {
  if (props.selected.includes(tag)) {
    emit('update:selected', props.selected.filter((t) => t !== tag))
  } else {
    emit('update:selected', [...props.selected, tag])
  }
}
</script>

<style scoped>
.fiches-panel {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}

.fiches-panel__head {
  flex-shrink: 0;
  padding: var(--space-sm) var(--space-md);
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}

.fiches-panel__intention {
  margin: 0 0 var(--space-xs);
  font-size: var(--fs-sm);
  line-height: var(--lh-base);
  color: var(--text-muted);
}

.fiches-panel__count {
  margin: 0 0 var(--space-xs);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--text-subtle);
}

.fiches-panel__chips {
  margin-top: var(--space-2xs);
}

.fiches-panel__body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: var(--space-md);
}

.fiches-panel__empty {
  margin: var(--space-xl) 0;
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

.fiches-panel__grid {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: var(--space-sm);
}

@media (min-width: 768px) {
  .fiches-panel__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1280px) {
  .fiches-panel__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
</style>