(experimental) Peek preview always visible above effects list

[softhack007]

A hack that keeps the preview visible when scrolling through the effect list.
Basically works in PC mode but looks strange in phone mode.

Someone with more HTML/CSS experience should take this a starting point and make it work.

[softhack007]

@coderabbitai this PR is just a rough poc, and it may need a lot of improvement to make it useful.

Please review, and suggest improvements.

Known areas for improvement:

• the html/css for the new feature is not well-integrated into the overall ui code (wled00/data)
• the search box does not behave well; it should always be on top of the effect list.
• users should have a way to "pin" the preview into the foreground. If pinned, the preview stays in foreground and the effect list - including search field- should start below the preview area. In unchecked, use the previous behaviour (= preview stays in background, effect list and search box are "in front of" the preview and may scroll over it)
• in unpinned state, the preview should be behind the effect list, allowing user to have more space for scrolling / viewing the effect list.

[coderabbitai]

Tip

For best results, initiate chat on the files or code changes.

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash

# Get the PR diff to see what changes were made
echo "=== PR #186 Diff ==="
gh pr diff 186 --repo MoonModules/WLED-MM

echo -e "\n=== Files changed in PR ==="
gh pr view 186 --repo MoonModules/WLED-MM --json files --jq '.files[].path'

echo -e "\n=== Check current index.htm structure around effectGFX ==="
rg -n "effectGFX|canvasPeek" wled00/data/index.htm -A10 -B5 || echo "Pattern not found in index.htm"

echo -e "\n=== Check current CSS for peek and z-index ==="
rg -n "effectGFX|belowpreview|staytop" wled00/data/index.css -A5 -B3 || echo "Pattern not found in index.css"

echo -e "\n=== Check all z-index usage in CSS ==="
rg -n "z-index" wled00/data/index.css

echo -e "\n=== Check for existing peek/preview JS functions ==="
rg -n "canvasPeek|effectGFX|bigPeek" wled00/data/index.js -A3 -B3 || echo "Pattern not found in index.js"

Length of output: 5035

---

@softhack007, I've analyzed the current implementation and can provide specific improvements to address all the issues you mentioned. Here's my detailed review:

Current Implementation Issues

Looking at the PR diff, I can see:

1. Inline style z-index: 2 on #effectGFX - not integrated into CSS
2. Hard-coded 164px in .belowpreview - brittle and won't adapt to different canvas sizes
3. Z-index conflict: Both #effectGFX and .staytop have z-index: 2, causing layering issues with search box
4. No pin/unpin functionality for user control

---

Suggested Improvements

1. HTML Changes (wled00/data/index.htm)

Remove inline style and add pin button:

<div id="Effects" class="tabcontent">
    <div id="effectGFX" class="peek-container" hidden="true"> <!--WLEDMM-->
        <div class="peek-controls">
            <button class="btn btn-xs" id="peekPinBtn" onclick="togglePeekPin()" title="Pin/unpin preview">
                <span id="peekPinIcon">📌</span>
            </button>
        </div>
        <br>
        <canvas id="canvasPeek" onclick="bigPeek(true)"></canvas><br>
        <br>
    </div>
    <div id="fx">
        <p class="labels hd" id="modeLabel">Effect mode</p>
        <div class="staytop fnd" id="fxFind">  <!--WLEDMM - removed belowpreview, will be added dynamically-->
            <input type="text" placeholder="Search" oninput="search(this,'fxlist')" onfocus="search(this,'fxlist');gId('filters').classList.add('fade');" onblur="gId('filters').classList.remove('fade')"/>
            <i class="icons clear-icon" onclick="clean(this);">&#xe38f;</i>
            <i class="icons search-icon" onclick="gId('filters').classList.toggle('hide');" style="cursor:pointer;">&#xe0a1;</i>
        </div>

2. CSS Changes (wled00/data/index.css)

Replace the current .belowpreview rule and update related styles:

/* Remove hard-coded 164px .belowpreview rule and replace with: */

/* Peek preview container - default unpinned mode (background) */
#effectGFX.peek-container {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 1; /* Below search box, above normal content */
    background: var(--c-2);
    padding: 5px 10px;
    transition: all 0.3s ease;
}

/* Pinned mode - preview takes space, stays in foreground */
#effectGFX.peek-pinned {
    position: relative; /* Takes up space in document flow */
    z-index: 3; /* Above normal sticky elements */
    background: var(--c-2);
    padding: 5px 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    margin-bottom: 10px;
}

/* Pin button controls */
.peek-controls {
    text-align: right;
    height: 16px;
    margin-bottom: -8px;
}

