From 6a788422577fb53318708620ade1e6afcb397635 Mon Sep 17 00:00:00 2001
From: Arthur Danjou <arthurdanjou@outlook.fr>
Date: Tue, 29 Jul 2025 15:10:35 +0000
Subject: [PATCH] =?UTF-8?q?Am=C3=A9lioration=20de=20la=20typage=20TypeScri?=
 =?UTF-8?q?pt=20et=20refactorisation=20de=20la=20logique=20de=20calcul=20d?=
 =?UTF-8?q?es=20couleurs=20de=20fond?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/components/AppBackground.vue | 35 +++++++++++++++++++-------------
 1 file changed, 21 insertions(+), 14 deletions(-)

diff --git a/app/components/AppBackground.vue b/app/components/AppBackground.vue
index abe788f..d37af62 100644
--- a/app/components/AppBackground.vue
+++ b/app/components/AppBackground.vue
@@ -1,28 +1,35 @@
 <script lang="ts" setup>
-import { navColors, NavColor } from '~~/types'
+import { navColors, type NavColor } from '~~/types'
 
 const route = useRoute()
 const colorMode = useColorMode()
 
-const colors = computed(() => {
+const colors = computed((): NavColor[] => {
   const navColor = navColors.find(nav => route.name === nav.name)
-  if (navColor?.colors) return navColor.colors as Array<NavColor>
+  if (navColor?.colors) return navColor.colors
 
   const fallbackColor = colorMode.value === 'dark' ? '#000000' : '#ffffff'
-  return [{ color: fallbackColor, x: 0, y: 0, radius: 0 }, { color: fallbackColor, x: 0, y: 0, radius: 0 }] as Array<NavColor>
+  const fallbackGradient = { color: fallbackColor, x: 0, y: 0, radius: 0 }
+  return [fallbackGradient, fallbackGradient]
 })
 
-const backgroundStyle = computed(() => ({
-  backgroundImage: colors.value
-    .map(c => `radial-gradient(circle ${c.radius}px at ${c.x}% ${c.y}%, ${c.color}4D, transparent)`)
-    .join(', '),
-  backgroundSize: '100% 100%, 100% 100%'
-}))
+const backgroundStyle = computed(() => {
+  const gradients = colors.value
+    .map(({ color, radius, x, y }) => 
+      `radial-gradient(circle ${radius}px at ${x}% ${y}%, ${color}4D, transparent)`
+    )
+    .join(', ')
+  
+  return {
+    backgroundImage: gradients,
+    backgroundSize: Array(colors.value.length).fill('100% 100%').join(', ')
+  }
+})
 </script>
 
 <template>
-    <div
-      class="fixed  inset-0 z-0"
-      :style="backgroundStyle"
-    />
+  <div
+    class="fixed inset-0 z-0"
+    :style="backgroundStyle"
+  />
 </template>