From 9a6f91a341da5dbf1ddb591e54a09a059e964202 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Cl=C3=A9ment=20Pons?= <clement.pons@stms.fr>
Date: Thu, 5 Jun 2025 17:35:22 +0200
Subject: [PATCH] Finish TrainingViewer and rework character editor style

---
 app.vue                               |   2 +-
 components/TrainingViewer.vue         | 122 +++++++++++++--
 db.sqlite-shm                         | Bin 32768 -> 32768 bytes
 db.sqlite-wal                         | Bin 1277232 -> 2851072 bytes
 pages/character/[id]/edit.client.vue  | 211 ++++++++++++--------------
 pages/character/[id]/index.client.vue |  38 ++---
 pages/character/manage.client.vue     |  54 ++-----
 7 files changed, 229 insertions(+), 198 deletions(-)

diff --git a/app.vue b/app.vue
index 3140f21..a37687e 100644
--- a/app.vue
+++ b/app.vue
@@ -4,7 +4,7 @@
 		<NuxtLoadingIndicator />
 		<TooltipProvider>
 			<NuxtLayout>
-				<div class="xl:px-12 xl:py-8 lg:px-8 lg:py-6 px-6 py-3 flex flex-1 justify-center overflow-auto max-h-full relative">
+				<div class="xl:px-12 xl:py-8 lg:px-8 lg:py-6 px-6 py-3 flex flex-1 justify-center overflow-auto max-h-full relative *:overflow-x-hidden *:w-full *:h-full">
 					<NuxtPage />
 				</div>
 			</NuxtLayout>
diff --git a/components/TrainingViewer.vue b/components/TrainingViewer.vue
index 869d7c7..3c0e588 100644
--- a/components/TrainingViewer.vue
+++ b/components/TrainingViewer.vue
@@ -1,28 +1,120 @@
 <script setup lang="ts">
+import { clamp } from '#shared/general.util';
 import { MAIN_STATS, mainStatTexts, type CharacterConfig } from '~/types/character';
-import PreviewA from './prose/PreviewA.vue';
 
 const { config } = defineProps<{
-    config: CharacterConfig
+    config: CharacterConfig,
 }>();
 
-const position = ref(0);
+const dragger = useTemplateRef<HTMLElement | null>('dragger'), items = useTemplateRef<HTMLElement[] | null>('items');
+const position = ref(0), id = ref<number>(0);
+const dragging = ref(false), offset = ref(0);
+
+const dragend = () => {
+    window.removeEventListener('mousemove', dragmove);
+    window.removeEventListener('mouseup', dragend);
+
+    dragging.value = false;
+};
+const dragmove = (e: MouseEvent) => {
+    const box = dragger.value!.getBoundingClientRect();
+    offset.value = clamp(offset.value - e.movementX, 0, (320+32+2) * 16);
+    if(dragger.value) dragger.value.scrollLeft = offset.value;
+};
+const dragstart = () => {
+    window.addEventListener('mousemove', dragmove);
+    window.addEventListener('mouseup', dragend);
+
+    dragging.value = true;
+};
+const wheel = (e: WheelEvent) => {
+    if(dragging.value) return;
+
+    const box = dragger.value!.getBoundingClientRect();
+    offset.value = clamp(offset.value + e.deltaY, 0, (320+32+2) * 16);
+    if(dragger.value) dragger.value.scrollLeft = offset.value;
+}
+onMounted(() => {
+
+    dragger.value?.addEventListener('mousedown', dragstart);
+    dragger.value?.addEventListener('wheel', wheel);
+
+    transition(1, 0);
+});
+onUnmounted(() => {
+    dragger.value?.removeEventListener('mousedown', dragstart);
+    dragger.value?.removeEventListener('wheel', wheel);
+});
+function transition(from: number, to: number)
+{
+    if(!items.value || from === to)
+        return;
+
+    position.value = to;
+    items.value![to].style.visibility = 'visible';
+    items.value![from].style.opacity = '0';
+    items.value![to].style.opacity = '1';
+
+    for(let i = 0; i < MAIN_STATS.length; i++)
+    {
+        if(i < to)
+            items.value![i].style.top = `-25%`;
+        else
+            items.value![i].style.top = `25%`;
+    }
+    items.value![to].style.top = `0%`;
+
+    clearTimeout(id.value);
+    //@ts-ignore
+    id.value = setTimeout(() => {
+        items.value![from].style.visibility = 'hidden';
+    }, 200);
+}
 </script>
 
-<template>
-    <TabsRoot class="flex flex-1 flex-row justify-start items-stretch w-full" :default-value="MAIN_STATS[0]">
-        <TabsList class="flex flex-col gap-3 relative">
-            <TabsTrigger v-for="(stat, i) of MAIN_STATS" :value="stat" class="block w-2.5 h-2.5 m-px outline outline-1 outline-transparent hover:outline-light-70 dark:hover:outline-dark-70 rounded-full bg-light-40 dark:bg-dark-40 cursor-pointer" @click="position = i"></TabsTrigger>
-            <!-- <TabsIndicator class="absolute left-0 h-[3px] bottom-0 w-[--radix-tabs-indicator-size] translate-x-[--radix-tabs-indicator-position] transition-[width,transform] duration-300 bg-accent-blue"></TabsIndicator> -->
+<!-- <template>
+    <div class="flex flex-1 flex-row justify-start w-full max-h-full h-full overflow-hidden gap-8 relative">
+        <div class="flex flex-col gap-3 relative items-center">
+            <span v-for="(stat, i) of MAIN_STATS" :value="stat" class="block w-2.5 h-2.5 m-px outline outline-1 outline-transparent 
+            hover:outline-light-70 dark:hover:outline-dark-70 rounded-full bg-light-40 dark:bg-dark-40 cursor-pointer" @click="() => transition(position, i)"></span>
             <span :style="{ 'top': position * 1.5 + 'em' }" :data-text="mainStatTexts[MAIN_STATS[position]]" class="rounded-full w-3 h-3 bg-accent-blue absolute transition-[top]
             after:content-[attr(data-text)] after:absolute after:-top-2 after:left-4 after:p-px after:bg-light-0 dark:after:bg-dark-0"></span>
-        </TabsList>
-        <TabsContent v-for="(stat) of MAIN_STATS" :value="stat" class="flex-1">
-            <div class="flex flex-row overflow-x-auto w-full flex-nowrap gap-4">
-                <div class="w-96 flex flex-col gap-4 justify-between" v-for="(level) of config.training[stat]">
-                    <div class="border border-light-35 dark:border-dark-35 px-3 py-1" v-for="(option) of level"><MarkdownRenderer :proses="{ 'a': PreviewA }" :content="option.description.map(e => e.text).join('\n')" /></div>
+        </div>
+        <div class="flex flex-1 flex-col justify-center relative cursor-grab" ref="dragger" :class="{ 'cursor-grabbing': dragging }">
+            <div v-for="(stat) of MAIN_STATS" :value="stat" class="flex-1 transition-[opacity,transform] items-center hidden absolute" ref="items" :style="{ 'left': `${-offset}%` }">
+                <div class="flex flex-row overflow-x-auto items-center w-full gap-4">
+                    <div class="w-96 flex flex-col gap-4 justify-between" v-for="(level, i) of config.training[stat]">
+                        <template v-for="(option) of level">
+                            <slot :stat="stat" :level="i" :option="option"></slot>
+                        </template>
+                    </div>
                 </div>
             </div>
