Android: back button for Learn subpages

packages/app-android/app/views/main.ts

@@ -12,7 +12,7 @@ import {
   NOTIFY_VISIBLE_CHILD,
   setAdwaitaColorScheme,
 } from "@gjsify/adwaita-nativescript";
-import { openMenuSymbolic, documentEditSymbolic } from "@gjsify/adwaita-icons/actions";
+import { openMenuSymbolic, documentEditSymbolic, goPreviousSymbolic } from "@gjsify/adwaita-icons/actions";
 import { accessoriesDictionarySymbolic } from "@gjsify/adwaita-icons/legacy";
 import { applicationsEngineeringSymbolic, applicationsGamesSymbolic } from "@gjsify/adwaita-icons/categories";
 
@@ -40,7 +40,7 @@ import { setAppBackHandler } from "~/utils/navigation";
 import { AdwMainButton, type MainButtonAction } from "~/widgets/adw-main-button";
 import type { ScreenModule } from "./main/editor";
 import { buildEditorScreen } from "./main/editor";
-import { buildLearnScreen } from "./main/learn";
+import { buildLearnScreen, learnView } from "./main/learn";
 import { buildDebuggerScreen, debuggerView } from "./main/debugger";
 import { buildGameConsoleScreen, gameConsoleView } from "./main/game-console";
 
