Reprise générale de la structure de l'appliweb

pmoapp/webapp/src/App.vue

@@ -1,31 +1,187 @@
 <template>
-  <div>
-    <nav>
-      <router-link to="/">Accueil</router-link> |
-      <router-link to="/logs">Logs</router-link> |
-      <router-link to="/covers-cache">Cover Cache</router-link> |
-      <router-link to="/upnp">UPnP Explorer</router-link>
+  <div class="app-container">
+    <nav class="main-nav">
+      <router-link to="/">🏠 Accueil</router-link>
+
+      <!-- Menu déroulant Debug -->
+      <div class="dropdown" @mouseenter="showDebugMenu = true" @mouseleave="showDebugMenu = false">
+        <button class="dropdown-toggle" :class="{ active: isDebugRoute }">
+          🔧 Debug
+          <span class="arrow">{{ showDebugMenu ? '▼' : '▶' }}</span>
+        </button>
+        <div v-show="showDebugMenu" class="dropdown-menu">
+          <router-link to="/logs" @click="showDebugMenu = false">📋 Logs</router-link>
+          <router-link to="/upnp" @click="showDebugMenu = false">🎵 UPnP Explorer</router-link>
+          <router-link to="/covers-cache" @click="showDebugMenu = false">🎨 Cover Cache</router-link>
+        </div>
+      </div>
     </nav>
-    <router-view />
+    <main class="main-content">
+      <router-view />
+    </main>
   </div>
 </template>
 
 <script setup lang="ts">
-// rien à importer
+import { ref, computed } from 'vue'
+import { useRoute } from 'vue-router'
+
+const showDebugMenu = ref(false)
+const route = useRoute()
+
+const isDebugRoute = computed(() => {
+  return ['/logs', '/upnp', '/covers-cache'].includes(route.path)
+})
 </script>
 
 <style scoped>
-nav {
+.app-container {
+  width: 100%;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+}
+
+.main-nav {
   background: #333;
-  width: 100vw;
-  padding: 0.5rem;
+  width: 100%;
+  padding: 0.75rem 1rem;
+  box-sizing: border-box;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  align-items: center;
+  position: sticky;
+  top: 0;
+  z-index: 1000;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
 }
-a {
+
+.main-nav a {
   color: #eee;
-  margin: 0 0.5rem;
+  padding: 0.5rem 1rem;
+  border-radius: 4px;
+  transition: all 0.2s;
+  text-decoration: none;
+  white-space: nowrap;
 }
-a.router-link-active {
+
+.main-nav a:hover {
+  background: #555;
+  color: #fff;
+}
+
+.main-nav a.router-link-active {
+  background: #569cd6;
+  color: #fff;
   font-weight: bold;
-  text-decoration: underline;
+}
+
+/* Dropdown menu */
+.dropdown {
+  position: relative;
+  display: inline-block;
+}
+
+.dropdown-toggle {
+  color: #eee;
+  padding: 0.5rem 1rem;
+  border-radius: 4px;
+  transition: all 0.2s;
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  font-size: 1rem;
+  font-family: inherit;
+  white-space: nowrap;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.dropdown-toggle:hover {
+  background: #555;
+  color: #fff;
+}
+
+.dropdown-toggle.active {
+  background: #569cd6;
+  color: #fff;
+  font-weight: bold;
+}
+
+.dropdown-toggle .arrow {
+  font-size: 0.7em;
+  transition: transform 0.2s;
+}
+
+.dropdown-menu {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  background: #2d2d2d;
+  border: 1px solid #555;
+  border-radius: 4px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
+  min-width: 200px;
+  margin-top: 0.25rem;
+  z-index: 1001;
+  display: flex;
+  flex-direction: column;
+  padding: 0.5rem 0;
+}
+
+.dropdown-menu a {
+  padding: 0.75rem 1rem;
+  color: #eee;
+  text-decoration: none;
+  transition: all 0.2s;
+  border-radius: 0;
+  display: block;
+}
+
+.dropdown-menu a:hover {
+  background: #555;
+  color: #fff;
+}
+
+.dropdown-menu a.router-link-active {
+  background: #569cd6;
+  color: #fff;
+  font-weight: bold;
+}
+
+.main-content {
+  flex: 1;
+  width: 100%;
+  box-sizing: border-box;
+  overflow-x: hidden;
+}
+
+/* Responsive pour petits écrans */
+@media (max-width: 768px) {
+  .main-nav {
+    padding: 0.5rem;
+  }
+
+  .main-nav a {
+    font-size: 0.9rem;
+    padding: 0.4rem 0.8rem;
+  }
+
+  .dropdown-toggle {
+    font-size: 0.9rem;
+    padding: 0.4rem 0.8rem;
+  }
+
+  .dropdown-menu {
+    min-width: 180px;
+  }
+
+  .dropdown-menu a {
+    font-size: 0.9rem;
+    padding: 0.6rem 0.8rem;
+  }
 }
 </style>

pmoapp/webapp/src/components/CoverCacheManager.vue

@@ -236,8 +236,24 @@ onMounted(()=>refreshImages());
 <style scoped>
 .cover-cache-manager {
   padding: 1rem;
-  max-width: 1400px;
-  margin: 0 auto;
+  width: 100%;
+  max-width: 100%;
+  margin: 0;
+  box-sizing: border-box;
+}
+
+@media (min-width: 1400px) {
+  .cover-cache-manager {
+    padding: 2rem;
+    max-width: 1400px;
+    margin: 0 auto;
+  }
+}
+
+@media (max-width: 768px) {
+  .cover-cache-manager {
+    padding: 0.5rem;
+  }
 }
 .header {
   display: flex;

pmoapp/webapp/src/components/LogView.vue

@@ -466,8 +466,8 @@ onUnmounted(() => {
 .log-viewer {
   display: flex;
   flex-direction: column;
-  height: 80vh;
-  width: 100vw;
+  min-height: calc(100vh - 60px); /* Hauteur viewport - nav */
+  width: 100%;
   margin: 0;
   padding: 0;
   background: #1e1e1e;

pmoapp/webapp/src/components/UpnpExplorer.vue

@@ -163,9 +163,25 @@ onUnmounted(() => {
 
 <style scoped>
 .upnp-explorer {
-  padding: 2rem;
-  max-width: 1400px;
-  margin: 0 auto;
+  padding: 1rem;
+  width: 100%;
+  max-width: 100%;
+  margin: 0;
+  box-sizing: border-box;
+}
+
+@media (min-width: 1400px) {
+  .upnp-explorer {
+    padding: 2rem;
+    max-width: 1400px;
+    margin: 0 auto;
+  }
+}
+
+@media (max-width: 768px) {
+  .upnp-explorer {
+    padding: 0.5rem;
+  }
 }
 
 /* Header */

pmoapp/webapp/src/style.css

@@ -25,10 +25,11 @@ a:hover {
 body {
   margin: 0;
   display: flex;
-  place-items: center;
+  flex-direction: column;
   min-width: 320px;
   min-height: 100vh;
-  width: 100vw;
+  width: 100%;
+  overflow-x: hidden;
 }
 
 h1 {
@@ -60,10 +61,13 @@ button:focus-visible {
 }
 
 #app {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-  text-align: center;
+  width: 100%;
+  min-height: 100vh;
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
 }
 
 @media (prefers-color-scheme: light) {