Move category editor to full pages and simplify root skeleton

app/pages/component-category/new.vue

@@ -0,0 +1,68 @@
+<template>
+  <main class="mx-auto flex w-full max-w-4xl flex-col gap-8 px-4 py-8 sm:px-6 lg:px-8">
+    <header class="space-y-2">
+      <div class="flex items-center justify-between gap-4">
+        <div>
+          <h1 class="text-3xl font-bold text-base-content">Nouvelle catégorie de composant</h1>
+          <p class="text-base text-base-content/70">
+            Configurez le squelette canonique qui sera appliqué lors de la création des composants appartenant à cette catégorie.
+          </p>
+        </div>
+        <NuxtLink class="btn btn-ghost" to="/component-category">
+          Retour au catalogue
+        </NuxtLink>
+      </div>
+    </header>
+
+    <section class="rounded-xl border border-base-300 bg-base-100 p-6 shadow-sm">
+      <ModelTypeForm
+        mode="create"
+        initial-category="COMPONENT"
+        :lock-category="true"
+        :saving="saving"
+        @submit="handleSubmit"
+        @cancel="handleCancel"
+      />
+    </section>
+  </main>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useHead, useRouter } from '#imports'
+import ModelTypeForm from '~/components/model-types/ModelTypeForm.vue'
+import { createModelType } from '~/services/modelTypes'
+import { useToast } from '~/composables/useToast'
+
+useHead(() => ({
+  title: 'Nouvelle catégorie de composant',
+}))
+
+const router = useRouter()
+const { showError, showSuccess } = useToast()
+const saving = ref(false)
+
+const handleCancel = () => {
+  router.push('/component-category').catch(() => {
+    showError("Navigation impossible vers la liste des catégories.")
+  })
+}
+
+const handleSubmit = async (payload: Parameters<typeof createModelType>[0]) => {
+  saving.value = true
+  try {
+    const enrichedPayload = {
+      ...payload,
+      description: payload.notes ?? null,
+    }
+    await createModelType(enrichedPayload)
+    showSuccess('Catégorie de composant créée avec succès.')
+    await router.push('/component-category')
+  } catch (error: any) {
+    const message = error?.data?.message || error?.message || 'Une erreur est survenue lors de la création.'
+    showError(Array.isArray(message) ? message[0] : message)
+  } finally {
+    saving.value = false
+  }
+}
+</script>