-        </TabsContent>
-    </TabsRoot>
+        </div>
+    </div>
+</template> -->
+
+<template>
+    <div class="w-full h-full flex gap-8 max-w-full relative">
+        <div class="flex flex-col gap-3 relative items-center">
+            <span v-for="(stat, i) of MAIN_STATS" :value="stat" class="block w-2.5 h-2.5 m-px outline outline-1 outline-transparent 
+            hover:outline-light-70 dark:hover:outline-dark-70 rounded-full bg-light-40 dark:bg-dark-40 cursor-pointer" @click="() => transition(position, i)"></span>
+            <span :style="{ 'top': position * 1.5 + 'em' }" :data-text="mainStatTexts[MAIN_STATS[position]]" class="rounded-full w-3 h-3 bg-accent-blue absolute transition-[top]
+            after:content-[attr(data-text)] after:absolute after:-top-2 after:left-4 after:p-px after:bg-light-0 dark:after:bg-dark-0"></span>
+        </div>
+        <div class="absolute top-0 left-24 z-10">
+            <slot name="addin" :stat="MAIN_STATS[position]"></slot>
+        </div>
+        <div ref="dragger" class="flex flex-col gap-4 pb-4 cursor-grab active:cursor-grabbing select-none overflow-hidden h-full w-full relative">
+            <div v-for="(stat, name) in config.training" class="flex flex-1 gap-4 items-center absolute h-full z-0" ref="items" :style="{ 'opacity': '0', 'visibility': 'hidden', 'transition': 'opacity 200ms ease-in-out, top 200ms ease-in-out' }">
+                <div v-for="(options, level) in stat" class="flex-shrink-0 w-80">
+                    <div class="space-y-2" @mousedown.stop>
+                        <template v-for="(option, i) in options">
+                            <slot :stat="name" :level="level" :index="i" :option="option"></slot>
+                        </template>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
 </template>
