Portfolio-Game/frontend/app/components/feature/ProgressIcon.vue

<script setup lang="ts">
const { t } = useI18n()
const progressionStore = useProgressionStore()

const showDrawer = ref(false)

const sections = computed(() => [
  {
    key: 'projets',
    name: t('progress.sections.projects'),
    visited: progressionStore.visitedSections.includes('projets'),
  },
  {
    key: 'competences',
    name: t('progress.sections.skills'),
    visited: progressionStore.visitedSections.includes('competences'),
  },
  {
    key: 'temoignages',
    name: t('progress.sections.testimonials'),
    visited: progressionStore.visitedSections.includes('temoignages'),
  },
  {
    key: 'parcours',
    name: t('progress.sections.journey'),
    visited: progressionStore.visitedSections.includes('parcours'),
  },
])

const visitedCount = computed(() => sections.value.filter((s) => s.visited).length)
const remainingCount = computed(() => 4 - visitedCount.value)
</script>

<template>
  <button
    type="button"
    class="progress-icon relative p-3"
    :aria-label="t('progress.label', { percent: progressionStore.completionPercent })"
    @click="showDrawer = true"
  >
    <div class="relative w-8 h-8">
      <svg class="w-full h-full -rotate-90" viewBox="0 0 36 36">
        <circle
          cx="18"
          cy="18"
          r="16"
          fill="none"
          stroke="currentColor"
          stroke-width="3"
          class="text-sky-dark-100"
        />
        <circle
          cx="18"
          cy="18"
          r="16"
          fill="none"
          stroke="currentColor"
          stroke-width="3"
          stroke-linecap="round"
          class="text-sky-accent"
          :stroke-dasharray="`${progressionStore.completionPercent}, 100`"
        />
      </svg>
      <span
        class="absolute inset-0 flex items-center justify-center text-xs font-ui font-bold text-sky-text"
      >
        {{ progressionStore.completionPercent }}
      </span>
    </div>
  </button>

  <Teleport to="body">
    <Transition name="fade">
      <div
        v-if="showDrawer"
        class="fixed inset-0 bg-black/50 z-40"
        @click="showDrawer = false"
      />
    </Transition>

    <Transition name="slide-up">
      <div
        v-if="showDrawer"
        class="fixed inset-x-0 bottom-0 z-50 bg-sky-dark-50 rounded-t-2xl shadow-xl p-4 pb-8"
        style="bottom: var(--bottom-bar-height, 64px)"
      >
        <div class="w-12 h-1 bg-sky-dark-100 rounded-full mx-auto mb-4" />

        <h3 class="text-lg font-ui font-bold text-sky-text mb-4">
          {{ t('progress.title') }}
        </h3>

        <FeatureProgressBar
          :percent="progressionStore.completionPercent"
          :show-tooltip="false"
          compact
          class="mb-4"
        />

        <ul class="space-y-2 mb-4">
          <li
            v-for="section in sections"
            :key="section.key"
            class="flex items-center gap-2 text-sm"
          >
            <span v-if="section.visited" class="text-green-400" aria-hidden="true">&#10003;</span>
            <span v-else class="text-sky-text-muted" aria-hidden="true">&#9675;</span>
            <span :class="section.visited ? 'text-sky-text' : 'text-sky-text-muted'">
              {{ section.name }}
            </span>
          </li>
        </ul>

        <p class="text-xs text-sky-text-muted mb-4">
          {{ t('progress.summary', { visited: visitedCount, remaining: remainingCount }) }}
        </p>

        <button
          type="button"
          class="w-full py-2 bg-sky-dark-100 rounded-lg text-sky-text font-ui hover:bg-sky-dark-200 transition-colors"
          @click="showDrawer = false"
        >
          {{ t('common.close') }}
        </button>
      </div>
    </Transition>
  </Teleport>
</template>

<style scoped>
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

.slide-up-enter-active,
.slide-up-leave-active {
  transition: transform 0.3s ease;
}

.slide-up-enter-from,
.slide-up-leave-to {
  transform: translateY(100%);
}

@media (prefers-reduced-motion: reduce) {
  .fade-enter-active,
  .fade-leave-active,
  .slide-up-enter-active,
  .slide-up-leave-active {
    transition: none;
  }
}
</style>