projects : prepare empty state

src/components/Projects.vue

@@ -1,6 +1,5 @@
 <template>
   <h2 id="tabslist" class="sr-only">Projets</h2>
-  <template v-if="projects.length > 0">
   <Tabs :tabs="tabs" @update:currentTab="changeTab" />
   <section
     v-if="currentTab === 'currentProjects'"
@@ -9,6 +8,7 @@
     tabindex="0"
     aria-labelledby="projets-en-cours-label"
     class="flow"
+    :class="{ empty: currentProjects.length === 0 }"
   >
     <Project
       v-for="project in currentProjects"
@@ -22,6 +22,7 @@
     role="tabpanel"
     tabindex="0"
     aria-labelledby="projet-archives-label"
+    :class="{ empty: archivedProjects.length === 0 }"
   >
     <Project
       v-for="project in archivedProjects"
@@ -30,7 +31,6 @@
     />
   </section>
 </template>
-</template>
 <script setup>
 import Tabs from "./Tabs.vue";
 import Project from "./project/Project.vue";

src/components/Tabs.vue

@@ -107,7 +107,6 @@ function changeTab(tabId) {
   --icon-color: var(--color-brand);
 }
 
-
 [role="tabpanel"] {
   width: 100%;
   overflow: auto;