Fix: Section title as a sticky header

frontend/README.md

@@ -5,7 +5,8 @@ Une fois compilé le frontend utilise [Bun](https://bun.sh/).
 # TODO 
 
 - [ ] Fix : Mettre en forme la liste des cartes sur mobile
-- [ ] Fix : Mettre en forme les titres de liste de carte
+- [x] Fix : Mettre en forme les titres de liste de carte
+- [ ] Fix : Ajouter les icones de couleur pour les tops commandants
 - [ ] Fix : Changer le menu mobile
 - [x] Fix : Changer les cartes recto / verso
 - [ ] Feat : Ajouter la liste des decks dans l'espace decks

frontend/src/lib/components/icons/ArtifactIcon.svelte

@@ -0,0 +1,5 @@
+<script>
+  import IconBase from "./IconBase.svelte";
+</script>
+
+<IconBase src="/assets/artifact.svg" alt="Artifact icon"/>

frontend/src/lib/components/icons/CommanderIcon.svelte

@@ -0,0 +1,5 @@
+<script>
+  import IconBase from "./IconBase.svelte";
+</script>
+
+<IconBase src="/assets/commander.svg" alt="Commander icon"/>

frontend/src/lib/components/icons/CreatureIcon.svelte

@@ -0,0 +1,5 @@
+<script>
+  import IconBase from "./IconBase.svelte";
+</script>
+
+<IconBase src="/assets/creature.svg" alt="Creature icon"/>

frontend/src/lib/components/icons/EnchantmentIcon.svelte

@@ -0,0 +1,5 @@
+<script>
+  import IconBase from "./IconBase.svelte";
+</script>
+
+<IconBase src="/assets/enchantment.svg" alt="Enchantment icon"/>

frontend/src/lib/components/icons/InstantIcon.svelte

@@ -0,0 +1,5 @@
+<script>
+  import IconBase from "./IconBase.svelte";
+</script>
+
+<IconBase src="/assets/instant.svg" alt="Instant icon"/>

frontend/src/lib/components/icons/LandIcon.svelte

@@ -0,0 +1,5 @@
+<script>
+  import IconBase from "./IconBase.svelte";
+</script>
+
+<IconBase src="/assets/land.svg" alt="Land icon"/>

frontend/src/lib/components/icons/PlaneswalkerIcon.svelte

@@ -0,0 +1,5 @@
+<script>
+  import IconBase from "./IconBase.svelte";
+</script>
+
+<IconBase src="/assets/planeswalker.svg" alt="Planeswalker icon"/>

frontend/src/lib/components/icons/SorceryIcon.svelte

@@ -0,0 +1,5 @@
+<script>
+  import IconBase from "./IconBase.svelte";
+</script>
+
+<IconBase src="/assets/sorcery.svg" alt="Sorcery icon"/>

frontend/src/routes/bset/[slug]/+page.svelte

@@ -1,8 +1,15 @@
 <script lang="ts">
   import Card from '$lib/components/Card.svelte';
   import CardGrid from '$lib/components/CardGrid.svelte';
-    import { onMount } from 'svelte';
 	import type { PageProps } from './$types';
+    import ArtifactIcon from '$lib/components/icons/ArtifactIcon.svelte';
+    import InstantIcon from '$lib/components/icons/InstantIcon.svelte';
+    import LandIcon from '$lib/components/icons/LandIcon.svelte';
+    import EnchantmentIcon from '$lib/components/icons/EnchantmentIcon.svelte';
+    import SorceryIcon from '$lib/components/icons/SorceryIcon.svelte';
+    import CreatureIcon from '$lib/components/icons/CreatureIcon.svelte';
+    import PlaneswalkerIcon from '$lib/components/icons/PlaneswalkerIcon.svelte';
+    import CommanderIcon from '$lib/components/icons/CommanderIcon.svelte';
 	let { data }: PageProps = $props();
 
   let commander = $state([])
@@ -35,58 +42,80 @@
 </script>
 
 <div class="flex flex-col w-full items-center">
-  <h1>{slug}</h1>
-
-  <h2>Commandants</h2>
+  <div class="max-w-6xl w-full p-4 sticky top-16 bg-white z-10 flex-row flex items-center gap-2">
+    <CommanderIcon />
+    <h2 class="font-beleren text-2xl">Commandants</h2>
+  </div>
   <CardGrid>
     {#each commander as card}
       <Card card={card} isCommander={true} showUrl={true} />
     {/each}
   </CardGrid>
 
-  <h2>Planeswalker</h2>
+  <div class="max-w-6xl w-full p-4 sticky top-16 bg-white z-10 flex-row flex items-center gap-2 mt-16">
+    <PlaneswalkerIcon />
+    <h2 class="font-beleren text-2xl">Planeswalker</h2>
+  </div>
   <CardGrid>
     {#each planeswalker as card}
       <Card card={card}/>
     {/each}
   </CardGrid>
 
-  <h2>Creature</h2>
+  <div class="max-w-6xl w-full p-4 sticky top-16 bg-white z-10 flex-row flex items-center gap-2 mt-16">
+    <CreatureIcon />
+    <h2 class="font-beleren text-2xl">Créatures</h2>
+  </div>
   <CardGrid>
     {#each creature as card}
       <Card card={card}/>
     {/each}
   </CardGrid>
 
-  <h2>Rituels</h2>
+  <div class="max-w-6xl w-full p-4 sticky top-16 bg-white z-10 flex-row flex items-center gap-2 mt-16">
+    <SorceryIcon />
+    <h2 class="font-beleren text-2xl">Rituels</h2>
+  </div>
   <CardGrid>
     {#each sorcery as card}
       <Card card={card}/>
     {/each}
   </CardGrid>
 
-  <h2>Artefacts</h2>
+  <div class="max-w-6xl w-full p-4 sticky top-16 bg-white z-10 flex-row flex items-center gap-2 mt-16">
+    <ArtifactIcon />
+    <h2 class="font-beleren text-2xl">Artefacts</h2>
+  </div>
   <CardGrid>
     {#each artifact as card}
       <Card card={card}/>
     {/each}
   </CardGrid>
 
-  <h2>Éphémères</h2>
+  <div class="max-w-6xl w-full p-4 sticky top-16 bg-white z-10 flex-row flex items-center gap-2 mt-16">
+    <InstantIcon />
+    <h2 class="font-beleren text-2xl">Éphemères</h2>
+  </div>
   <CardGrid>
     {#each instant as card}
       <Card card={card}/>
     {/each}
   </CardGrid>
 
-  <h2>Enchantements</h2>
+  <div class="max-w-6xl w-full p-4 sticky top-16 bg-white z-10 flex-row flex items-center gap-2 mt-16">
+    <EnchantmentIcon />
+    <h2 class="font-beleren text-2xl">Enchantements</h2>
+  </div>
   <CardGrid>
     {#each enchantment as card}
       <Card card={card}/>
     {/each}
   </CardGrid>
 
-  <h2>Terrains</h2>
+  <div class="max-w-6xl w-full p-4 sticky top-16 bg-white z-10 flex-row flex items-center gap-2 mt-16">
+    <LandIcon />
+    <h2 class="font-beleren text-2xl">Terrains</h2>
+  </div>
   <CardGrid>
     {#each land as card}
       <Card card={card}/>

frontend/src/routes/commander/[slug]/+page.svelte

@@ -1,6 +1,13 @@
 <script lang="ts">
   import Card from '$lib/components/Card.svelte';
   import CardGrid from '$lib/components/CardGrid.svelte';
+    import ArtifactIcon from '$lib/components/icons/ArtifactIcon.svelte';
+    import CreatureIcon from '$lib/components/icons/CreatureIcon.svelte';
+    import EnchantmentIcon from '$lib/components/icons/EnchantmentIcon.svelte';
+    import InstantIcon from '$lib/components/icons/InstantIcon.svelte';
+    import LandIcon from '$lib/components/icons/LandIcon.svelte';
+    import PlaneswalkerIcon from '$lib/components/icons/PlaneswalkerIcon.svelte';
+    import SorceryIcon from '$lib/components/icons/SorceryIcon.svelte';
 	import type { PageProps } from './$types';
 	let { data }: PageProps = $props();
 
@@ -39,52 +46,87 @@
     <Card card={mainCardData} isCommander={true}/>
   </div>
 
-  <h2>Planeswalker</h2>
+  {#if planeswalker != [] && planeswalker != undefined}
+  <div class="max-w-6xl w-full p-4 sticky top-16 bg-white z-10 flex-row flex items-center gap-2 mt-16">
+    <PlaneswalkerIcon />
+    <h2 class="font-beleren text-2xl">Planeswalker</h2>
+  </div>
   <CardGrid>
     {#each planeswalker as card}
       <Card card={card} showSynergy={true} />
     {/each}
   </CardGrid>
+  {/if}
 
-  <h2>Creature</h2>
+  {#if creature != [] && creature != undefined}
+  <div class="max-w-6xl w-full p-4 sticky top-16 bg-white z-10 flex-row flex items-center gap-2 mt-16">
+    <CreatureIcon />
+    <h2 class="font-beleren text-2xl">Créatures</h2>
+  </div>
   <CardGrid>
     {#each creature as card}
       <Card card={card} showSynergy={true} />
     {/each}
   </CardGrid>
+  {/if}
 
-  <h2>Rituels</h2>
+  {#if sorcery != [] && sorcery != undefined}
+  <div class="max-w-6xl w-full p-4 sticky top-16 bg-white z-10 flex-row flex items-center gap-2 mt-16">
+    <SorceryIcon />
+    <h2 class="font-beleren text-2xl">Rituels</h2>
+  </div>
   <CardGrid>
     {#each sorcery as card}
       <Card card={card} showSynergy={true} />
     {/each}
   </CardGrid>
+  {/if}
 
-  <h2>Artefacts</h2>
+  {#if artifact != [] && artifact != undefined}
+  <div class="max-w-6xl w-full p-4 sticky top-16 bg-white z-10 flex-row flex items-center gap-2 mt-16">
+    <ArtifactIcon />
+    <h2 class="font-beleren text-2xl">Artefacts</h2>
+  </div>
   <CardGrid>
     {#each artifact as card}
       <Card card={card} showSynergy={true} />
     {/each}
   </CardGrid>
+  {/if}
 
-  <h2>Éphémères</h2>
+  {#if instant != [] && instant != undefined}
+  <div class="max-w-6xl w-full p-4 sticky top-16 bg-white z-10 flex-row flex items-center gap-2 mt-16">
+    <InstantIcon />
+    <h2 class="font-beleren text-2xl">Éphemères</h2>
+  </div>
   <CardGrid>
     {#each instant as card}
       <Card card={card} showSynergy={true} />
     {/each}
   </CardGrid>
+  {/if}
 
-  <h2>Enchantements</h2>
+  {#if enchantment != [] && enchantment != undefined}
+  <div class="max-w-6xl w-full p-4 sticky top-16 bg-white z-10 flex-row flex items-center gap-2 mt-16">
+    <EnchantmentIcon />
+    <h2 class="font-beleren text-2xl">Enchantements</h2>
+  </div>
   <CardGrid>
     {#each enchantment as card}
       <Card card={card} showSynergy={true} />
     {/each}
   </CardGrid>
+  {/if}
 
-  <h2>Terrains</h2>
+  {#if land != [] && land != undefined}
+  <div class="max-w-6xl w-full p-4 sticky top-16 bg-white z-10 flex-row flex items-center gap-2 mt-16">
+    <LandIcon />
+    <h2 class="font-beleren text-2xl">Terrains</h2>
+  </div>
   <CardGrid>
     {#each land as card}
       <Card card={card} showSynergy={true} />
     {/each}
   </CardGrid>
+  {/if}
 </div>

frontend/src/routes/top/commander/[slug]/+page.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import Card from '$lib/components/Card.svelte';
   import CardGrid from '$lib/components/CardGrid.svelte';
+    import CommanderIcon from '$lib/components/icons/CommanderIcon.svelte';
 	import type { PageProps } from './$types';
 	let { data }: PageProps = $props();
 
@@ -58,9 +59,10 @@
 </script>
 
 <div class="flex flex-col w-full items-center">
-  <h1>{slug}</h1>
-
-  <h2>Commandants</h2>
+  <div class="max-w-6xl w-full p-4 sticky top-16 bg-white z-10 flex-row flex items-center gap-2">
+    <CommanderIcon />
+    <h2 class="font-beleren text-2xl">Top Commandants {slug != "all" ? "- " + slug.charAt(0).toUpperCase() + slug.slice(1) : ""}</h2>
+  </div>
   <CardGrid>
     {#each commander as card}
       <Card card={card} isCommander={true} showUrl={true} />