decision/frontend/app/components/onboarding/OnboardingIdentity.vue

<script lang="ts">
/** The six accent swatches offered at creation — well-water field, shared with /creer. */
export interface ColorChoice {
  hex: string
  label: string
}

export const COLOR_CHOICES: ColorChoice[] = [
  { hex: '#0f7fa8', label: 'Eau vive' },
  { hex: '#2e8a72', label: 'Eau végétale' },
  { hex: '#4f7a3c', label: 'Mousse' },
  { hex: '#96682a', label: 'Bronze' },
  { hex: '#b0563c', label: 'Terre cuite' },
  { hex: '#5c68b8', label: 'Iris' },
]
</script>

<script setup lang="ts">
/** Étape 1 — nom du collectif, couleur, ambiance. Entrée valide l'étape. */
const name = defineModel<string>('name', { required: true })
const color = defineModel<string>('color', { required: true })

const emit = defineEmits<{ next: [] }>()

const { moods, currentMood, setMood } = useLibreMood()

const nameInput = ref<HTMLInputElement | null>(null)
onMounted(() => nameInput.value?.focus())
</script>

<template>
  <!-- ld-v2 -->
  <section class="idstep">
    <label class="field">
      <span class="field__label">Le nom de votre collectif</span>
      <input
        ref="nameInput"
        v-model="name"
        class="field__input"
        type="text"
        placeholder="Les Jardins du Canal…"
        autocomplete="off"
        enterkeyhint="next"
        @keydown.enter.prevent="emit('next')"
      >
    </label>

    <div class="field">
      <span class="field__label">Sa couleur</span>
      <div class="swatches" role="group" aria-label="Couleur du collectif">
        <button
          v-for="c in COLOR_CHOICES"
          :key="c.hex"
          type="button"
          class="swatch"
          :class="{ 'swatch--active': color === c.hex }"
          :style="{ background: c.hex }"
          :aria-label="c.label"
          :aria-pressed="color === c.hex"
          :title="c.label"
          @click="color = c.hex"
        />
      </div>
    </div>

    <div class="field">
      <span class="field__label">L'ambiance de tes écrans</span>
      <div class="moods" role="group" aria-label="Ambiance">
        <button
          v-for="m in moods"
          :key="m.id"
          type="button"
          class="mood-pill"
          :class="{ 'mood-pill--active': currentMood === m.id }"
          :aria-pressed="currentMood === m.id"
          @click="setMood(m.id)"
        >
          <span class="mood-pill__dot" :style="{ background: m.color }" />
          {{ m.label }}
        </button>
      </div>
      <p class="field__hint">L'ambiance ne vaut que pour toi, sur cette machine.</p>
    </div>
  </section>
</template>

<style scoped>
.idstep {
  display: flex;
  flex-direction: column;
  gap: clamp(1.25rem, 3vw, 1.75rem);
  width: min(100%, 26rem);
  margin-inline: auto;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.field__label {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--mood-text-muted);
}

.field__input {
  min-height: 2.75rem;
  padding: 0.6rem 0.9rem;
  font-size: 1.0625rem;
  font-weight: 600;
  box-shadow: inset 0 0 0 1.5px var(--mood-input-border);
  border-radius: var(--r-input);
}
.field__input:focus-visible {
  box-shadow: inset 0 0 0 1.5px var(--mood-input-focus), 0 0 0 2.5px var(--mood-accent-soft);
}

.field__hint {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--mood-text-muted);
}

.swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.swatch {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  cursor: pointer;
  padding: 0;
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.35), 0 1px 3px var(--mood-shadow);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.swatch:hover { transform: translateY(-1px) scale(1.08); }
.swatch:active { transform: translateY(0); }
.swatch--active {
  box-shadow:
    inset 0 0 0 1.5px rgba(255, 255, 255, 0.35),
    0 0 0 2.5px var(--mood-bg),
    0 0 0 5px var(--mood-accent);
}

.moods {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.mood-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 2.25rem;
  padding: 0.35rem 0.9rem;
  border-radius: var(--r-pill);
  font-size: 0.9375rem;
  font-weight: 600;
  cursor: pointer;
  background: var(--mood-surface);
  color: var(--mood-text);
  box-shadow: var(--shadow-card);
  transition: transform 0.1s ease, box-shadow 0.12s ease;
}
.mood-pill:hover { transform: translateY(-1px); }
.mood-pill:active { transform: translateY(0); }
.mood-pill--active {
  box-shadow: var(--shadow-card), 0 0 0 2px var(--mood-accent);
  color: var(--mood-accent);
}

.mood-pill__dot {
  width: 0.8rem;
  height: 0.8rem;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);
}
</style>