@peers-app/peers-ui 0.15.3 → 0.15.5

package/.github/workflows/publish.yml

@@ -13,10 +13,10 @@ jobs:
 
     steps:
       - name: Checkout code
-        uses: actions/checkout@v4
+        uses: actions/checkout@v6
 
       - name: Setup Node.js
-        uses: actions/setup-node@v4
+        uses: actions/setup-node@v6
         with:
           node-version: '22'
           registry-url: 'https://registry.npmjs.org'
@@ -40,7 +40,7 @@ jobs:
           NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
 
       - name: Create GitHub Release
-        uses: softprops/action-gh-release@v1
+        uses: softprops/action-gh-release@v3
         if: startsWith(github.ref, 'refs/tags/')
         with:
           generate_release_notes: true

package/dist/components/markdown-editor/editor.js

@@ -61,6 +61,7 @@ const autolink_plugin_1 = require("./autolink-plugin");
 const markdown_plugin_1 = require("./markdown-plugin");
 const mention_node_1 = require("./mention-node");
 const mentions_plugin_1 = require("./mentions-plugin");
+const move_line_plugin_1 = require("./move-line-plugin");
 const theme_1 = __importDefault(require("./theme"));
 const toolbar_1 = require("./toolbar");
 const editorConfig = {
@@ -110,7 +111,7 @@ function MarkdownEditor(props) {
         };
     }
     const _mentionConfigs = props.mentionConfigs ?? mention_configs_1.mentionConfigs;