#peekPinBtn {
    padding: 2px 8px;
    opacity: 0.5;
    transition: opacity 0.2s, background 0.2s;
}

#peekPinBtn:hover {
    opacity: 1;
}

#peekPinBtn.pinned {
    opacity: 1;
    background: var(--c-6);
}

/* Canvas styling */
#canvasPeek {
    display: block;
    margin: 0 auto;
    cursor: pointer;
    border-radius: 4px;
    max-width: 100%;
}

/* Update .staytop to ensure search box is always on top */
.staytop, .staybot {
    display: block;
    position: -webkit-sticky;
    position: sticky !important;
    top: 0;
    z-index: 10; /* Changed from 2 to 10 - always on top */
    margin: 0 auto auto;
}

/* Mobile responsive */
@media all and (max-width: 639px) {
    #effectGFX.peek-container,
    #effectGFX.peek-pinned {
        padding: 3px 5px;
    }
    
    .peek-controls {
        height: 14px;
    }
    
    #canvasPeek {
        max-width: 95%;
    }
}

3. JavaScript Changes (wled00/data/index.js)

Add this code to handle pin/unpin functionality:

// Add near the top with other global variables
var isPeekPinned = false;

// Toggle peek pin state
function togglePeekPin() {
    isPeekPinned = !isPeekPinned;
    const effectGFX = gId('effectGFX');
    const pinBtn = gId('peekPinBtn');
    const pinIcon = gId('peekPinIcon');
    
    if (!effectGFX) return;
    
    if (isPeekPinned) {
        // Pinned: preview in foreground, takes up space
        effectGFX.classList.remove('peek-container');
        effectGFX.classList.add('peek-pinned');
        if (pinBtn) pinBtn.classList.add('pinned');
        if (pinIcon) pinIcon.textContent = '📍'; // Filled pin
    } else {
        // Unpinned: preview in background, list scrolls over it
        effectGFX.classList.remove('peek-pinned');
        effectGFX.classList.add('peek-container');
        if (pinBtn) pinBtn.classList.remove('pinned');
        if (pinIcon) pinIcon.textContent = '📌'; // Empty pin
    }
    
    // Save preference
    localStorage.setItem('peekPinned', isPeekPinned);
}

// Load saved peek preference
function loadPeekPreference() {
    const saved = localStorage.getItem('peekPinned');
    if (saved === 'true' && !isPeekPinned) {
        togglePeekPin();
    }
}

// Call this when initializing effectGFX visibility
// Add to your existing toggleLiveview() or initialization code:
// if (gId('effectGFX') && gId('effectGFX').style.display !== 'none') {
//     loadPeekPreference();
// }

Modify the existing toggleLiveview() function (around line 2292) to initialize the preference:

function toggleLiveview()
{
    if (isM) {
        //WLEDMM adding liveview2D support on main ui
        isLv = !isLv;
        gId("colorGFX").style.display = isLv? "inline":"none";
        gId("effectGFX").style.display = isLv? "inline":"none";
        gId("segGFX").style.display = isLv? "inline":"none";

        canvasPeek = gId("canvasPeek");
        if (isLv) {
            peek(canvasPeek);
            loadPeekPreference(); // Load saved pin state
        }
    } else {
        // existing code...
    }
}

---

Key Improvements

1. ✅ No inline styles - Everything moved to CSS classes
2. ✅ No hard-coded pixel values - Uses natural document flow in pinned mode, sticky positioning in unpinned mode
3. ✅ Proper z-index hierarchy:
   • Search box: z-index: 10 (always on top)
   • Pinned preview: z-index: 3 (foreground)
   • Unpinned preview: z-index: 1 (background, behind search)
4. ✅ Pin/unpin toggle - User controls preview behavior with visual feedback
5. ✅ State persistence - Remembers user preference via localStorage
6. ✅ Responsive design - Mobile-friendly adjustments
7. ✅ Smooth transitions - Better UX with CSS transitions

How It Works

Unpinned mode (default):

• Preview has position: sticky and z-index: 1
• Search box has z-index: 10
• Effect list scrolls over the preview (peek effect - preview in background)

Pinned mode (user clicks pin button):

• Preview changes to position: relative with z-index: 3
• Takes up space in document flow (pushes effect list down)
• Effect list starts naturally below the preview
• Search box stays at z-index: 10 (still always on top)

The pin icon changes: 📌 (unpinned) ↔️ 📍 (pinned) for visual feedback.

---

Would you like me to provide any additional refinements or explore alternative approaches? For example, I could also suggest:

• Animation effects when toggling pin state
• Auto-hide preview when scrolling (unpinned mode only)
• Different canvas size options

