Sascha/Aime
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

GUI: Splitter zwischen Liste und Detail (340-680px, persistent)

Browse Source 
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_0113vDKdSNtD3Dwcw4QMu9yV
This commit is contained in:
schakal00783
2026-07-17 02:00:03 +02:00
co-authored by Claude Fable 5
parent f7c50b2b6b
commit 2c9015dd7c
3 changed files with 37 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/web/src/main.js
+21
View File
@@ -289,8 +289,29 @@ function viewRecordings() {
v.innerHTML = `
<div class="rec-layout">
<aside class="rec-list-pane"><div id="reclist" class="list">Lade…</div></aside>
<div class="rec-splitter" title="Ziehen: Listenbreite ändern"></div>
<section class="rec-detail-pane"><div id="detail"><div class="detail-empty muted">← Aufnahme wählen</div></div></section>
</div>`;
// Draggable splitter: list width between LIST_MIN (the old fixed width) and
// twice that; persisted for all sessions.
const LIST_MIN = 340, LIST_MAX = 680;
const listPane = v.querySelector('.rec-list-pane');
const applyW = (w) => { listPane.style.flex = `0 0 ${Math.min(LIST_MAX, Math.max(LIST_MIN, w))}px`; };
applyW(+localStorage.getItem('aime-list-width') || LIST_MIN);
v.querySelector('.rec-splitter').onmousedown = (e) => {
e.preventDefault();
const startX = e.clientX, startW = listPane.getBoundingClientRect().width;
document.body.classList.add('resizing');
const move = (ev) => applyW(startW + (ev.clientX - startX));
const up = () => {
document.removeEventListener('mousemove', move);
document.removeEventListener('mouseup', up);
document.body.classList.remove('resizing');
localStorage.setItem('aime-list-width', Math.round(listPane.getBoundingClientRect().width));
};
document.addEventListener('mousemove', move);
document.addEventListener('mouseup', up);
};
refreshRecList();
if (state.selectedId != null) openRecording(state.selectedId);
}