Add standalone option to action buttons

When `standalone` is set to true, this action button will only appear in
"standalone PWA" mode (e.g. home-screen mobile apps, or installed PWA on
desktop). Useful to e.g. only show forward and backward buttons. These
forward and backward buttons are now also added to the default action
button config.

Author: zefhemel

client/editor_ui.tsx

@@ -470,7 +470,9 @@ export class MainUI {
                 ) =>
                   button.icon &&
                   (typeof button.mobile === "undefined" ||
-                    button.mobile === viewState.isMobile),
+                    button.mobile === viewState.isMobile) &&
+                  (typeof button.standalone === "undefined" ||
+                    button.standalone === viewState.isStandalone),
               )
               // Then ensure all buttons have a priority set (by default based on array index)
               .map((button, index) => ({
@@ -619,6 +621,7 @@ type ActionButton = {
   icon: string;
   description?: string;
   mobile?: boolean;
+  standalone?: boolean;
   dropdown?: boolean;
   priority?: number;
   run: () => void;

client/reducer.ts

@@ -21,10 +21,13 @@ export default function reducer(
       };
     case "page-loaded": {
       const mouseDetected = globalThis.matchMedia("(pointer:fine)").matches;
+      const isBrowser = globalThis.matchMedia("(display-mode: browser)")
+        .matches;
       return {
         ...state,
         isLoading: false,
         isMobile: !mouseDetected,
+        isStandalone: !isBrowser,
         current: {
           path: action.path,
           meta: action.meta as PageMeta,

client/types/ui.ts

@@ -29,6 +29,7 @@ export type AppViewState = {
 
   isLoading: boolean;
   isMobile: boolean;
+  isStandalone: boolean;
   showPageNavigator: boolean;
   showCommandPalette: boolean;
   showCommandPaletteContext?: string;
@@ -88,6 +89,7 @@ export const initialViewState: AppViewState = {
     forcedROMode: false,
   },
   isMobile: false,
+  isStandalone: false,
   panels: {
     lhs: {},
     rhs: {},

libraries/Library/Std/APIs/Action Button.md

@@ -14,6 +14,7 @@ Keys to define:
 * `description` (optional): description of button (appears on hover)
 * `priority` (optional): determines priority of button (the higher, the earlier in the list)
 * `mobile`: when set to `true` this button will only appear on mobile devices
+* `standalone`: when set to `true` this button will only appear in standalone/PWA mode; when `false`, only in browser mode
 * `dropdown` (optional): when set to `false`, the button stays visible outside the dropdown menu on mobile (default: `true`)
 
 # Example

libraries/Library/Std/Config.md

@@ -363,6 +363,10 @@ config.define("actionButtons", {
         type = "boolean",
         description = "Optional boolean indicating if the action button is applicable for mobile"
       },
+      standalone = {
+        type = "boolean",
+        description = "Optional: when set to true, button only appears in standalone/PWA mode; when false, only in browser mode"
+      },
       dropdown = {
         type = "boolean",
         description = "Optional: set to false to keep this button outside the dropdown menu on mobile (default: true)"
@@ -413,6 +417,26 @@ config.set {
       run = function()
         editor.invokeCommand "Open Command Palette"
       end,
+    },
+    {
+      icon = "chevron-left",
+      description = "Go back",
+      standalone = true,
+      dropdown = false,
+      priority = 0,
+      run = function()
+        editor.goHistory(-1)
+      end,
+    },
+    {
+      icon = "chevron-right",
+      description = "Go forward",
+      standalone = true,
+      dropdown = false,
+      priority = -1,
+      run = function()
+        editor.goHistory(1)
+      end,
     }
   },
 }