decision/frontend/app/components/common/ToolboxVignette.vue

<script setup lang="ts">
/**
 * ToolboxVignette — Carte compacte, collapsible, bullet points + actions.
 */

export interface ToolboxAction {
  label: string
  icon?: string
  to?: string
  emit?: string
  primary?: boolean
}

const props = withDefaults(
  defineProps<{
    title: string
    bullets?: string[]
    actions?: ToolboxAction[]
    defaultOpen?: boolean
  }>(),
  {
    bullets: undefined,
    actions: undefined,
    defaultOpen: false,
  },
)

const emit = defineEmits<{
  action: [actionEmit: string]
}>()

const open = ref(props.defaultOpen)

const defaultActions: ToolboxAction[] = [
  { label: 'Tutos', icon: 'i-lucide-graduation-cap', emit: 'tutos' },
  { label: 'Formules', icon: 'i-lucide-calculator', emit: 'formules' },
  { label: 'Demarrer', icon: 'i-lucide-play', emit: 'demarrer', primary: true },
]

const resolvedActions = computed(() => props.actions ?? defaultActions)

function handleAction(action: ToolboxAction) {
  if (action.to) {
    navigateTo(action.to)
  }
  else if (action.emit) {
    emit('action', action.emit)
  }
}
</script>

<template>
  <div class="vignette" :class="{ 'vignette--open': open }">
    <button class="vignette__header" @click="open = !open">
      <h4 class="vignette__title">{{ title }}</h4>
      <UIcon name="i-lucide-chevron-down" class="vignette__chevron" />
    </button>
    <div v-show="open" class="vignette__content">
      <ul v-if="bullets && bullets.length > 0" class="vignette__bullets">
        <li v-for="(b, i) in bullets" :key="i">{{ b }}</li>
      </ul>
      <div class="vignette__actions">
        <button
          v-for="action in resolvedActions"
          :key="action.label"
          class="vignette__btn"
          :class="{ 'vignette__btn--primary': action.primary }"
          @click="handleAction(action)"
        >
          <UIcon v-if="action.icon" :name="action.icon" />
          <span>{{ action.label }}</span>
        </button>
      </div>
    </div>
  </div>
</template>

<style scoped>
.vignette {
  background: var(--mood-accent-soft);
  border-radius: 12px;
  overflow: hidden;
}

.vignette__header {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 0.625rem 0.75rem;
  cursor: pointer;
  text-align: left;
  gap: 0.375rem;
  transition: background 0.12s ease;
}

.vignette__header:hover {
  background: color-mix(in srgb, var(--mood-accent) 8%, transparent);
}

.vignette__title {
  flex: 1;
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--mood-text);
  margin: 0;
}

.vignette__chevron {
  font-size: 0.875rem;
  color: var(--mood-text-muted);
  opacity: 0.5;
  transition: transform 0.2s ease;
  flex-shrink: 0;
}

.vignette--open .vignette__chevron {
  transform: rotate(180deg);
  opacity: 1;
  color: var(--mood-accent);
}

.vignette__content {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0 0.75rem 0.625rem;
}

.vignette__bullets {
  margin: 0;
  padding: 0 0 0 1rem;
  font-size: 0.8125rem;
  color: var(--mood-text-muted);
  line-height: 1.5;
  list-style-type: disc;
}
.vignette__bullets li::marker {
  color: var(--mood-accent);
}

.vignette__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin-top: 0.125rem;
}

.vignette__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.5rem 0.875rem;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--mood-accent);
  background: var(--mood-surface);
  border-radius: 20px;
  cursor: pointer;
  transition: transform 0.1s ease, box-shadow 0.1s ease;
  min-height: 2.25rem;
}

@media (min-width: 640px) {
  .vignette__btn {
    padding: 0.375rem 0.75rem;
    min-height: auto;
  }
}

.vignette__btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px var(--mood-shadow);
}

.vignette__btn:active {
  transform: translateY(0);
}

.vignette__btn--primary {
  color: var(--mood-accent-text);
  background: var(--mood-accent);
}
</style>