Resizable right column in the Study stage; start on the chosen page without a flash

The Study stage's right column has a drag handle (mouse, arrow keys, double-click
or Home to reset); the width is remembered per device. The app now starts on the
user's chosen home page from the first render instead of showing My Studies
first. Tests wait on page headings so a lazily loaded page can't be confused
with hidden text from the previous one.

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>

src/App.test.jsx

@@ -1290,7 +1290,7 @@ describe('Chosen home page', () => {
     expect(await screen.findByText('My Studies')).toBeInTheDocument();
     // from another page, Home is the chosen page
     await u.click(screen.getByRole('button', { name: /reading plans/i }));
-    await screen.findByText(/browse plans/i);
+    await screen.findByRole('heading', { name: /^reading plans$/i });
     await u.click(screen.getByRole('button', { name: homeBtn }));
     expect(await screen.findByText(/Genesis 1 · BSB/)).toBeInTheDocument();
   });
@@ -1299,13 +1299,13 @@ describe('Chosen home page', () => {
     localStorage.setItem('start-page', 'plans');
     const u = userEvent.setup();
     render(<App />);
-    await screen.findByText(/browse plans/i); // opened on Reading Plans
+    await screen.findByRole('heading', { name: /^reading plans$/i }); // opened on Reading Plans
     await u.click(screen.getByRole('button', { name: homeBtn })); // already there -> My Studies
     await screen.findByText('My Studies');
     await u.click(screen.getByRole('button', { name: /import session list/i }));
     await screen.findByRole('heading', { name: /import session list/i });
     await u.click(screen.getByRole('button', { name: /bible study home/i }));
-    expect(await screen.findByText(/browse plans/i)).toBeInTheDocument();
+    expect(await screen.findByRole('heading', { name: /^reading plans$/i })).toBeInTheDocument();
     await u.click(screen.getByRole('button', { name: homeBtn })); // -> My Studies again
     await u.click(screen.getByRole('button', { name: /import session list/i }));
     await u.click(screen.getByRole('button', { name: /^studies$/i }));
@@ -1316,13 +1316,13 @@ describe('Chosen home page', () => {
     localStorage.setItem('start-page', 'plans');
     const u = userEvent.setup();
     render(<App />);
-    await screen.findByText(/browse plans/i);
+    await screen.findByRole('heading', { name: /^reading plans$/i });
     await u.click(screen.getByRole('button', { name: homeBtn })); // to My Studies
     await u.click(screen.getAllByRole('button', { name: /new project/i })[0]);
     await u.click(await screen.findByRole('button', { name: /load chapter/i }));
     await screen.findByText(/Scripture & Chunks/i);
     await u.click(screen.getByRole('button', { name: homeBtn }));
-    expect(await screen.findByText(/browse plans/i)).toBeInTheDocument();
+    expect(await screen.findByRole('heading', { name: /^reading plans$/i })).toBeInTheDocument();
   });
 
   test('Settings changes it, and it is saved for next time', async () => {
@@ -1348,6 +1348,46 @@ describe('Chosen home page', () => {
     await u.click(within(prefs.getByRole('group', { name: 'Home page' })).getByRole('button', { name: 'Reading Plans' }));
     expect(localStorage.getItem('start-page')).toBe('plans');
     await u.click(screen.getByRole('button', { name: homeBtn })); // Settings back -> the new home page
-    expect(await screen.findByText(/browse plans/i)).toBeInTheDocument();
+    expect(await screen.findByRole('heading', { name: /^reading plans$/i })).toBeInTheDocument();
+  });
+});
+
+describe('Resizable study column', () => {
+  async function openStudy() {
+    const u = await loadChapter();
+    addChunk('Paul, a servant', 'In hope of eternal');
+    await screen.findByText('1 created');
+    await u.click(screen.getByRole('button', { name: /begin studying/i }));
+    await findChunkCounter(1, 1);
+    return u;
+  }
+  const columns = () => screen.getByRole('separator', { name: /resize side panel/i }).closest('aside').parentElement;
+
+  test('the handle widens and narrows the right column and the choice is remembered', async () => {
+    const u = await openStudy();
+    const handle = screen.getByRole('separator', { name: /resize side panel/i });
+    expect(columns().style.getPropertyValue('--study-right')).toBe(''); // default width
+    handle.focus();
+    await u.keyboard('{ArrowLeft}');
+    expect(columns().style.getPropertyValue('--study-right')).toBe('472px');
+    expect(localStorage.getItem('study-right-width')).toBe('472');
+    await u.keyboard('{Shift>}{ArrowRight}{/Shift}');
+    expect(columns().style.getPropertyValue('--study-right')).toBe('376px');
+  });
+
+  test('double-clicking the handle restores the default width', async () => {
+    const u = await openStudy();
+    const handle = screen.getByRole('separator', { name: /resize side panel/i });
+    handle.focus();
+    await u.keyboard('{ArrowLeft}');
+    await u.dblClick(handle);
+    expect(localStorage.getItem('study-right-width')).toBeNull();
+    expect(columns().style.getPropertyValue('--study-right')).toBe('');
+  });
+
+  test('a saved width is applied when the study opens', async () => {
+    localStorage.setItem('study-right-width', '560');
+    await openStudy();
+    expect(columns().style.getPropertyValue('--study-right')).toBe('560px');
   });
 });