[darkmastermindz]

Summary

On an iPad held sideways, the menu now ends with a 📖 button at its top-right corner. It turns on the same book layout iPhone Duo and foldables get when folded down the middle:

• the menu on the left page, reading on the right;
• the spine down the middle of the screen;
• pages turning from the corner (or any link), like Apple Books.

Tapping 📖 again turns it off. The choice is remembered, so the next visit opens as a book.

Related Issue

None. Requested directly, with a screenshot of the iPad layout: "Add book icon on ipad in landscape mode to allow the book feature on ipad layout similar to iPhone Duo".

Changes Made

• utils/foldMode.mjs:
  • Detection: an iPad is a "Mac" with a touch screen, because iPad Safari's user agent says Macintosh and real Macs report maxTouchPoints 0.
  • When the button shows: held sideways and 900px or more wide, the page gets data-device="ipad". A narrow Split View or Stage Manager window doesn't qualify.
  • With the book chosen: data-fold="book", with the spine in the middle and 24px kept clear either side. All the existing book styles, the page turns and the corner pager apply as they are.
  • Remembered choice: kept in localStorage (book:chosen). The page-head script reads it before the first paint, so there's no flash of the usual layout.
  • Toggle event: the button sends a bookchange event, and the page re-lays out live.
  • Fix: the iPhone Duo "open flat" rule matched any named device, which would have caught the iPad. It now names iPhone Duo only.
• components/BookToggle.vue:
  • The 📖 button at the end of the menu: labelled "Book layout", with aria-pressed showing the state.
  • Hidden everywhere except data-device="ipad".
  • In the book layout it stays with the menu on the left page.
• README "Foldables": a table row and a bullet on the iPad book layout.
• Tests:
  • tests/app/fold-mode.test.mjs: iPad sideways with and without the book, upright, narrow windows, and the choice meaning nothing on a Mac, an iPhone Duo or an Android tablet. Also the page-head script itself running as an iPad (opens as a book, toggles off and on).
  • tests/e2e/foldable.spec.mjs, with an iPad Air size and Safari's Mac user agent:
    • the button turns the book on and off, with the hero and menu on the left, the card on the right and nothing on the spine;
    • axe passes;
    • the choice is kept across pages and visits;
    • turning upright hides the button and the book, and sideways brings it back;
    • the corner turns the page;
    • a Mac gets no button even with the choice stored;
    • no phone, foldable or iPhone Duo shows the button.

How to Test

1. npm test: 282 pass.
2. npm run generate.
3. PLAYWRIGHT_CHROMIUM_PATH=/opt/pw-browsers/chromium npx playwright test tests/e2e/foldable.spec.mjs -g "iPad|Mac|no other device": 106 passed, the rest skipped by design.
4. On an iPad held sideways:
   • Tap 📖 at the top right of the menu. The menu moves to the left page and the content to the right.
   • Tap a corner to turn the page, or reload: it stays a book.
   • Turn the iPad upright: the usual layout, with no button.
   • Tap 📖 again to go back to the usual layout.

Additional Notes

• Phones and foldables: nothing changes for them. iPhone Duo and foldables still get book from their real fold.
• Not tested on a real iPad: this was checked with an iPad Air's size and Safari's user agent in Chromium, not on the device itself.

---

Generated by Claude Code