@@ -78,6 +78,7 @@ export class MainController implements MainView {
   private page: Page | null = null;
 
   private _stack: Adw.ViewStack | null = null;
+  private _learnBackButton: Gtk.Button | null = null;
   private _fab: AdwMainButton | null = null;
   private _toast: Adw.ToastOverlay | null = null;
   private _about: Adw.AboutDialog | null = null;
@@ -101,6 +102,7 @@ export class MainController implements MainView {
   constructor() {
     this.log.debug("Initialized");
     this.onSystemAppearanceChanged = this.onSystemAppearanceChanged.bind(this);
+    this.onLearnSubpageChanged = this.onLearnSubpageChanged.bind(this);
 
     this.gameConsoleBridge = new GameConsoleEventBridge({
       formatAndLog: (message, params) => {
@@ -158,6 +160,7 @@ export class MainController implements MainView {
     }
 
     systemStates.events.on(SystemStates.systemAppearanceChangedEvent, this.onSystemAppearanceChanged);
+    learnView.events.on("subpage-changed", this.onLearnSubpageChanged);
 
     this.setupAndroidKeyHandling();
     this.initializeGameConsoleController();
@@ -189,6 +192,12 @@ export class MainController implements MainView {
     this.gameConsoleBridge.disconnect();
     this.mainBridge.disconnect();
     systemStates.events.off(SystemStates.systemAppearanceChangedEvent, this.onSystemAppearanceChanged);
+    learnView.events.off("subpage-changed", this.onLearnSubpageChanged);
+  }
+
+  /** Learn's navigation stack changed — re-evaluate the header back button. */
+  private onLearnSubpageChanged(): void {
+    this.updateLearnBackButtonVisibility();
   }
 
   private onSystemAppearanceChanged(event: SystemAppearanceChangeEvent): void {
@@ -211,6 +220,17 @@ export class MainController implements MainView {
     title.title = "Learn6502";
     header.set_title_widget(title);
 
+    // Back button for the Learn tab's own navigation stack (Tutorial/Examples
+    // subpages) — the GNOME/Web twins' `learnBackButton`. Hidden until a
+    // subpage is open; see updateLearnBackButtonVisibility().
+    const learnBack = new Gtk.Button();
+    learnBack.iconName = goPreviousSymbolic;
+    learnBack.accessibilityLabel = _("Back");
+    learnBack.visibility = "collapsed";
+    learnBack.addEventListener("tap", () => learnView.navigateBack());
+    this._learnBackButton = learnBack;
+    header.pack_start(learnBack);
+
     const menu = new Gtk.MenuButton();
     menu.iconName = openMenuSymbolic;
     menu.menuTitle = "Learn6502";
@@ -303,6 +323,16 @@ export class MainController implements MainView {
     this._activeView = viewType;
     mainStateController.setViewType(viewType);
     this.updateMainUiState();
+    this.updateLearnBackButtonVisibility();
+  }
+
+  /** Show the header back button only while the Learn tab is active AND has a
+   *  subpage open — there is no desktop/three-column mode on Android, so unlike
+   *  the GNOME twin this is the whole condition (mirrors its mobile branch). */
+  private updateLearnBackButtonVisibility(): void {
+    if (!this._learnBackButton) return;
+    const visible = this._activeView === ViewType.LEARN && learnView.hasVisibleSubpage;
+    this._learnBackButton.visibility = visible ? "visible" : "collapsed";
   }
 
   // --- MainView implementation ---

packages/app-android/app/views/main/learn.ts

@@ -1,24 +1,37 @@
 import type { View } from "@nativescript/core";
 import { asView } from "~/utils/as-view";
 import { ScrollView } from "@nativescript/core";
-import { Adw, Gtk } from "@gjsify/adwaita-nativescript";
+import { Adw, Gtk, NOTIFY_VISIBLE_PAGE } from "@gjsify/adwaita-nativescript";
 import { goNextSymbolic } from "@gjsify/adwaita-icons/actions";
 import { schoolSymbolic, openBookSymbolic, codeSymbolic } from "~/icons";
 import { localize as _ } from "@nativescript/localize";
 import type { LearnView, SourceViewCopyEvent } from "@learn6502/common-ui";
 import { learnController } from "@learn6502/common-ui/src/controller";
+import { EventDispatcher } from "@learn6502/core";
 import * as Examples from "@learn6502/examples/examples";
 import type { ExampleMeta } from "@learn6502/examples";
 import { TutorialView } from "~/mdx/tutorial-view";
 import { logger } from "~/utils";
 import type { ScreenModule } from "./editor";
 
+/**
+ * Learn's own navigation state (mirrors app-gnome's GObject
+ * `notify::hasVisibleSubpage` and app-web's `subpage-changed` CustomEvent) — not
+ * part of the shared `LearnView` interface, since it is UI-shell plumbing rather
+ * than 6502 domain state.
+ */
+interface LearnNavigationEventMap {
+  "subpage-changed": { hasSubpage: boolean };
+}
+
 /**
  * Learn view — implements LearnView. Now a scrollable content view (the MDX
  * TutorialView) added to the shell's Adw.ViewStack. Copy-to-editor events are still
  * routed through learnController.
  */
 class Learn implements LearnView {
+  readonly events = new EventDispatcher<LearnNavigationEventMap>();
+
   private tutorialView: TutorialView | null = null;
   private nav: Adw.NavigationView | null = null;
   private _initialized = false;
@@ -41,6 +54,12 @@ class Learn implements LearnView {
 
     const nav = new Adw.NavigationView();
     this.nav = nav;
+    // Drives the shell's header back button (see main.ts), the same seam the
+    // GNOME twin's `notify::visible-page` and the web twin's `subpage-changed`
+    // event fill.
+    nav.addEventListener(NOTIFY_VISIBLE_PAGE, () => {
+      this.events.dispatch("subpage-changed", { hasSubpage: this.hasVisibleSubpage });
+    });
 
     // --- Main page: an Adw.StatusPage hero (icon + title + description) over a
     //     boxed list of Tutorial + Examples rows, matching the GNOME learn.blp. ---
@@ -98,6 +117,13 @@ class Learn implements LearnView {
     return this.navRow(_(example.title), _(example.description), codeSymbolic, onTap);
   }
 
+  /** Whether a subpage (Tutorial/Examples) is open — drives the shell's header
+   *  back button (mirrors the GNOME/Web twins' `hasVisibleSubpage`). */
+  get hasVisibleSubpage(): boolean {
+    const tag = this.nav?.visiblePageTag ?? null;
+    return tag !== null && tag !== "main";
+  }
+
   /** Pop the navigation stack one level. Returns true if a page was popped
    *  (i.e. we were on a subpage) so the caller can consume the back press. */
   navigateBack(): boolean {