perf(composables) : add smart cache to usePieces and useComposants

Align with useProducts pattern: loaded flag, cache-first return,
loading guard, and clearCache helper to avoid redundant API calls.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

app/assets/app.css

@@ -6,26 +6,31 @@
   prefersdark: false; /* set as default dark mode (prefers-color-scheme:dark) */
   color-scheme: light; /* color of browser-provided UI */
 
-  --color-base-100: oklch(98% 0.02 240);
+  /* #FBFAFA — gris clair */
-  --color-base-200: oklch(95% 0.03 240);
+  --color-base-100: oklch(98% 0.003 0);
-  --color-base-300: oklch(92% 0.04 240);
+  --color-base-200: oklch(94% 0.01 262);
-  --color-base-content: oklch(20% 0.05 240);
+  --color-base-300: oklch(90% 0.02 262);
-  --color-primary: oklch(55% 0.3 240);
+  --color-base-content: oklch(20% 0.03 262);
-  --color-primary-content: oklch(98% 0.01 240);
+  /* #304998 — bleu Malio */
-  --color-secondary: oklch(70% 0.25 200);
+  --color-primary: oklch(37% 0.15 262);
-  --color-secondary-content: oklch(98% 0.01 200);
+  --color-primary-content: oklch(98% 0.005 262);
-  --color-accent: oklch(65% 0.25 160);
+  /* #A5ACD0 — lavande */
-  --color-accent-content: oklch(98% 0.01 160);
+  --color-secondary: oklch(75% 0.055 270);
-  --color-neutral: oklch(50% 0.05 240);
+  --color-secondary-content: oklch(20% 0.03 270);
-  --color-neutral-content: oklch(98% 0.01 240);
+  /* #ED8521 — orange */
-  --color-info: oklch(70% 0.2 220);
+  --color-accent: oklch(71% 0.17 58);
-  --color-info-content: oklch(98% 0.01 220);
+  --color-accent-content: oklch(98% 0.005 58);
-  --color-success: oklch(65% 0.25 140);
+  /* neutral dérivé du bleu Malio */
-  --color-success-content: oklch(98% 0.01 140);
+  --color-neutral: oklch(37% 0.08 262);
-  --color-warning: oklch(80% 0.25 80);
+  --color-neutral-content: oklch(98% 0.005 262);
-  --color-warning-content: oklch(20% 0.05 80);
+  --color-info: oklch(55% 0.12 262);
-  --color-error: oklch(65% 0.3 30);
+  --color-info-content: oklch(98% 0.005 262);
-  --color-error-content: oklch(98% 0.01 30);
+  --color-success: oklch(65% 0.2 145);
+  --color-success-content: oklch(98% 0.005 145);
+  --color-warning: oklch(78% 0.15 70);
+  --color-warning-content: oklch(20% 0.05 70);
+  --color-error: oklch(60% 0.25 25);
+  --color-error-content: oklch(98% 0.005 25);
 
   /* border radius */
   --radius-selector: 1rem;
@@ -114,7 +119,7 @@
 
 /* Focus visible pour l'accessibilité */
 *:focus-visible {
-  outline: 2px solid #3b82f6;
+  outline: 2px solid #304998;
   outline-offset: 2px;
 }
 

app/composables/useComposants.ts

@@ -40,11 +40,13 @@ interface LoadComposantsOptions {
   itemsPerPage?: number
   orderBy?: string
   orderDir?: 'asc' | 'desc'
+  force?: boolean
 }
 
 const composants = ref<Composant[]>([])
 const total = ref(0)
 const loading = ref(false)
+const loaded = ref(false)
 
 const extractTotal = (payload: unknown, fallbackLength: number): number => {
   const p = payload as Record<string, unknown> | null
@@ -98,16 +100,32 @@ export function useComposants() {
   }
 
   const loadComposants = async (options: LoadComposantsOptions = {}): Promise<ComposantListResult> => {
-    loading.value = true
-    try {
     const {
       search = '',
       page = 1,
       itemsPerPage = 30,
       orderBy = 'name',
       orderDir = 'asc',
+      force = false,
     } = options
 
+    if (!force && loaded.value && !search && page === 1) {
+      return {
+        success: true,
+        data: { items: composants.value, total: total.value, page, itemsPerPage },
+      }
+    }
+
+    if (loading.value) {
+      return {
+        success: true,
+        data: { items: composants.value, total: total.value, page, itemsPerPage },
+      }
+    }
+
+    loading.value = true
+    try {
+
       const params = new URLSearchParams()
       params.set('itemsPerPage', String(itemsPerPage))
       params.set('page', String(page))
@@ -124,6 +142,7 @@ export function useComposants() {
         const enrichedItems = await Promise.all(items.map((item) => withResolvedConstructeurs(item)))
         composants.value = enrichedItems
         total.value = extractTotal(result.data, items.length)
+        loaded.value = true
         return {
           success: true,
           data: {
@@ -216,15 +235,23 @@ export function useComposants() {
   const getComposants = () => composants.value
   const isLoading = () => loading.value
 
+  const clearComposantsCache = () => {
+    composants.value = []
+    total.value = 0
+    loaded.value = false
+  }
+
   return {
     composants,
     total,
     loading,
+    loaded,
     loadComposants,
     createComposant,
     updateComposant: updateComposantData,
     deleteComposant,
     getComposants,
     isLoading,
+    clearComposantsCache,
   }
 }

app/composables/usePieces.ts

@@ -41,11 +41,13 @@ interface LoadPiecesOptions {
   itemsPerPage?: number
   orderBy?: string
   orderDir?: 'asc' | 'desc'
+  force?: boolean
 }
 
 const pieces = ref<Piece[]>([])
 const total = ref(0)
 const loading = ref(false)
+const loaded = ref(false)
 
 const extractTotal = (payload: unknown, fallbackLength: number): number => {
   const p = payload as Record<string, unknown> | null
@@ -108,16 +110,32 @@ export function usePieces() {
   }
 
   const loadPieces = async (options: LoadPiecesOptions = {}): Promise<PieceListResult> => {
-    loading.value = true
-    try {
     const {
       search = '',
       page = 1,
       itemsPerPage = 30,
       orderBy = 'name',
       orderDir = 'asc',
+      force = false,
     } = options
 
+    if (!force && loaded.value && !search && page === 1) {
+      return {
+        success: true,
+        data: { items: pieces.value, total: total.value, page, itemsPerPage },
+      }
+    }
+
+    if (loading.value) {
+      return {
+        success: true,
+        data: { items: pieces.value, total: total.value, page, itemsPerPage },
+      }
+    }
+
+    loading.value = true
+    try {
+
       const params = new URLSearchParams()
       params.set('itemsPerPage', String(itemsPerPage))
       params.set('page', String(page))
@@ -134,6 +152,7 @@ export function usePieces() {
         const enrichedItems = await Promise.all(items.map((item) => withResolvedConstructeurs(item)))
         pieces.value = enrichedItems
         total.value = extractTotal(result.data, items.length)
+        loaded.value = true
         return {
           success: true,
           data: {
@@ -226,15 +245,23 @@ export function usePieces() {
   const getPieces = () => pieces.value
   const isLoading = () => loading.value
 
+  const clearPiecesCache = () => {
+    pieces.value = []
+    total.value = 0
+    loaded.value = false
+  }
+
   return {
     pieces,
     total,
     loading,
+    loaded,
     loadPieces,
     createPiece,
     updatePiece: updatePieceData,
     deletePiece,
     getPieces,
     isLoading,
+    clearPiecesCache,
   }
 }