Amélioration UI du bouton "modifications"

src/lib/components/test_cases/TestCaseRelatedCarousel.svelte

@@ -79,8 +79,9 @@
 
 <div class="flex items-center">
   <button
-    class="z-10 mx-2 hidden h-10 w-10 shrink-0 items-center justify-center rounded-[50%] border-2 bg-gray-50 shadow-md transition-all duration-500 ease-out-back enabled:hover:border-le-vert-500 enabled:active:scale-90 disabled:text-gray-400 md:flex lg:mx-5 2xl:h-12 2xl:w-12"
-    class:scale-0={carouselScrollX <= toleranceOffset}
+    class="z-10 mx-2 hidden h-10 w-10 shrink-0 items-center justify-center rounded-[50%] border-2 bg-gray-50 shadow-md transition-all duration-400 ease-out-back enabled:hover:border-le-vert-500 enabled:active:scale-90 disabled:text-gray-400 md:flex lg:mx-5 2xl:h-12 2xl:w-12"
+    class:opacity-0={carouselScrollX <= toleranceOffset}
+    class:scale-25={carouselScrollX <= toleranceOffset}
     on:click={() => scrollCarousel(false)}
     ><iconify-icon
       class="text-2xl 2xl:text-3xl"
@@ -182,8 +183,9 @@
     <div />
   </div>
   <button
-    class="z-10 mx-2 hidden h-10 w-10 shrink-0 items-center justify-center rounded-[50%] border-2 bg-gray-50 shadow-md transition-all duration-500 ease-out-back enabled:hover:border-le-vert-500 enabled:active:scale-90 disabled:text-gray-400 md:-ml-12 md:flex lg:mx-5 lg:-ml-16 2xl:-ml-[72px] 2xl:h-12 2xl:w-12"
-    class:scale-0={carouselScrollX >= maxScrollX - toleranceOffset}
+    class="z-10 mx-2 hidden h-10 w-10 shrink-0 items-center justify-center rounded-[50%] border-2 bg-gray-50 shadow-md transition-all duration-400 ease-out-back enabled:hover:border-le-vert-500 enabled:active:scale-90 disabled:text-gray-400 md:-ml-12 md:flex lg:mx-5 lg:-ml-16 2xl:-ml-[72px] 2xl:h-12 2xl:w-12"
+    class:opacity-0={carouselScrollX >= maxScrollX - toleranceOffset}
+    class:scale-25={carouselScrollX >= maxScrollX - toleranceOffset}
     on:click={() => scrollCarousel(true)}
     ><iconify-icon
       class="text-2xl 2xl:text-3xl"

src/routes/+page.svelte

@@ -434,13 +434,20 @@
     $budgetSimulation = $budgetSimulationCache.budgetSimulation
   }
 
-  $: isModificationsOpen =
-    isUserModificationsOpen && Object.keys($parametricReform).length > 0
+  $: isModificationsOpen = isUserModificationsOpen && modificationsCount > 0
 
   $: loadParameter($searchParameterName)
 
+  $: modificationsAmendmentCount = Object.keys($parametricReform).length
+
   $: modificationsCount =
