Refonte design : 4 humeurs, onboarding, sections avec boite a outils
- 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>
This commit is contained in:
65
frontend/app/composables/useMood.ts
Normal file
65
frontend/app/composables/useMood.ts
Normal file
@@ -0,0 +1,65 @@
|
||||
import type { Ref } from 'vue'
|
||||
|
||||
export interface Mood {
|
||||
id: string
|
||||
label: string
|
||||
description: string
|
||||
icon: string
|
||||
isDark: boolean
|
||||
}
|
||||
|
||||
const STORAGE_KEY = 'glibredecision_mood'
|
||||
|
||||
const moods: Mood[] = [
|
||||
{ id: 'peps', label: 'Peps', description: 'Energique et chaleureux', icon: 'i-lucide-sun', isDark: false },
|
||||
{ id: 'zen', label: 'Zen', description: 'Calme et serein', icon: 'i-lucide-leaf', isDark: false },
|
||||
{ id: 'chagrine', label: 'Chagrine', description: 'Profond et subtil', icon: 'i-lucide-moon', isDark: true },
|
||||
{ id: 'grave', label: 'Grave', description: 'Serieux et solennel', icon: 'i-lucide-shield', isDark: true },
|
||||
]
|
||||
|
||||
const currentMood: Ref<string> = ref('peps')
|
||||
|
||||
function applyMood(moodId: string) {
|
||||
if (import.meta.server) return
|
||||
|
||||
const mood = moods.find(m => m.id === moodId)
|
||||
if (!mood) return
|
||||
|
||||
const html = document.documentElement
|
||||
|
||||
// Remove all existing mood classes
|
||||
moods.forEach(m => html.classList.remove(`mood-${m.id}`))
|
||||
|
||||
// Add the new mood class
|
||||
html.classList.add(`mood-${moodId}`)
|
||||
|
||||
// Sync color-mode (light/dark) via Nuxt's useColorMode
|
||||
const colorMode = useColorMode()
|
||||
colorMode.preference = mood.isDark ? 'dark' : 'light'
|
||||
|
||||
// Persist choice
|
||||
localStorage.setItem(STORAGE_KEY, moodId)
|
||||
|
||||
currentMood.value = moodId
|
||||
}
|
||||
|
||||
function setMood(moodId: string) {
|
||||
applyMood(moodId)
|
||||
}
|
||||
|
||||
function initMood() {
|
||||
if (import.meta.server) return
|
||||
|
||||
const saved = localStorage.getItem(STORAGE_KEY)
|
||||
const moodId = saved && moods.some(m => m.id === saved) ? saved : 'peps'
|
||||
applyMood(moodId)
|
||||
}
|
||||
|
||||
export function useMood() {
|
||||
return {
|
||||
currentMood: readonly(currentMood),
|
||||
moods,
|
||||
setMood,
|
||||
initMood,
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user