add default layout

app/app.vue

@@ -1,17 +1,13 @@
 <template>
   <div>
     <NuxtRouteAnnouncer />
-    <NuxtPage />
-    <SearchModal />
-    <Loader />
-    <Player />
+    <NuxtLayout>
+      <NuxtPage />
+    </NuxtLayout>
   </div>
 </template>
 
 <script setup>
-import SearchModal from '~/components/SearchModal.vue'
-import Player from '~/components/player.vue'
-import Loader from '~/components/Loader.vue'
 import { useUiStore } from '~/store/ui'
 import { usePlayerStore } from '~/store/player'
 import { watch, computed } from 'vue'

app/layouts/default.vue

@@ -2,7 +2,7 @@
   <div class="w-full min-h-screen flex flex-col items-center bg-gray-50">
     <!-- Header avec logo -->
     <header class="w-full py-4 px-6 bg-white shadow-sm">
-      <div class="max-w-7xl mx-auto w-full">
+      <div class="max-w-7xl mx-auto w-full flex justify-center">
         <div @click="navigateToHome" class="cursor-pointer inline-block">
           <logo />
         </div>
@@ -15,7 +15,9 @@
     </main>
 
     <!-- Player de musique fixe en bas -->
-    <player class="w-full border-t border-gray-200" />
+    <SearchModal />
+    <Loader />
+    <Player class="w-full border-t border-gray-200" />
   </div>
 </template>
 

app/pages/box/[id].vue

@@ -1,7 +1,5 @@
 <template>
-  <div>
-    <boxes />
-  </div>
+  <boxes />
 </template>
 
 <script setup lang="ts">
@@ -25,7 +23,7 @@ onMounted(async () => {
   const idParam = Array.isArray(route.params.id) ? route.params.id[0] : route.params.id
   if (typeof idParam === 'string' && idParam.length > 0) {
     uiStore.selectBox(idParam)
-    
+
     // Lire automatiquement la box si on est sur la page d'une box
     const box = dataStore.boxes.find(b => b.id === idParam)
     if (box) {

app/pages/index.vue

@@ -1,7 +1,5 @@
 <template>
-  <div>
-    <boxes />
-  </div>
+  <boxes />
 </template>
 
 <script setup>

app/pages/track/[id].vue

@@ -1,7 +1,5 @@
 <template>
-  <div>
-    <boxes />
-  </div>
+  <boxes />
 </template>
 
 <script setup>