feat(tri): mémoriser les préférences de tri

app/pages/component-catalog.vue

@@ -140,19 +140,34 @@
 <script setup lang="ts">
 import { computed, onMounted, ref } from 'vue'
 import { useComposants } from '~/composables/useComposants'
+import { useComponentTypes } from '~/composables/useComponentTypes'
 import { useToast } from '~/composables/useToast'
+import { usePersistedSort } from '~/composables/usePersistedSort'
 import DocumentThumbnail from '~/components/DocumentThumbnail.vue'
 import { isImageDocument, isPdfDocument } from '~/utils/documentPreview'
 
 const { showError } = useToast()
 const { composants, loadComposants, loading: loadingComposantsRef, deleteComposant } = useComposants()
+const { componentTypes, loadComponentTypes } = useComponentTypes()
 const loadingComposants = computed(() => loadingComposantsRef.value)
-const composantsList = computed(() => composants.value || [])
+
+// Enrichir les composants avec les types de composants complets
+const composantsList = computed(() => {
+  return (composants.value || []).map((composant) => {
+    const typeComposant = componentTypes.value.find(t => t.id === composant.typeComposantId)
+    return {
+      ...composant,
+      typeComposant: typeComposant || composant.typeComposant || null
+    }
+  })
+})
 const composantsTotal = computed(() => composantsList.value.length)
 
 const searchTerm = ref('')
-const sortField = ref<'name' | 'createdAt'>('name')
-const sortDirection = ref<'asc' | 'desc'>('asc')
+const { sortField, sortDirection } = usePersistedSort<'name' | 'createdAt', 'asc' | 'desc'>(
+  'component-catalog',
+  { field: 'name', direction: 'asc' },
+)
 
 const resolvePrimaryDocument = (component: Record<string, any>) => {
   const documents = Array.isArray(component?.documents) ? component.documents : []
@@ -298,6 +313,9 @@ const handleDeleteComponent = async (component: Record<string, any>) => {
 }
 
 onMounted(async () => {
-  await loadComposants()
+  await Promise.all([
+    loadComposants(),
+    loadComponentTypes()
+  ])
 })
 </script>