Ajout des cas types par dixième

src/lib/components/variables/VariableDetail.svelte

@@ -28,9 +28,21 @@
     dateStyle: "medium",
   }).format
   const dispatch = createEventDispatcher()
+  const formatLongOrdinalSup = (n: number) => {
+    const rule = ordinalPluralRules.select(n)
+    const suffix = longOrdinalSuffixes.get(rule)
+    return `${n}<sup>${suffix}</sup>`
+  }
+  const longOrdinalSuffixes = new Map([
+    ["other", "ème"],
+    ["one", "er"],
+  ])
+  const ordinalPluralRules = new Intl.PluralRules("fr-FR", { type: "ordinal" })
   const testCases = getContext("testCases") as Writable<Situation[]>
   const year = getContext("year") as Writable<number>
 
+  let selectedDixieme = "1"
+
   // Note: A reform decomposition is always more complete than a decomposition before reform.
   // And the children of a reform decomposition always contain the children of the decomposition
   // before reform.
@@ -87,6 +99,23 @@
         }
       }),
   )
+
+  $: testCaseByDixieme = $testCases.reduce(
+    (result: { [dixieme: number]: [] }, testCase, index) => {
+      if (testCase.dixieme !== undefined) {
+        const dixieme = `${testCase.dixieme}`
+        if (result[dixieme] === undefined) {
+          result[dixieme] = []
+        }
+        result[dixieme].push({
+          ...testCase,
+          index,
+        })
+      }
+      return result
+    },
+    {},
+  )
 </script>
 
 <aside
@@ -277,6 +306,61 @@
             >&nbsp;{label}&nbsp;</span
           >» avec des cas types représentatifs :
         </span>
+        <div class="flex justify-between gap-1">
+          {#each Object.keys(testCaseByDixieme) as dixieme}
+            <button
+              class="px-2 py-1 text-sm bg-neutral-100 border-y-4 border-transparent border-opacity-80 shadow"
+              class:shrink-0={dixieme === "1" || dixieme === "10"}
+              class:z-20={selectedDixieme === dixieme}
+              class:bg-white={selectedDixieme === dixieme}
+              class:border-t-neutral-500={selectedDixieme === dixieme}
+              class:hover:bg-neutral-50={selectedDixieme !== dixieme}
+              class:hover:border-t-neutral-300={selectedDixieme !== dixieme}
+              class:shadow={selectedDixieme !== dixieme}
+              on:click={() => (selectedDixieme = dixieme)}
+            >
+              <span class="font-semibold"
+                >{@html formatLongOrdinalSup(dixieme)} dixième</span
+              >
+              {#if dixieme === "1"}
+                <br />
+                <span>Le plus pauvre</span>
+              {:else if dixieme === "10"}
+                <br />
+                <span>Le plus riche</span>
+              {/if}
+            </button>
+          {/each}
+        </div>
+        <div
+          class="relative z-10 grid grid-cols-3 gap-5 p-3 bg-white shadow-[0_-4px_6px_-1px_rgb(0,0,0,0.1),0_-2px_4px_-2px_rgb(0,0,0,0.1)]"
+        >
+          {#each testCaseByDixieme[selectedDixieme] as testCase}
+            <a
+              class="group flex items-center gap-3 p-2 bg-neutral-100 border-b-4 border-b-le-vert-400 shadow-md hover:border-b-le-jaune-very-dark hover:scale-105 hover:shadow-lg transition-all"
+              href={newSimulationUrl({
+                parametersVariableName: name,
+                testCasesIndex: [testCase.index],
+                tab: "dispositif",
+              })}
+            >
+              <div class="shrink-0 grid grid-cols-6">
+                <TestCasePictos
+                  classes="[&>svg]:w-7 [&>svg]:h-7 col-span-3 last:odd:col-start-3 justify-center"
+                  situation={testCase}
+                  year={$year}
+                />
+              </div>
+              <span class="text-start text-sm">
+                {testCase.title}
+              </span>
+              <iconify-icon
+                class="text-le-vert-400 text-xl self-end group-hover:text-le-jaune-very-dark"
+                icon="ri-arrow-right-line"
+              />
+            </a>
+          {/each}
+        </div>
       </div>
     </AccordionItem>
   </Accordion>