feat: resize todo panes and collapse note groups

Let users drag the to-do list/detail divider and remember its width. Note headings independently collapse task rows without clearing selected details. Use a 1px divider with a transparent drag target and compact spacing.

Validation: 115 focused tests including native Electron input; typecheck and lint passed.

Release note: Resize the Magic Notes to-do list with a thin draggable divider and collapse tasks by source note.

tests/magic-notes-layout.electron.test.ts

@@ -127,6 +127,34 @@ it('resizes record columns with native Electron input and preserves desktop widt
         assert.equal(await js('getComputedStyle(document.querySelector(".magic-notes-stream-pane")).scrollbarWidth'), 'auto');
         assert.equal(await js('getComputedStyle(document.querySelector(".magic-notes-stream-pane")).scrollbarColor'), 'auto');
         win.webContents.debugger.detach();
+        await win.loadURL(${JSON.stringify(server.resolvedUrls!.local[0] + 'layout.html')});
+        await wait('!!document.querySelector("#magic-library-switch")');
+        await click('#magic-library-switch');
+        await wait('!!document.querySelector("#magic-todo-select-layout-todo")');
+        await click('#magic-todo-select-layout-todo');
+        const todoHandle = '.magic-notes-todo-resize-handle';
+        assert.equal(await js('getComputedStyle(document.querySelector(".magic-todo-workspace")).gridTemplateColumns.split(" ")[1]'), '1px');
+        assert.equal((await rect(todoHandle)).width, 9, 'Transparent hit area remains easy to drag');
+        await drag(todoHandle, 100);
+        const todoWidth = (await rect('#magic-todo-list')).width;
+        assert(todoWidth > 410 && todoWidth < 430, 'Todo drag width: ' + todoWidth);
+        await click('.magic-todo-directory__heading');
+        assert.equal(await js('document.querySelector(".magic-todo-directory__items").checkVisibility()'), false);
+        assert.equal(await js('document.querySelector(".magic-todo-detail").checkVisibility()'), true);
+        win.focus(); win.webContents.focus();
+        await key('.magic-todo-directory__heading', 'Space');
+        assert.equal(await js('document.querySelector(".magic-todo-directory__items").checkVisibility()'), true);
+        win.setContentSize(760, 640); await settle(); await settle();
+        assert.equal(await js('getComputedStyle(document.querySelector(".magic-notes-todo-resize-handle")).display'), 'block');
+        win.setContentSize(600, 640); await settle(); await settle();
+        assert.equal(await js('document.querySelector(".magic-notes-todo-resize-handle").checkVisibility()'), false);
+        assert(await js('document.documentElement.scrollWidth <= innerWidth'));
+        win.setContentSize(1280, 800); await settle(); await settle();
+        assert.equal((await rect('#magic-todo-list')).width, todoWidth);
+        await win.loadURL(${JSON.stringify(server.resolvedUrls!.local[0] + 'layout.html')});
+        await wait('!!document.querySelector("#magic-library-switch")');
+        await click('#magic-library-switch');
+        assert.equal((await rect('#magic-todo-list')).width, todoWidth);
         fs.writeFileSync(${JSON.stringify(join(directory, 'result.json'))}, JSON.stringify({ emptyHeight, grownHeight, dragged, withoutAi, constrained, narrowStream, persisted: true }));
         app.exit(0);
       }).catch(error => { console.error(error); app.exit(1); });

tests/support/magic-notes-layout-regression.tsx

@@ -15,7 +15,11 @@ const note = {
 }
 window.goodbuddy = {
   magicNotes: {
-    list: async () => ({ notes: [note] }), get: async () => note, listTodos: async () => ({ todos: [] }),
+    list: async () => ({ notes: [note] }), get: async () => note, listTodos: async () => ({ todos: [{
+      id: 'layout-todo', noteId: note.id, noteTitle: note.title, entryId: 'layout-entry',
+      title: 'Layout task', instructions: 'Task details', completed: false, revision: 1,
+      comments: [], createdAt: note.createdAt, updatedAt: note.updatedAt
+    }] }),
     onChanged: () => () => {}, onAnalysisEvent: () => () => {}
   },
   updates: { getSettings: async () => ({ magicNoteCommentMode: 'after-save-manual', magicNoteCommentFormat: 'combined' }) }