-    Object.keys($parametricReform).length + ($billName !== undefined ? 4 : 0)
+    modificationsAmendmentCount + ($billName !== undefined ? 4 : 0)
+
+  $: showBudgetParametersError =
+    displayMode.budget &&
+    Object.keys($parametricReform).some(
+      (parameterName) => !budgetEditableParametersName.has(parameterName),
+    )
 
   function auditSimulationQuery(
     audit: Audit,
@@ -1018,7 +1025,7 @@
           Impacts
         </div>
 
-        {#if Object.keys($parametricReform).length !== 0 && displayMode.mobileLaw}
+        {#if modificationsAmendmentCount !== 0 && displayMode.mobileLaw}
           <span class="flex h-3 w-3">
             <span
               class="absolute inline-flex h-3 w-3 animate-ping rounded-full bg-le-jaune-dark bg-opacity-90"
@@ -1063,7 +1070,7 @@
               >
                 <div slot="activator" class="relative">
                   <div
-                    class="mx-4 flex h-8 grow-0 items-center rounded-md bg-le-jaune px-2 py-1 text-sm uppercase text-black shadow-md hover:bg-le-jaune-dark hover:text-white focus:outline-none active:bg-le-jaune-very-dark active:text-white sm:text-xs md:mx-0 2xl:text-sm"
+                    class="mx-4 flex h-8 grow-0 items-center rounded-md bg-le-jaune-dark px-2 py-1 text-sm uppercase text-white shadow-md hover:bg-le-jaune-very-dark hover:bg-opacity-90 focus:outline-none active:bg-le-jaune-very-dark active:text-white sm:text-xs md:mx-0 2xl:text-sm"
                     class:!bg-gray-200={modificationsCount === 0}
                     class:!text-gray-500={modificationsCount === 0}
                     class:!shadow-none={modificationsCount === 0}
@@ -1077,12 +1084,34 @@
                       ? "1 modification"
                       : `${modificationsCount} modifications`}
                   </div>
-                  {#if displayMode.budget && Object.keys($parametricReform).some((parameterName) => !budgetEditableParametersName.has(parameterName))}
+                  <div class="absolute -top-2 -right-2 flex">
+                    {#if $billName !== undefined}
+                      <span
+                        class="z-10 w-5 h-5 flex justify-center items-center shadow rounded-full bg-le-rouge-bill text-black text-xs font-bold tracking-wider border-[1.5px] border-white transition-all duration-200 ease-out-back translate-x-2"
+                        class:translate-x-6={!showBudgetParametersError}
+                        class:!translate-x-10={modificationsAmendmentCount ===
+                          0}
+                      >
+                        4
+                      </span>
+                    {/if}
+                    <span
+                      class="z-20 w-5 h-5 flex justify-center items-center shadow rounded-full bg-le-jaune text-black text-xs font-bold tracking-wider border-[1.5px] border-white transition-all duration-200 translate-x-1"
+                      class:opacity-0={modificationsAmendmentCount === 0}
+                      class:scale-75={modificationsAmendmentCount === 0}
+                      class:ease-out-back={modificationsAmendmentCount > 0}
+                      class:translate-x-5={!showBudgetParametersError}
+                    >
+                      {modificationsAmendmentCount}
+                    </span>
                     <iconify-icon
                       icon="ri-error-warning-fill"
-                      class="absolute -top-2 -right-2 rounded-full bg-white text-red-700 text-xl"
+                      class="z-30 w-5 h-5 shadow rounded-full bg-white text-red-700 text-xl transition-all duration-200"
+                      class:opacity-0={!showBudgetParametersError}
+                      class:scale-75={!showBudgetParametersError}
+                      class:ease-out-back={showBudgetParametersError}
                     />
-                  {/if}
+                  </div>
                 </div>
 
                 <div
@@ -1092,7 +1121,7 @@
                   aria-orientation="vertical"
                   aria-labelledby="user-menu"
                 >
-                  {#if displayMode.budget && Object.keys($parametricReform).some((parameterName) => !budgetEditableParametersName.has(parameterName))}
+                  {#if showBudgetParametersError}
                     <div class="bg-gray-100 text-xs text-red-700 p-2">
                       <iconify-icon
                         icon="ri-error-warning-line"
@@ -1105,7 +1134,7 @@
                     class="ml-4 h-10 place-self-start text-sm uppercase text-gray-600 disabled:text-gray-400 enabled:hover:text-black"
                     on:click={reset}
                     title="Retirer les modifications de votre réforme"
-                    disabled={Object.keys($parametricReform).length === 0}
+                    disabled={modificationsAmendmentCount === 0}
                   >
                     <iconify-icon
                       class="mr-1 align-[-0.2rem] text-lg"
@@ -1146,7 +1175,7 @@
                 {/if}
 
                 Modifications en cours
-                {#if Object.keys($parametricReform).length !== 0 && displayMode.mobileLaw}
+                {#if modificationsAmendmentCount !== 0 && displayMode.mobileLaw}
                   <iconify-icon
                     class="align-[0.1rem] text-sm text-le-jaune"
                     icon="ri-checkbox-blank-circle-fill"

tailwind.config.cjs

@@ -64,6 +64,18 @@ const config = {
           "50%": { opacity: "60%" },
         },
       },
+      scale: {
+        25: "0.25",
+      },
+      transitionDuration: {
+        250: "250ms",
+        350: "350ms",
+        400: "400ms",
+        450: "450ms",
+        550: "550ms",
+        600: "600ms",
+        650: "650ms",
+      },
       transitionTimingFunction: {
         "in-quad": "cubic-bezier(.55, .085, .68, .53)",
         "in-cubic": "cubic-bezier(.550, .055, .675, .19)",