77dceb49c3
- Systeme de themes adaptatifs : Peps (light chaud), Zen (light calme), Chagrine (dark violet), Grave (dark ambre) avec CSS custom properties - Dashboard d'accueil orienté onboarding avec cartes-portes et teaser boite a outils - SectionLayout reutilisable : liste + sidebar toolbox + status pills cliquables (En prepa / En vote / En vigueur / Clos) - ToolboxVignette : vignettes Contexte / Tutos / Choisir / Demarrer - Seed : Acte engagement certification + forgeron, Runtime Upgrade (decision on-chain), 3 modalites de vote (majoritaire, quadratique, permanent) - Backend adapte SQLite (Uuid portable, 204 fix, pool conditionnel) - Correction noms composants (pathPrefix: false), pinia/nuxt ^0.11 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
55 lines
1.4 KiB
Vue
55 lines
1.4 KiB
Vue
<script setup lang="ts">
|
|
const { currentMood, moods, setMood } = useMood()
|
|
</script>
|
|
|
|
<template>
|
|
<div class="flex items-center gap-1" role="radiogroup" aria-label="Ambiance visuelle">
|
|
<UTooltip
|
|
v-for="mood in moods"
|
|
:key="mood.id"
|
|
:text="`${mood.label} — ${mood.description}`"
|
|
>
|
|
<button
|
|
type="button"
|
|
role="radio"
|
|
:aria-checked="currentMood === mood.id"
|
|
:aria-label="`Ambiance ${mood.label}`"
|
|
class="mood-btn"
|
|
:class="{ 'mood-btn--active': currentMood === mood.id }"
|
|
@click="setMood(mood.id)"
|
|
>
|
|
<UIcon :name="mood.icon" class="text-base" />
|
|
</button>
|
|
</UTooltip>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.mood-btn {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 2rem;
|
|
height: 2rem;
|
|
border-radius: 9999px;
|
|
border: 2px solid transparent;
|
|
background: var(--mood-surface, #f3f4f6);
|
|
color: var(--mood-text-muted, #6b7280);
|
|
cursor: pointer;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.mood-btn:hover {
|
|
background: var(--mood-surface-hover, #e5e7eb);
|
|
color: var(--mood-accent, #4b5563);
|
|
transform: scale(1.1);
|
|
}
|
|
|
|
.mood-btn--active {
|
|
border-color: var(--mood-accent, #3b82f6);
|
|
color: var(--mood-accent, #3b82f6);
|
|
background: var(--mood-accent-soft, #eff6ff);
|
|
box-shadow: 0 0 0 2px var(--mood-shadow, rgba(59, 130, 246, 0.15));
|
|
}
|
|
</style>
|