@peers-app/peers-ui 0.8.0 → 0.8.1

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

package/src/tabs-layout/tabs-state.ts

@@ -1,4 +1,4 @@
-import { groupDeviceVar, groupUserVar, IAppNav, IPackage, newid } from "@peers-app/peers-sdk";
+import { groupDeviceVar, groupUserVar, IAppNav, IPackage, newid, observable, Observable } from "@peers-app/peers-sdk";
 import { _mainContentPath } from "../globals";
 import { systemPackage } from "../system-apps";
 import { allPackages } from "../ui-router/routes-loader";
@@ -19,19 +19,68 @@ export const launcherApp: TabState = {
   iconClassName: 'bi-grid-3x3-gap',
 };
 
-// Global persistent variables for tab state
-export const activeTabs = groupDeviceVar<TabState[]>('activeTabs', {
+// Persistent vars for storage (write-only, no subscription to avoid oscillation)
+const _persistentActiveTabs = groupDeviceVar<TabState[]>('activeTabs', {
   defaultValue: [launcherApp],
 });
 
-export const activeTabId = groupDeviceVar<string>('activeTabId', {
+const _persistentActiveTabId = groupDeviceVar<string>('activeTabId', {
   defaultValue: 'launcher',
 });
 
-export const recentlyUsedApps = groupUserVar<string[]>('recentlyUsedApps', {
+const _persistentRecentlyUsedApps = groupUserVar<string[]>('recentlyUsedApps', {
   defaultValue: [],
 });
 
+// In-memory observables for UI state (loaded once, then write-through to persistent vars)
+export const activeTabs: Observable<TabState[]> & { loadingPromise: Promise<void> } = (() => {
+  const obs = observable<TabState[]>([launcherApp]);
+  
+  // Write-through to persistent var on change
+  obs.subscribe(value => {
+    _persistentActiveTabs(value);
+  });
+  
+  // Load initial value once
+  const loadingPromise = _persistentActiveTabs.loadingPromise.then(() => {
+    obs(_persistentActiveTabs());
+  });
+  
+  return Object.assign(obs, { loadingPromise });
+})();
+
+export const activeTabId: Observable<string> & { loadingPromise: Promise<void> } = (() => {
+  const obs = observable<string>('launcher');
+  
+  // Write-through to persistent var on change
+  obs.subscribe(value => {
+    _persistentActiveTabId(value);
+  });
+  
+  // Load initial value once
+  const loadingPromise = _persistentActiveTabId.loadingPromise.then(() => {
+    obs(_persistentActiveTabId());
+  });
+  
+  return Object.assign(obs, { loadingPromise });
+})();
+
+export const recentlyUsedApps: Observable<string[]> & { loadingPromise: Promise<void> } = (() => {
+  const obs = observable<string[]>([]);
+  
+  // Write-through to persistent var on change
+  obs.subscribe(value => {
+    _persistentRecentlyUsedApps(value);
+  });
+  
+  // Load initial value once
+  const loadingPromise = _persistentRecentlyUsedApps.loadingPromise.then(() => {
+    obs(_persistentRecentlyUsedApps());
+  });
+  
+  return Object.assign(obs, { loadingPromise });
+})();
+
 export const initializedTabs = new Set<string>();
 
 export function goToTabPath(path: string) {

package/src/ui-router/ui-loader.tsx

@@ -221,26 +221,65 @@ const UILoader = (args: { peersUIId: string, props: Record<string, any> }) => {
 }
 
 const uiLoadingPromises: Record<string, Promise<any>> = {};
+
+// Check if we're running in a React Native WebView (has injectUIBundle available)
+const isReactNativeWebView = typeof (window as any).ReactNativeWebView !== 'undefined';
+
 function loadUIBundle(pkg: IPackage, forceRefresh?: boolean) {
   // Dynamically import the bundle
   let importPromise: Promise<any> = uiLoadingPromises[pkg.packageId];
   if (!importPromise || forceRefresh) {
+    const sTime = Date.now();
     console.log(`loading ui bundle for ${pkg.name}`);
     importPromise = new Promise<void>(async (resolve, reject) => {
       try {
-        let bundleCode = '';
-        if (pkg.uiBundleFileId) {
-          bundleCode = await rpcServerCalls.getFileContents(pkg.uiBundleFileId);
+        if (!pkg.uiBundleFileId) {
+          resolve();
+          return;
         }
-        if (bundleCode) {
-          const exportUIs = (peerUIs: IPeersPackageUIs) => {
-            // TODO maybe add packageId that this came from
-            peerUIs?.uis?.forEach(ui => {
-              peersUIs[ui.peersUIId] = ui;
-            });
+
+        // Use fast injection path for React Native WebView
+        if (isReactNativeWebView && rpcServerCalls.injectUIBundle) {
+          // Set up listeners for bundle load completion
+          const _window = window as any;
+          _window.__peersUIs = _window.__peersUIs || {};
+          
+          const loadPromise = new Promise<void>((resolveLoad, rejectLoad) => {
+            const fileId = pkg.uiBundleFileId!;
+            
+            _window.__peersUIBundleLoaded = (loadedFileId: string) => {
+              if (loadedFileId === fileId) {
+                // Copy loaded UIs to our local registry
+                Object.keys(_window.__peersUIs || {}).forEach(peersUIId => {
+                  peersUIs[peersUIId] = _window.__peersUIs[peersUIId];
+                });
+                resolveLoad();
+              }
+            };
+            
+            _window.__peersUIBundleError = (errorFileId: string, errorMsg: string) => {
+              if (errorFileId === fileId) {
+                rejectLoad(new Error(errorMsg));
+              }
+            };
+          });
+
+          await rpcServerCalls.injectUIBundle(pkg.uiBundleFileId);
+          await loadPromise;
+          console.log(`finished loading ui bundle for ${pkg.name}: ${(Date.now() - sTime).toFixed(0)}ms`);
+        } else {
+          // Fallback: use postMessage-based getFileContents (slower for large bundles)
+          let bundleCode = await rpcServerCalls.getFileContents(pkg.uiBundleFileId);
+          if (bundleCode) {
+            const exportUIs = (peerUIs: IPeersPackageUIs) => {
+              peerUIs?.uis?.forEach(ui => {
+                peersUIs[ui.peersUIId] = ui;
+              });
+            }
+            const bundleFunction = new Function('exportUIs', bundleCode);
+            await bundleFunction(exportUIs);          
           }
-          const bundleFunction = new Function('exportUIs', bundleCode);
-          await bundleFunction(exportUIs);          
+          console.log(`finished loading ui bundle for ${pkg.name}: ${(Date.now() - sTime).toFixed(0)}ms, ${(bundleCode.length/1000).toFixed(0)} KB`);
         }
         resolve();
       } catch (err) {