Essai de faire un composant plus logique qui englobe le bouton en entier...

Essai de faire un composant plus logique qui englobe le bouton en entier d'ouverture de la bibliothèque des cas types

src/lib/components/test_cases/TestCasesStackRepresentation.svelte

-<script>
+<script lang="ts">
   import PictoBigEnfant from "$lib/components/pictos/PictoBigEnfant.svelte"
   import PictoBigParent from "$lib/components/pictos/PictoBigParent.svelte"
+  import type { DisplayMode } from "$lib/displays"
+  interface Props {
+    displayMode: DisplayMode
+  }
+
+  let { displayMode }: Props = $props()
+  let isTestCaseSelectModalOpen = $state(false)
 </script>
 
+<button
+  class="lx-card flex items-start justify-between gap-5 px-7 py-5"
+  onclick={() => (isTestCaseSelectModalOpen = true)}
+>
+  <div class="flex flex-col">
+    <span class="text-start text-lg font-bold 2xl:text-xl">
+      {#if displayMode.parametersVariableName === undefined}
+        Choisir un cas type
+      {:else}
+        Bibliothèque des cas types
+      {/if}
+    </span>
+    <span class="max-w-48 text-start text-sm">
+      Sélectionner un ménage parmi tous ceux disponibles
+    </span>
+  </div>
   <div class="flex flex-col items-center">
     <div class="flex h-[7px] w-[80%] rounded-t border bg-gray-100"></div>
     <div
@@ -16,3 +39,4 @@
       <PictoBigEnfant />
     </div>
   </div>
+</button>

src/routes/+page.svelte

@@ -1804,26 +1804,8 @@
                           </a>
                         {/if}
                       {/if}
-                      <button
-                        class="lx-card flex items-start justify-between gap-5 px-7 py-5"
-                        onclick={() => (isTestCaseSelectModalOpen = true)}
-                      >
-                        <div class="flex flex-col">
-                          <span
-                            class="text-start text-lg font-bold 2xl:text-xl"
-                          >
-                            {#if displayMode.parametersVariableName === undefined}
-                              Choisir un cas type
-                            {:else}
-                              Bibliothèque des cas types
-                            {/if}
-                          </span>
-                          <span class="max-w-48 text-start text-sm">
-                            Sélectionner un ménage parmi tous ceux disponibles
-                          </span>
-                        </div>
-                        <TestCasesStackRepresentation />
-                      </button>
+                      <TestCasesStackRepresentation {displayMode} />
+                      <!-- bind:isOpen={isTestCaseSelectModalOpen} -->
                     </div>
                   {/if}
                 </div>