@peers-app/peers-ui 0.7.40 → 0.8.1

package/src/screens/network-viewer/group-details-modal.tsx

@@ -17,6 +17,22 @@ interface IGroupDetails {
   }[];
 }
 
+interface IConnectedDevice {
+  deviceId: string;
+  latencyMs: number;
+  errorRate: number;
+  timestampLastApplied: number;
+}
+
+interface IGroupSyncInfo {
+  groupId: string;
+  groupName: string;
+  connectedDevices: IConnectedDevice[];
+  preferredDeviceIds: string[];
+  lastSyncTimestamp: number;
+  totalMembers: number;
+}
+
 interface IGroupDetailsModalProps {
   groupId: string;
   onClose: () => void;
@@ -24,8 +40,17 @@ interface IGroupDetailsModalProps {
 
 export function GroupDetailsModal({ groupId, onClose }: IGroupDetailsModalProps) {
   const [group, setGroup] = useState<IGroupDetails | null>(null);
+  const [syncInfo, setSyncInfo] = useState<IGroupSyncInfo | null>(null);
   const [loading, setLoading] = useState(true);
   const [notFound, setNotFound] = useState(false);
+  const [downloading, setDownloading] = useState(false);
+  const [downloadProgress, setDownloadProgress] = useState<string | null>(null);
+  const [downloadResult, setDownloadResult] = useState<{
+    success: boolean;
+    message: string;
+    filePath?: string;
+    size?: number;
+  } | null>(null);
 
   const loadData = async () => {
     try {
@@ -35,7 +60,10 @@ export function GroupDetailsModal({ groupId, onClose }: IGroupDetailsModalProps)
         return;
       }
 
-      const groupData = await api.getGroupDetails(groupId);
+      const [groupData, syncData] = await Promise.all([
+        api.getGroupDetails(groupId),
+        api.getGroupSyncStatus(groupId)
+      ]);
 
       if (!groupData) {
         setNotFound(true);
@@ -43,6 +71,10 @@ export function GroupDetailsModal({ groupId, onClose }: IGroupDetailsModalProps)
         setGroup(groupData);
         setNotFound(false);
       }
+
+      if (syncData && syncData.length > 0) {
+        setSyncInfo(syncData[0]);
+      }
     } catch (error) {
       console.error('Error loading group details:', error);
       setNotFound(true);
@@ -51,6 +83,40 @@ export function GroupDetailsModal({ groupId, onClose }: IGroupDetailsModalProps)
     }
   };
 
+  const handleDownloadDatabase = async (deviceId: string) => {
+    try {
+      setDownloading(true);
+      setDownloadProgress('Preparing download...');
+      setDownloadResult(null);
+
+      const api = (window as any).electronAPI?.networkViewer;
+      if (!api?.downloadRemoteDatabase) {
+        setDownloadResult({
+          success: false,
+          message: 'Download API not available'
+        });
+        return;
+      }
+
+      setDownloadProgress('Downloading database...');
+      const result = await api.downloadRemoteDatabase(groupId, deviceId);
+
+      setDownloadResult(result);
+      if (result.success) {
+        setDownloadProgress(null);
+      }
+    } catch (error: any) {
+      console.error('Error downloading database:', error);
+      setDownloadResult({
+        success: false,
+        message: error?.message || 'Download failed'
+      });
+    } finally {
+      setDownloading(false);
+      setDownloadProgress(null);
+    }
+  };
+
   useEffect(() => {
     loadData();    
   }, [groupId]);
@@ -168,6 +234,83 @@ export function GroupDetailsModal({ groupId, onClose }: IGroupDetailsModalProps)
                   </div>
                 </div>
               )}
