From a6ddf7dd89cbc93986bbf9de43792120c8a6dba3 Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Mon, 20 Apr 2026 23:01:19 +0300
Subject: [PATCH] feat(mobile): add a dedicated badge

---
 apps/client/src/layouts/mobile_layout.tsx            |  4 +++-
 apps/client/src/services/utils.ts                    |  8 ++++++++
 apps/client/src/translations/en/translation.json     |  4 ++++
 apps/client/src/types.d.ts                           |  5 +++++
 .../src/widgets/layout/StandaloneWarningBar.tsx      | 12 +++++++++---
 5 files changed, 29 insertions(+), 4 deletions(-)

diff --git a/apps/client/src/layouts/mobile_layout.tsx b/apps/client/src/layouts/mobile_layout.tsx
index 5412e6e708..edb244b291 100644
--- a/apps/client/src/layouts/mobile_layout.tsx
+++ b/apps/client/src/layouts/mobile_layout.tsx
@@ -24,6 +24,7 @@ import NoteTreeWidget from "../widgets/note_tree.js";
 import NoteWrapperWidget from "../widgets/note_wrapper.js";
 import NoteDetail from "../widgets/NoteDetail.jsx";
 import QuickSearchWidget from "../widgets/quick_search.js";
+import { isMobileApp } from "../services/utils";
 import ScrollPadding from "../widgets/scroll_padding";
 import SearchResult from "../widgets/search_result.jsx";
 import MobileEditorToolbar from "../widgets/type_widgets/text/mobile_editor_toolbar.jsx";
@@ -65,7 +66,8 @@ export default class MobileLayout {
                                                 .child(<NoteIconWidget />)
                                                 .child(<NoteTitleWidget />)
                                                 .child(<NoteBadges />)
-                                                .optChild(glob.isStandalone, <StandaloneWarningBar />)
+                                                .optChild(isMobileApp(), <StandaloneWarningBar variant="mobile" />)
+                                                .optChild(glob.isStandalone && !isMobileApp(), <StandaloneWarningBar />)
                                                 .child(<MobileDetailMenu />)
                                         )
                                         .child(
diff --git a/apps/client/src/services/utils.ts b/apps/client/src/services/utils.ts
index 8360950c87..485b517e47 100644
--- a/apps/client/src/services/utils.ts
+++ b/apps/client/src/services/utils.ts
@@ -149,6 +149,14 @@ export function isPWA() {
     );
 }
 
+/**
+ * Returns `true` when running inside the native Capacitor mobile app wrapper.
+ * PWAs and regular browsers return `false`.
+ */
+export function isMobileApp() {
+    return !!window.Capacitor?.isNativePlatform?.();
+}
+
 export function isMac() {
     return navigator.platform.indexOf("Mac") > -1;
 }
diff --git a/apps/client/src/translations/en/translation.json b/apps/client/src/translations/en/translation.json
index 5277594cf8..dd82d6ee59 100644
--- a/apps/client/src/translations/en/translation.json
+++ b/apps/client/src/translations/en/translation.json
@@ -3,6 +3,10 @@
     "badge_label": "Standalone",
     "warning_tooltip": "You are running Trilium in standalone mode. Some features are not available, and you may experience issues or data loss. Use the desktop application or self-hosted server for the best experience."
   },
+  "mobile": {
+    "badge_label": "Mobile",
+    "warning_tooltip": "You are running Trilium in mobile mode. Some features are not available. Use the desktop application or desktop layout for the best experience."
+  },
   "about": {
     "version_label": "Version:",
     "version": "{{appVersion}} (database: {{dbVersion}}, sync protocol: {{syncVersion}})",
diff --git a/apps/client/src/types.d.ts b/apps/client/src/types.d.ts
index df29fae664..6c5fad2050 100644
--- a/apps/client/src/types.d.ts
+++ b/apps/client/src/types.d.ts
@@ -51,6 +51,11 @@ declare global {
         _noteReady?: PrintReport;
 
         EXCALIDRAW_ASSET_PATH?: string;
+
+        Capacitor?: {
+            isNativePlatform?: () => boolean;
+            getPlatform?: () => string;
+        };
     }
 
     interface WindowEventMap {
diff --git a/apps/client/src/widgets/layout/StandaloneWarningBar.tsx b/apps/client/src/widgets/layout/StandaloneWarningBar.tsx
index cf9dca028e..bf6187ede6 100644
--- a/apps/client/src/widgets/layout/StandaloneWarningBar.tsx
+++ b/apps/client/src/widgets/layout/StandaloneWarningBar.tsx
@@ -3,12 +3,18 @@ import { t } from "../../services/i18n";
 import { useNoteContext, useTooltip } from "../react/hooks";
 import "./StandaloneWarningBar.css";
 
-export default function StandaloneWarningBar() {
+type WarningBarVariant = "standalone" | "mobile";
+
+interface WarningBarProps {
+    variant?: WarningBarVariant;
+}
+
+export default function StandaloneWarningBar({ variant = "standalone" }: WarningBarProps) {
     const { noteContext } = useNoteContext();
     const badgeRef = useRef<HTMLDivElement>(null);
 
     useTooltip(badgeRef, {
-        title: t("standalone.warning_tooltip"),
+        title: t(`${variant}.warning_tooltip`),
         placement: "top",
         delay: 200
     });
@@ -21,7 +27,7 @@ export default function StandaloneWarningBar() {
     return (
         <div ref={badgeRef} className="standalone-badge">
             <span className="bx bx-error-circle" />
-            <span className="standalone-badge-text">{t("standalone.badge_label")}</span>
+            <span className="standalone-badge-text">{t(`${variant}.badge_label`)}</span>
         </div>
     );
 }