---

🧠 Learnings used

Learnt from: softhack007
Repo: MoonModules/WLED-MM PR: 270
File: usermods/usermod_v2_rotary_encoder_ui_ALT/usermod_v2_rotary_encoder_ui_ALT.h:155-157
Timestamp: 2025-10-22T21:50:25.839Z
Learning: In WLED-MM PR #270, only Effect (Mode) IDs are migrated to 16-bit; Palette IDs and counts remain 8-bit. Usermod code should widen mode-related indices/loops to uint16_t while keeping palette-related indices/loops as uint8_t.

---

Learnt from: softhack007
Repo: MoonModules/WLED-MM PR: 270
File: wled00/FX.cpp:11799-11813
Timestamp: 2025-10-22T21:50:22.379Z
Learning: In PR #270 (16-bit effect IDs PoC), the current addEffect behavior of appending and ignoring explicit ids >= _mode.size() is intentional for the proof-of-concept; changes to honor explicit ids are deferred to a follow-up.

---

Learnt from: softhack007
Repo: MoonModules/WLED-MM PR: 270
File: wled00/fcn_declare.h:403-406
Timestamp: 2025-10-22T21:59:24.331Z
Learning: In MoonModules/WLED-MM PR #270, the out-of-bounds null-terminator write in wled00/util.cpp (extractModeSlider) is deferred and tracked in Issue #272; do not address it within PR #270.

---

Learnt from: DedeHai
Repo: MoonModules/WLED-MM PR: 253
File: usermods/audioreactive/audio_source.h:1256-1261
Timestamp: 2025-07-12T04:20:14.546Z
Learning: In WLED AudioReactive usermod, DC offset removal optimization in DMAadcSource::getSamples() should be implemented after PR #248 merges, which will change the sample buffer from float to int16. This eliminates the need for temporary integer buffers and allows direct integer arithmetic on the native buffer type for better memory efficiency on resource-constrained MCUs like C3 and S2.

---

Learnt from: softhack007
Repo: MoonModules/WLED-MM PR: 270
File: wled00/json.cpp:295-304
Timestamp: 2025-10-22T22:24:46.163Z
Learning: When deriving an upper-bound index from a count in WLED-MM PR #270, use a safe guard: last = count ? count - 1 : 0. Avoid min/max with 0 on unsigned types and never pass (count-1) directly to helpers (e.g., updateVal16, relativeChange, random8) without guarding. Effect IDs are 16-bit; palette IDs remain 8-bit but should use the same guard when count can be 0.

[softhack007]

@coderabbitai I forgot one thing:
In unpinned state, the search box should be on top as you suggest (same behaviour as before).
In pinned state, the search box should not cover the preview but stay below the preview area - but still be visisible as the first item below the preview. Scrolling the effect list upwards should neither change the search box location nor the preview position.

[coderabbitai]

Tip

For best results, initiate chat on the files or code changes.

@softhack007, excellent point! I'll adjust the solution so the search box behaves differently in each mode. Here's the updated approach:

---

Updated CSS Changes (wled00/data/index.css)

/* Peek preview container - unpinned mode (background) */
#effectGFX.peek-container {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 1; /* Below search box */
    background: var(--c-2);
    padding: 5px 10px;
    transition: all 0.3s ease;
}

/* Pinned mode - preview stays at top */
#effectGFX.peek-pinned {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 10; /* Same layer as search box */
    background: var(--c-2);
    padding: 5px 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    margin-bottom: 0; /* No gap, search box will be positioned below */
}

/* Pin button controls */
.peek-controls {
    text-align: right;
    height: 16px;
    margin-bottom: -8px;
}

#peekPinBtn {
    padding: 2px 8px;
    opacity: 0.5;
    transition: opacity 0.2s, background 0.2s;
}

#peekPinBtn:hover {
    opacity: 1;
}

#peekPinBtn.pinned {
    opacity: 1;
    background: var(--c-6);
}

/* Canvas styling */
#canvasPeek {
    display: block;
    margin: 0 auto;
    cursor: pointer;
    border-radius: 4px;
    max-width: 100%;
}

/* Search box - default behavior (unpinned mode) */
.staytop, .staybot {
    display: block;
    position: -webkit-sticky;
    position: sticky !important;
    top: 0;
    z-index: 10; /* Always on top in unpinned mode */
    margin: 0 auto auto;
    transition: top 0.3s ease;
}

/* Search box in pinned mode - positioned below preview */
.staytop.search-below-preview {
    /* top value will be set dynamically via JS based on preview height */
    z-index: 10; /* Same layer as pinned preview */
}

