projects : prepare empty state

src/components/Projects.vue

@@ -1,35 +1,35 @@
 <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'"
-      id="projets-en-cours"
-      role="tabpanel"
-      tabindex="0"
-      aria-labelledby="projets-en-cours-label"
-      class="flow"
-    >
-      <Project
-        v-for="project in currentProjects"
-        :key="project.id"
-        :project="project"
-      />
-    </section>
-    <section
-      v-else
-      id="projets-archives"
-      role="tabpanel"
-      tabindex="0"
-      aria-labelledby="projet-archives-label"
-    >
-      <Project
-        v-for="project in archivedProjects"
-        :key="project.id"
-        :project="project"
-      />
-    </section>
-  </template>
+  <Tabs :tabs="tabs" @update:currentTab="changeTab" />
+  <section
+    v-if="currentTab === 'currentProjects'"
+    id="projets-en-cours"
+    role="tabpanel"
+    tabindex="0"
+    aria-labelledby="projets-en-cours-label"
+    class="flow"
+    :class="{ empty: currentProjects.length === 0 }"
+  >
+    <Project
+      v-for="project in currentProjects"
+      :key="project.id"
+      :project="project"
+    />
+  </section>
+  <section
+    v-else
+    id="projets-archives"
+    role="tabpanel"
+    tabindex="0"
+    aria-labelledby="projet-archives-label"
+    :class="{ empty: archivedProjects.length === 0 }"
+  >
+    <Project
+      v-for="project in archivedProjects"
+      :key="project.id"
+      :project="project"
+    />
+  </section>
 </template>
 <script setup>
 import Tabs from "./Tabs.vue";

src/components/Tabs.vue

@@ -4,12 +4,12 @@
     <button
       v-for="tab in tabs"
       :key="tab.label"
-      :id="slugify(tab.label, {lower: true}) + '-label'"
+      :id="slugify(tab.label, { lower: true }) + '-label'"
       type="button"
       role="tab"
       :data-icon="tab.icon ?? null"
       :aria-selected="tab.isActive"
-      :aria-controls="slugify(tab.label, {lower: true})"
+      :aria-controls="slugify(tab.label, { lower: true })"
       :tabindex="tab.isActive ? '-1' : null"
       @click="changeTab(tab.id)"
     >
@@ -107,7 +107,6 @@ function changeTab(tabId) {
   --icon-color: var(--color-brand);
 }
 
-
 [role="tabpanel"] {
   width: 100%;
   overflow: auto;