+
+              {/* Database Download Section */}
+              <div className="mb-4">
+                <h6 className="border-bottom pb-2 mb-3">
+                  <i className="bi bi-download me-2"></i>
+                  Download Database (Fast Sync)
+                </h6>
+                <p className="text-muted small mb-3">
+                  Download the entire database from a connected device. This is useful for fast initial sync on a new device.
+                  The database will be saved as a backup file.
+                </p>
+
+                {syncInfo && syncInfo.connectedDevices.length > 0 ? (
+                  <div>
+                    <label className="form-label">Select a connected device:</label>
+                    <div className="d-flex flex-wrap gap-2">
+                      {syncInfo.connectedDevices.map((device) => (
+                        <button
+                          key={device.deviceId}
+                          className="btn btn-outline-primary btn-sm"
+                          onClick={() => handleDownloadDatabase(device.deviceId)}
+                          disabled={downloading}
+                        >
+                          {downloading ? (
+                            <>
+                              <span className="spinner-border spinner-border-sm me-1" role="status" aria-hidden="true"></span>
+                              Downloading...
+                            </>
+                          ) : (
+                            <>
+                              <i className="bi bi-cloud-download me-1"></i>
+                              {device.deviceId.substring(0, 8)}...
+                              <span className="badge bg-secondary ms-1">{Math.round(device.latencyMs)}ms</span>
+                            </>
+                          )}
+                        </button>
+                      ))}
+                    </div>
+                  </div>
+                ) : (
+                  <div className="alert alert-info mb-0">
+                    <i className="bi bi-info-circle me-2"></i>
+                    No devices are currently connected to this group. Connect to a device first to download its database.
+                  </div>
+                )}
+
+                {downloadProgress && (
+                  <div className="mt-3">
+                    <div className="d-flex align-items-center">
+                      <span className="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span>
+                      <span>{downloadProgress}</span>
+                    </div>
+                  </div>
+                )}
+
+                {downloadResult && (
+                  <div className={`alert mt-3 mb-0 ${downloadResult.success ? 'alert-success' : 'alert-danger'}`}>
+                    {downloadResult.success ? (
+                      <>
+                        <i className="bi bi-check-circle me-2"></i>
+                        <strong>Download complete!</strong>
+                        <br />
+                        <small>
+                          File: <code>{downloadResult.filePath}</code>
+                          <br />
+                          Size: {downloadResult.size ? `${(downloadResult.size / (1024 * 1024)).toFixed(2)} MB` : 'Unknown'}
+                        </small>
+                      </>
+                    ) : (
+                      <>
+                        <i className="bi bi-exclamation-circle me-2"></i>
+                        <strong>Download failed:</strong> {downloadResult.message}
+                      </>
+                    )}
+                  </div>
+                )}
+              </div>
             </>
           )}
         </div>

package/src/screens/network-viewer/network-viewer.tsx

@@ -8,6 +8,25 @@ import { DeviceDetailsModal } from './device-details-modal';
 import { GroupDetailsModal } from './group-details-modal';
 import { UsageGraph } from './usage-graph';
 
