decision/frontend/app/components/chemin/CheminScope.vue

<script setup lang="ts">
// « Concernés » — perimeter editor of the tunnel. The computed first-rank
// people are a FLOOR: no individual removal, ever. Widening is free.
import type { Decision, Person } from '~/types/domain'
import { useCollectiveStore } from '~/stores/collective'

const props = defineProps<{
  scope: Decision['scope']
  stack: { person: Person; origin?: 'computed' | 'declared'; reason?: string }[]
}>()
const emit = defineEmits<{ (e: 'update:scope', scope: Decision['scope']): void }>()

const col = useCollectiveStore()
const tappedReason = ref('')

const others = computed(() => col.people.filter(p => !p.isMe))

function patch(partial: Partial<Decision['scope']>) {
  emit('update:scope', {
    selfOnly: props.scope.selfOnly,
    circleIds: [...props.scope.circleIds],
    personIds: [...props.scope.personIds],
    ...partial,
  })
}

function setSelfOnly(value: boolean) {
  patch(value ? { selfOnly: true, circleIds: [], personIds: [] } : { selfOnly: false })
}

function toggleCircle(id: string) {
  const ids = props.scope.circleIds.includes(id)
    ? props.scope.circleIds.filter(c => c !== id)
    : [...props.scope.circleIds, id]
  patch({ selfOnly: false, circleIds: ids })
}

function togglePerson(id: string) {
  const ids = props.scope.personIds.includes(id)
    ? props.scope.personIds.filter(p => p !== id)
    : [...props.scope.personIds, id]
  patch({ selfOnly: false, personIds: ids })
}

function showReason(entry: { person: Person; reason?: string }) {
  tappedReason.value = entry.reason
    ? `${entry.person.displayName} — ${entry.reason}`
    : entry.person.displayName
}
</script>

<template>
  <!-- ld-v2 -->
  <div class="cs">
    <div class="cs__modes">
      <button
        class="cs__mode"
        :class="{ 'cs__mode--active': scope.selfOnly }"
        type="button"
        @click="setSelfOnly(true)"
      >
        Moi seul
      </button>
      <button
        class="cs__mode"
        :class="{ 'cs__mode--active': !scope.selfOnly }"
        type="button"
        @click="setSelfOnly(false)"
      >
        D'autres que moi
      </button>
    </div>

    <template v-if="!scope.selfOnly">
      <div v-if="stack.length > 0" class="cs__stack">
        <LdAvatarStack :people="stack" :max="8" :size="30" @tap="showReason" />
        <span class="cs__count">{{ stack.length }} concerné·e·s</span>
      </div>
      <p v-if="tappedReason" class="cs__reason">{{ tappedReason }}</p>

      <div v-if="col.circles.length > 0" class="cs__group">
        <span class="cs__label">Cercles</span>
        <div class="cs__chips">
          <button
            v-for="circle in col.circles"
            :key="circle.id"
            class="cs__chip"
            :class="{ 'cs__chip--on': scope.circleIds.includes(circle.id) }"
            type="button"
            @click="toggleCircle(circle.id)"
          >
            <UIcon
              :name="circle.kind === 'place' ? 'i-lucide-map-pin'
                : circle.kind === 'theme' ? 'i-lucide-tag' : 'i-lucide-users'"
            />
            <span>{{ circle.name }}</span>
          </button>
        </div>
      </div>

      <div v-if="others.length > 0" class="cs__group">
        <span class="cs__label">Personnes nommées</span>
        <div class="cs__chips">
          <button
            v-for="person in others"
            :key="person.id"
            class="cs__chip"
            :class="{ 'cs__chip--on': scope.personIds.includes(person.id) }"
            type="button"
            @click="togglePerson(person.id)"
          >
            {{ person.displayName }}
          </button>
        </div>
      </div>

      <p class="cs__floor">
        On ne retire pas un·e concerné·e en premier lieu — le périmètre s'élargit librement,
        jamais en dessous du calcul.
      </p>
    </template>
  </div>
</template>

<style scoped>
.cs { display: flex; flex-direction: column; gap: 0.75rem; }
.cs__modes { display: flex; gap: 0.5rem; }
.cs__mode {
  padding: 0.4rem 1rem;
  border-radius: var(--r-pill);
  font-size: 0.875rem;
  font-weight: 700;
  background: var(--mood-input-bg);
  color: var(--mood-text-muted);
  cursor: pointer;
}
.cs__mode--active { background: var(--mood-accent); color: var(--mood-accent-text); }
.cs__stack { display: flex; align-items: center; gap: 0.625rem; }
.cs__count { font-size: 0.8125rem; font-weight: 600; color: var(--mood-text-muted); }
.cs__reason { margin: 0; font-size: 0.8125rem; color: var(--mood-accent); }
.cs__group { display: flex; flex-direction: column; gap: 0.4rem; }
.cs__label {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--mood-text-muted);
}
.cs__chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.cs__chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.35rem 0.75rem;
  border-radius: var(--r-pill);
  font-size: 0.8125rem;
  font-weight: 600;
  background: var(--mood-input-bg);
  color: var(--mood-text-muted);
  cursor: pointer;
  min-height: 2.25rem;
}
.cs__chip--on {
  background: var(--mood-accent-soft);
  color: var(--mood-accent);
  box-shadow: 0 0 0 1.5px var(--mood-accent);
}
.cs__floor {
  margin: 0;
  font-size: 0.75rem;
  font-style: italic;
  color: var(--mood-text-muted);
}
</style>