feat(featured): bannière dynamique (extraction couleur, historique, shuffle) + ajustements UI/CSS

Shikakiben · Shikakiben · commit ffa57e23d15f · 2025-12-29T15:34:48.000+01:00
diff --git a/.github/workflows/appimage.yml b/.github/workflows/appimage.yml
@@ -5,7 +5,7 @@ concurrency:
 on:
   push:
     branches:
-      - build
+      - main
   schedule:
     - cron: "0 7 1/21 * *" # We default to rebuilding every 21 days, change this to your liking
   workflow_dispatch: {}
diff --git a/src/renderer/features/categories/dropdown.js b/src/renderer/features/categories/dropdown.js
@@ -182,6 +182,8 @@
               apps: detailedApps,
               toastMessage: `Catégorie "${name}" : ${filteredApps.length} apps`
             });
+            // notify other parts (renderer) that a custom category was activated so they can refresh UI such as featured
+            try { document.dispatchEvent(new CustomEvent('category.override', { detail: { name, count: detailedApps.length } })); } catch(_) {}
           }, iconMap);
           categoriesDropdownMenu.appendChild(btn);
         });
diff --git a/src/renderer/features/featured/index.js b/src/renderer/features/featured/index.js
@@ -1,10 +1,70 @@
 (function registerFeatured(){
   const namespace = window.features = window.features || {};
 
+  // helper: determine if a hex color is light
+  function hexToRgb(hex) {
+    if (!hex) return null;
+    hex = hex.replace('#','');
+    if (hex.length === 3) hex = hex.split('').map(c=>c+c).join('');
+    const int = parseInt(hex,16);
+    return { r: (int>>16)&255, g: (int>>8)&255, b: int&255 };
+  }
+  function luminance(r,g,b){
+    const a = [r,g,b].map(v=>{
+      v/=255; return v<=0.03928 ? v/12.92 : Math.pow((v+0.055)/1.055,2.4);
+    });
+    return 0.2126*a[0] + 0.7152*a[1] + 0.0722*a[2];
+  }
+  function isLight(hex){
+    const rgb = hexToRgb(hex);
+    if (!rgb) return false;
+    return luminance(rgb.r,rgb.g,rgb.b) > 0.6; // threshold tuned for readability
+  }
+
+  // Cache for extracted colors per URL/name to avoid repeated work
+  const _colorCache = new Map();
+  function rgbToHex(r,g,b){
+    return '#'+[r,g,b].map(v=>v.toString(16).padStart(2,'0')).join('');
+  }
+  // Extract a simple average color from an image URL (uses canvas). Returns hex or null.
+  function extractDominantColor(url){
+    if (!url) return Promise.resolve(null);
+    if (_colorCache.has(url)) return Promise.resolve(_colorCache.get(url));
+    return new Promise(resolve => {
+      try {
+        const img = new Image();
+        img.crossOrigin = 'Anonymous';
+        img.src = url;
+        img.onload = () => {
+          try {
+            const size = 32;
+            const canvas = document.createElement('canvas');
+            canvas.width = size; canvas.height = size;
+            const ctx = canvas.getContext('2d');
+            ctx.drawImage(img, 0, 0, size, size);
+            const data = ctx.getImageData(0,0,size,size).data;
+            let r=0,g=0,b=0,count=0;
+            for (let i=0;i<data.length;i+=4){
+              const alpha = data[i+3];
+              if (alpha < 32) continue; // skip mostly transparent
+              r += data[i]; g += data[i+1]; b += data[i+2]; count++;
+            }
+            if (!count) { _colorCache.set(url,null); resolve(null); return; }
+            r = Math.round(r/count); g = Math.round(g/count); b = Math.round(b/count);
+            const hex = rgbToHex(r,g,b);
+            _colorCache.set(url, hex);
+            resolve(hex);
+          } catch(e){ _colorCache.set(url,null); resolve(null); }
+        };
+        img.onerror = () => { _colorCache.set(url,null); resolve(null); };
+      } catch(e){ resolve(null); }
+    });
+  }
+
   function renderItem(item, container) {
     const html = `
       <div class="featured-item" role="group" aria-label="${item.title}">
-        <div class="featured-visual" style="background:${item.color || 'var(--primary)'}">
+        <div class="featured-visual">
           <img class="featured-icon" src="${getIconUrl(item.name||'')}" alt="${item.title}" onerror="this.onerror=null;this.src='https://raw.githubusercontent.com/Portable-Linux-Apps/Portable-Linux-Apps.github.io/main/icons/blank.png'"/>
         </div>
         <div class="featured-body">
@@ -18,13 +78,25 @@
   function init(options = {}) {
     const container = options.container || document.getElementById('featuredBanner');
     const state = options.state || {};
-    const items = options.items || (window?.require ? (window.require('./config/featured') || []) : []);
+    const DEFAULT_ITEMS = [
+      { name: 'code', title: 'Visual Studio Code', desc: 'A lightweight but powerful source code editor.', color: '#007ACC' },
+      { name: 'vlc', title: 'VLC', desc: 'A free and open source cross-platform multimedia player.', color: '#E02525' },
+      { name: 'jellyfin', title: 'Jellyfin', desc: 'A personal media server that puts you in control.', color: '#F58A25' }
+    ];
+    // allow passing a static featured config; else try require; else default
+    const featuredConfig = (Array.isArray(options.featuredConfig) && options.featuredConfig.length)
+      ? options.featuredConfig
+      : (window?.require ? (function(){ try { return window.require('./config/featured') || []; } catch(_) { return []; } })() : []);
+    let items = [];
+    // initialize empty to avoid flash of static items; updateFromState will later populate
     if (!container) return null;
     container.innerHTML = `
       <div class="featured-inner">
-        <button class="featured-prev" aria-label="Previous">◀</button>
-        <div class="featured-slot"></div>
-        <button class="featured-next" aria-label="Next">▶</button>
+        <div class="featured-controls">
+          <button class="featured-prev" aria-label="Previous">◀</button>
+          <div class="featured-slot"></div>
+          <button class="featured-next" aria-label="Next">▶</button>
+        </div>
         <div class="featured-dots" aria-hidden="true"></div>
       </div>`;
 
@@ -46,10 +118,34 @@
       if (!items || !items.length) { slot.innerHTML = ''; return; }
       idx = (index + items.length) % items.length;
       renderItem(items[idx], slot);
+      const featuredInnerEl = container.querySelector('.featured-inner');
+      const item = items[idx];
+      // apply color to entire banner if provided, otherwise try to extract from the icon
+      async function applyColorHex(hex){
+        if (hex) {
+          featuredInnerEl.style.background = `linear-gradient(90deg, rgba(0,0,0,0.14), rgba(0,0,0,0.10)), linear-gradient(90deg, ${hex}44, ${hex}33)`;
+          featuredInnerEl.classList.add('has-color');
+          if (isLight(hex)) { featuredInnerEl.classList.add('light-text'); featuredInnerEl.classList.remove('dark-text'); }
+          else { featuredInnerEl.classList.add('dark-text'); featuredInnerEl.classList.remove('light-text'); }
+        } else {
+          featuredInnerEl.style.background = '';
+          featuredInnerEl.classList.remove('has-color','light-text','dark-text');
+        }
+      }
+      if (item && item.color) {
+        applyColorHex(item.color);
+      } else {
+        // try extracting from icon; do not block render
+        const iconUrl = getIconUrl(item.name||'');
+        applyColorHex(null); // clear first
+        extractDominantColor(iconUrl).then(hex => {
+          if (!hex) return;
+          applyColorHex(hex);
+        }).catch(()=>{});
+      }
       const btns = dots.querySelectorAll('.dot');
       btns.forEach((b,i)=> b.classList.toggle('active', i===idx));
       // add click handler on slot to open details
-      const item = items[idx];
       const itemEl = slot.querySelector('.featured-item');
       if (itemEl) {
         itemEl.style.cursor = 'pointer';
@@ -58,8 +154,32 @@
     }
 
     function goTo(i) { show(i); resetTimer(); }
-    function nextItem() { show(idx+1); }
-    function prevItem() { show(idx-1); }
+    function nextItem() {
+      // if we're at the last item, pick a new random subset and start from the beginning
+      if (!items || items.length === 0) return;
+      if (idx === items.length - 1) {
+        const newItems = computeItemsFromState();
+        if (Array.isArray(newItems) && newItems.length) {
+          // remember current page in history before replacing
+          pushHistory(items);
+          updateItems(newItems);
+          return; // updateItems calls show(0)
+        }
+      }
+      show(idx+1);
+    }
+    function prevItem() {
+      // if at first item, try restoring previous page from history
+      if (idx === 0) {
+        const prev = popHistory();
+        if (Array.isArray(prev) && prev.length) {
+          // restore previous items and show the last entry
+          updateItems(prev, { resetIndex: true, index: prev.length - 1 });
+          return;
+        }
+      }
+      show(idx-1);
+    }
     function resetTimer() { if (timer) { clearInterval(timer); } timer = setInterval(nextItem, 6000); }
 
     prev.addEventListener('click', () => { prevItem(); resetTimer(); });
@@ -75,7 +195,85 @@
       if (e.key === 'ArrowRight') { nextItem(); resetTimer(); }
     });
 
-    return Object.freeze({ show, goTo, destroy() { clearInterval(timer); } });
+    // history stack to allow restoring previous pages (max HISTORY_LIMIT)
+    const HISTORY_LIMIT = 10;
+    let history = [];
+    function pushHistory(arr){
+      try{
+        if (!Array.isArray(arr) || !arr.length) return;
+        history.push(arr.slice());
+        if (history.length > HISTORY_LIMIT) history.shift();
+      }catch(e){}
+    }
+    function popHistory(){
+      try{ return history.length ? history.pop() : null; }catch(e){ return null; }
+    }
+
+    function updateItems(newItems, opts = { resetIndex: true, index: 0 }) {
+      items = (Array.isArray(newItems) && newItems.length) ? newItems : DEFAULT_ITEMS;
+      updateDots();
+      if (opts && opts.resetIndex) show(opts.index || 0);
+      resetTimer();
+    }
+
+    function computeItemsFromState() {
+      try {
+        const active = (state && (state.categoryOverride && (state.categoryOverride.norm || state.categoryOverride.name || state.categoryOverride.category))) || (state && state.activeCategory) || 'all';
+        // Build candidates
+        let candidates = [];
+        if (active === 'all') {
+          candidates = (Array.isArray(state.filtered) && state.filtered.length) ? state.filtered : (state.allApps || []);
+        } else if (active === 'installed') {
+          candidates = (state.allApps || []).filter(a => a && a.installed);
+        } else {
+          const norm = s => (s && typeof s === 'string') ? s.trim().toLowerCase() : '';
+          candidates = (state.allApps || []).filter(a => a && norm(a.category) === norm(active));
+        }
+        const source = (Array.isArray(state.filtered) && state.filtered.length) ? state.filtered : candidates;
+        const arr = (source || []).filter(app => app && app.name);
+        // shuffle and pick subset
+        const a = arr.slice();
+        for (let i = a.length - 1; i > 0; i--) {
+          const j = Math.floor(Math.random() * (i + 1)); const tmp = a[i]; a[i] = a[j]; a[j] = tmp;
+        }
+        const picked = a.slice(0, 5);
+        const mapped = picked.map(app => ({ name: app.name, title: app.name ? (app.name.charAt(0).toUpperCase()+app.name.slice(1)) : (app?.title||app?.name||''), desc: app?.desc || app?.short || '', color: (featuredConfig.find(f => f.name === app.name) || {}).color || '' }));
+        // fallback: only if apps are loaded return static featured
+        if (mapped && mapped.length) return mapped;
+        if (Array.isArray(state.allApps) && state.allApps.length > 0) return (featuredConfig.length ? featuredConfig : DEFAULT_ITEMS);
+        return [];
+      } catch (e) { return []; }
+    }
+
+    function updateFromState() {
+      try {
+        // clear history when state changes (new category) to avoid mixing contexts
+        history = [];
+        const newItems = computeItemsFromState();
+        updateItems(newItems);
+        // decide visibility: show if items and category allowed and not details and no active search
+        const bannerEl = container;
+        if (!bannerEl) return newItems;
+        const searchEl = document.getElementById('searchInput');
+        const q = (searchEl && String(searchEl.value || '').trim()) || '';
+        // determine if search is active (either search feature reports searchMode OR input currently focused)
+        let searchActive = false;
+        try {
+          const searchApi = window.features?.search;
+          const stateInfo = typeof searchApi?.getSearchState === 'function' ? searchApi.getSearchState() : null;
+          if (stateInfo && stateInfo.searchMode) searchActive = true;
+        } catch (e) {}
+        if (searchEl && document.activeElement === searchEl) searchActive = true;
+        const isDetails = document.body.classList.contains('details-mode');
+        const isAllowedCategory = !!(state && (state.activeCategory === 'all' || state.categoryOverride));
+        // Only hide when BOTH: search is active AND there is non-empty query text.
+        const hideBecauseOfSearch = searchActive && q.length > 0;
+        bannerEl.hidden = !(newItems && newItems.length && isAllowedCategory && !isDetails && !hideBecauseOfSearch);
+        return newItems;
+      } catch (e) { return []; }
+    }
+
+    return Object.freeze({ show, goTo, updateItems, updateFromState, destroy() { clearInterval(timer); } });
   }
 
   namespace.featured = Object.freeze({ init });
diff --git a/src/renderer/features/search/index.js b/src/renderer/features/search/index.js
@@ -80,6 +80,18 @@
       categoriesApi.updateDropdownLabel(stateRef, translateFn, iconMapOverride);
     }
     applySearchInternal();
+    // ensure banner visibility reacts immediately when the user focuses search
+    try { updateBannerVisibility(); } catch(e) {}
+    // If the user clicked into the search field and there's already a query,
+    // hide the banner immediately (defensive: the focus may be briefly lost
+    // during the tab switch flow, so force hiding here).
+    try {
+      const q = (searchInput && String(searchInput.value || '').trim()) || '';
+      if (q.length) {
+        const banner = document.getElementById('featuredBanner');
+        if (banner) banner.hidden = true;
+      }
+    } catch (e) {}
   }
 
   function hidePanelsForNonApps() {
@@ -99,6 +111,8 @@
 
   function resetSearchModeIfNeeded() {
     if (!searchMode) return;
+    // If the user is currently focused on the search input, don't blur it — they are actively interacting
+    if (searchInput && document.activeElement === searchInput) return;
     searchMode = false;
     if (searchInput) {
       lastSearchValue = searchInput.value || '';
@@ -209,17 +223,36 @@
     debounceDelay = typeof options.debounceDelay === 'number' ? options.debounceDelay : 140;
     isSandboxed = typeof options.isSandboxed === 'function' ? options.isSandboxed : () => false;
 
+    function updateBannerVisibility() {
+      try {
+        const banner = document.getElementById('featuredBanner');
+        if (!banner) return;
+        const q = (searchInput && String(searchInput.value || '').trim()) || '';
+        // Hide the banner only when the search is active OR the input is focused with non-empty query.
+        // If the input simply holds previous text but isn't active, keep the banner visible.
+        const shouldHideBecauseOfSearch = q.length && (searchMode === true || (searchInput && document.activeElement === searchInput));
+        if (shouldHideBecauseOfSearch) {
+          banner.hidden = true;
+          return;
+        }
+        // otherwise follow normal rules (only visible on Applications tab and not in details-mode)
+        banner.hidden = !(stateRef && (stateRef.activeCategory === 'all')) || document.body.classList.contains('details-mode');
+      } catch (e) { /* defensive: ignore DOM issues */ }
+    }
+
     if (searchInput) {
       searchInput.addEventListener('focus', handleFocus);
       const debouncer = getDebounce();
-      const onInput = debouncer(() => applySearchInternal(), debounceDelay);
+      const onInput = debouncer(() => { applySearchInternal(); updateBannerVisibility(); }, debounceDelay);
       searchInput.addEventListener('input', onInput);
+      // ensure initial state
+      updateBannerVisibility();
     }
 
     return Object.freeze({
       applySearch: () => applySearchInternal(),
       getSearchState: () => ({ searchMode, lastSearchValue }),
-      resetSearch: () => { searchMode = false; lastSearchValue = ''; }
+      resetSearch: () => { searchMode = false; lastSearchValue = ''; if (searchInput) { searchInput.value = ''; } try { const b = document.getElementById('featuredBanner'); if (b) b.hidden = !(stateRef && stateRef.activeCategory === 'all'); } catch(e){} }
     });
   }
 
diff --git a/src/renderer/renderer.js b/src/renderer/renderer.js
diff --git a/style.css b/style.css
