Administrator/Twitch-VOD-Manager
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 212 Wiki Activity

cleanup: merge-tab empty state — DOM-built instead of innerHTML template

Browse Source 
When mergeFiles is empty, the renderer dropped an inline-styled
innerHTML template into #mergeFileList:

  <div class="empty-state" style="padding: 40px 20px;">
    <svg style="opacity:0.3" ...><path ...></svg>
    <p style="margin-top:10px">${UI_TEXT.merge.empty}</p>
  </div>

Three issues:
- innerHTML interpolating a locale string (lint hook flags pattern
  even though locale strings are app-controlled)
- Inline styles for padding / opacity / margin
- The same SVG icon as the static HTML, duplicated

Built via createElement + createElementNS for the SVG namespace, so
the renderer never touches innerHTML for this branch. Styling moved
to a .merge-empty-state class that scopes the padding override
(needed because the merge file-list sits in a settings-card with
its own padding) without leaking into the global .empty-state used
by the VOD grid.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
xRangerDE 2026-05-11 03:56:13 +02:00
parent 1b8624d88a
commit 5d5ffa675b
2 changed files with 34 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
src/renderer.ts
View File

@ -1561,12 +1561,23 @@ function renderMergeFiles(): void {
byId('btnMerge').disabled = mergeFiles.length < 2;
if (mergeFiles.length === 0) {
list.innerHTML = `
<div class="empty-state" style="padding: 40px 20px;">
<svg width="48" height="48" viewBox="0 0 24 24" fill="currentColor" style="opacity:0.3"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg>
<p style="margin-top:10px">${UI_TEXT.merge.empty}</p>
</div>
`;
// Build via DOM API to keep the renderer clean of inline-styled
// HTML strings. The empty-state SVG is the same plus-icon the
// static HTML uses, just built programmatically.
list.replaceChildren();
const wrap = document.createElement('div');
wrap.className = 'empty-state merge-empty-state';
const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
svg.setAttribute('viewBox', '0 0 24 24');
svg.setAttribute('fill', 'currentColor');
const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
path.setAttribute('d', 'M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z');
svg.appendChild(path);
wrap.appendChild(svg);
const p = document.createElement('p');
p.textContent = UI_TEXT.merge.empty;
wrap.appendChild(p);
list.appendChild(wrap);
return;
}

17
src/styles.css
View File

@ -2086,6 +2086,23 @@ select option {
line-height: 1.4;
}
/* Merge-tab empty state — uses the global .empty-state base and adds
its own padding override since the merge file-list container sits
inside a settings-card with its own padding. */
.merge-empty-state {
padding: 40px 20px;
}
.merge-empty-state svg {
opacity: 0.3;
width: 48px;
height: 48px;
}
.merge-empty-state p {
margin-top: 10px;
}
/* Old generic scrollbar rules were dead — superseded by the
purple-themed *::-webkit-scrollbar block further down the file.
Removed to avoid confusion when someone greps for scrollbar styles. */