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/src/components/LayoutView.vue

@@ -2,7 +2,7 @@
 // The pages side by side, like swiping on the screen, and the library on the right.
 import { computed } from "vue";
 import { entriesOf, hasGaps, MAX_PAGES, pageCount } from "../model/layout";
-import { addPage, closeInspector, currentScreen, pagesShown, state, supports, tileLimit } from "../store";
+import { addPage, closeInspector, currentScreen, pageReachWarning, pagesShown, state, supports, tileLimit } from "../store";
 import DevicePage from "./DevicePage.vue";
 import Library from "./Library.vue";
 
@@ -14,6 +14,8 @@ const canAdd = computed(() => pages.value < MAX_PAGES);
 const positionsHint = computed(() => hasGaps(layout.value.tiles) && !supports(0, 2, 26)
   ? `Empty slots and fixed positions work from firmware 0.2.26. This screen (firmware ${currentScreen.value?.firmware || "unknown"}) shifts the tiles up to the first free slot until that update.`
   : "");
+// Page buttons and swiping off: a page no Go to page tile reaches, or one without a way back.
+const reachHint = computed(() => pageReachWarning(entries.value, pages.value));
 function onCanvasClick(e: MouseEvent) {
   // A click beside the pages closes the drawer; the cards and the bar handle their own clicks.
   if ((e.target as HTMLElement).closest(".device, .page-label, .canvas-head")) return;
@@ -28,6 +30,7 @@ function onCanvasClick(e: MouseEvent) {
       <span v-if="!layout.tiles.length" id="no-tiles">Add your first light, scene, or device from the library.</span>
       <span v-else>Tap the top bar or a tile to change it. Drag to move; drop on the next page for a new one.</span>
       <span v-if="positionsHint" id="positions-hint" class="warn">{{ positionsHint }}</span>
+      <span v-if="reachHint" id="page-reach-hint" class="warn">{{ reachHint }}</span>
     </div>
     <div class="pages" id="layout-preview" aria-label="Screen layout">
       <DevicePage v-for="page in shown" :key="page" :page="page - 1" :entries="entries" :pages="pages" :moving="state.drag.moving" />

web/src/components/SettingsTab.vue

@@ -3,12 +3,14 @@
 // once, like on the screen; no Save needed.
 import { computed } from "vue";
 import { glyph } from "../model/topbar";
-import { currentScreen, SETTING_GROUPS, setSetting, settingText, settingValues, settingsView, state, steppedSetting, type SettingRow } from "../store";
+import { currentScreen, pageReachWarning, SETTING_GROUPS, setSetting, settingText, settingValues, settingsView, state, steppedSetting, type SettingRow } from "../store";
 
 const view = computed(() => settingsView());
 const values = computed(() => settingValues());
 const offline = computed(() => view.value?.owner === "screen" && !currentScreen.value?.online);
 const groups = computed(() => SETTING_GROUPS.map((group) => ({ ...group, rows: (group.rows as readonly SettingRow[]).filter((row) => view.value?.keys.includes(row.key)) })).filter((g) => g.rows.length));
+// Page buttons and swiping off: the pages that only Go to page tiles could reach, and don't.
+const reachWarning = computed(() => pageReachWarning());
 const unavailable = (row: SettingRow) => offline.value || Boolean(view.value?.unavailable.includes(row.key));
 const needs = (row: SettingRow) => (row.needs ? Boolean(values.value[row.needs]) : true);
 const status = computed(() => offline.value
@@ -78,6 +80,7 @@ function click(e: MouseEvent, row: SettingRow, direction: number) {
             </div>
           </div>
         </div>
+        <p v-if="reachWarning && group.rows.some((row) => row.key === 'page_buttons')" class="hint warn" id="settings-page-reach">{{ reachWarning }}</p>
       </section>
     </div>
   </div>