decision/maquette/frontend/app/components/decisions/DecisionRegistryCard.vue

<script setup lang="ts">
// <!-- ld-v2 --> Registry card: title, tinted route icon, weight, deadline,
// mini vote gauge, 井 badge when engraved, urgency badge. Links to the fiche.
import type { Decision } from '~/types/domain'
import { ROUTE_ICONS, ROUTE_SHORT, URGENT_BADGE } from '~/lexicon'
import { useCollectiveStore } from '~/stores/collective'
import { useDecisionsStore } from '~/stores/decisions'
import { WEIGHT_SHORT, displayStatus, displayStatusLabel } from './decisionUi'

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

const col = useCollectiveStore()
const store = useDecisionsStore()

const session = computed(() =>
  col.sessions
    .filter(s => s.decisionId === props.decision.id)
    .sort((a, b) => (a.opensAt < b.opensAt ? 1 : -1))[0],
)

const shown = computed(() => displayStatus(props.decision, session.value))

/** Mini gauge — cast voices over the arrested list, voting only. */
const gauge = computed(() => {
  const s = session.value
  if (!s || props.decision.status !== 'voting') return null
  const size = Math.max(s.corpusSize, 1)
  const cast = store.activeVotes(s.id).length
  return { cast, size, pct: Math.min(100, Math.round((cast / size) * 100)) }
})

const gaugeTitle = computed(() =>
  gauge.value ? `${gauge.value.cast} voix sur ${gauge.value.size}` : '')

const deadline = computed(() => {
  if (props.decision.windowEndsAt) return props.decision.windowEndsAt
  if (session.value?.status === 'open') return session.value.closesAt
  return undefined
})
</script>

<template>
  <!-- ld-v2 -->
  <NuxtLink :to="`/decisions/${decision.id}`" class="ld-card ld-card--hover reg-card">
    <span class="reg-card__icon" :style="{ color: `var(--route-${decision.route})` }">
      <UIcon :name="ROUTE_ICONS[decision.route]" />
    </span>

    <span class="reg-card__body">
      <span class="reg-card__title">{{ decision.title }}</span>

      <span class="reg-card__meta">
        <span class="status-pill" :class="`status-${shown}`">{{ displayStatusLabel(shown) }}</span>
        <span class="reg-card__chip">{{ ROUTE_SHORT[decision.route] }}</span>
        <span class="reg-card__chip">{{ WEIGHT_SHORT[decision.weight] }}</span>
        <LdCountdown
          v-if="deadline"
          :ends-at="deadline"
          :suspended-at="decision.windowSuspendedAt"
        />
        <span v-if="decision.urgent" class="reg-card__urgent">
          <UIcon name="i-lucide-siren" />
          <span>{{ URGENT_BADGE }}</span>
        </span>
        <span v-if="decision.engraving" class="reg-card__well" title="gravée">井</span>
      </span>

      <span v-if="gauge" class="reg-card__gauge" :title="gaugeTitle">
        <span class="reg-card__gauge-fill" :style="{ width: `${gauge.pct}%` }" />
      </span>
    </span>
  </NuxtLink>
</template>

<style scoped>
.reg-card {
  display: flex;
  align-items: flex-start;
  gap: 0.875rem;
  padding: 1rem 1.125rem;
  text-decoration: none;
  color: var(--mood-text);
}
.reg-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  flex-shrink: 0;
  border-radius: var(--r-icon);
  font-size: 1.25rem;
  background: color-mix(in srgb, currentColor 12%, transparent);
}
.reg-card__body {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-width: 0;
  flex: 1;
}
.reg-card__title {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.reg-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
}
.reg-card__chip {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--mood-text-muted);
  background: var(--mood-accent-soft);
  padding: 3px 10px;
  border-radius: var(--r-pill);
}
.reg-card__urgent {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--route-urgent);
  background: color-mix(in srgb, var(--route-urgent) 11%, transparent);
  padding: 3px 10px;
  border-radius: var(--r-pill);
}
.reg-card__well {
  font-size: 1rem;
  font-weight: 800;
  color: var(--mood-status-vigueur);
  transform: rotate(-10deg);
}
.reg-card__gauge {
  display: block;
  height: 6px;
  border-radius: 3px;
  background: var(--mood-status-vote-bg);
  overflow: hidden;
  max-width: 16rem;
}
.reg-card__gauge-fill {
  display: block;
  height: 100%;
  border-radius: 3px;
  background: var(--mood-status-vote);
  transition: width 0.3s ease;
}
</style>