Refactor: Extract drag-and-drop logic from renderDocList

Extracts complex DOM event binding logic for drag-and-drop from the long `renderDocList` function in `src/main.ts` into a new, separate helper function `setupDocInteraction`. This significantly improves the readability and maintainability of the codebase.

Co-authored-by: Horizontal42 <75383519+Horizontal42@users.noreply.github.com>
This commit is contained in:
google-labs-jules[bot] 2026-07-28 23:48:00 +00:00
parent f5b1fc038b
commit 004a910e52

View file

@ -95,30 +95,7 @@ function reorderDoc(srcId: string, targetId: string): void {
renderDocList(); renderDocList();
} }
function renderDocList(): void { function setupDocInteraction(el: HTMLElement, doc: DocMeta, list: HTMLElement, data: AppData): void {
const list = $("#doc-list");
list.replaceChildren();
const frag = document.createDocumentFragment();
for (const doc of data.docs) {
const el = document.createElement("div");
el.className = "doc-item" + (doc.id === data.activeId ? " active" : "") + (doc.pinned ? " pinned" : "");
const name = document.createElement("span");
name.className = "doc-name";
name.textContent = doc.title || t("untitled");
el.appendChild(name);
const mkBtn = (cls: string, text: string, title: string, cb: () => void): HTMLButtonElement => {
const b = document.createElement("button");
b.className = cls;
b.textContent = text;
b.title = title;
b.setAttribute("aria-label", title);
b.addEventListener("click", (e) => { e.stopPropagation(); cb(); });
return b;
};
el.appendChild(mkBtn("pin-btn" + (doc.pinned ? " active" : ""), "📌", doc.pinned ? t("unpin") : t("pin"), () => pinDoc(doc.id)));
// Reordering uses plain mouse tracking, not the native HTML5 drag API — // Reordering uses plain mouse tracking, not the native HTML5 drag API —
// Tauri's window-level file-drop hook (dragDropEnabled, needed for // Tauri's window-level file-drop hook (dragDropEnabled, needed for
// dropping .numi files from Explorer) intercepts WebView2's own drag // dropping .numi files from Explorer) intercepts WebView2's own drag
@ -167,6 +144,33 @@ function renderDocList(): void {
if (suppressClick) { suppressClick = false; return; } if (suppressClick) { suppressClick = false; return; }
switchDoc(doc.id); switchDoc(doc.id);
}); });
}
function renderDocList(): void {
const list = $("#doc-list");
list.replaceChildren();
const frag = document.createDocumentFragment();
for (const doc of data.docs) {
const el = document.createElement("div");
el.className = "doc-item" + (doc.id === data.activeId ? " active" : "") + (doc.pinned ? " pinned" : "");
const name = document.createElement("span");
name.className = "doc-name";
name.textContent = doc.title || t("untitled");
el.appendChild(name);
const mkBtn = (cls: string, text: string, title: string, cb: () => void): HTMLButtonElement => {
const b = document.createElement("button");
b.className = cls;
b.textContent = text;
b.title = title;
b.setAttribute("aria-label", title);
b.addEventListener("click", (e) => { e.stopPropagation(); cb(); });
return b;
};
el.appendChild(mkBtn("pin-btn" + (doc.pinned ? " active" : ""), "📌", doc.pinned ? t("unpin") : t("pin"), () => pinDoc(doc.id)));
setupDocInteraction(el, doc, list, data);
el.dataset.docId = doc.id; el.dataset.docId = doc.id;
const del = document.createElement("button"); const del = document.createElement("button");