Let the page buttons make way: a Page buttons setting that gives their room to the tiles, chevrons and dots instead of words, and a warning in the editor for pages nothing leads to (0.2.82)

GitHub issue #9 asked to drop the Previous/Next bar when Go to page tiles do the navigation and to give the tiles the whole screen. Page buttons is a setting the screen owns (on by default): a row in the Screen group of the settings page, switch.<screen>_page_buttons in Home Assistant, and a row in the editor's Screen settings. Without the bar, and on a screen with one page, place_page moves and sizes the three rows so they reach the bottom margin (Guition 108 -> 122 px, CYD 52 -> 61 px); a card keeps its circle, name and state in its middle and the single analog clock keeps its dial. With page buttons and swiping both off, the editor says where the Go to page tiles lead and which pages that leaves out of reach.

The bar itself: each half of the band under the tiles is one key with an MDI chevron and lights up under a finger, and a dot per page sits between them; the screen's settings page uses the same pager. App 0.2.82, firmware 0.2.69.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

web/tests/layout.spec.ts

@@ -2,7 +2,8 @@
 import { describe, expect, it } from "vitest";
 import {
   arrange, cellsOf, controlsLabel, defaultOptions, effectiveControls, firstFree, fits, hasGaps, MAX_PAGES, MAX_SLOTS, nearestFree,
-  newTile, normalize, occupied, packSlots, pageCount, pageStart, pageTarget, rowStart, sizeOf, SLOTS_PER_PAGE, spanOf, tileLimit, versionAtLeast,
+  newTile, normalize, occupied, packSlots, pageCount, pageStart, pageTarget, rowStart, sizeOf, SLOTS_PER_PAGE, spanOf, strandedPages, tileLimit,
+  versionAtLeast,
 } from "../src/model/layout";
 import type { Inventory, Layout, Tile } from "../src/types";
 
@@ -157,3 +158,19 @@ describe("full-page tiles and navigation tiles (firmware 0.2.62+)", () => {
     expect(effectiveControls(tile("light.a", 0, { size: "full", controls: "toggle" }), inventory)).toBe("toggle");
   });
 });
+
+describe("pages that only Go to page tiles reach (firmware 0.2.69)", () => {
+  const nav = (page: number, slot: number) => tile(`screen.page_${page}`, slot);
+  it("finds a page no tile leads to, and one without a way back", () => {
+    // Page 1 goes to 2 and 3; page 2 goes back to 1; page 3 leads nowhere; nothing goes to page 4.
+    const layout = entries([nav(2, 0), nav(3, 1), tile("light.a", 2), nav(1, 6), tile("light.b", 12), tile("light.c", 18)]);
+    expect(strandedPages(layout, 4)).toEqual({ tiles: 3, targets: [1, 2, 3], unreachable: [4], noWayBack: [3] });
+  });
+  it("follows a chain of pages, and ignores a tile to a page the screen lacks or to its own page", () => {
+    const chain = entries([nav(2, 0), nav(3, 6), nav(1, 12), nav(8, 13), nav(3, 14)]);
+    expect(strandedPages(chain, 3)).toEqual({ tiles: 4, targets: [1, 2, 3], unreachable: [], noWayBack: [] });
+    // A tile to page 3 that sits on a page nobody reaches leaves page 3 out too.
+    expect(strandedPages(entries([nav(3, 6)]), 3)).toEqual({ tiles: 1, targets: [3], unreachable: [2, 3], noWayBack: [] });
+    expect(strandedPages(entries([tile("light.a", 0)]), 1)).toEqual({ tiles: 0, targets: [], unreachable: [], noWayBack: [] });
+  });
+});

web/tests/store.spec.ts

@@ -1,7 +1,7 @@
 // The store: selecting a screen, editing its layout, what's new, progress, copy and import.
 import { beforeEach, describe, expect, it, vi } from "vitest";
 import {
-  addTile, canAlert, copyLayoutFrom, fullPage, importLayout, layoutJson, liveOf, moveTileToPage, pageTilesRepeat, PHASES, removeTile,
+  addTile, canAlert, copyLayoutFrom, fullPage, importLayout, layoutJson, liveOf, moveTileToPage, pageReachWarning, pageTilesRepeat, PHASES, removeTile,
   retargetPageTile, save, select, setTileOption, state, supports, tileLimit, topbarItems, topbarView, updateProgress, whatsNew,
 } from "../src/store";
 import type { Inventory, Screen } from "../src/types";
@@ -408,3 +408,34 @@ describe("several tiles that go to the same page (firmware 0.2.65)", () => {
     expect(state.dirty).toBe(true);
   });
 });
+
+describe("page buttons and swiping both off (firmware 0.2.69)", () => {
+  const settings = (values: Record<string, unknown>) =>
+    Object.assign(state.inventory.screens[0], { settings: { owner: "screen", values, keys: Object.keys(values), unavailable: [] } });
+  const tiles = (list: [string, number][]) => { state.layout!.tiles = list.map(([entity, slot]) => ({ entity, name: "", slot, options: {} })); state.layout!.pages = 1; };
+  it("says which pages the Go to page tiles lead to, and which one they leave out", () => {
+    settings({ page_buttons: false, swipe_pages: false });
+    select("living");
+    tiles([["screen.page_2", 0], ["screen.page_3", 1], ["screen.page_1", 6], ["screen.page_1", 12], ["light.a", 18]]);
+    expect(pageReachWarning()).toBe("Page buttons and swiping are off, so only Go to page tiles change the page. "
+      + "You have 4 Go to page tiles, to pages 1, 2 and 3, but none to page 4, so you can't reach it.");
+    tiles([["light.a", 0], ["light.b", 6], ["switch.c", 12]]);
+    expect(pageReachWarning()).toBe("Page buttons and swiping are off, so only Go to page tiles change the page. "
+      + "You have no Go to page tiles to pages 2 and 3, so you can't reach them.");
+    tiles([["screen.page_2", 0], ["light.a", 6]]);
+    expect(pageReachWarning()).toMatch(/You have 1 Go to page tile, to page 2\. From page 2 no tile leads back to page 1\.$/);
+  });
+  it("stays quiet while either way of paging is on, the values are unknown, or every page can be reached and left", () => {
+    select("living");
+    tiles([["light.a", 0], ["light.b", 6]]);
+    for (const values of [{ page_buttons: true, swipe_pages: false }, { page_buttons: false, swipe_pages: true }, { page_buttons: null, swipe_pages: false }, {}]) {
+      settings(values);
+      expect(pageReachWarning()).toBe("");
+    }
+    settings({ page_buttons: false, swipe_pages: false });
+    tiles([["screen.page_2", 0], ["screen.page_1", 6]]);
+    expect(pageReachWarning()).toBe("");
+    tiles([["light.a", 0]]);
+    expect(pageReachWarning()).toBe("");
+  });
+});