feat: move navigation tabs from main content to header with responsive mobile layout and icon-only display on small screens

Add header-nav class to mainNav and move it before headerActions in header. Add dynamic stylesheet hiding .head-title/.head-sub, styling .header-nav with flex layout, 4px gap, 22px left margin, transparent background, and 8px/11px button padding. Add responsive breakpoints at 850px (scrollable nav with hidden scrollbar, max-width calc(100vw - 250px)) and 560px (icon-only buttons

templates/index.html

@@ -162,6 +162,7 @@ function loadPreferences(){const audioPreference=localStorage.getItem('preferred
 translateLayout(currentUiLanguage);loadPreferences();
 const serviceIconSvg={radarr:'<svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="7"/><circle cx="12" cy="12" r="2" fill="currentColor"/><path d="M12 5a7 7 0 0 1 6 3M12 12l6-5"/></svg>',sonarr:'<svg viewBox="0 0 24 24"><path d="M4 12h3M17 12h3M7 8a6 6 0 0 1 10 0M7 16a6 6 0 0 0 10 0M10 12h4"/><circle cx="12" cy="12" r="2" fill="currentColor"/></svg>',sabnzbd:'<svg viewBox="0 0 24 24"><path d="M12 4v11M8 11l4 4 4-4M5 19h14"/></svg>',jellyfin:'<svg viewBox="0 0 24 24"><path d="M7 4h10l4 8-4 8H7l-4-8 4-8Z"/><path d="m10 8 6 4-6 4V8Z" fill="currentColor"/></svg>',seerr:'<svg viewBox="0 0 24 24"><circle cx="10.5" cy="10.5" r="6"/><path d="m15 15 5 5M8 10h5"/></svg>',prowlarr:'<svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="8"/><path d="m12 6 2 6-2 6-2-6 2-6ZM6 12h12"/></svg>',easynews:'<svg viewBox="0 0 24 24"><path d="M6 18h12a3 3 0 0 0 .5-6A6.5 6.5 0 0 0 6 10a4 4 0 0 0 0 8Z"/></svg>',qbittorrent:'<svg viewBox="0 0 24 24"><path d="m5 7 5-3 5 3-5 3-5-3ZM9 14l5-3 5 3-5 3-5-3ZM5 17l5-3 5 3-5 3-5-3Z"/></svg>',bazarr:'<svg viewBox="0 0 24 24"><path d="M5 6h14M5 12h9M5 18h14"/><path d="m17 10 2 2-2 2"/></svg>',lingarr:'<svg viewBox="0 0 24 24"><path d="M5 6h14v10H9l-4 3V6Z"/><path d="M9 10h6M9 13h4"/></svg>',libretranslate:'<svg viewBox="0 0 24 24"><path d="M5 6h8M9 4v2M6 6c1 5 4 8 8 10M6 16c3-1 5-3 7-6M14 6h5M16 4v2M14 18h7M17 10l-3 8M18 15h4"/></svg>',sonarr_prowlarr_proxy:'<svg viewBox="0 0 24 24"><path d="M5 8h8M11 5l3 3-3 3M19 16h-8M13 13l-3 3 3 3"/><circle cx="5" cy="8" r="2"/><circle cx="19" cy="16" r="2"/></svg>',radarr_prowlarr_proxy:'<svg viewBox="0 0 24 24"><path d="M5 8h8M11 5l3 3-3 3M19 16h-8M13 13l-3 3 3 3"/><circle cx="5" cy="8" r="2"/><circle cx="19" cy="16" r="2"/></svg>',dashboard:'<svg viewBox="0 0 24 24"><path d="m4 11 8-7 8 7v8a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1v-8Z"/><path d="M9 20v-6h6v6"/></svg>'};function upgradeServiceIcons(){document.querySelectorAll('.service-logo[class*="service-icon-"]').forEach(icon=>{const key=[...icon.classList].find(name=>name.startsWith('service-icon-'))?.slice(13);if(serviceIconSvg[key]&&icon.dataset.iconKey!==key){icon.innerHTML=serviceIconSvg[key];icon.dataset.iconKey=key}})}const serviceIconObserver=new MutationObserver(upgradeServiceIcons);const serviceIconList=document.querySelector('.service-list');if(serviceIconList)serviceIconObserver.observe(serviceIconList,{childList:true,subtree:true});upgradeServiceIcons();
 document.querySelector('#languageToggle').addEventListener('click',()=>translateLayout(currentUiLanguage==='de'?'en':'de'));
+const header=document.querySelector('header'),headerActions=document.querySelector('.actions'),mainNav=document.querySelector('.nav');if(header&&headerActions&&mainNav){mainNav.classList.add('header-nav');header.insertBefore(mainNav,headerActions);const headerStyle=document.createElement('style');headerStyle.textContent='.head-title,.head-sub{display:none}.header-nav{display:flex;align-items:center;gap:4px;margin:0 0 0 22px!important;padding:3px!important;border:0!important;background:transparent!important;box-shadow:none!important;overflow:visible}.header-nav button{padding:8px 11px;font-size:12px}.header-nav .nav-count{font-size:10px}header{gap:0}.brand{flex:0 0 auto}@media(max-width:850px){.header-nav{margin-left:10px!important;overflow-x:auto;max-width:calc(100vw - 250px);scrollbar-width:none}.header-nav::-webkit-scrollbar{display:none}.header-nav button{white-space:nowrap;padding:7px 9px;font-size:11px}}@media(max-width:560px){.header-nav{max-width:calc(100vw - 135px)}.header-nav button{font-size:0;padding:8px}.header-nav button[data-view="dashboard"]{font-size:0}.header-nav button[data-view="dashboard"]::before{content:"▦";font-size:16px}.header-nav button[data-view="radarr"]::before{content:"R";font-size:14px;font-weight:800}.header-nav button[data-view="sonarr"]::before{content:"S";font-size:14px;font-weight:800}.header-nav button[data-view="missing"]::before{content:"⚠";font-size:14px}.header-nav button[data-view="downloads"]::before{content:"↓";font-size:16px}}';document.head.appendChild(headerStyle)}
 const officialServiceIcons={radarr:'https://cdn.simpleicons.org/radarr/CC7B19',sonarr:'https://cdn.simpleicons.org/sonarr/35C5F4',sabnzbd:'https://cdn.simpleicons.org/sabnzbd/F5A623',jellyfin:'https://cdn.simpleicons.org/jellyfin/AA5CC3',seerr:'https://cdn.simpleicons.org/seerr/73CFF8',prowlarr:'https://cdn.simpleicons.org/prowlarr/5B6BBF',easynews:'https://cdn.simpleicons.org/easynews/F28C28',qbittorrent:'https://cdn.simpleicons.org/qbittorrent/2F81C7',bazarr:'https://cdn.simpleicons.org/bazarr/44A5B5',lingarr:'https://cdn.simpleicons.org/lingarr/8B5CF6',libretranslate:'https://cdn.simpleicons.org/libretranslate/22C55E'};Object.entries(officialServiceIcons).forEach(([key,url])=>{serviceIconSvg[key]=`<img src="${url}" alt="" loading="lazy" referrerpolicy="no-referrer">`});upgradeServiceIcons();
 document.querySelectorAll('.service-logo svg').forEach(svg=>{svg.style.width='19px';svg.style.height='19px';svg.style.fill='none';svg.style.stroke='currentColor';svg.style.strokeWidth='1.8';svg.style.strokeLinecap='round';svg.style.strokeLinejoin='round'});
 document.querySelectorAll('.service-logo img').forEach(img=>{img.style.width='20px';img.style.height='20px';img.style.objectFit='contain'});