design to light button and panel working without indicators

src/App.vue

@@ -4,13 +4,19 @@
     <Menu />
     <RouterView />
   </div>
+  <DTLPanel v-if="isDTLPanelOpen" />
+  <DTLButton @click="isDTLPanelOpen = !isDTLPanelOpen" />
 </template>
 
 <script setup>
-import { useUserStore } from "./stores/user";
 import { storeToRefs } from "pinia";
 import Menu from "./components/Menu.vue";
 import { usePageStore } from "./stores/page";
+import DTLButton from "./components/design-to-light/DTLButton.vue";
+import DTLPanel from "./components/design-to-light/DTLPanel.vue";
+import { ref } from "vue";
 
 const { page } = storeToRefs(usePageStore());
+
+const isDTLPanelOpen = ref(false);
 </script>

src/components/design-to-light/DTLButton.vue

@@ -0,0 +1,11 @@
+<template>
+  <button v-if="page?.designToLight?.grade">
+    {{ page.designToLight.grade }}
+  </button>
+</template>
+<script setup>
+import { storeToRefs } from "pinia";
+import { usePageStore } from "../../stores/page";
+
+const { page } = storeToRefs(usePageStore());
+</script>

src/components/design-to-light/DTLPanel.vue

@@ -0,0 +1,34 @@
+<template>
+  <aside>
+    <p>Données basées sur la proposition du {{ frenchFormattedModified }}</p>
+    <p>{{ page.designToLight.stepLabel }}</p>
+  </aside>
+</template>
+<script setup>
+import { storeToRefs } from "pinia";
+import { usePageStore } from "../../stores/page";
+import dayjs from "dayjs";
+import "dayjs/locale/fr";
+
+dayjs.locale("fr");
+
+const { page } = storeToRefs(usePageStore());
+
+const frenchFormattedModified = dayjs(page.value.designToLight.date).format(
+  "dddd D MMMM YYYY"
+);
+</script>
+
+<style scoped>
+aside {
+  position: fixed;
+  right: 1rem;
+  top: 1rem;
+  bottom: 1rem;
+  padding: 0.7rem;
+  width: 30vw;
+  border-radius: 1rem;
+  background-color: #191919;
+  color: #fff;
+}
+</style>