feat: wire navigation and jump list into the book viewer

src/App.test.tsx

@@ -1,6 +1,7 @@
 import { beforeEach, describe, expect, it } from "vitest";
 import { http, HttpResponse, delay } from "msw";
 import { fireEvent, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
 import App from "./App";
 import { withProviders } from "./test/utils";
 import { server } from "./test/server";
@@ -47,6 +48,50 @@ describe("App", () => {
     expect(await screen.findByText(/No books found/)).toBeInTheDocument();
   });
 
+  it("navigates to the next and previous book with the controls", async () => {
+    const user = userEvent.setup();
+    withProviders(<App />);
+    await screen.findByRole("heading", { name: "The Hobbit" });
+
+    await user.click(screen.getByRole("button", { name: "Show next book" }));
+    expect(
+      await screen.findByRole("heading", { name: "A Wizard of Earthsea" }),
+    ).toBeInTheDocument();
+    expect(screen.getByText("2 / 3")).toBeInTheDocument();
+
+    await user.click(screen.getByRole("button", { name: "Show previous book" }));
+    expect(await screen.findByRole("heading", { name: "The Hobbit" })).toBeInTheDocument();
+    expect(screen.getByText("1 / 3")).toBeInTheDocument();
+  });
+
+  it("jumps directly to a book from the list", async () => {
+    const user = userEvent.setup();
+    withProviders(<App />);
+    await screen.findByRole("heading", { name: "The Hobbit" });
+
+    await user.selectOptions(screen.getByLabelText("Jump to book"), "2");
+    expect(
+      await screen.findByRole("heading", { name: "The Left Hand of Darkness" }),
+    ).toBeInTheDocument();
+    expect(screen.getByText("3 / 3")).toBeInTheDocument();
+  });
+
+  it("does not refetch while navigating between books", async () => {
+    resetSearchRequestCount();
+    const user = userEvent.setup();
+    withProviders(<App />);
+    await screen.findByRole("heading", { name: "The Hobbit" });
+
+    await user.click(screen.getByRole("button", { name: "Show next book" }));
+    await screen.findByRole("heading", { name: "A Wizard of Earthsea" });
+    await user.click(screen.getByRole("button", { name: "Show previous book" }));
+    await screen.findByRole("heading", { name: "The Hobbit" });
+    await user.selectOptions(screen.getByLabelText("Jump to book"), "2");
+    await screen.findByRole("heading", { name: "The Left Hand of Darkness" });
+
+    expect(getSearchRequestCount()).toBe(1);
+  });
+
   it("fetches once more when the subject changes", async () => {
     withProviders(<App />);
     await screen.findByRole("heading", { name: "The Hobbit" });

src/App.tsx

@@ -1,4 +1,7 @@
+import { useState } from "react";
 import { BookCard } from "./components/BookCard";
+import { BookJumpList } from "./components/BookJumpList";
+import { NavigationControls } from "./components/NavigationControls";
 import { SubjectFilter } from "./components/SubjectFilter";
 import { useBooks } from "./hooks/useBooks";
 import { usePreferences } from "./hooks/usePreferences";
@@ -7,7 +10,10 @@ import "./App.css";
 function App() {
   const { subject, setSubject } = usePreferences();
   const { books, isLoading, isError } = useBooks(subject);
-  const current = books[0];
+
+  const [index, setIndex] = useState(0);
+  const safeIndex = books.length > 0 ? Math.min(index, books.length - 1) : 0;
+  const current = books[safeIndex];
 
   return (
     <div className="app">
@@ -25,6 +31,17 @@ function App() {
         {current && (
           <section className="book-viewer" aria-label="Book viewer">
             <BookCard book={current} />
+            <NavigationControls
+              currentIndex={safeIndex}
+              totalCount={books.length}
+              onPrevious={() => setIndex(Math.max(0, safeIndex - 1))}
+              onNext={() => setIndex(Math.min(books.length - 1, safeIndex + 1))}
+            />
+            <BookJumpList
+              titles={books.map((book) => book.title)}
+              currentIndex={safeIndex}
+              onSelect={setIndex}
+            />
           </section>
         )}
       </main>

src/__snapshots__/App.test.tsx.snap

@@ -101,6 +101,57 @@ exports[`App > matches the snapshot 1`] = `
             </ul>
           </div>
         </article>
+        <nav
+          aria-label="Book navigation"
+          class="navigation-controls"
+        >
+          <button
+            aria-label="Show previous book"
+            disabled=""
+            type="button"
+          >
+            Previous
+          </button>
+          <p
+            aria-live="polite"
+            class="navigation-progress"
+          >
+            1
+             / 
+            3
+          </p>
+          <button
+            aria-label="Show next book"
+            type="button"
+          >
+            Next
+          </button>
+        </nav>
+        <label
+          class="book-jump-list"
+          for="book-jump-list"
+        >
+          Jump to book
+          <select
+            id="book-jump-list"
+          >
+            <option
+              value="0"
+            >
+              The Hobbit
+            </option>
+            <option
+              value="1"
+            >
+              A Wizard of Earthsea
+            </option>
+            <option
+              value="2"
+            >
+              The Left Hand of Darkness
+            </option>
+          </select>
+        </label>
       </section>
     </main>
     <footer