My Studies: show studies as a grid or a list

A Grid / List toggle beside the sort and tag filters. List is one compact
row per study (small book cover, title with Rename, passage, tags, date,
Resume and Delete). The choice is remembered on the device.

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

src/test/App.home.test.jsx

@@ -27,6 +27,25 @@ describe('Home page', () => {
     localStorage.setItem('bible-study-index', JSON.stringify(index));
   }
 
+  test('studies can be shown as a grid or a list, and the choice is remembered', async () => {
+    seedProject();
+    seedProject({ id: 'p2', title: 'Second Study' });
+    const user = userEvent.setup();
+    const { unmount } = render(<App />);
+    await waitFor(() => expect(screen.queryByText('Loading…')).not.toBeInTheDocument());
+    const layout = screen.getByRole('group', { name: /studies layout/i });
+    expect(within(layout).getByRole('button', { name: 'Grid' })).toHaveAttribute('aria-pressed', 'true');
+    expect(screen.getByRole('heading', { name: 'Titus Notes' }).closest('.sm\\:grid-cols-2')).not.toBeNull();
+    await user.click(within(layout).getByRole('button', { name: 'List' }));
+    expect(within(layout).getByRole('button', { name: 'List' })).toHaveAttribute('aria-pressed', 'true');
+    expect(screen.getByRole('heading', { name: 'Titus Notes' }).closest('.sm\\:grid-cols-2')).toBeNull();
+    expect(screen.getAllByRole('button', { name: 'Resume' })).toHaveLength(2); // everything is still there
+    expect(localStorage.getItem('homeView')).toBe('list');
+    unmount();
+    await renderApp(); // reopening keeps the list
+    expect(within(screen.getByRole('group', { name: /studies layout/i })).getByRole('button', { name: 'List' })).toHaveAttribute('aria-pressed', 'true');
+  });
+
   test('searching 3+ characters finds matches inside study notes', async () => {
     seedProject();
     const user = userEvent.setup();