/* Mobile responsive */
@media all and (max-width: 639px) {
    #effectGFX.peek-container,
    #effectGFX.peek-pinned {
        padding: 3px 5px;
    }
    
    .peek-controls {
        height: 14px;
    }
    
    #canvasPeek {
        max-width: 95%;
    }
}

---

Updated JavaScript Changes (wled00/data/index.js)

// Add near the top with other global variables
var isPeekPinned = false;

// Toggle peek pin state
function togglePeekPin() {
    isPeekPinned = !isPeekPinned;
    const effectGFX = gId('effectGFX');
    const pinBtn = gId('peekPinBtn');
    const pinIcon = gId('peekPinIcon');
    const searchBox = gId('fxFind'); // The search box element
    
    if (!effectGFX) return;
    
    if (isPeekPinned) {
        // Pinned: preview and search box both stay at top
        effectGFX.classList.remove('peek-container');
        effectGFX.classList.add('peek-pinned');
        if (pinBtn) pinBtn.classList.add('pinned');
        if (pinIcon) pinIcon.textContent = '📍'; // Filled pin
        
        // Position search box below preview
        if (searchBox) {
            searchBox.classList.add('search-below-preview');
            // Calculate and set the top offset dynamically
            updateSearchBoxPosition();
        }
    } else {
        // Unpinned: preview in background, search box overlaps on top
        effectGFX.classList.remove('peek-pinned');
        effectGFX.classList.add('peek-container');
        if (pinBtn) pinBtn.classList.remove('pinned');
        if (pinIcon) pinIcon.textContent = '📌'; // Empty pin
        
        // Reset search box to normal position (top: 0)
        if (searchBox) {
            searchBox.classList.remove('search-below-preview');
            searchBox.style.top = '0';
        }
    }
    
    // Save preference
    localStorage.setItem('peekPinned', isPeekPinned);
}

// Update search box position based on preview height (for pinned mode)
function updateSearchBoxPosition() {
    const effectGFX = gId('effectGFX');
    const searchBox = gId('fxFind');
    
    if (!effectGFX || !searchBox || !isPeekPinned) return;
    
    // Get the actual height of the preview container
    const previewHeight = effectGFX.offsetHeight;
    searchBox.style.top = previewHeight + 'px';
}

// Load saved peek preference
function loadPeekPreference() {
    const saved = localStorage.getItem('peekPinned');
    if (saved === 'true' && !isPeekPinned) {
        togglePeekPin();
    }
}

// Call this when initializing effectGFX visibility
// Modify the existing toggleLiveview() function (around line 2292):
function toggleLiveview()
{
    if (isM) {
        //WLEDMM adding liveview2D support on main ui
        isLv = !isLv;
        gId("colorGFX").style.display = isLv? "inline":"none";
        gId("effectGFX").style.display = isLv? "inline":"none";
        gId("segGFX").style.display = isLv? "inline":"none";

        canvasPeek = gId("canvasPeek");
        if (isLv) {
            peek(canvasPeek);
            loadPeekPreference(); // Load saved pin state
            
            // Update search box position if in pinned mode
            // Use setTimeout to ensure DOM has rendered
            setTimeout(updateSearchBoxPosition, 100);
        }
    } else {
        // existing code...
    }
}

// Optional: Add a resize observer to update search box position 
// when window is resized (only needed if canvas size changes on resize)
if (window.ResizeObserver) {
    const peekResizeObserver = new ResizeObserver(() => {
        if (isPeekPinned) {
            updateSearchBoxPosition();
        }
    });
    
    // Start observing when effectGFX becomes visible
    const effectGFX = gId('effectGFX');
    if (effectGFX) {
        peekResizeObserver.observe(effectGFX);
    }
}

---

How It Now Works

Unpinned Mode (default):

• Preview: position: sticky, top: 0, z-index: 1 (background)
• Search box: position: sticky, top: 0, z-index: 10 (foreground)
• Result: Search box overlaps/covers the preview as you scroll ✓

Pinned Mode (user clicks pin):

• Preview: position: sticky, top: 0, z-index: 10
• Search box: position: sticky, top: [preview-height]px, z-index: 10
• Result: Both stay fixed when scrolling; search box is always visible below preview, never covers it ✓

The key change is that in pinned mode:

1. Both elements remain position: sticky (not relative)
2. Search box gets a dynamic top offset equal to the preview container height
3. Both have the same z-index: 10 (same stacking layer)
4. Effect list scrolls beneath both elements

The updateSearchBoxPosition() function dynamically calculates the preview height and positions the search box accordingly. The ResizeObserver ensures the position stays correct if the window is resized.

---

Does this match the behavior you're looking for?