\ No newline at end of file
diff --git a/db.sqlite-shm b/db.sqlite-shm
index 2d9328e11a5efb3bf9fe661bbb82643937852fb3..222bca195b9b134789a53db3688ed69c8e63bae2 100644
GIT binary patch
delta 1086
zcmb7@cUaYB6vyAs7cQC+ky?^jrqZyoC`)l6C?YBjTp%tG*{F!9$hsGBiwayPuB+l!
z1TU4Ny?3_vqM=Pklx_X}sz3U-^StLh=X{>?ocDRodydN`mrKr|rf$ZTb{J!wz(yH!
z+=_!Ms+;O6!)n|1D0G}SmK@a4_d@fz{4=NiZ~ouKt;?=^@jvn}_cKM-tHvFn?hT$q
zyg`cg@z$$eRi4xC4hpd}zRDA5neczyqmEWqeph!VwQ)x(q{<WGO>`85`e&PR(?xe_
zh$hIJ<Tx+)$td5J!3xn(CD^2<g@39kHrK1G25O8=autwe%1me7sc6M(v)mT*PctRv
z2HmDejkQ6Zw>dT#XHR<3hko=Yf`JTTFhdx|a7Gf#7{(FD1ST?>sU(q13Tb4J#SCUK
zn>oy7J_{(M7$>Eavxp@uV+AW&O%-m|vYw4>Vhh{Y&Q5l*hkYF25Qk~N%l%Fs<QOM-
zm`8b>CwZD@d7c+}nOAv@H+YM8c#jYGh)?*8&-s#5e9gCf&l%3~BR_G0U-_Lsxd`%+
zLoIZfF4q;hQdg;su2wr;tLt==ZqeQ9uKUzez0^nj)L#)Arp)0QsaQ?aWKC6)l9i$~
zWhhHCG)uEJM{_k_3sk6LIaR81Ez%M#(+aKBYE{Xtwc4U>+OD12r9IlG13IL`YLM3&
zi*(~O9d)|~X`D9NACu$bJsW2=J(S+`C5&(e5J?o#3?+sUjAArn8BaV3OkxU&Ok+B!
zq?1WDGsz*BJm!&40Y#MHqKt(sW+}_5U=@{AvxaqSpoYzC#lsG2+09<|bC5dfIYJ{3
zI62C39^w%m;|ZSP8J^<>Ug8x_@;YzwHt+I2AM!Du(!>{h#c96bJAU9S=V|6=e&IL%
z;4h3MU-_w}TFGAl3RG*g)inxIdv(ywx>fh+UiDC@daJL(6s`e^QNjp~(r8W66eVh!
zrYlwH%2c*yDo44>(>&#?Kt(E%OJ!Q9#agQ6s?aJ`s#<HbPFv;C4%KS6_G-Tls?OT1
zBWkpp?DEli+XnjuWSUabN!>J9aoS|F_Pzlb#$|5Q9g5O;)z~bxwO@)UG8=3^#&HQ%
CCmyl@

delta 263
zcmZo@U}|V!s+V}A%K!oiK+MR%AYcY0b^+PBTPJAW(LUWLVph$%duOtQ+{5}pQvv1~
zq^buR1qL8<|04mYFdM@)5Nom{lkvs{35=U1m^_#_M{rkJY%bvb!OEP&(7ZX3`#00%
z3vMi%leibLGp8}s0!6Bsn6nw0CMR;&GN&`tf#}U&0#z7+GEt1o84UFxCCr;YgoB0t
daWQ8xGy;WGS(q~!8i0&KA?8$u8X&`;6#)G@PeK3y

diff --git a/db.sqlite-wal b/db.sqlite-wal
index 60414e6212ce0a5e23590772cc36ab97eec442e0..2e01350f509165e8366722b5d579ea1ffb7c39c4 100644
GIT binary patch
delta 16385
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
W{Y}QfxRL48<7GPsX;zXiy8i~KL~q6b

delta 48
zcmZo@TF1EImv2K0V+&IYa|=rgYYSTodkaSkXA4&gcMDGoZwp@we~UniV2jWeVS`!#
Doiz`T

diff --git a/pages/character/[id]/edit.client.vue b/pages/character/[id]/edit.client.vue
index 27285d9..c18702f 100644
--- a/pages/character/[id]/edit.client.vue
+++ b/pages/character/[id]/edit.client.vue
@@ -34,9 +34,7 @@ function abilitySpecialFeatures(type: "points" | "max", curiosity: DoubleIndex<T
 }
 </script>
 <script setup lang="ts">
-import { Icon } from '@iconify/vue/dist/iconify.js';
 import PreviewA from '~/components/prose/PreviewA.vue';
-import { clamp } from '~/shared/general.util';
 import { defaultCharacter, elementTexts, mainStatTexts, spellTypeTexts, type Ability, type Character, type CharacterConfig, type DoubleIndex, type Level, type MainStat, type RaceOption, type SpellConfig, type SpellElement, type SpellType, type TrainingLevel, type TrainingOption } from '~/types/character';
 
 definePageMeta({
@@ -60,9 +58,8 @@ const spellFilter = ref<{
     tags: [],
 });
 
-const peopleOpen = ref(false), trainingOpen = ref(false), abilityOpen = ref(false), spellOpen = ref(false), notesOpen = ref(false), trainingTab = ref(0);
 const raceOptions = computed(() => data.value.people !== undefined ? characterConfig.peoples[data.value.people!].options : undefined);
-const selectedRaceOptions = computed(() => raceOptions !== undefined ? data.value.leveling!.map(e => raceOptions.value![e[0]][e[1]]) : undefined);
+const selectedRaceOptions = computed(() => raceOptions.value ? data.value.leveling!.map(e => raceOptions.value![e[0]][e[1]]) : undefined);
 const trainingPoints = computed(() => raceOptions.value ? data.value.leveling?.reduce((p, v) => p + (raceOptions.value![v[0]][v[1]].training ?? 0), 0) : 0);
 const training = computed(() => Object.entries(characterConfig.training).map(e => [e[0], getFeaturesOf(e[0] as MainStat, data.value.training[e[0] as MainStat])]) as [MainStat, TrainingOption[]][]);
 const maxTraining = computed(() => Object.entries(data.value.training).reduce((p, v) => { p[v[0] as MainStat] = v[1].reduce((_p, _v) => Math.max(_p, _v[0]) , 0); return p; }, {} as Record<MainStat, number>));
@@ -254,128 +251,110 @@ useShortcuts({
                 <Tooltip side="right" message="Ctrl+S"><Button @click="() => save(true)">Enregistrer</Button></Tooltip>
             </div>
         </div>
-        <div class="flex flex-1 flex-col min-w-[800px] w-[75vw] max-w-[1200px]">
-            <Collapsible class="border-b border-light-30 dark:border-dark-30 p-1" v-model="peopleOpen" @update:model-value="() => { trainingOpen = false; abilityOpen = false; spellOpen = false; notesOpen = false; }">
-                <template #label>
-                    <span class="font-bold text-xl">Peuple</span>
-                </template>
-                <template #default>
-                    <div class="m-2 overflow-auto">
-                        <Combobox label="Peuple de votre personnage" v-model="data.people" :options="config.peoples.map((people, index) => [people.name, index])" @update:model-value="(index) => { data.people = index as number | undefined; data.leveling = [[1, 0]]}" />
-                        <template v-if="data.people !== undefined">
-                            <div class="w-full border-b border-light-30 dark:border-dark-30 pb-4">
-                                <span class="text-sm text-light-70 dark:text-dark-70">{{ characterConfig.peoples[data.people].description }}</span>
+        <TabsRoot class="flex flex-1 flex-col justify-start items-center gap-4 px-8 w-full overflow-hidden" default-value="people">
+            <TabsList class="flex flex-row gap-4 self-center relative px-4">
+                <TabsIndicator class="absolute left-0 h-[3px] bottom-0 w-[--radix-tabs-indicator-size] translate-x-[--radix-tabs-indicator-position] transition-[width,transform] duration-300 bg-accent-blue"></TabsIndicator>
+                <TabsTrigger value="people" class="px-2 py-1 border-b border-transparent hover:border-accent-blue">Peuples</TabsTrigger>
+                <TabsTrigger :disabled="data.people === undefined" value="training" class="px-2 py-1 border-b border-transparent hover:border-accent-blue disabled:text-light-50 dark:disabled:text-dark-50 disabled:hover:border-transparent">Entrainement</TabsTrigger>
+                <TabsTrigger :disabled="data.people === undefined" value="abilities" class="px-2 py-1 border-b border-transparent hover:border-accent-blue disabled:text-light-50 dark:disabled:text-dark-50 disabled:hover:border-transparent">Compétences</TabsTrigger>
+                <TabsTrigger :disabled="data.people === undefined" value="spells" class="px-2 py-1 border-b border-transparent hover:border-accent-blue disabled:text-light-50 dark:disabled:text-dark-50 disabled:hover:border-transparent">Sorts</TabsTrigger>
+                <TabsTrigger value="notes" class="px-2 py-1 border-b border-transparent hover:border-accent-blue">Notes</TabsTrigger>
+            </TabsList>
+            <TabsContent value="people" class="flex-1 overflow-auto w-full h-full outline-none" forceMount>
+                <div class="m-2 overflow-auto">
+                    <Combobox label="Peuple de votre personnage" v-model="data.people" :options="config.peoples.map((people, index) => [people.name, index])" @update:model-value="(index) => { data.people = index as number | undefined; data.leveling = [[1, 0]]}" />
+                    <template v-if="data.people !== undefined">
+                        <div class="w-full border-b border-light-30 dark:border-dark-30 pb-4">
+                            <span class="text-sm text-light-70 dark:text-dark-70">{{ characterConfig.peoples[data.people].description }}</span>
+                        </div>
+                        <div class="flex flex-col gap-4 max-h-[50vh] pe-4 relative">
+                            <span class="sticky top-0 py-1 bg-light-0 dark:bg-dark-0 z-10 text-xl">Niveaux restants: {{ data.level - (data.leveling?.length ?? 0) }}</span>
+                            <div class="flex flex-row gap-4 justify-center" v-for="(level, index) of characterConfig.peoples[data.people].options" :class="{ 'opacity-30': index > data.level }">
+                                <div class="border border-light-40 dark:border-dark-40 cursor-pointer px-2 py-1 w-64" v-for="(option, i) of level" @click="selectRaceOption(parseInt(index as unknown as string, 10) as Level, i)" :class="{ 'hover:border-light-60 dark:hover:border-dark-60': index <= data.level, '!border-accent-blue bg-accent-blue bg-opacity-20': data.leveling?.some(e => e[0] == index && e[1] === i) ?? false }"><MarkdownRenderer :content="raceOptionToText(option)" /></div>
                             </div>
-                            <div class="flex flex-col gap-4 max-h-[50vh] pe-4 relative">
-                                <span class="sticky top-0 py-1 bg-light-0 dark:bg-dark-0 z-10 text-xl">Niveaux restants: {{ data.level - (data.leveling?.length ?? 0) }}</span>
-                                <div class="flex flex-row gap-4 justify-center" v-for="(level, index) of characterConfig.peoples[data.people].options" :class="{ 'opacity-30': index > data.level }">
-                                    <div class="border border-light-40 dark:border-dark-40 cursor-pointer px-2 py-1 w-64" v-for="(option, i) of level" @click="selectRaceOption(parseInt(index as unknown as string, 10) as Level, i)" :class="{ 'hover:border-light-60 dark:hover:border-dark-60': index <= data.level, '!border-accent-blue bg-accent-blue bg-opacity-20': data.leveling?.some(e => e[0] == index && e[1] === i) ?? false }"><MarkdownRenderer :content="raceOptionToText(option)" /></div>
-                                </div>
-                            </div>
-                        </template>
-                    </div>
-                </template>
-            </Collapsible>
-            <Collapsible class="border-b border-light-30 dark:border-dark-30 p-1" v-model="trainingOpen" :disabled="data.people === undefined" @update:model-value="() => { peopleOpen = false; abilityOpen = false; spellOpen = false; notesOpen = false; }">
-                <template #label>
-                    <span class="font-bold text-xl">Entrainement</span>
-                </template>
-                <template #default>
-                    <div class="flex flex-col gap-4 max-h-[50vh] pe-4 relative overflow-y-auto overflow-x-hidden">
-                        <div class="sticky top-0 z-10 py-2 bg-light-0 dark:bg-dark-0 flex justify-between">
-                            <Icon icon="radix-icons:caret-left" class="w-6 h-6 border border-light-30 dark:border-dark-30 cursor-pointer" @click="() => trainingTab = clamp(trainingTab - 1, 0, 6)" />
+                        </div>
+                    </template>
+                </div>
+            </TabsContent>
+            <TabsContent value="training" class="flex-1 overflow-hidden w-full h-full outline-none" forceMount>
+                <TrainingViewer :config="characterConfig">
+                    <template #default="{ stat, level, option, index }">
+                        <div @click="switchTrainingOption(stat, parseInt(level as unknown as string, 10) as TrainingLevel, index)" :class="{ 'opacity-30': level > maxTraining[stat] + 1, 'hover:border-light-60 dark:hover:border-dark-60': level <= maxTraining[stat] + 1, '!border-accent-blue bg-accent-blue bg-opacity-20': level == 0 || (data.training[stat]?.some(e => e[0] == level && e[1] === index) ?? false) }" class="border border-light-35 dark:border-dark-35 px-3 py-1 select-none cursor-pointer hover:border-light-50 dark:hover:border-dark-50">
+                            <MarkdownRenderer :proses="{ 'a': PreviewA }" :content="option.description.map(e => e.text).join('\n')" />
+                        </div>
+                    </template>
+                    <template #addin="{ stat }">
+                        <div class="bg-light-0 dark:bg-dark-0 z-10">
                             <span class="text-xl" :class="{ 'text-light-red dark:text-dark-red': (trainingPoints ?? 0) < trainingSpent }">Points d'entrainement restants: {{ (trainingPoints ?? 0) - trainingSpent }}</span>
-                            <Icon icon="radix-icons:caret-right" class="w-6 h-6 border border-light-30 dark:border-dark-30 cursor-pointer" @click="() => trainingTab = clamp(trainingTab + 1, 0, 6)" />
-                        </div>
-                        <div class="flex gap-4 relative" :style="`left: calc(calc(-100% - 1em) * ${trainingTab}); transition: left .5s ease;`">
-                            <div class="flex w-full flex-shrink-0 flex-col gap-2 relative" v-for="(text, stat) of mainStatTexts">
-                                <div class="sticky top-1 mx-16 z-10 flex justify-between">
-                                    <div class="py-1 px-3 bg-light-0 dark:bg-dark-0 z-10 text-xl font-bold border border-light-30 dark:border-dark-30 flex">{{ text }}
-                                        <div class="flex gap-2" v-if="maxTraining[stat] >= 0">: Niveau {{ maxTraining[stat] }} (+{{ modifiers[stat] }} 
-                                            <NumberFieldRoot :default-value="data.modifiers[stat] ?? 0" v-model="data.modifiers[stat]" class="flex justify-center border border-light-35 dark:border-dark-35 bg-light-20 dark:bg-dark-20 data-[disabled]:border-light-20 dark:data-[disabled]:border-dark-20 data-[disabled]:bg-light-20 dark:data-[disabled]:bg-dark-20 
-                                data-[disabled]:text-light-70 dark:data-[disabled]:text-dark-70 hover:border-light-50 dark:hover:border-dark-50 has-[:focus]:shadow-raw transition-[box-shadow] has-[:focus]:shadow-light-40 dark:has-[:focus]:shadow-dark-40">
-                                                <NumberFieldInput class="tabular-nums w-8 text-base font-normal bg-transparent px-2 outline-none caret-light-50 dark:caret-dark-50" />
-                                            </NumberFieldRoot>
-                                        )</div></div>
-                                    <div class="py-1 px-3 bg-light-0 dark:bg-dark-0 z-10 flex gap-2 justify-center items-center" :class="{ 'text-light-red dark:text-dark-red': (modifierPoints ?? 0) < modifierSpent }">Modifieur bonus: {{ modifierPoints - modifierSpent }}</div>
-                                </div>
-                                <div class="flex flex-row gap-4 justify-center" v-for="(level, index) of characterConfig.training[stat]" :class="{ 'opacity-30': index > maxTraining[stat] + 1 }">
-                                    <div class="border border-light-40 dark:border-dark-40 cursor-pointer px-2 py-1 w-1/3" v-for="(option, i) of level" @click="switchTrainingOption(stat, parseInt(index as unknown as string, 10) as TrainingLevel, i)" :class="{ 'hover:border-light-60 dark:hover:border-dark-60': index <= maxTraining[stat] + 1, '!border-accent-blue bg-accent-blue bg-opacity-20': index == 0 || (data.training[stat]?.some(e => e[0] == index && e[1] === i) ?? false) }"><MarkdownRenderer :proses="{ 'a': PreviewA }" :content="option.description.map(e => e.text).join('\n')" /></div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </template>
-            </Collapsible>
-            <Collapsible class="border-b border-light-30 dark:border-dark-30 p-1" v-model="abilityOpen" :disabled="data.people === undefined" @update:model-value="() => { trainingOpen = false; peopleOpen = false; spellOpen = false; notesOpen = false; }">
-                <template #label>
-                    <span class="font-bold text-xl">Compétences</span>
-                </template>
-                <template #default>
-                    <div class="flex flex-col gap-2 max-h-[50vh] px-4 relative overflow-y-auto">
-                        <div class="sticky top-0 py-2 bg-light-0 dark:bg-dark-0 z-10 flex justify-between">
-                            <span class="text-xl -mx-2" :class="{ 'text-light-red dark:text-dark-red': (abilityPoints ?? 0) < abilitySpent }">Points d'entrainement restants: {{ (abilityPoints ?? 0) - abilitySpent }}</span>
-                        </div>
-                        <div class="grid gap-4 grid-cols-6">
-                            <div v-for="(ability, index) of characterConfig.abilities" class="flex flex-col items-center border border-light-30 dark:border-dark-30 p-2">
-                                <div class="flex items-center justify-center gap-4">
-                                    <NumberFieldRoot :min="0" :default-value="data.abilities[index] ? data.abilities[index][0] : 0" @update:model-value="(value) => { data.abilities[index] = [value, data.abilities[index] ? data.abilities[index][1] : 0]; }" class="border border-light-35 dark:border-dark-35 bg-light-20 dark:bg-dark-20 data-[disabled]:border-light-20 dark:data-[disabled]:border-dark-20 data-[disabled]:bg-light-20 dark:data-[disabled]:bg-dark-20 
-                                data-[disabled]:text-light-70 dark:data-[disabled]:text-dark-70 hover:border-light-50 dark:hover:border-dark-50 has-[:focus]:shadow-raw transition-[box-shadow] has-[:focus]:shadow-light-40 dark:has-[:focus]:shadow-dark-40">
-                                        <NumberFieldInput class="tabular-nums w-8 bg-transparent px-3 py-1 outline-none caret-light-50 dark:caret-dark-50" />
+                            <div class="py-1 px-3 bg-light-0 dark:bg-dark-0 z-10 font-bold flex flex-row justify-between">
+                                <span class="flex gap-2" v-if="maxTraining[stat] >= 0">Niveau {{ maxTraining[stat] }}</span>
+                                <span class="flex gap-6">
+                                    Modifieur: +{{ modifiers[stat] }}
+                                    <NumberFieldRoot :default-value="data.modifiers[stat] ?? 0" v-model="data.modifiers[stat]" class="flex justify-center border border-light-35 dark:border-dark-35 bg-light-20 dark:bg-dark-20 data-[disabled]:border-light-20 dark:data-[disabled]:border-dark-20 data-[disabled]:bg-light-20 dark:data-[disabled]:bg-dark-20 
+                        data-[disabled]:text-light-70 dark:data-[disabled]:text-dark-70 hover:border-light-50 dark:hover:border-dark-50 has-[:focus]:shadow-raw transition-[box-shadow] has-[:focus]:shadow-light-40 dark:has-[:focus]:shadow-dark-40">
+                                        <NumberFieldInput class="tabular-nums w-8 text-base font-normal bg-transparent px-2 outline-none caret-light-50 dark:caret-dark-50" />
                                     </NumberFieldRoot>
-                                    <span class="font-bold col-span-4">/{{ abilityMax[index] }}</span>
-                                </div>
-                                <span class="text-xl font-bold flex-2">{{ ability.name }}</span>
-                                <span class="text-sm text-light-70 dark:text-dark-70 flex-1">({{ mainStatTexts[ability.max[0]] }} + {{ mainStatTexts[ability.max[1]] }})</span>
+                                </span>
                             </div>
+                            <div class="py-1 px-3 bg-light-0 dark:bg-dark-0 z-10 flex gap-2 justify-center items-center" :class="{ 'text-light-red dark:text-dark-red': (modifierPoints ?? 0) < modifierSpent }">Modifieur bonus: {{ modifierPoints - modifierSpent }}</div>
+                        </div>
+                    </template>
+                </TrainingViewer>
+            </TabsContent>
+            <TabsContent value="abilities" class="flex-1 overflow-auto w-full h-full outline-none" forceMount>
+                <div class="flex flex-col gap-2 max-h-[50vh] px-4 relative overflow-y-auto">
+                    <div class="sticky top-0 py-2 bg-light-0 dark:bg-dark-0 z-10 flex justify-between">
+                        <span class="text-xl -mx-2" :class="{ 'text-light-red dark:text-dark-red': (abilityPoints ?? 0) < abilitySpent }">Points d'entrainement restants: {{ (abilityPoints ?? 0) - abilitySpent }}</span>
+                    </div>
+                    <div class="grid gap-4 grid-cols-6">
+                        <div v-for="(ability, index) of characterConfig.abilities" class="flex flex-col items-center border border-light-30 dark:border-dark-30 p-2">
+                            <div class="flex items-center justify-center gap-4">
+                                <NumberFieldRoot :min="0" :default-value="data.abilities[index] ? data.abilities[index][0] : 0" @update:model-value="(value) => { data.abilities[index] = [value, data.abilities[index] ? data.abilities[index][1] : 0]; }" class="border border-light-35 dark:border-dark-35 bg-light-20 dark:bg-dark-20 data-[disabled]:border-light-20 dark:data-[disabled]:border-dark-20 data-[disabled]:bg-light-20 dark:data-[disabled]:bg-dark-20 
+                            data-[disabled]:text-light-70 dark:data-[disabled]:text-dark-70 hover:border-light-50 dark:hover:border-dark-50 has-[:focus]:shadow-raw transition-[box-shadow] has-[:focus]:shadow-light-40 dark:has-[:focus]:shadow-dark-40">
+                                    <NumberFieldInput class="tabular-nums w-8 bg-transparent px-3 py-1 outline-none caret-light-50 dark:caret-dark-50" />
+                                </NumberFieldRoot>
+                                <span class="font-bold col-span-4">/{{ abilityMax[index] }}</span>
+                            </div>
+                            <span class="text-xl font-bold flex-2">{{ ability.name }}</span>
+                            <span class="text-sm text-light-70 dark:text-dark-70 flex-1">({{ mainStatTexts[ability.max[0]] }} + {{ mainStatTexts[ability.max[1]] }})</span>
                         </div>
                     </div>
-                </template>
-            </Collapsible>
-            <Collapsible class="border-b border-light-30 dark:border-dark-30 p-1" v-model="spellOpen" :disabled="data.people === undefined" @update:model-value="() => { trainingOpen = false; peopleOpen = false; abilityOpen = false; notesOpen = false; }">
-                <template #label>
-                    <span class="font-bold text-xl">Sorts</span>
-                </template>
-                <template #default>
-                    <div class="flex flex-col gap-2 max-h-[50vh] px-4 relative overflow-y-auto">
-                        <div class="sticky top-0 py-2 bg-light-0 dark:bg-dark-0 z-10 flex gap-2 items-center">
-                            <span class="text-xl pe-4" :class="{ 'text-light-red dark:text-dark-red': spellsPoints < (data.spells?.length ?? 0) }">Sorts: {{ data.spells?.length ?? 0 }}/{{ spellsPoints }}</span>
-                            <TextInput label="Nom" v-model="spellFilter.text" />
-                            <Combobox label="Rang" v-model="spellFilter.ranks" multiple :options="[['Rang 1', 1], ['Rang 2', 2], ['Rang 3', 3]]" />
-                            <Combobox label="Type" v-model="spellFilter.types" multiple :options="[['Précision', 'precision'], ['Savoir', 'knowledge'], ['Instinct', 'instinct']]" />
-                            <Combobox label="Element" v-model="spellFilter.elements" multiple :options="[['Feu', 'fire'], ['Glace', 'ice'], ['Foudre', 'thunder'], ['Terre', 'earth'], ['Arcane', 'arcana'], ['Air', 'air'], ['Nature', 'nature'], ['Lumière', 'light'], ['Psy', 'psyche']]" />
-                        </div>
-                        <div class="grid gap-4 grid-cols-2">
-                            <div class="py-1 px-2 border border-light-30 dark:border-dark-30 flex flex-col hover:border-light-50 dark:hover:border-dark-50 cursor-pointer" v-for="spell of filterSpells(characterConfig.spells)" :class="{ '!border-accent-blue bg-accent-blue bg-opacity-20': data.spells?.find(e => e === spell.id) }"
-                                @click="() => data.spells?.includes(spell.id) ? data.spells.splice(data.spells.findIndex((e: string) => e === spell.id), 1) : data.spells!.push(spell.id)">
-                                <div class="flex flex-row justify-between">
-                                    <span class="text-lg font-bold">{{ spell.name }}</span>
-                                    <div class="flex flex-row items-center gap-6">
-                                        <div class="flex flex-row text-sm gap-2">
-                                            <span v-for="element of spell.elements" :class="elementTexts[element].class" class="border !border-opacity-50 rounded-full !bg-opacity-20 px-2 py-px">{{ elementTexts[element].text }}</span>
-                                        </div>
-                                        <div class="flex flex-row text-sm gap-1">
-                                            <span class="">Rang {{ spell.rank }}</span><span>/</span>
-                                            <span class="">{{ spellTypeTexts[spell.type] }}</span><span>/</span>
-                                            <span class="">{{ spell.cost }} mana</span><span>/</span>
-                                            <span class="">{{ typeof spell.speed === 'string' ? spell.speed : `${spell.speed} minutes` }}</span>
-                                        </div>
+                </div>
+            </TabsContent>
+            <TabsContent value="spells" class="flex-1 overflow-auto w-full h-full outline-none" forceMount>
+                <div class="flex flex-col gap-2 max-h-[50vh] px-4 relative overflow-y-auto">
+                    <div class="sticky top-0 py-2 bg-light-0 dark:bg-dark-0 z-10 flex gap-2 items-center">
+                        <span class="text-xl pe-4" :class="{ 'text-light-red dark:text-dark-red': spellsPoints < (data.spells?.length ?? 0) }">Sorts: {{ data.spells?.length ?? 0 }}/{{ spellsPoints }}</span>
+                        <TextInput label="Nom" v-model="spellFilter.text" />
+                        <Combobox label="Rang" v-model="spellFilter.ranks" multiple :options="[['Rang 1', 1], ['Rang 2', 2], ['Rang 3', 3]]" />
+                        <Combobox label="Type" v-model="spellFilter.types" multiple :options="[['Précision', 'precision'], ['Savoir', 'knowledge'], ['Instinct', 'instinct']]" />
+                        <Combobox label="Element" v-model="spellFilter.elements" multiple :options="[['Feu', 'fire'], ['Glace', 'ice'], ['Foudre', 'thunder'], ['Terre', 'earth'], ['Arcane', 'arcana'], ['Air', 'air'], ['Nature', 'nature'], ['Lumière', 'light'], ['Psy', 'psyche']]" />
+                    </div>
+                    <div class="grid gap-4 grid-cols-2">
+                        <div class="py-1 px-2 border border-light-30 dark:border-dark-30 flex flex-col hover:border-light-50 dark:hover:border-dark-50 cursor-pointer" v-for="spell of filterSpells(characterConfig.spells)" :class="{ '!border-accent-blue bg-accent-blue bg-opacity-20': data.spells?.find(e => e === spell.id) }"
+                            @click="() => data.spells?.includes(spell.id) ? data.spells.splice(data.spells.findIndex((e: string) => e === spell.id), 1) : data.spells!.push(spell.id)">
+                            <div class="flex flex-row justify-between">
+                                <span class="text-lg font-bold">{{ spell.name }}</span>
+                                <div class="flex flex-row items-center gap-6">
+                                    <div class="flex flex-row text-sm gap-2">
+                                        <span v-for="element of spell.elements" :class="elementTexts[element].class" class="border !border-opacity-50 rounded-full !bg-opacity-20 px-2 py-px">{{ elementTexts[element].text }}</span>
+                                    </div>
+                                    <div class="flex flex-row text-sm gap-1">
+                                        <span class="">Rang {{ spell.rank }}</span><span>/</span>
+                                        <span class="">{{ spellTypeTexts[spell.type] }}</span><span>/</span>
+                                        <span class="">{{ spell.cost }} mana</span><span>/</span>
+                                        <span class="">{{ typeof spell.speed === 'string' ? spell.speed : `${spell.speed} minutes` }}</span>
                                     </div>
                                 </div>
-                                <MarkdownRenderer :content="spell.effect" />
                             </div>
+                            <MarkdownRenderer :content="spell.effect" />
                         </div>
                     </div>
-                </template>
-            </Collapsible>
-            <Collapsible class="border-b border-light-30 dark:border-dark-30 p-1" v-model="notesOpen" @update:model-value="() => { trainingOpen = false; peopleOpen = false; abilityOpen = false; spellOpen = false; }">
-                <template #label>
-                    <span class="font-bold text-xl">Notes libres</span>
-                </template>
-                <template #default>
-                    <Editor class="min-h-[400px] border border-light-30 dark:border-dark-30" v-model="data.notes" />
-                </template>
-            </Collapsible>
-        </div>
+                </div>
+            </TabsContent>
+            <TabsContent value="notes" class="flex-1 overflow-auto w-full h-full outline-none" forceMount>
+                <Editor class="min-h-[400px] border border-light-30 dark:border-dark-30" :v-model="data.notes" />
+            </TabsContent>
+        </TabsRoot>
     </div>
 </template>
\ No newline at end of file
diff --git a/pages/character/[id]/index.client.vue b/pages/character/[id]/index.client.vue
index 372be63..c11cca6 100644
--- a/pages/character/[id]/index.client.vue
+++ b/pages/character/[id]/index.client.vue
@@ -2,6 +2,7 @@
 import config from '#shared/character-config.json';
 import { Icon } from '@iconify/vue/dist/iconify.js';
 import PreviewA from '~/components/prose/PreviewA.vue';
+import { clamp } from '~/shared/general.util';
 import type { SpellConfig } from '~/types/character';
 import { elementTexts, spellTypeTexts, type CharacterConfig } from '~/types/character';
 
@@ -50,8 +51,8 @@ text-light-purple dark:text-dark-purple border-light-purple dark:border-dark-pur
                         <span>{{ character.race === -1 ? "Race inconnue" : characterConfig.peoples[character.race].name }}</span>
                     </div>
                 </div>
-                <div class="flex gap-6 lg:border-l border-light-30 dark:border-dark-30 py-4 ps-4">
-                    <span class="flex flex-row items-center gap-2">PV: {{ character.health - character.values.healht }}/{{ character.health }}</span>
+                <div class="flex flex-col lg:border-l border-light-30 dark:border-dark-30 py-4 ps-4">
+                    <span class="flex flex-row items-center gap-2">PV: {{ character.health - character.values.health }}/{{ character.health }}</span>
                     <span class="flex flex-row items-center gap-2">Mana: {{ character.mana - character.values.mana }}/{{ character.mana }}</span>
                 </div>
             </div>
@@ -60,8 +61,8 @@ text-light-purple dark:text-dark-purple border-light-purple dark:border-dark-pur
             </div>
         </div>
         <div class="flex flex-1 flex-col justify-center gap-4 *:py-2">
-            <div class="grid 2xl:grid-cols-12 grid-cols-2 gap-4 items-center border-b border-light-30 dark:border-dark-30">
-                <div class="flex relative justify-between ps-4 gap-2 2xl:col-span-6 lg:col-span-2">
+            <div class="grid 2xl:grid-cols-10 grid-cols-1 gap-4 items-center border-b border-light-30 dark:border-dark-30 me-4 pe-4">
+                <div class="flex relative justify-between ps-4 gap-2 2xl:col-span-6">
                     <div class="flex flex-col items-center"><span class="2xl:text-2xl text-xl font-bold">+{{ character.modifier.strength }}</span><span class="text-sm 2xl:text-base">Force</span></div>
                     <div class="flex flex-col items-center"><span class="2xl:text-2xl text-xl font-bold">+{{ character.modifier.dexterity }}</span><span class="text-sm 2xl:text-base">Dextérité</span></div>
                     <div class="flex flex-col items-center"><span class="2xl:text-2xl text-xl font-bold">+{{ character.modifier.constitution }}</span><span class="text-sm 2xl:text-base">Constitution</span></div>
@@ -70,19 +71,14 @@ text-light-purple dark:text-dark-purple border-light-purple dark:border-dark-pur
                     <div class="flex flex-col items-center"><span class="2xl:text-2xl text-xl font-bold">+{{ character.modifier.charisma }}</span><span class="text-sm 2xl:text-base">Charisme</span></div>
                     <div class="flex flex-col items-center"><span class="2xl:text-2xl text-xl font-bold">+{{ character.modifier.psyche }}</span><span class="text-sm 2xl:text-base">Psyché</span></div>
                 </div>
-                <div class="flex relative 2xl:border-l border-light-30 dark:border-dark-30 ps-4 2xl:col-span-2">
-                    <div class="flex flex-1 flex-row items-center justify-between">
-                        <div class="flex flex-col px-2 items-center"><span class="text-2xl font-bold">+{{ character.initiative }}</span><span>Initiative</span></div>
-                        <div class="flex flex-col px-2 items-center"><span class="text-2xl font-bold">{{ character.speed === false ? "Aucun déplacement" : `${character.speed} cases` }}</span><span>Course</span></div>
-                    </div>
-                    <!-- <div class="absolute top-0 left-0 bottom-0 right-0 bg-light-0 dark:bg-dark-0 bg-opacity-50 dark:bg-opacity-50 text-xl font-bold flex items-center justify-center">Les données secondaires arrivent bientôt.</div> -->
+                <div class="flex flex-1 relative 2xl:border-l border-light-30 dark:border-dark-30 ps-4 2xl:col-span-4 flex-row items-center justify-between">
+                    <div class="flex flex-col px-2 items-center"><span class="text-2xl font-bold">+{{ character.initiative }}</span><span>Initiative</span></div>
+                    <div class="flex flex-col px-2 items-center"><span class="text-2xl font-bold">{{ character.speed === false ? "Aucun déplacement" : `${character.speed} cases` }}</span><span>Course</span></div>
+                    <Icon icon="ph:shield-checkered" class="w-8 h-8" />
+                    <div class="flex flex-col items-center"><span class="2xl:text-2xl text-xl font-bold">{{ clamp(character.defense.static + character.defense.passivedodge + character.defense.passiveparry, 0, character.defense.hardcap) }}</span><span class="text-sm 2xl:text-base">Passive</span></div>
+                    <div class="flex flex-col items-center"><span class="2xl:text-2xl text-xl font-bold">{{ clamp(character.defense.static + character.defense.passivedodge + character.defense.activeparry, 0, character.defense.hardcap) }}</span><span class="text-sm 2xl:text-base">Blocage</span></div>
+                    <div class="flex flex-col items-center"><span class="2xl:text-2xl text-xl font-bold">{{ clamp(character.defense.static + character.defense.activedodge + character.defense.passiveparry, 0, character.defense.hardcap) }}</span><span class="text-sm 2xl:text-base">Esquive</span></div>
                 </div>
-                <div class="flex relative border-l border-light-30 dark:border-dark-30 ps-4 2xl:col-span-4">
-                        <div class="flex flex-col px-2">
-                            <span class="text-xl">Défense passive: <span class="text-2xl font-bold">{{ character.defense.static }}</span>/+<span class="text-2xl font-bold">{{ character.defense.passivedodge }}</span>/+<span class="text-2xl font-bold">{{ character.defense.passiveparry }}</span></span>
-                            <span class="text-xl">Défense active: <span class="float-right">+<span class="text-2xl font-bold">{{ character.defense.activedodge }}</span>/+<span class="text-2xl font-bold">{{ character.defense.activeparry }}</span></span></span>
-                        </div>
-                    </div>
             </div>
             <div class="flex flex-1 px-8">
                 <div class="flex flex-col pe-8 gap-4 py-8 w-80 border-r border-light-30 dark:border-dark-30">
@@ -117,12 +113,6 @@ text-light-purple dark:text-dark-purple border-light-purple dark:border-dark-pur
                         <span>Sorts de savoir: <span class="font-bold">{{ character.spellranks.knowledge }}</span></span>
                         <span>Sorts d'instinct: <span class="font-bold">{{ character.spellranks.instinct }}</span></span>
                     </div>
-                    <div class="flex flex-col">
-                        <span class="text-lg font-semibold border-b border-light-30 dark:border-dark-30 mb-2 flex items-center gap-4">Résistances (Attaque/Défense) <Tooltip side="right" message="Les défenses affichées incluent déjà leur modifieur de statistique."><Icon icon="radix-icons:question-mark-circled" /></Tooltip></span>
-                        <div class="grid grid-cols-3 gap-1">
-                            <div class="flex flex-col px-2 items-center text-sm text-light-70 dark:text-dark-70" v-for="(value, resistance) of character.resistance"><span class="font-bold text-base text-light-100 dark:text-dark-100">+{{ value[0] }}/+{{ value[1] + character.modifier[characterConfig.resistances[resistance].statistic as MainStat] }}</span><span>{{ characterConfig.resistances[resistance].name }}</span></div>
-                        </div>
-                    </div>
                     <div class="flex flex-col">
                         <span class="text-lg font-semibold border-b border-light-30 dark:border-dark-30 mb-2">Compétences</span>
                         <div class="grid grid-cols-3 gap-1">
@@ -131,8 +121,8 @@ text-light-purple dark:text-dark-purple border-light-purple dark:border-dark-pur
                     </div>
                 </div>
                 <TabsRoot default-value="features" class="w-[60rem]">
-                    <TabsList class="flex flex-row gap-4 relative px-4">
-                        <TabsIndicator class="absolute px-8 left-0 h-[3px] bottom-0 w-[--radix-tabs-indicator-size] translate-x-[--radix-tabs-indicator-position] transition-[width,transform] duration-300 bg-accent-blue"></TabsIndicator>
+                    <TabsList class="flex flex-row relative px-4 gap-4">
+                        <TabsIndicator class="absolute left-0 h-[3px] bottom-0 w-[--radix-tabs-indicator-size] translate-x-[--radix-tabs-indicator-position] transition-[width,transform] duration-300 bg-accent-blue"></TabsIndicator>
                         <TabsTrigger value="features" class="px-2 py-1 border-b border-transparent hover:border-accent-blue">Aptitudes</TabsTrigger>
                         <TabsTrigger value="spells" class="px-2 py-1 border-b border-transparent hover:border-accent-blue">Sorts</TabsTrigger>
                         <TabsTrigger value="notes" class="px-2 py-1 border-b border-transparent hover:border-accent-blue">Notes</TabsTrigger>
diff --git a/pages/character/manage.client.vue b/pages/character/manage.client.vue
index 77b6fb1..0b13734 100644
--- a/pages/character/manage.client.vue
+++ b/pages/character/manage.client.vue
@@ -18,7 +18,7 @@ function copy()
     <Head>
         <Title>d[any] - Edition de données</Title>
     </Head>
-    <TabsRoot class="flex flex-1 flex-col justify-start items-center gap-4 px-8 w-full" default-value="training">
+    <TabsRoot class="flex flex-1 flex-col justify-start items-center gap-4 px-8 w-full overflow-hidden" default-value="training">
         <TabsList class="flex flex-row gap-4 self-center relative px-4">
             <TabsIndicator class="absolute left-0 h-[3px] bottom-0 w-[--radix-tabs-indicator-size] translate-x-[--radix-tabs-indicator-position] transition-[width,transform] duration-300 bg-accent-blue"></TabsIndicator>
             <TabsTrigger value="peoples" class="px-2 py-1 border-b border-transparent hover:border-accent-blue">Peuples</TabsTrigger>
@@ -27,52 +27,22 @@ function copy()
             <TabsTrigger value="spells" class="px-2 py-1 border-b border-transparent hover:border-accent-blue">Sorts</TabsTrigger>
             <Tooltip message="Copier le JSON" side="right"><Button icon @click="copy" class="p-2"><Icon icon="radix-icons:clipboard-copy" /></Button></Tooltip>
         </TabsList>
-        <TabsContent value="peoples" class="flex-1 overflow-auto">
+        <TabsContent value="peoples" class="flex-1 overflow-auto outline-none">
         </TabsContent>
-        <TabsContent value="training">
-            <TrainingViewer :config="config" />
+        <TabsContent value="training" class="flex-1 overflow-hidden w-full h-full outline-none">
+            <TrainingViewer :config="config">
+                <template #default="{ stat, level, option }">
+                    <div class="border border-light-35 dark:border-dark-35 px-3 py-1 select-none cursor-pointer hover:border-light-50 dark:hover:border-dark-50">
+                        <MarkdownRenderer :proses="{ 'a': PreviewA }" :content="option.description.map(e => e.text).join('\n')" />
+                    </div>
+                </template>
+            </TrainingViewer>
         </TabsContent>
-        <TabsContent value="abilities" class="flex-1 overflow-auto">
+        <TabsContent value="abilities" class="flex-1 overflow-auto outline-none">
 
         </TabsContent>
-        <TabsContent value="spells" class="flex-1 overflow-auto">
+        <TabsContent value="spells" class="flex-1 overflow-auto outline-none">
 
         </TabsContent>
     </TabsRoot>
-    <!-- <Collapsible class="border-b border-light-30 dark:border-dark-30 p-1">
-        <template #label>
-            <span class="font-bold text-xl">Sorts</span>
-        </template>
-        <template #default>
-            <div class="flex flex-col gap-2 max-h-[50vh] px-4 relative overflow-y-auto">
-                <div class="sticky top-0 py-2 bg-light-0 dark:bg-dark-0 z-10 flex gap-2 items-center">
-                    <span class="text-xl pe-4" :class="{ 'text-light-red dark:text-dark-red': spellsPoints < (data.spells?.length ?? 0) }">Sorts: {{ data.spells?.length ?? 0 }}/{{ spellsPoints }}</span>
-                    <TextInput label="Nom" v-model="spellFilter.text" />
-                    <Combobox label="Rang" v-model="spellFilter.ranks" multiple :options="[['Rang 1', 1], ['Rang 2', 2], ['Rang 3', 3]]" />
-                    <Combobox label="Type" v-model="spellFilter.types" multiple :options="[['Précision', 'precision'], ['Savoir', 'knowledge'], ['Instinct', 'instinct']]" />
-                    <Combobox label="Element" v-model="spellFilter.elements" multiple :options="[['Feu', 'fire'], ['Glace', 'ice'], ['Foudre', 'thunder'], ['Terre', 'earth'], ['Arcane', 'arcana'], ['Air', 'air'], ['Nature', 'nature'], ['Lumière', 'light'], ['Psy', 'psyche']]" />
-                </div>
-                <div class="grid gap-4 grid-cols-2">
-                    <div class="py-1 px-2 border border-light-30 dark:border-dark-30 flex flex-col hover:border-light-50 dark:hover:border-dark-50 cursor-pointer" v-for="spell of filterSpells(characterConfig.spells)" :class="{ '!border-accent-blue bg-accent-blue bg-opacity-20': data.spells?.find(e => e === spell.id) }"
-                        @click="() => data.spells?.includes(spell.id) ? data.spells.splice(data.spells.findIndex((e: string) => e === spell.id), 1) : data.spells!.push(spell.id)">
-                        <div class="flex flex-row justify-between">
-                            <span class="text-lg font-bold">{{ spell.name }}</span>
-                            <div class="flex flex-row items-center gap-6">
-                                <div class="flex flex-row text-sm gap-2">
-                                    <span v-for="element of spell.elements" :class="elementTexts[element].class" class="border !border-opacity-50 rounded-full !bg-opacity-20 px-2 py-px">{{ elementTexts[element].text }}</span>
-                                </div>
-                                <div class="flex flex-row text-sm gap-1">
-                                    <span class="">Rang {{ spell.rank }}</span><span>/</span>
-                                    <span class="">{{ spellTypeTexts[spell.type] }}</span><span>/</span>
-                                    <span class="">{{ spell.cost }} mana</span><span>/</span>
-                                    <span class="">{{ typeof spell.speed === 'string' ? spell.speed : `${spell.speed} minutes` }}</span>
-                                </div>
-                            </div>
-                        </div>
-                        <MarkdownRenderer :content="spell.effect" />
-                    </div>
-                </div>
-            </div>
-        </template>
-    </Collapsible> -->
 </template>
\ No newline at end of file