diff --git a/renderer/app.js b/renderer/app.js index 8d52918..8441b31 100644 --- a/renderer/app.js +++ b/renderer/app.js @@ -4120,31 +4120,79 @@ function loadAutoCheckPreference() { } // --- Queue table column resizing (JDownloader-style) --- +// Two-tier widths: _idealColumnWidths is what the user set (persisted); the +// displayed widths are scaled proportionally if the window is too narrow to fit +// all ideals (fullscreen → windowed). We never overwrite ideals just because +// the window shrunk — only an explicit drag updates the ideal for that column. +const _idealColumnWidths = {}; + function restoreQueueColumnWidths() { try { const raw = localStorage.getItem(QUEUE_COL_WIDTHS_KEY); - if (!raw) return; - const widths = JSON.parse(raw); - if (!widths || typeof widths !== 'object') return; - for (const [col, px] of Object.entries(widths)) { - const th = document.querySelector(`#queueTable th[data-col="${col}"]`); - if (th && typeof px === 'number' && px > 20) { - th.style.width = px + 'px'; + if (raw) { + const widths = JSON.parse(raw); + if (widths && typeof widths === 'object') { + for (const [col, px] of Object.entries(widths)) { + if (typeof px === 'number' && px > 20) _idealColumnWidths[col] = px; + } } } + _applyFittedColumnWidths(); } catch {} } -function saveQueueColumnWidths() { - try { - const widths = {}; - document.querySelectorAll('#queueTable th[data-col]').forEach(th => { - widths[th.dataset.col] = th.getBoundingClientRect().width; - }); - localStorage.setItem(QUEUE_COL_WIDTHS_KEY, JSON.stringify(widths)); - } catch {} +function saveDraggedColumnWidth(col, width) { + // Called from the resizer onUp: the dragged column's new width becomes its + // new ideal. Other columns keep their saved ideals untouched (so a drag + // while the window is small doesn't bake the scaled values in). + if (!col || typeof width !== 'number' || width < 40) return; + _idealColumnWidths[col] = width; + try { localStorage.setItem(QUEUE_COL_WIDTHS_KEY, JSON.stringify(_idealColumnWidths)); } catch {} + _applyFittedColumnWidths(); } +function _applyFittedColumnWidths() { + const container = document.getElementById('queueContainer'); + if (!container) return; + const ths = document.querySelectorAll('#queueTable th[data-col]'); + if (!ths.length) return; + + const entries = []; + let total = 0; + ths.forEach(th => { + // Fall back to the column's currently-measured width if no ideal exists + // yet (first render before the user ever dragged). + const ideal = _idealColumnWidths[th.dataset.col] || th.getBoundingClientRect().width || 0; + entries.push({ th, ideal }); + total += ideal; + }); + if (total <= 0) return; + + const available = container.clientWidth; + if (available <= 0) return; + const MIN = 40; + + if (total <= available) { + entries.forEach(({ th, ideal }) => { th.style.width = ideal + 'px'; }); + return; + } + // Scale all columns proportionally so they exactly fit the available width. + const scale = available / total; + entries.forEach(({ th, ideal }) => { + th.style.width = Math.max(MIN, Math.round(ideal * scale)) + 'px'; + }); +} + +// Debounced window-resize refit. Fires on every window size change — fullscreen +// → windowed, dragging the window edge, monitor unplug — and reshapes columns +// to the new viewport so the user never has to drag the window wider just to +// see a hidden column. +let _columnRefitTimer = null; +window.addEventListener('resize', () => { + clearTimeout(_columnRefitTimer); + _columnRefitTimer = setTimeout(_applyFittedColumnWidths, 60); +}); + function setupColumnResizing() { const headers = document.querySelectorAll('#queueTable th[data-col]'); headers.forEach(th => { @@ -4171,7 +4219,10 @@ function setupColumnResizing() { document.removeEventListener('mouseup', onUp); resizer.classList.remove('dragging'); document.body.classList.remove('col-resizing'); - saveQueueColumnWidths(); + // Only the dragged column's new width becomes its new ideal; other + // columns keep their saved ideals (so dragging while the window is + // narrow doesn't permanently shrink everything else). + saveDraggedColumnWidth(th.dataset.col, th.getBoundingClientRect().width); }; document.addEventListener('mousemove', onMove);