feat: move quick links to header second row (inbox/PM/publish/search)

- panel-quicklinks div moved from sidebar-panel into the header,
  after top-bar-right, so it always visible on mobile without opening menu
- Displays as a horizontal scrollable pill-button strip below logo+hamburger
- header: flex-wrap:wrap so second row renders cleanly
- top-bar-left: flex:1 nowrap for logo+hamburger first row
- panel-quicklinks: flex:0 0 100% forces it to its own row, overflow-x:auto

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

nodejs-project/nodejs-project/src/client/assets/styles/mobile.css

@@ -55,16 +55,15 @@ pre, code {
   margin: 6px auto;
 }
 
-/* ---- Header: una sola fila (logo izquierda, hamburger derecha) ---- */
+/* ---- Header: fila 1 (logo + ☰), fila 2 (quick links) ---- */
 .header {
   display: flex !important;
   flex-direction: row !important;
-  flex-wrap: nowrap !important;
+  flex-wrap: wrap !important;        /* permite la segunda fila */
   align-items: center !important;
   width: 100% !important;
-  padding: 4px 8px !important;
+  padding: 4px 8px 0 8px !important;
-  gap: 4px !important;
+  gap: 0 !important;
-  min-height: 48px !important;
 }
 
 .top-bar-left {
@@ -75,6 +74,7 @@ pre, code {
   flex-wrap: nowrap !important;
   gap: 4px !important;
   min-width: 0 !important;
+  padding-bottom: 4px !important;
 }
 
 /* Logo: crece para llenar el espacio sobrante */
@@ -226,28 +226,32 @@ a.logo-icon img.logo-icon {
   user-select: none !important;
 }
 
-/* Quick links (inbox, PM, publicar, search) en el panel móvil */
+/* Quick links: segunda fila del header (inbox, PM, publicar, buscar) */
 .panel-quicklinks {
   display: flex !important;
   flex-direction: row !important;
-  flex-wrap: wrap !important;
+  flex-wrap: nowrap !important;
+  flex: 0 0 100% !important;        /* ocupa su propia fila en el header */
+  overflow-x: auto !important;
+  scrollbar-width: none !important;
   gap: 6px !important;
-  padding: 10px 0 12px 0 !important;
+  padding: 6px 0 6px 0 !important;
-  border-bottom: 1px solid #444 !important;
+  align-items: center !important;
-  margin-bottom: 8px !important;
 }
+.panel-quicklinks::-webkit-scrollbar { display: none !important; }
+
 .panel-quicklink {
   display: inline-flex !important;
   align-items: center !important;
   gap: 4px !important;
-  padding: 8px 12px !important;
+  padding: 7px 12px !important;
-  border-radius: 8px !important;
+  border-radius: 20px !important;   /* píldoras redondeadas */
-  font-size: 0.85rem !important;
+  font-size: 0.8rem !important;
   font-weight: 600 !important;
   text-decoration: none !important;
   border: 1px solid #555 !important;
   white-space: nowrap !important;
-  min-height: 36px !important;
+  flex-shrink: 0 !important;
 }
 
 .sidebar-panel nav ul {

nodejs-project/nodejs-project/src/views/main_views.js

@@ -737,6 +737,19 @@ const template = (titlePrefix, ...elements) => {
               navLink({ href: "/search", emoji: "ꔅ", text: i18n.searchTitle })
             )
           )
+        ),
+        div(
+          { class: 'panel-quicklinks' },
+          (() => {
+            const inboxCount = sharedState.getInboxCount();
+            const badge = inboxCount > 0 ? span({ class: 'inbox-badge' }, String(inboxCount)) : '';
+            return a({ href: '/inbox', class: 'panel-quicklink' },
+              span({ class: 'emoji' }, '☂'), ' ', i18n.inbox, badge
+            );
+          })(),
+          a({ href: '/pm', class: 'panel-quicklink' }, span({ class: 'emoji' }, 'ꕕ'), ' ', i18n.privateMessage),
+          a({ href: '/publish', class: 'panel-quicklink' }, span({ class: 'emoji' }, '❂'), ' ', i18n.publish),
+          a({ href: '/search', class: 'panel-quicklink' }, span({ class: 'emoji' }, 'ꔅ'), ' ', i18n.searchTitle)
         )
       ),
       (() => {
@@ -758,19 +771,6 @@ const template = (titlePrefix, ...elements) => {
           label({ for: 'mobile-menu-toggle', class: 'mobile-menu-close' },
             span({ class: 'menu-icon-close' }, '✕'), ' Cerrar'
           ),
-          div(
-            { class: 'panel-quicklinks' },
-            (() => {
-              const inboxCount = sharedState.getInboxCount();
-              const badge = inboxCount > 0 ? span({ class: 'inbox-badge' }, String(inboxCount)) : '';
-              return a({ href: '/inbox', class: 'panel-quicklink' },
-                span({ class: 'emoji' }, '☂'), ' ', i18n.inbox, badge
-              );
-            })(),
-            a({ href: '/pm', class: 'panel-quicklink' }, span({ class: 'emoji' }, 'ꕕ'), ' ', i18n.privateMessage),
-            a({ href: '/publish', class: 'panel-quicklink' }, span({ class: 'emoji' }, '❂'), ' ', i18n.publish),
-            a({ href: '/search', class: 'panel-quicklink' }, span({ class: 'emoji' }, 'ꔅ'), ' ', i18n.searchTitle)
-          ),
           div(
             { class: "sidebar-left" },
             nav(