+/** Format bytes to human-readable string (KB, MB, GB) */
+function formatBytes(bytes: number): string {
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+  if (bytes < 1024 * 1024 * 1024) return `${(bytes / 1024 / 1024).toFixed(1)} MB`;
+  return `${(bytes / 1024 / 1024 / 1024).toFixed(2)} GB`;
+}
+
+/** Format transfer rate to human-readable string (KB/s or MB/s) */
+function formatRate(mbps: number | undefined): string {
+  if (mbps === undefined || mbps === 0) return '0 KB/s';
+  // Show KB/s if less than 0.1 MB/s (100 KB/s)
+  if (mbps < 0.1) {
+    const kbps = mbps * 1024;
+    return `${kbps.toFixed(1)} KB/s`;
+  }
+  return `${mbps.toFixed(2)} MB/s`;
+}
+
 // TypeScript type definitions (matching backend)
 interface INetworkOverview {
   localDeviceId: string;
@@ -43,6 +62,11 @@ interface IConnectionInfo {
   errorRate: number;
   isServer: boolean;
   connectionAddress?: string;
+  // Throughput stats
+  bytesSent?: number;
+  bytesReceived?: number;
+  sendRateMBps?: number;
+  receiveRateMBps?: number;
 }
 
 interface IDeviceConnection {
@@ -329,35 +353,6 @@ export function NetworkViewerList() {
         </div>
       </div>      
 
-      {/* Groups Summary */}
-      {overview.groups.length > 0 && (
-        <div className="card mb-4">
-          <div className="card-body">
-            <h5 className="card-title">Groups: {overview.groups.length}</h5>
-            <div className="table-responsive">
-              <table className="table table-sm">
-                <thead>
-                  <tr>
-                    <th>Group Name</th>
-                    <th>Connected Devices</th>
-                    <th>Total Members</th>
-                  </tr>
-                </thead>
-                <tbody>
-                  {overview.groups.map(group => (
-                    <tr key={group.groupId}>
-                      <td>{group.groupName}</td>
-                      <td>{group.connectedDevices}</td>
-                      <td>{group.totalMembers}</td>
-                    </tr>
-                  ))}
-                </tbody>
-              </table>
-            </div>
-          </div>
-        </div>
-      )}
-
       {/* Connections List */}
       <div className="card mb-4">
         <div className="card-body">
@@ -379,6 +374,7 @@ export function NetworkViewerList() {
                     <th>Shared Groups</th>
                     <th>Latency</th>
                     <th>Error Rate</th>
+                    <th>Throughput</th>
                     {/* <th>State</th> */}
                     <th>Actions</th>
                   </tr>
@@ -451,6 +447,17 @@ export function NetworkViewerList() {
                           {(conn.errorRate * 100).toFixed(1)}%
                         </span>
                       </td>
+                      <td>
+                        <small>
+                          <span className="text-success">↑{formatRate(conn.sendRateMBps)}</span>
+                          {' / '}
+                          <span className="text-primary">↓{formatRate(conn.receiveRateMBps)}</span>
+                        </small>
+                        <br />
+                        <small className="text-muted">
+                          {formatBytes(conn.bytesSent || 0)} / {formatBytes(conn.bytesReceived || 0)}
+                        </small>
+                      </td>
                       {/* <td>
                         <span className="badge bg-success">{conn.connectionState}</span>
                       </td> */}

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

@@ -1,9 +1,9 @@
-import React, { useEffect, useState } from 'react';
-import { packagesRootDir, reloadPackagesOnPageRefresh, rpcServerCalls, Devices, thisDeviceId, IDevice, getUserContext } from "@peers-app/peers-sdk";
-import { Tooltip } from '../../components/tooltip';
-import { ColorModeDropdown } from './color-mode-dropdown';
+import { Devices, getUserContext, IDevice, packagesRootDir, reloadPackagesOnPageRefresh, rpcServerCalls, thisDeviceId, TrustLevel } from "@peers-app/peers-sdk";
+import React, { useEffect } from 'react';
 import { Input } from '../../components/input';
+import { Tooltip } from '../../components/tooltip';
 import { useObservable, useObservableState } from '../../hooks';
+import { ColorModeDropdown } from './color-mode-dropdown';
 
 export const SettingsPage: React.FC = () => {
   return (
@@ -39,11 +39,19 @@ const DeviceName: React.FC = () => {
 
   const handleSave = async () => {
     try {
-      if (!deviceId) return;
+      if (!deviceId) {
+        console.error('No device id');
+        return;
+      }
       const userContext = await getUserContext();
       const devicesTable = Devices(userContext.userDataContext);
-      const device = await devicesTable.get(deviceId);
-      if (!device) return;
+      const device: IDevice = await devicesTable.get(deviceId) || {
+        deviceId,
+        userId: userContext.userId,
+        firstSeen: new Date(),
+        lastSeen: new Date(),
+        trustLevel: TrustLevel.NewDevice,
+      };
       device.name = deviceName() || undefined;
       await devicesTable.save(device);
       currentDeviceName(deviceName());
@@ -69,8 +77,8 @@ const DeviceName: React.FC = () => {
         />
         <button
           className='btn btn-primary btn-sm'
-          onClick={handleSave}     
-          disabled={currentDeviceName() === deviceName()}     
+          onClick={handleSave}
+          disabled={currentDeviceName() === deviceName()}
         >
           Save
         </button>

package/src/screens/setup-user.tsx

@@ -85,7 +85,7 @@ export const SetupUser = () => {
   // Step 1: Select User Type
   if (step === 'select-user-type' && isExistingUser === null) {
     return (
-      <div className="container-fluid d-flex align-items-start justify-content-center" style={{ minHeight: '100vh', paddingTop: '80px', backgroundColor: isDark ? '#212529' : '#f8f9fa' }}>
+      <div className="container-fluid d-flex align-items-start justify-content-center" style={{ paddingTop: '20px', backgroundColor: isDark ? '#212529' : '#f8f9fa' }}>
         <div className="card shadow" style={{ maxWidth: '500px', width: '100%', backgroundColor: isDark ? '#2d3238' : '#ffffff' }}>
           <div className="card-body p-4 p-md-5">
             <div className="text-center mb-4">
@@ -129,7 +129,7 @@ export const SetupUser = () => {
   // Step 2: New User Confirmation
   if (isExistingUser === false) {
     return (
-      <div className="container-fluid d-flex align-items-start justify-content-center" style={{ minHeight: '100vh', paddingTop: '80px', backgroundColor: isDark ? '#212529' : '#f8f9fa' }}>
+      <div className="container-fluid d-flex align-items-start justify-content-center" style={{ paddingTop: '20px', backgroundColor: isDark ? '#212529' : '#f8f9fa' }}>
         <div className="card shadow" style={{ maxWidth: '500px', width: '100%', backgroundColor: isDark ? '#2d3238' : '#ffffff' }}>
           <div className="card-body p-4 p-md-5">
             <div className="text-center mb-4">
@@ -182,12 +182,15 @@ export const SetupUser = () => {
   // Step 3: Existing User Sign In
   if (isExistingUser === true) {
     return (
-      <div className="container-fluid d-flex align-items-start justify-content-center" style={{ minHeight: '100vh', paddingTop: '80px', backgroundColor: isDark ? '#212529' : '#f8f9fa' }}>
+      <div className="container-fluid d-flex align-items-start justify-content-center" style={{ paddingTop: '20px', backgroundColor: isDark ? '#212529' : '#f8f9fa' }}>
         <div className="card shadow" style={{ maxWidth: '500px', width: '100%', backgroundColor: isDark ? '#2d3238' : '#ffffff' }}>
           <div className="card-body p-4 p-md-5">
-            <div className="text-center mb-4">
-              <i className="bi bi-box-arrow-in-right text-primary fs-1 mb-3 d-block" />
-              <h3 className={`fw-bold mb-2 ${isDark ? 'text-light' : ''}`}>Sign In</h3>
+            <div className="text-center mb-2">
+              <h3 className={`fw-bold mb-2 ${isDark ? 'text-light' : ''}`}>
+                <span>Sign In</span>
+                &nbsp;&nbsp;
+                <i className="bi bi-box-arrow-in-right text-primary" />
+              </h3>
               <p className={isDark ? 'text-light opacity-75' : 'text-muted'}>Enter your existing credentials</p>
             </div>
 

package/src/system-apps/index.ts

@@ -20,6 +20,7 @@ export { contactsApp } from './contacts.app';
 export { consoleLogsApp } from './console-logs.app';
 export { networkViewerApp } from './network-viewer.app';
 export { dataExplorerApp } from './data-explorer.app';
+export { mobileSettingsApp } from './mobile-settings.app';
 
 // Import individual apps
 import { searchApp } from './search.app';
@@ -41,6 +42,12 @@ import { contactsApp } from './contacts.app';
 import { consoleLogsApp } from './console-logs.app';
 import { networkViewerApp } from './network-viewer.app';
 import { dataExplorerApp } from './data-explorer.app';
+import { mobileSettingsApp } from './mobile-settings.app';
+
+// Helper to check if running in React Native
+function isReactNative(): boolean {
+  return typeof (window as any).__NATIVE_THEME !== 'undefined';
+}
 
 // Collection of all system apps
 export const systemApps: IAppNav[] = [
@@ -67,6 +74,8 @@ export const systemApps: IAppNav[] = [
   // User & Settings Apps
   profileApp,
   settingsApp,
+  // Mobile Settings (only in React Native)
+  ...(isReactNative() ? [mobileSettingsApp] : []),
 
   // System Tools & Debugging
   consoleLogsApp,

package/src/system-apps/mobile-settings.app.ts

@@ -0,0 +1,8 @@
+import { IAppNav } from "@peers-app/peers-sdk";
+
+export const mobileSettingsApp: IAppNav = {
+  name: 'Mobile Settings',
+  iconClassName: 'bi-phone-fill',
+  navigationPath: 'mobile-settings'
+};
+

package/src/tabs-layout/tabs-layout.tsx

@@ -133,7 +133,7 @@ function TabsLayoutInternal() {
         ) : (
           <div className="d-flex align-items-center px-1" style={{ height: '36px' }}>
             {/* Group Switcher */}
-            <GroupSwitcher colorMode={_colorMode} />
+            <GroupSwitcher colorMode={_colorMode} isMobile={false} />
             
             {/* Search Button */}
             <button
@@ -207,112 +207,122 @@ interface MobileTabsHeaderProps {
 }
 
 function MobileTabsHeader({ tabs, activeTab, onSwitch, onClose, colorMode }: MobileTabsHeaderProps) {
-  const [showTabDropdown, setShowTabDropdown] = React.useState(false);
+  const [showMenuDropdown, setShowMenuDropdown] = React.useState(false);
   const currentTab = tabs.find(t => t.tabId === activeTab);
   const nonLauncherTabs = tabs.filter(t => t.packageId !== 'launcher');
 
   return (
-    <div className="d-flex align-items-center justify-content-between px-2" style={{ height: '36px' }}>
-      {/* Left Side - Group Switcher, Search & App Launcher Buttons */}
+    <div className="d-flex align-items-center justify-content-between px-2 position-relative" style={{ height: '36px' }}>
+      {/* Left Side - Group Switcher */}
       <div className="d-flex align-items-center gap-1">
-        <GroupSwitcher colorMode={colorMode} />
-        <button
-          className="btn btn-sm"
-          onClick={openCommandPalette}
-          title="Search everything"
-          style={{ 
-            minWidth: '36px',
-            border: 'none',
-            background: 'transparent',
-            color: colorMode === 'light' ? '#6c757d' : '#adb5bd'
-          }}
-          onMouseEnter={(e) => {
-            e.currentTarget.style.backgroundColor = colorMode === 'light' ? '#f8f9fa' : '#495057';
-            e.currentTarget.style.color = colorMode === 'light' ? '#0d6efd' : '#ffffff';
-          }}
-          onMouseLeave={(e) => {
-            e.currentTarget.style.backgroundColor = 'transparent';
-            e.currentTarget.style.color = colorMode === 'light' ? '#6c757d' : '#adb5bd';
-          }}
-        >
-          <i className="bi-search" />
-        </button>
-        <button
-          className={`btn btn-sm ${colorMode === 'light' ? 'btn-outline-primary' : 'btn-outline-light'}`}
-          onClick={() => onSwitch('launcher')}
-          style={{ minWidth: '36px' }}
-        >
-          <i className="bi-grid-3x3-gap" />
-        </button>
+        <GroupSwitcher colorMode={colorMode} isMobile={true} />
       </div>
 
-      {/* Center - Current Tab Display */}
-      <div className="d-flex align-items-center flex-grow-1 justify-content-center">
+      {/* Center - Current Tab Display (absolutely positioned to center on screen) */}
+      <div 
+        className="d-flex align-items-center justify-content-center position-absolute"
+        style={{ 
+          left: '50%',
+          transform: 'translateX(-50%)',
+          pointerEvents: 'none',
+          maxWidth: 'calc(100% - 140px)'
+        }}
+      >
         {currentTab?.iconClassName && currentTab.packageId !== 'launcher' && (
           <i className={`${currentTab.iconClassName} me-2`} />
         )}
-        <span className="fw-medium text-truncate me-2 small">
+        <span className="fw-medium text-truncate small">
           {currentTab?.title || 'Apps'}
         </span>
       </div>
 
-      {/* Right Side - Tab Actions */}
-      <div className="d-flex align-items-center gap-2">
-        {/* Tab Switcher Dropdown (excluding launcher) */}
-        {nonLauncherTabs.length > 0 && (
-          <div className="dropdown">
-            <button
-              className={`btn btn-sm ${colorMode === 'light' ? 'btn-outline-dark' : 'btn-outline-light'}`}
-              onClick={() => setShowTabDropdown(!showTabDropdown)}
-            >
-              <i className="bi-list" />
+      {/* Right Side - Hamburger Menu */}
+      <div className="d-flex align-items-center">
+        <div className="dropdown">
+          <button
+            className={`btn btn-sm ${colorMode === 'light' ? 'btn-outline-dark' : 'btn-outline-light'}`}
+            onClick={() => setShowMenuDropdown(!showMenuDropdown)}
+            style={{ minWidth: '36px' }}
+          >
+            <i className="bi-list" />
+            {nonLauncherTabs.length > 0 && (
               <span className="ms-1">{nonLauncherTabs.length}</span>
-            </button>
-            {showTabDropdown && (
+            )}
+          </button>
+          {showMenuDropdown && (
+            <div
+              className={`dropdown-menu show position-absolute ${colorMode === 'light' ? '' : 'dropdown-menu-dark'}`}
+              style={{ right: 0, top: '100%', zIndex: 1000, minWidth: '250px' }}
+            >
+              {/* Apps Option */}
               <div
-                className={`dropdown-menu show position-absolute ${colorMode === 'light' ? '' : 'dropdown-menu-dark'}`}
-                style={{ right: 0, top: '100%', zIndex: 1000, minWidth: '250px' }}
+                className={`dropdown-item d-flex align-items-center ${activeTab === 'launcher' ? 'active' : ''}`}
+                style={{ cursor: 'pointer' }}
+                onClick={() => {
+                  onSwitch('launcher');
+                  setShowMenuDropdown(false);
+                }}
               >
-                {nonLauncherTabs.slice().reverse().map(tab => (
-                  <div
-                    key={tab.tabId}
-                    className={`dropdown-item d-flex align-items-center justify-content-between ${activeTab === tab.tabId ? 'active' : ''}`}
-                    style={{ cursor: 'pointer' }}
-                    onClick={() => {
-                      onSwitch(tab.tabId);
-                      setShowTabDropdown(false);
+                <i className="bi-grid-3x3-gap me-2" />
+                <span>Apps</span>
+              </div>
+              
+              {/* Search Option */}
+              <div
+                className="dropdown-item d-flex align-items-center"
+                style={{ cursor: 'pointer' }}
+                onClick={() => {
+                  openCommandPalette();
+                  setShowMenuDropdown(false);
+                }}
+              >
+                <i className="bi-search me-2" />
+                <span>Search</span>
+              </div>
+              
+              {/* Divider if there are open tabs */}
+              {nonLauncherTabs.length > 0 && (
+                <div className="dropdown-divider" />
+              )}
+              
+              {/* Open Tabs */}
+              {nonLauncherTabs.slice().reverse().map(tab => (
+                <div
+                  key={tab.tabId}
+                  className={`dropdown-item d-flex align-items-center justify-content-between ${activeTab === tab.tabId ? 'active' : ''}`}
+                  style={{ cursor: 'pointer' }}
+                  onClick={() => {
+                    onSwitch(tab.tabId);
+                    setShowMenuDropdown(false);
+                  }}
+                >
+                  <div className="d-flex align-items-center">
+                    {tab.iconClassName && <i className={`${tab.iconClassName} me-2`} />}
+                    <span>{tab.title}</span>
+                  </div>
+                  <button
+                    className="btn btn-sm p-0 ms-2"
+                    style={{ width: '20px', height: '20px' }}
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      onClose(tab.tabId);
                     }}
                   >
-                    <div className="d-flex align-items-center">
-                      {tab.iconClassName && <i className={`${tab.iconClassName} me-2`} />}
-                      <span>{tab.title}</span>
-                    </div>
-                    {tab.tabId !== "launcher" && (
-                      <button
-                        className="btn btn-sm p-0 ms-2"
-                        style={{ width: '20px', height: '20px' }}
-                        onClick={(e) => {
-                          e.stopPropagation();
-                          onClose(tab.tabId);
-                        }}
-                      >
-                        <i className="bi-x" />
-                      </button>
-                    )}
-                  </div>
-                ))}
-              </div>
-            )}
-          </div>
-        )}
+                    <i className="bi-x" />
+                  </button>
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
       </div>
 
       {/* Backdrop to close dropdown */}
-      {showTabDropdown && (
+      {showMenuDropdown && (
         <div
           className="position-fixed w-100 h-100"
           style={{ top: 0, left: 0, zIndex: 999 }}
-          onClick={() => setShowTabDropdown(false)}
+          onClick={() => setShowMenuDropdown(false)}
         />
       )}
     </div>
@@ -515,6 +525,22 @@ function AppLauncherTab({ isMobile }: AppLauncherTabProps) {
     .filter(Boolean) as AppItem[];
 
   const openApp = (appItem: AppItem) => {
+    // Check if this is the mobile-settings app and we're in React Native
+    if (appItem.path === 'mobile-settings' && typeof (window as any).__NATIVE_THEME !== 'undefined') {
+      // Use expo-linking to navigate to native screen
+      // @ts-ignore
+      if (window.ReactNativeWebView) {
+        // @ts-ignore
+        window.ReactNativeWebView.postMessage(JSON.stringify({
+          type: 'navigate',
+          path: 'mobile-settings'
+        }));
+      } else {
+        // Fallback to deep link
+        window.location.href = 'peers://mobile-settings';
+      }
+      return;
+    }
     goToTabPath(appItem.path);
   };