forked from yvv/decision
YvvandClaude Fable 5
d886302b59
- stores/collective.ts (état local-first, gabarits, import/export, seeds) + stores/decisions.ts (cycle de vie complet : capture→chemin→fenêtres→ sessions→cristallisation→épreuve du réel→révocation) - data/templates.ts : 7 gabarits (Page blanche observatoire-d'abord, 5 points de départ, Institution symétrique) - composables useFeed (13 sections du Fil en sélecteurs purs) + useSearch (index unique Cmd+K/Q0) - shell : layouts default/bare, app.vue mince, useMood v2 (Source/Margelle/ Nappe/Minuit), sceau 井 = logo, LdWorkspaceSelector avec finalité A1, LdAvatarStack (premier/second lieu), LdCountdown (suspension striée) - 338 tests vitest verts, npm run build zéro erreur Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
52 lines
1.3 KiB
Vue
52 lines
1.3 KiB
Vue
<script setup lang="ts">
|
|
/** Quatre pastilles rondes — une par ambiance. Ring accent sur l'actif. */
|
|
const { moods, currentMood, setMood } = useLibreMood()
|
|
</script>
|
|
|
|
<template>
|
|
<!-- ld-v2 -->
|
|
<div class="mood-switcher" role="group" aria-label="Ambiance">
|
|
<UTooltip v-for="m in moods" :key="m.id" :text="m.label">
|
|
<button
|
|
class="mood-dot"
|
|
:class="{ 'mood-dot--active': currentMood === m.id }"
|
|
:style="{ background: m.color }"
|
|
:aria-label="m.label"
|
|
:aria-pressed="currentMood === m.id"
|
|
@click="setMood(m.id)"
|
|
/>
|
|
</UTooltip>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.mood-switcher {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
padding: 0.25rem;
|
|
}
|
|
|
|
.mood-dot {
|
|
width: 1.125rem;
|
|
height: 1.125rem;
|
|
border-radius: 50%;
|
|
cursor: pointer;
|
|
padding: 0;
|
|
flex-shrink: 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;
|
|
}
|
|
.mood-dot:hover {
|
|
transform: translateY(-1px) scale(1.12);
|
|
}
|
|
.mood-dot:active {
|
|
transform: translateY(0);
|
|
}
|
|
.mood-dot--active {
|
|
box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.35),
|
|
0 0 0 2px var(--mood-surface),
|
|
0 0 0 4px var(--mood-accent);
|
|
}
|
|
</style>
|