-    return ((0, jsx_runtime_1.jsx)(LexicalComposer_1.LexicalComposer, { initialConfig: { ...editorConfig }, children: (0, jsx_runtime_1.jsxs)("div", { className: "editor-container", children: [props.hideToolbar ? null : (0, jsx_runtime_1.jsx)(toolbar_1.ToolbarPlugin, { topRightControls: props.topRightControls }), (0, jsx_runtime_1.jsxs)("div", { className: "editor-inner", ref: editorRef, style: { maxHeight: props.maxHeight, overflowY: "auto" }, children: [(0, jsx_runtime_1.jsx)(LexicalRichTextPlugin_1.RichTextPlugin, { contentEditable: (0, jsx_runtime_1.jsx)(LexicalContentEditable_1.ContentEditable, { className: "editor-input p-2" }), placeholder: null, ErrorBoundary: LexicalErrorBoundary_1.LexicalErrorBoundary }), (0, jsx_runtime_1.jsx)(LexicalHistoryPlugin_1.HistoryPlugin, {}), props.autoFocus && (0, jsx_runtime_1.jsx)(LexicalAutoFocusPlugin_1.AutoFocusPlugin, { defaultSelection: "rootEnd" }), (0, jsx_runtime_1.jsx)(LexicalListPlugin_1.ListPlugin, {}), _mentionConfigs.length > 0 && ((0, jsx_runtime_1.jsx)(mentions_plugin_1.MentionsPlugin, { mentionConfigs: _mentionConfigs, mentionsOpen: mentionsOpen })), (0, jsx_runtime_1.jsx)(autolink_plugin_1.LexicalAutoLinkPlugin, {}), (0, jsx_runtime_1.jsx)(markdown_plugin_1.MarkdownPlugin, { markdownObs: props.value }), (0, jsx_runtime_1.jsx)(LexicalMarkdownShortcutPlugin_1.MarkdownShortcutPlugin, { transformers: markdown_plugin_1.customMarkdownTransformers }), (0, jsx_runtime_1.jsx)(LexicalCheckListPlugin_1.CheckListPlugin, {}), (0, jsx_runtime_1.jsx)(LexicalTabIndentationPlugin_1.TabIndentationPlugin, {}), (0, jsx_runtime_1.jsx)(OnKeyDownPlugin, { effects: props.effects, mentionsOpen: mentionsOpen })] })] }) }));
+    return ((0, jsx_runtime_1.jsx)(LexicalComposer_1.LexicalComposer, { initialConfig: { ...editorConfig }, children: (0, jsx_runtime_1.jsxs)("div", { className: "editor-container", children: [props.hideToolbar ? null : (0, jsx_runtime_1.jsx)(toolbar_1.ToolbarPlugin, { topRightControls: props.topRightControls }), (0, jsx_runtime_1.jsxs)("div", { className: "editor-inner", ref: editorRef, style: { maxHeight: props.maxHeight, overflowY: "auto" }, children: [(0, jsx_runtime_1.jsx)(LexicalRichTextPlugin_1.RichTextPlugin, { contentEditable: (0, jsx_runtime_1.jsx)(LexicalContentEditable_1.ContentEditable, { className: "editor-input p-2" }), placeholder: null, ErrorBoundary: LexicalErrorBoundary_1.LexicalErrorBoundary }), (0, jsx_runtime_1.jsx)(LexicalHistoryPlugin_1.HistoryPlugin, {}), props.autoFocus && (0, jsx_runtime_1.jsx)(LexicalAutoFocusPlugin_1.AutoFocusPlugin, { defaultSelection: "rootEnd" }), (0, jsx_runtime_1.jsx)(LexicalListPlugin_1.ListPlugin, {}), _mentionConfigs.length > 0 && ((0, jsx_runtime_1.jsx)(mentions_plugin_1.MentionsPlugin, { mentionConfigs: _mentionConfigs, mentionsOpen: mentionsOpen })), (0, jsx_runtime_1.jsx)(autolink_plugin_1.LexicalAutoLinkPlugin, {}), (0, jsx_runtime_1.jsx)(markdown_plugin_1.MarkdownPlugin, { markdownObs: props.value }), (0, jsx_runtime_1.jsx)(LexicalMarkdownShortcutPlugin_1.MarkdownShortcutPlugin, { transformers: markdown_plugin_1.customMarkdownTransformers }), (0, jsx_runtime_1.jsx)(LexicalCheckListPlugin_1.CheckListPlugin, {}), (0, jsx_runtime_1.jsx)(LexicalTabIndentationPlugin_1.TabIndentationPlugin, {}), (0, jsx_runtime_1.jsx)(move_line_plugin_1.MoveLineWithAltArrowsPlugin, { mentionsOpen: mentionsOpen }), (0, jsx_runtime_1.jsx)(OnKeyDownPlugin, { effects: props.effects, mentionsOpen: mentionsOpen })] })] }) }));
 }
 const OnKeyDownPlugin = (props) => {
     const [editor] = (0, LexicalComposerContext_1.useLexicalComposerContext)();

package/dist/components/markdown-editor/move-line-plugin.d.ts

@@ -0,0 +1,8 @@
+import type { Observable } from "@peers-app/peers-sdk";
+/**
+ * Registers Alt/Option + ArrowUp/ArrowDown to swap the caret's block (or list item) with an adjacent sibling.
+ * @param props.mentionsOpen — when true, the plugin defers so mention typeahead keeps keyboard focus.
+ */
+export declare function MoveLineWithAltArrowsPlugin(props: {
+    mentionsOpen: Observable<boolean>;
+}): null;

package/dist/components/markdown-editor/move-line-plugin.js

@@ -0,0 +1,96 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MoveLineWithAltArrowsPlugin = MoveLineWithAltArrowsPlugin;
+const list_1 = require("@lexical/list");
+const LexicalComposerContext_1 = require("@lexical/react/LexicalComposerContext");
+const lexical_1 = require("lexical");
+const react_1 = require("react");
+/**
+ * Returns the node to reorder for Alt/Option + arrow "move line":
+ * a list item (among siblings in its list), or else the top-level block under the root.
+ */
+function $getMovableBlock(node) {
+    let n = node;
+    while (n !== null) {
+        const parent = n.getParent();
+        if (parent === null) {
+            return null;
+        }
+        if ((0, list_1.$isListNode)(parent) && (0, list_1.$isListItemNode)(n)) {
+            return n;
+        }
+        if ((0, lexical_1.$isRootOrShadowRoot)(parent)) {
+            return n;
+        }
+        n = parent;
+    }
+    return null;
+}
+/**
+ * Registers Alt/Option + ArrowUp/ArrowDown to swap the caret's block (or list item) with an adjacent sibling.
+ * @param props.mentionsOpen — when true, the plugin defers so mention typeahead keeps keyboard focus.
+ */
+function MoveLineWithAltArrowsPlugin(props) {
+    const [editor] = (0, LexicalComposerContext_1.useLexicalComposerContext)();
+    (0, react_1.useEffect)(() => {
+        return editor.registerCommand(lexical_1.KEY_DOWN_COMMAND, (event) => {
+            if (props.mentionsOpen()) {
+                return false;
+            }
+            if (!event.altKey || event.metaKey || event.ctrlKey) {
+                return false;
+            }
+            const code = event.code;
+            if (code !== "ArrowUp" && code !== "ArrowDown") {
+                return false;
+            }
+            // KEY_DOWN_COMMAND runs inside Lexical's updateEditorSync; do not call
+            // editor.update() here — it would queue and run after this handler returns,
+            // so handled would stay false, preventDefault would never run, and the
+            // built-in arrow handler + browser would move the caret on top of our swap.
+            const selection = (0, lexical_1.$getSelection)();
+            if (!(0, lexical_1.$isRangeSelection)(selection) || !selection.isCollapsed()) {
+                return false;
+            }
+            const anchorNode = selection.anchor.getNode();
+            const block = $getMovableBlock(anchorNode);
+            if (block === null) {
+                return false;
+            }
+            const anchorKey = selection.anchor.key;
+            const anchorOffset = selection.anchor.offset;
+            const anchorType = selection.anchor.type;
+            const focusKey = selection.focus.key;
+            const focusOffset = selection.focus.offset;
+            const focusType = selection.focus.type;
+            if (code === "ArrowUp") {
+                const prev = block.getPreviousSibling();
+                if (prev === null) {
+                    return false;
+                }
+                prev.insertBefore(block, false);
+            }
+            else {
+                const next = block.getNextSibling();
+                if (next === null) {
+                    return false;
+                }
+                next.insertAfter(block, false);
+            }
+            if ((0, lexical_1.$getNodeByKey)(anchorKey) !== null) {
+                const restored = (0, lexical_1.$createRangeSelection)();
+                restored.format = selection.format;
+                restored.style = selection.style;
+                restored.anchor.set(anchorKey, anchorOffset, anchorType);
+                restored.focus.set(focusKey, focusOffset, focusType);
+                (0, lexical_1.$setSelection)(restored);
+            }
+            else {
+                block.selectEnd();
+            }
+            event.preventDefault();
+            return true;
+        }, lexical_1.COMMAND_PRIORITY_HIGH);
+    }, [editor]);
+    return null;
+}

package/dist/screens/settings/settings-page.js

@@ -44,6 +44,9 @@ const globals = __importStar(require("../../globals"));
 const hooks_1 = require("../../hooks");
 const color_mode_dropdown_1 = require("./color-mode-dropdown");
 const voice_settings_1 = require("./voice-settings");
+function getAppVersion() {
+    return globalThis.__PEERS_APP_VERSION__ || "unknown";
+}
 const SettingsPage = () => {
     return ((0, jsx_runtime_1.jsx)("div", { className: "container-fluid", children: (0, jsx_runtime_1.jsx)(tabs_1.Tabs, { tabs: [
                 {
@@ -136,7 +139,7 @@ const ProfileSection = () => {
         return null;
     }
     const hasChanges = !!me.q() || deviceName() !== savedDeviceName();
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: "d-flex align-items-center mb-3", children: [(0, jsx_runtime_1.jsx)("h5", { className: "mb-0 me-auto", children: "Settings" }), (0, jsx_runtime_1.jsx)("button", { className: "btn btn-primary btn-sm", onClick: handleSave, disabled: !hasChanges, children: "Save" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "mb-3", children: [(0, jsx_runtime_1.jsx)("small", { className: "form-label", children: "Display Name:" }), (0, jsx_runtime_1.jsx)(input_1.Input, { value: me.qs.name, className: "form-control", placeholder: "Enter your name" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "mb-3", children: [(0, jsx_runtime_1.jsxs)("small", { className: "form-label", children: ["Device Name:", (0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { markdownContent: "Give this device a friendly name to identify it in your network." })] }), (0, jsx_runtime_1.jsx)(input_1.Input, { value: deviceName, className: "form-control", placeholder: "e.g., My Laptop" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "mb-3", children: [(0, jsx_runtime_1.jsxs)("small", { className: "form-label", children: ["User ID:", (0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { markdownContent: "This uniquely identifies you to all other users." })] }), (0, jsx_runtime_1.jsx)(input_1.Input, { value: me.userId, className: "form-control", disabled: true })] }), (0, jsx_runtime_1.jsxs)("div", { className: "row", children: [(0, jsx_runtime_1.jsxs)("div", { className: "col-md-6 mb-3", children: [(0, jsx_runtime_1.jsxs)("small", { className: "form-label", children: ["Public Key:", (0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { markdownContent: "This is your public key that other users will use to verify your signatures." })] }), (0, jsx_runtime_1.jsx)(input_1.Input, { value: me.publicKey, className: "form-control form-control-sm", disabled: true })] }), (0, jsx_runtime_1.jsxs)("div", { className: "col-md-6 mb-3", children: [(0, jsx_runtime_1.jsxs)("small", { className: "form-label", children: ["Public Box Key:", (0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { markdownContent: "This is the public key that other users can use to encrypt data so that only you can open it." })] }), (0, jsx_runtime_1.jsx)(input_1.Input, { value: me.publicBoxKey, className: "form-control form-control-sm", disabled: true })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "mb-3", children: [(0, jsx_runtime_1.jsxs)("small", { className: "form-label", children: ["Device ID:", (0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { markdownContent: "This uniquely identifies this device on Peers networks." })] }), (0, jsx_runtime_1.jsx)(input_1.Input, { value: deviceId || "", className: "form-control form-control-sm", disabled: true })] })] }));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: "d-flex align-items-center mb-3", children: [(0, jsx_runtime_1.jsx)("h5", { className: "mb-0 me-auto", children: "Settings" }), (0, jsx_runtime_1.jsx)("button", { className: "btn btn-primary btn-sm", onClick: handleSave, disabled: !hasChanges, children: "Save" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "mb-3", children: [(0, jsx_runtime_1.jsx)("small", { className: "form-label", children: "Display Name:" }), (0, jsx_runtime_1.jsx)(input_1.Input, { value: me.qs.name, className: "form-control", placeholder: "Enter your name" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "mb-3", children: [(0, jsx_runtime_1.jsxs)("small", { className: "form-label", children: ["Device Name:", (0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { markdownContent: "Give this device a friendly name to identify it in your network." })] }), (0, jsx_runtime_1.jsx)(input_1.Input, { value: deviceName, className: "form-control", placeholder: "e.g., My Laptop" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "mb-3", children: [(0, jsx_runtime_1.jsxs)("small", { className: "form-label", children: ["User ID:", (0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { markdownContent: "This uniquely identifies you to all other users." })] }), (0, jsx_runtime_1.jsx)(input_1.Input, { value: me.userId, className: "form-control", disabled: true })] }), (0, jsx_runtime_1.jsxs)("div", { className: "row", children: [(0, jsx_runtime_1.jsxs)("div", { className: "col-md-6 mb-3", children: [(0, jsx_runtime_1.jsxs)("small", { className: "form-label", children: ["Public Key:", (0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { markdownContent: "This is your public key that other users will use to verify your signatures." })] }), (0, jsx_runtime_1.jsx)(input_1.Input, { value: me.publicKey, className: "form-control form-control-sm", disabled: true })] }), (0, jsx_runtime_1.jsxs)("div", { className: "col-md-6 mb-3", children: [(0, jsx_runtime_1.jsxs)("small", { className: "form-label", children: ["Public Box Key:", (0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { markdownContent: "This is the public key that other users can use to encrypt data so that only you can open it." })] }), (0, jsx_runtime_1.jsx)(input_1.Input, { value: me.publicBoxKey, className: "form-control form-control-sm", disabled: true })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "mb-3", children: [(0, jsx_runtime_1.jsxs)("small", { className: "form-label", children: ["Device ID:", (0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { markdownContent: "This uniquely identifies this device on Peers networks." })] }), (0, jsx_runtime_1.jsx)(input_1.Input, { value: deviceId || "", className: "form-control form-control-sm", disabled: true })] }), (0, jsx_runtime_1.jsxs)("div", { className: "mb-3", children: [(0, jsx_runtime_1.jsx)("small", { className: "form-label", children: "App Version:" }), (0, jsx_runtime_1.jsx)(input_1.Input, { value: getAppVersion(), className: "form-control form-control-sm", disabled: true })] })] }));
 };
 const PackagesRootDirectory = () => {
     return ((0, jsx_runtime_1.jsxs)("div", { className: "mt-3", children: [(0, jsx_runtime_1.jsxs)("small", { children: ["Packages Directory:", (0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { markdownContent: `Changing this will not effect existing packages.` })] }), (0, jsx_runtime_1.jsx)(input_1.Input, { value: peers_sdk_1.packagesRootDir, className: "form-control" })] }));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@peers-app/peers-ui",
-  "version": "0.15.3",
+  "version": "0.15.5",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/peers-app/peers-ui.git"
@@ -28,7 +28,7 @@
     "lint:fix": "biome check --write ."
   },
   "peerDependencies": {
-    "@peers-app/peers-sdk": "^0.15.3",
+    "@peers-app/peers-sdk": "^0.15.5",
     "bootstrap": "^5.3.3",
     "react": "^18.0.0",
     "react-dom": "^18.0.0"
@@ -39,7 +39,7 @@
     "@babel/preset-env": "^7.24.5",
     "@babel/preset-react": "^7.24.1",
     "@babel/preset-typescript": "^7.27.1",
-    "@peers-app/peers-sdk": "0.15.3",
+    "@peers-app/peers-sdk": "0.15.5",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.3.0",

package/src/components/markdown-editor/editor.tsx

@@ -21,6 +21,7 @@ import { LexicalAutoLinkPlugin } from "./autolink-plugin";
 import { customMarkdownTransformers, MarkdownPlugin } from "./markdown-plugin";
 import { MentionNode } from "./mention-node";
 import { MentionsPlugin } from "./mentions-plugin";
+import { MoveLineWithAltArrowsPlugin } from "./move-line-plugin";
 import theme from "./theme";
 import { type IToolbarControl, ToolbarPlugin } from "./toolbar";
 
@@ -119,6 +120,7 @@ export function MarkdownEditor(props: IMarkdownEditorProps) {
           <MarkdownShortcutPlugin transformers={customMarkdownTransformers} />
           <CheckListPlugin />
           <TabIndentationPlugin />
+          <MoveLineWithAltArrowsPlugin mentionsOpen={mentionsOpen} />
           <OnKeyDownPlugin effects={props.effects} mentionsOpen={mentionsOpen} />
         </div>
       </div>

package/src/components/markdown-editor/move-line-plugin.tsx

@@ -0,0 +1,116 @@
+import { $isListItemNode, $isListNode } from "@lexical/list";
+import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
+import type { Observable } from "@peers-app/peers-sdk";
+import {
+  $createRangeSelection,
+  $getNodeByKey,
+  $getSelection,
+  $isRangeSelection,
+  $isRootOrShadowRoot,
+  $setSelection,
+  COMMAND_PRIORITY_HIGH,
+  KEY_DOWN_COMMAND,
+  type LexicalNode,
+} from "lexical";
+import { useEffect } from "react";
+
+/**
+ * Returns the node to reorder for Alt/Option + arrow "move line":
+ * a list item (among siblings in its list), or else the top-level block under the root.
+ */
+function $getMovableBlock(node: LexicalNode): LexicalNode | null {
+  let n: LexicalNode | null = node;
+  while (n !== null) {
+    const parent: LexicalNode | null = n.getParent();
+    if (parent === null) {
+      return null;
+    }
+    if ($isListNode(parent) && $isListItemNode(n)) {
+      return n;
+    }
+    if ($isRootOrShadowRoot(parent)) {
+      return n;
+    }
+    n = parent;
+  }
+  return null;
+}
+
+/**
+ * Registers Alt/Option + ArrowUp/ArrowDown to swap the caret's block (or list item) with an adjacent sibling.
+ * @param props.mentionsOpen — when true, the plugin defers so mention typeahead keeps keyboard focus.
+ */
+export function MoveLineWithAltArrowsPlugin(props: { mentionsOpen: Observable<boolean> }) {
+  const [editor] = useLexicalComposerContext();
+
+  useEffect(() => {
+    return editor.registerCommand(
+      KEY_DOWN_COMMAND,
+      (event: KeyboardEvent) => {
+        if (props.mentionsOpen()) {
+          return false;
+        }
+        if (!event.altKey || event.metaKey || event.ctrlKey) {
+          return false;
+        }
+        const code = event.code;
+        if (code !== "ArrowUp" && code !== "ArrowDown") {
+          return false;
+        }
+
+        // KEY_DOWN_COMMAND runs inside Lexical's updateEditorSync; do not call
+        // editor.update() here — it would queue and run after this handler returns,
+        // so handled would stay false, preventDefault would never run, and the
+        // built-in arrow handler + browser would move the caret on top of our swap.
+
+        const selection = $getSelection();
+        if (!$isRangeSelection(selection) || !selection.isCollapsed()) {
+          return false;
+        }
+        const anchorNode = selection.anchor.getNode();
+        const block = $getMovableBlock(anchorNode);
+        if (block === null) {
+          return false;
+        }
+
+        const anchorKey = selection.anchor.key;
+        const anchorOffset = selection.anchor.offset;
+        const anchorType = selection.anchor.type;
+        const focusKey = selection.focus.key;
+        const focusOffset = selection.focus.offset;
+        const focusType = selection.focus.type;
+
+        if (code === "ArrowUp") {
+          const prev = block.getPreviousSibling();
+          if (prev === null) {
+            return false;
+          }
+          prev.insertBefore(block, false);
+        } else {
+          const next = block.getNextSibling();
+          if (next === null) {
+            return false;
+          }
+          next.insertAfter(block, false);
+        }
+
+        if ($getNodeByKey(anchorKey) !== null) {
+          const restored = $createRangeSelection();
+          restored.format = selection.format;
+          restored.style = selection.style;
+          restored.anchor.set(anchorKey, anchorOffset, anchorType);
+          restored.focus.set(focusKey, focusOffset, focusType);
+          $setSelection(restored);
+        } else {
+          block.selectEnd();
+        }
+
+        event.preventDefault();
+        return true;
+      },
+      COMMAND_PRIORITY_HIGH,
+    );
+  }, [editor]);
+
+  return null;
+}

package/src/screens/settings/settings-page.tsx

@@ -28,6 +28,14 @@ type PeersHostWindow = Window & {
   ReactNativeWebView?: unknown;
 };
 
+type PeersGlobal = typeof globalThis & {
+  __PEERS_APP_VERSION__?: string;
+};
+
+function getAppVersion() {
+  return (globalThis as PeersGlobal).__PEERS_APP_VERSION__ || "unknown";
+}
+
 export const SettingsPage: React.FC = () => {
   return (
     <div className="container-fluid">
@@ -209,6 +217,11 @@ const ProfileSection: React.FC = () => {
         </small>
         <Input value={deviceId || ""} className="form-control form-control-sm" disabled />
       </div>
+
+      <div className="mb-3">
+        <small className="form-label">App Version:</small>
+        <Input value={getAppVersion()} className="form-control form-control-sm" disabled />
+      </div>
     </>
   );
 };