decision/maquette/frontend/app/components/feed/FeedWindowCard.vue

<script setup lang="ts">
// Objection window card — « Ça me va » creates an Assent; « J'objecte » unfolds
// a small argument form (content or boundary). The countdown pauses when the
// boundary is contested; non-easy windows show the explicit-agreement mention.
import type { Decision } from '~/types/domain'
import { ASSENT_MISSING, ROUTE_ICONS, WINDOW_OBJECT, WINDOW_OK } from '~/lexicon'
import { useCollectiveStore } from '~/stores/collective'
import { useDecisionsStore } from '~/stores/decisions'

const props = defineProps<{ decision: Decision }>()

const col = useCollectiveStore()
const decisions = useDecisionsStore()

const objecting = ref(false)
const argument = ref('')
const error = ref('')

const myAssent = computed(() =>
  col.assents.some(a => a.decisionId === props.decision.id && a.personId === col.me?.id),
)
const myObjection = computed(() =>
  col.objections.some(
    o => o.decisionId === props.decision.id && o.personId === col.me?.id && o.status === 'open',
  ),
)
/** Non-easy windows adopt only on an explicit third-party agreement. */
const needsExplicitAssent = computed(
  () =>
    props.decision.reversibility !== 'easy'
    && !col.assents.some(
      a => a.decisionId === props.decision.id && a.personId !== props.decision.authorId,
    ),
)

function agree() {
  const res = decisions.assentTo(props.decision.id)
  error.value = 'ok' in res ? res.reason : ''
}

function sendObjection(kind: 'content' | 'boundary') {
  const res = decisions.objectTo(props.decision.id, kind, argument.value)
  if ('ok' in res) {
    error.value = res.reason
    return
  }
  error.value = ''
  argument.value = ''
  objecting.value = false
}
</script>

<template>
  <!-- ld-v2 -->
  <FeedItemCard
    :title="decision.title"
    :icon="ROUTE_ICONS[decision.route]"
    :tint="`var(--route-${decision.route})`"
    :to="`/decisions/${decision.id}`"
  >
    <template #meta>
      <LdCountdown :ends-at="decision.windowEndsAt" :suspended-at="decision.windowSuspendedAt" />
      <span v-if="needsExplicitAssent" class="fw-mention">{{ ASSENT_MISSING }}</span>
    </template>

    <p v-if="error" class="fw-error">{{ error }}</p>

    <template #actions>
      <template v-if="myAssent">
        <span class="fw-done"><UIcon name="i-lucide-check" /> Ton accord est noté</span>
      </template>
      <template v-else-if="myObjection">
        <span class="fw-done"><UIcon name="i-lucide-hand" /> Ton objection est déposée</span>
      </template>
      <template v-else-if="!objecting">
        <button class="ld-btn fw-btn" type="button" @click="agree">{{ WINDOW_OK }}</button>
        <button class="ld-btn ld-btn--ghost fw-btn" type="button" @click="objecting = true">
          {{ WINDOW_OBJECT }}
        </button>
      </template>
      <div v-else class="fw-form">
        <textarea
          v-model="argument"
          class="fw-form__text"
          rows="2"
          placeholder="Une objection s'argumente — écris pourquoi."
        />
        <div class="fw-form__row">
          <button class="ld-btn fw-btn" type="button" @click="sendObjection('content')">
            Sur le fond
          </button>
          <button class="ld-btn ld-btn--ghost fw-btn" type="button" @click="sendObjection('boundary')">
            Sur la frontière
          </button>
          <button class="ld-btn ld-btn--quiet fw-btn" type="button" @click="objecting = false">
            Annuler
          </button>
        </div>
      </div>
    </template>
  </FeedItemCard>
</template>

<style scoped>
.fw-mention {
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--mood-status-fenetre);
}
.fw-error { margin: 0; font-size: 0.8125rem; color: var(--mood-error); }
.fw-done {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--mood-status-vigueur);
}
.fw-btn { font-size: 0.875rem; padding: 0.4rem 1rem; }
.fw-form { display: flex; flex-direction: column; gap: 0.5rem; width: 100%; }
.fw-form__text { width: 100%; padding: 0.625rem 0.75rem; font-size: 0.9375rem; resize: vertical; }
.fw-form__row { display: flex; flex-wrap: wrap; gap: 0.5rem; }
</style>