feat(mobile): add a dedicated badge

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(

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;
 }

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}})",

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 {

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>
     );
 }