@peers-app/peers-ui 0.8.0 → 0.8.1

package/dist/command-palette/command-palette.d.ts

@@ -8,8 +8,8 @@ export interface Command {
     action: () => void;
     isAvailable?: () => boolean;
 }
-export declare const isCommandPaletteOpen: import("@peers-app/peers-sdk").PersistentVar<boolean>;
-export declare const commandSearchQuery: import("@peers-app/peers-sdk").PersistentVar<string>;
+export declare const isCommandPaletteOpen: import("@peers-app/peers-sdk").Observable<boolean>;
+export declare const commandSearchQuery: import("@peers-app/peers-sdk").Observable<string>;
 export declare function registerCommand(command: Command): void;
 export declare function unregisterCommand(commandId: string): void;
 export declare function getCommand(commandId: string): Command | undefined;

package/dist/command-palette/command-palette.js

@@ -47,13 +47,9 @@ exports.initializeCommandPalette = initializeCommandPalette;
 exports.destroyCommandPalette = destroyCommandPalette;
 const peers_sdk_1 = require("@peers-app/peers-sdk");
 const tabs_state_1 = require("../tabs-layout/tabs-state");
-// Command palette state (using device scope but with temporary defaults)
-exports.isCommandPaletteOpen = (0, peers_sdk_1.deviceVar)('commandPaletteOpen', {
-    defaultValue: false,
-});
-exports.commandSearchQuery = (0, peers_sdk_1.deviceVar)('commandSearchQuery', {
-    defaultValue: '',
-});
+// Command palette state (in-memory only, no persistence needed)
+exports.isCommandPaletteOpen = (0, peers_sdk_1.observable)(false);
+exports.commandSearchQuery = (0, peers_sdk_1.observable)('');
 // Command registry
 const registeredCommands = new Map();
 // Detect platform for keyboard shortcuts  

package/dist/components/group-switcher.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 interface GroupSwitcherProps {
     colorMode: string;
+    isMobile?: boolean;
 }
-export declare function GroupSwitcher({ colorMode }: GroupSwitcherProps): React.JSX.Element;
+export declare function GroupSwitcher({ colorMode, isMobile }: GroupSwitcherProps): React.JSX.Element;
 export {};

package/dist/components/group-switcher.js

@@ -37,7 +37,7 @@ exports.GroupSwitcher = GroupSwitcher;
 const peers_sdk_1 = require("@peers-app/peers-sdk");
 const react_1 = __importStar(require("react"));
 const hooks_1 = require("../hooks");
-function GroupSwitcher({ colorMode }) {
+function GroupSwitcher({ colorMode, isMobile = false }) {
     const [showDropdown, setShowDropdown] = (0, react_1.useState)(false);
     const [showCreateModal, setShowCreateModal] = (0, react_1.useState)(false);
     const [allGroups, setAllGroups] = (0, react_1.useState)([]);
@@ -84,13 +84,14 @@ function GroupSwitcher({ colorMode }) {
     const isDark = colorMode === 'dark';
     return (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement("div", { className: "dropdown" },
-            react_1.default.createElement("button", { className: "btn btn-sm me-2 d-flex align-items-center", onClick: () => setShowDropdown(!showDropdown), title: `Current group: ${getGroupName(currentGroup)}`, style: {
-                    padding: '4px 8px',
+            react_1.default.createElement("button", { className: `btn btn-sm ${isMobile ? '' : 'me-2'} d-flex align-items-center`, onClick: () => setShowDropdown(!showDropdown), title: `Current group: ${getGroupName(currentGroup)}`, style: {
+                    padding: isMobile ? '4px' : '4px 8px',
                     fontSize: '12px',
                     borderRadius: '6px',
                     border: 'none',
                     background: 'transparent',
-                    color: isDark ? '#adb5bd' : '#6c757d'
+                    color: isDark ? '#adb5bd' : '#6c757d',
+                    minWidth: isMobile ? '36px' : undefined
                 }, onMouseEnter: (e) => {
                     e.currentTarget.style.backgroundColor = isDark ? '#495057' : '#f8f9fa';
                     e.currentTarget.style.color = isDark ? '#ffffff' : '#0d6efd';
@@ -98,8 +99,8 @@ function GroupSwitcher({ colorMode }) {
                     e.currentTarget.style.backgroundColor = 'transparent';
                     e.currentTarget.style.color = isDark ? '#adb5bd' : '#6c757d';
                 } },
-                react_1.default.createElement("i", { className: `${getGroupIcon(currentGroup)} me-1`, style: { fontSize: '14px' } }),
-                react_1.default.createElement("span", { className: "text-truncate", style: { maxWidth: '80px' } }, getGroupName(currentGroup)),
+                react_1.default.createElement("i", { className: `${getGroupIcon(currentGroup)} ${isMobile ? '' : 'me-1'}`, style: { fontSize: '14px' } }),
+                !isMobile && (react_1.default.createElement("span", { className: "text-truncate", style: { maxWidth: '80px' } }, getGroupName(currentGroup))),
                 react_1.default.createElement("i", { className: "bi-chevron-down ms-1", style: { fontSize: '10px' } })),
             showDropdown && (react_1.default.createElement("div", { className: `dropdown-menu show position-absolute ${isDark ? 'dropdown-menu-dark' : ''}`, style: {
                     left: 0,

package/dist/screens/network-viewer/device-details-modal.js

@@ -38,6 +38,27 @@ const react_1 = __importStar(require("react"));
 const peers_sdk_1 = require("@peers-app/peers-sdk");
 const loading_indicator_1 = require("../../components/loading-indicator");
 const trust_level_badge_1 = require("../../components/trust-level-badge");
+/** Format bytes to human-readable string (KB, MB, GB) */
+function formatBytes(bytes) {
+    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) {
+    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`;
+}
 function DeviceDetailsModal({ deviceId, onClose, onDisconnect }) {
     const [device, setDevice] = (0, react_1.useState)(null);
     const [loading, setLoading] = (0, react_1.useState)(true);
@@ -133,6 +154,29 @@ function DeviceDetailsModal({ deviceId, onClose, onDisconnect }) {
                                 react_1.default.createElement("strong", null, "Path:"),
                                 react_1.default.createElement("br", null),
                                 react_1.default.createElement("small", { className: "text-muted" }, device.throughDeviceIds.join(' → ')))))),
+                    react_1.default.createElement("div", { className: "mb-4" },
+                        react_1.default.createElement("h6", { className: "border-bottom pb-2 mb-3" }, "Throughput"),
+                        react_1.default.createElement("div", { className: "row" },
+                            react_1.default.createElement("div", { className: "col-md-6 mb-3" },
+                                react_1.default.createElement("strong", null, "Send Rate:"),
+                                react_1.default.createElement("br", null),
+                                react_1.default.createElement("span", { className: "text-success" },
+                                    "\u2191 ",
+                                    formatRate(device.sendRateMBps))),
+                            react_1.default.createElement("div", { className: "col-md-6 mb-3" },
+                                react_1.default.createElement("strong", null, "Receive Rate:"),
+                                react_1.default.createElement("br", null),
+                                react_1.default.createElement("span", { className: "text-primary" },
+                                    "\u2193 ",
+                                    formatRate(device.receiveRateMBps))),
+                            react_1.default.createElement("div", { className: "col-md-6 mb-3" },
+                                react_1.default.createElement("strong", null, "Total Sent:"),
+                                react_1.default.createElement("br", null),
+                                react_1.default.createElement("span", null, formatBytes(device.bytesSent || 0))),
+                            react_1.default.createElement("div", { className: "col-md-6 mb-3" },
+                                react_1.default.createElement("strong", null, "Total Received:"),
+                                react_1.default.createElement("br", null),
+                                react_1.default.createElement("span", null, formatBytes(device.bytesReceived || 0))))),
                     device.sharedGroups.length > 0 && (react_1.default.createElement("div", { className: "mb-4" },
                         react_1.default.createElement("h6", { className: "border-bottom pb-2 mb-3" },
                             "Shared Groups (",

package/dist/screens/network-viewer/group-details-modal.js

@@ -40,8 +40,12 @@ const loading_indicator_1 = require("../../components/loading-indicator");
 const trust_level_badge_1 = require("../../components/trust-level-badge");
 function GroupDetailsModal({ groupId, onClose }) {
     const [group, setGroup] = (0, react_1.useState)(null);
+    const [syncInfo, setSyncInfo] = (0, react_1.useState)(null);
     const [loading, setLoading] = (0, react_1.useState)(true);
     const [notFound, setNotFound] = (0, react_1.useState)(false);
+    const [downloading, setDownloading] = (0, react_1.useState)(false);
+    const [downloadProgress, setDownloadProgress] = (0, react_1.useState)(null);
+    const [downloadResult, setDownloadResult] = (0, react_1.useState)(null);
     const loadData = async () => {
         try {
             const api = window.electronAPI?.networkViewer;
@@ -49,7 +53,10 @@ function GroupDetailsModal({ groupId, onClose }) {
                 console.warn('Network Viewer API not available');
                 return;
             }
-            const groupData = await api.getGroupDetails(groupId);
+            const [groupData, syncData] = await Promise.all([
+                api.getGroupDetails(groupId),
+                api.getGroupSyncStatus(groupId)
+            ]);
             if (!groupData) {
                 setNotFound(true);
             }
@@ -57,6 +64,9 @@ function GroupDetailsModal({ groupId, onClose }) {
                 setGroup(groupData);
                 setNotFound(false);
             }
+            if (syncData && syncData.length > 0) {
+                setSyncInfo(syncData[0]);
+            }
         }
         catch (error) {
             console.error('Error loading group details:', error);
@@ -66,6 +76,38 @@ function GroupDetailsModal({ groupId, onClose }) {
             setLoading(false);
         }
     };
+    const handleDownloadDatabase = async (deviceId) => {
+        try {
+            setDownloading(true);
+            setDownloadProgress('Preparing download...');
+            setDownloadResult(null);
+            const api = window.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) {
+            console.error('Error downloading database:', error);
+            setDownloadResult({
+                success: false,
+                message: error?.message || 'Download failed'
+            });
+        }
+        finally {
+            setDownloading(false);
+            setDownloadProgress(null);
+        }
+    };
     (0, react_1.useEffect)(() => {
         loadData();
     }, [groupId]);
@@ -123,5 +165,41 @@ function GroupDetailsModal({ groupId, onClose }) {
                                     react_1.default.createElement("td", null,
                                         react_1.default.createElement("span", { className: "badge bg-primary" }, member.role)),
                                     react_1.default.createElement("td", null,
-                                        react_1.default.createElement(trust_level_badge_1.TrustLevelBadge, { level: member.trustLevel || peers_sdk_1.TrustLevel.Unknown }))))))))))))))));
+                                        react_1.default.createElement(trust_level_badge_1.TrustLevelBadge, { level: member.trustLevel || peers_sdk_1.TrustLevel.Unknown })))))))))),
+                    react_1.default.createElement("div", { className: "mb-4" },
+                        react_1.default.createElement("h6", { className: "border-bottom pb-2 mb-3" },
+                            react_1.default.createElement("i", { className: "bi bi-download me-2" }),
+                            "Download Database (Fast Sync)"),
+                        react_1.default.createElement("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."),
+                        syncInfo && syncInfo.connectedDevices.length > 0 ? (react_1.default.createElement("div", null,
+                            react_1.default.createElement("label", { className: "form-label" }, "Select a connected device:"),
+                            react_1.default.createElement("div", { className: "d-flex flex-wrap gap-2" }, syncInfo.connectedDevices.map((device) => (react_1.default.createElement("button", { key: device.deviceId, className: "btn btn-outline-primary btn-sm", onClick: () => handleDownloadDatabase(device.deviceId), disabled: downloading }, downloading ? (react_1.default.createElement(react_1.default.Fragment, null,
+                                react_1.default.createElement("span", { className: "spinner-border spinner-border-sm me-1", role: "status", "aria-hidden": "true" }),
+                                "Downloading...")) : (react_1.default.createElement(react_1.default.Fragment, null,
+                                react_1.default.createElement("i", { className: "bi bi-cloud-download me-1" }),
+                                device.deviceId.substring(0, 8),
+                                "...",
+                                react_1.default.createElement("span", { className: "badge bg-secondary ms-1" },
+                                    Math.round(device.latencyMs),
+                                    "ms"))))))))) : (react_1.default.createElement("div", { className: "alert alert-info mb-0" },
+                            react_1.default.createElement("i", { className: "bi bi-info-circle me-2" }),
+                            "No devices are currently connected to this group. Connect to a device first to download its database.")),
+                        downloadProgress && (react_1.default.createElement("div", { className: "mt-3" },
+                            react_1.default.createElement("div", { className: "d-flex align-items-center" },
+                                react_1.default.createElement("span", { className: "spinner-border spinner-border-sm me-2", role: "status", "aria-hidden": "true" }),
+                                react_1.default.createElement("span", null, downloadProgress)))),
+                        downloadResult && (react_1.default.createElement("div", { className: `alert mt-3 mb-0 ${downloadResult.success ? 'alert-success' : 'alert-danger'}` }, downloadResult.success ? (react_1.default.createElement(react_1.default.Fragment, null,
+                            react_1.default.createElement("i", { className: "bi bi-check-circle me-2" }),
+                            react_1.default.createElement("strong", null, "Download complete!"),
+                            react_1.default.createElement("br", null),
+                            react_1.default.createElement("small", null,
+                                "File: ",
+                                react_1.default.createElement("code", null, downloadResult.filePath),
+                                react_1.default.createElement("br", null),
+                                "Size: ",
+                                downloadResult.size ? `${(downloadResult.size / (1024 * 1024)).toFixed(2)} MB` : 'Unknown'))) : (react_1.default.createElement(react_1.default.Fragment, null,
+                            react_1.default.createElement("i", { className: "bi bi-exclamation-circle me-2" }),
+                            react_1.default.createElement("strong", null, "Download failed:"),
+                            " ",
+                            downloadResult.message)))))))))));
 }

package/dist/screens/network-viewer/network-viewer.js

@@ -43,6 +43,27 @@ const globals_1 = require("../../globals");
 const device_details_modal_1 = require("./device-details-modal");
 const group_details_modal_1 = require("./group-details-modal");
 const usage_graph_1 = require("./usage-graph");
+/** Format bytes to human-readable string (KB, MB, GB) */
+function formatBytes(bytes) {
+    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) {
+    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`;
+}
 function NetworkViewerList() {
     const [overview, setOverview] = (0, react_1.useState)(null);
     const [connections, setConnections] = (0, react_1.useState)([]);
@@ -238,22 +259,6 @@ function NetworkViewerList() {
                                 { maxValue: 80, color: 'rgba(255, 193, 7, 1)' },
                                 { maxValue: Infinity, color: 'rgba(220, 53, 69, 1)' }
                             ] }))))),
-        overview.groups.length > 0 && (react_1.default.createElement("div", { className: "card mb-4" },
-            react_1.default.createElement("div", { className: "card-body" },
-                react_1.default.createElement("h5", { className: "card-title" },
-                    "Groups: ",
-                    overview.groups.length),
-                react_1.default.createElement("div", { className: "table-responsive" },
-                    react_1.default.createElement("table", { className: "table table-sm" },
-                        react_1.default.createElement("thead", null,
-                            react_1.default.createElement("tr", null,
-                                react_1.default.createElement("th", null, "Group Name"),
-                                react_1.default.createElement("th", null, "Connected Devices"),
-                                react_1.default.createElement("th", null, "Total Members"))),
-                        react_1.default.createElement("tbody", null, overview.groups.map(group => (react_1.default.createElement("tr", { key: group.groupId },
-                            react_1.default.createElement("td", null, group.groupName),
-                            react_1.default.createElement("td", null, group.connectedDevices),
-                            react_1.default.createElement("td", null, group.totalMembers)))))))))),
         react_1.default.createElement("div", { className: "card mb-4" },
             react_1.default.createElement("div", { className: "card-body" },
                 react_1.default.createElement("h5", { className: "card-title" }, "Active Connections"),
@@ -270,6 +275,7 @@ function NetworkViewerList() {
                                 react_1.default.createElement("th", null, "Shared Groups"),
                                 react_1.default.createElement("th", null, "Latency"),
                                 react_1.default.createElement("th", null, "Error Rate"),
+                                react_1.default.createElement("th", null, "Throughput"),
                                 react_1.default.createElement("th", null, "Actions"))),
                         react_1.default.createElement("tbody", null, connections.map(conn => {
                             return (react_1.default.createElement("tr", { key: conn.deviceId },
@@ -300,6 +306,20 @@ function NetworkViewerList() {
                                             conn.errorRate < 0.2 ? 'warning' : 'danger'}` },
                                         (conn.errorRate * 100).toFixed(1),
                                         "%")),
+                                react_1.default.createElement("td", null,
+                                    react_1.default.createElement("small", null,
+                                        react_1.default.createElement("span", { className: "text-success" },
+                                            "\u2191",
+                                            formatRate(conn.sendRateMBps)),
+                                        ' / ',
+                                        react_1.default.createElement("span", { className: "text-primary" },
+                                            "\u2193",
+                                            formatRate(conn.receiveRateMBps))),
+                                    react_1.default.createElement("br", null),
+                                    react_1.default.createElement("small", { className: "text-muted" },
+                                        formatBytes(conn.bytesSent || 0),
+                                        " / ",
+                                        formatBytes(conn.bytesReceived || 0))),
                                 react_1.default.createElement("td", null,
                                     react_1.default.createElement("button", { className: "btn btn-sm btn-outline-primary me-2", onClick: () => handleViewDetails(conn.deviceId), title: "View Details" },
                                         react_1.default.createElement("i", { className: "bi bi-info-circle" })),

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

@@ -34,12 +34,12 @@ var __importStar = (this && this.__importStar) || (function () {
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SettingsPage = void 0;
-const react_1 = __importStar(require("react"));
 const peers_sdk_1 = require("@peers-app/peers-sdk");
-const tooltip_1 = require("../../components/tooltip");
-const color_mode_dropdown_1 = require("./color-mode-dropdown");
+const react_1 = __importStar(require("react"));
 const input_1 = require("../../components/input");
+const tooltip_1 = require("../../components/tooltip");
 const hooks_1 = require("../../hooks");
+const color_mode_dropdown_1 = require("./color-mode-dropdown");
 const SettingsPage = () => {
     return (react_1.default.createElement("div", { className: 'container-fluid' },
         react_1.default.createElement(color_mode_dropdown_1.ColorModeDropdown, null),
@@ -71,13 +71,19 @@ const DeviceName = () => {
     }, [deviceId]);
     const handleSave = async () => {
         try {
-            if (!deviceId)
+            if (!deviceId) {
+                console.error('No device id');
                 return;
+            }
             const userContext = await (0, peers_sdk_1.getUserContext)();
             const devicesTable = (0, peers_sdk_1.Devices)(userContext.userDataContext);
-            const device = await devicesTable.get(deviceId);
-            if (!device)
-                return;
+            const device = await devicesTable.get(deviceId) || {
+                deviceId,
+                userId: userContext.userId,
+                firstSeen: new Date(),
+                lastSeen: new Date(),
+                trustLevel: peers_sdk_1.TrustLevel.NewDevice,
+            };
             device.name = deviceName() || undefined;
             await devicesTable.save(device);
             currentDeviceName(deviceName());

package/dist/screens/setup-user.js

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

package/dist/system-apps/index.d.ts

@@ -18,5 +18,6 @@ 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';
 export declare const systemApps: IAppNav[];
 export declare const systemPackage: IPackage;

package/dist/system-apps/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.systemPackage = exports.systemApps = exports.dataExplorerApp = exports.networkViewerApp = exports.consoleLogsApp = exports.contactsApp = exports.groupsApp = exports.settingsApp = exports.profileApp = exports.predicatesApp = exports.knowledgeFramesApp = exports.knowledgeValuesApp = exports.threadsApp = exports.packagesApp = exports.typesApp = exports.variablesApp = exports.eventsApp = exports.workflowsApp = exports.toolsApp = exports.assistantsApp = exports.searchApp = void 0;
+exports.systemPackage = exports.systemApps = exports.mobileSettingsApp = exports.dataExplorerApp = exports.networkViewerApp = exports.consoleLogsApp = exports.contactsApp = exports.groupsApp = exports.settingsApp = exports.profileApp = exports.predicatesApp = exports.knowledgeFramesApp = exports.knowledgeValuesApp = exports.threadsApp = exports.packagesApp = exports.typesApp = exports.variablesApp = exports.eventsApp = exports.workflowsApp = exports.toolsApp = exports.assistantsApp = exports.searchApp = void 0;
 // Import all system apps
 var search_app_1 = require("./search.app");
 Object.defineProperty(exports, "searchApp", { enumerable: true, get: function () { return search_app_1.searchApp; } });
@@ -40,6 +40,8 @@ var network_viewer_app_1 = require("./network-viewer.app");
 Object.defineProperty(exports, "networkViewerApp", { enumerable: true, get: function () { return network_viewer_app_1.networkViewerApp; } });
 var data_explorer_app_1 = require("./data-explorer.app");
 Object.defineProperty(exports, "dataExplorerApp", { enumerable: true, get: function () { return data_explorer_app_1.dataExplorerApp; } });
+var mobile_settings_app_1 = require("./mobile-settings.app");
+Object.defineProperty(exports, "mobileSettingsApp", { enumerable: true, get: function () { return mobile_settings_app_1.mobileSettingsApp; } });
 // Import individual apps
 const search_app_2 = require("./search.app");
 const assistants_app_2 = require("./assistants.app");
@@ -60,6 +62,11 @@ const contacts_app_2 = require("./contacts.app");
 const console_logs_app_2 = require("./console-logs.app");
 const network_viewer_app_2 = require("./network-viewer.app");
 const data_explorer_app_2 = require("./data-explorer.app");
+const mobile_settings_app_2 = require("./mobile-settings.app");
+// Helper to check if running in React Native
+function isReactNative() {
+    return typeof window.__NATIVE_THEME !== 'undefined';
+}
 // Collection of all system apps
 exports.systemApps = [
     // Core Navigation & Search
@@ -82,6 +89,8 @@ exports.systemApps = [
     // User & Settings Apps
     profile_app_2.profileApp,
     settings_app_2.settingsApp,
+    // Mobile Settings (only in React Native)
+    ...(isReactNative() ? [mobile_settings_app_2.mobileSettingsApp] : []),
     // System Tools & Debugging
     console_logs_app_2.consoleLogsApp,
     network_viewer_app_2.networkViewerApp,

package/dist/system-apps/mobile-settings.app.d.ts

@@ -0,0 +1,2 @@
+import { IAppNav } from "@peers-app/peers-sdk";
+export declare const mobileSettingsApp: IAppNav;

package/dist/system-apps/mobile-settings.app.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.mobileSettingsApp = void 0;
+exports.mobileSettingsApp = {
+    name: 'Mobile Settings',
+    iconClassName: 'bi-phone-fill',
+    navigationPath: 'mobile-settings'
+};

package/dist/tabs-layout/tabs-layout.js

@@ -134,7 +134,7 @@ function TabsLayoutInternal() {
                 borderBottomWidth: '1px',
                 borderBottomColor: _colorMode === 'light' ? '#dee2e6' : '#495057'
             } }, isMobile ? (react_1.default.createElement(MobileTabsHeader, { tabs: tabs, activeTab: activeTab, onSwitch: switchTab, onClose: closeTab, colorMode: _colorMode })) : (react_1.default.createElement("div", { className: "d-flex align-items-center px-1", style: { height: '36px' } },
-            react_1.default.createElement(group_switcher_1.GroupSwitcher, { colorMode: _colorMode }),
+            react_1.default.createElement(group_switcher_1.GroupSwitcher, { colorMode: _colorMode, isMobile: false }),
             react_1.default.createElement("button", { className: "btn btn-sm me-2 d-flex align-items-center", onClick: command_palette_1.openCommandPalette, title: "Search everything (Cmd+K)", style: {
                     padding: '4px 8px',
                     fontSize: '12px',
@@ -158,47 +158,52 @@ function TabsLayoutInternal() {
             react_1.default.createElement(TabContent, { tab: tab, isMobile: isMobile, isActive: activeTab === tab.tabId })))))));
 }
 function MobileTabsHeader({ tabs, activeTab, onSwitch, onClose, colorMode }) {
-    const [showTabDropdown, setShowTabDropdown] = react_1.default.useState(false);
+    const [showMenuDropdown, setShowMenuDropdown] = react_1.default.useState(false);
     const currentTab = tabs.find(t => t.tabId === activeTab);
     const nonLauncherTabs = tabs.filter(t => t.packageId !== 'launcher');
-    return (react_1.default.createElement("div", { className: "d-flex align-items-center justify-content-between px-2", style: { height: '36px' } },
+    return (react_1.default.createElement("div", { className: "d-flex align-items-center justify-content-between px-2 position-relative", style: { height: '36px' } },
         react_1.default.createElement("div", { className: "d-flex align-items-center gap-1" },
-            react_1.default.createElement(group_switcher_1.GroupSwitcher, { colorMode: colorMode }),
-            react_1.default.createElement("button", { className: "btn btn-sm", onClick: command_palette_1.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';
-                } },
-                react_1.default.createElement("i", { className: "bi-search" })),
-            react_1.default.createElement("button", { className: `btn btn-sm ${colorMode === 'light' ? 'btn-outline-primary' : 'btn-outline-light'}`, onClick: () => onSwitch('launcher'), style: { minWidth: '36px' } },
-                react_1.default.createElement("i", { className: "bi-grid-3x3-gap" }))),
-        react_1.default.createElement("div", { className: "d-flex align-items-center flex-grow-1 justify-content-center" },
+            react_1.default.createElement(group_switcher_1.GroupSwitcher, { colorMode: colorMode, isMobile: true })),
+        react_1.default.createElement("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' && (react_1.default.createElement("i", { className: `${currentTab.iconClassName} me-2` })),
-            react_1.default.createElement("span", { className: "fw-medium text-truncate me-2 small" }, currentTab?.title || 'Apps')),
-        react_1.default.createElement("div", { className: "d-flex align-items-center gap-2" }, nonLauncherTabs.length > 0 && (react_1.default.createElement("div", { className: "dropdown" },
-            react_1.default.createElement("button", { className: `btn btn-sm ${colorMode === 'light' ? 'btn-outline-dark' : 'btn-outline-light'}`, onClick: () => setShowTabDropdown(!showTabDropdown) },
-                react_1.default.createElement("i", { className: "bi-list" }),
-                react_1.default.createElement("span", { className: "ms-1" }, nonLauncherTabs.length)),
-            showTabDropdown && (react_1.default.createElement("div", { className: `dropdown-menu show position-absolute ${colorMode === 'light' ? '' : 'dropdown-menu-dark'}`, style: { right: 0, top: '100%', zIndex: 1000, minWidth: '250px' } }, nonLauncherTabs.slice().reverse().map(tab => (react_1.default.createElement("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);
-                } },
-                react_1.default.createElement("div", { className: "d-flex align-items-center" },
-                    tab.iconClassName && react_1.default.createElement("i", { className: `${tab.iconClassName} me-2` }),
-                    react_1.default.createElement("span", null, tab.title)),
-                tab.tabId !== "launcher" && (react_1.default.createElement("button", { className: "btn btn-sm p-0 ms-2", style: { width: '20px', height: '20px' }, onClick: (e) => {
-                        e.stopPropagation();
-                        onClose(tab.tabId);
-                    } },
-                    react_1.default.createElement("i", { className: "bi-x" }))))))))))),
-        showTabDropdown && (react_1.default.createElement("div", { className: "position-fixed w-100 h-100", style: { top: 0, left: 0, zIndex: 999 }, onClick: () => setShowTabDropdown(false) }))));
+            react_1.default.createElement("span", { className: "fw-medium text-truncate small" }, currentTab?.title || 'Apps')),
+        react_1.default.createElement("div", { className: "d-flex align-items-center" },
+            react_1.default.createElement("div", { className: "dropdown" },
+                react_1.default.createElement("button", { className: `btn btn-sm ${colorMode === 'light' ? 'btn-outline-dark' : 'btn-outline-light'}`, onClick: () => setShowMenuDropdown(!showMenuDropdown), style: { minWidth: '36px' } },
+                    react_1.default.createElement("i", { className: "bi-list" }),
+                    nonLauncherTabs.length > 0 && (react_1.default.createElement("span", { className: "ms-1" }, nonLauncherTabs.length))),
+                showMenuDropdown && (react_1.default.createElement("div", { className: `dropdown-menu show position-absolute ${colorMode === 'light' ? '' : 'dropdown-menu-dark'}`, style: { right: 0, top: '100%', zIndex: 1000, minWidth: '250px' } },
+                    react_1.default.createElement("div", { className: `dropdown-item d-flex align-items-center ${activeTab === 'launcher' ? 'active' : ''}`, style: { cursor: 'pointer' }, onClick: () => {
+                            onSwitch('launcher');
+                            setShowMenuDropdown(false);
+                        } },
+                        react_1.default.createElement("i", { className: "bi-grid-3x3-gap me-2" }),
+                        react_1.default.createElement("span", null, "Apps")),
+                    react_1.default.createElement("div", { className: "dropdown-item d-flex align-items-center", style: { cursor: 'pointer' }, onClick: () => {
+                            (0, command_palette_1.openCommandPalette)();
+                            setShowMenuDropdown(false);
+                        } },
+                        react_1.default.createElement("i", { className: "bi-search me-2" }),
+                        react_1.default.createElement("span", null, "Search")),
+                    nonLauncherTabs.length > 0 && (react_1.default.createElement("div", { className: "dropdown-divider" })),
+                    nonLauncherTabs.slice().reverse().map(tab => (react_1.default.createElement("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);
+                        } },
+                        react_1.default.createElement("div", { className: "d-flex align-items-center" },
+                            tab.iconClassName && react_1.default.createElement("i", { className: `${tab.iconClassName} me-2` }),
+                            react_1.default.createElement("span", null, tab.title)),
+                        react_1.default.createElement("button", { className: "btn btn-sm p-0 ms-2", style: { width: '20px', height: '20px' }, onClick: (e) => {
+                                e.stopPropagation();
+                                onClose(tab.tabId);
+                            } },
+                            react_1.default.createElement("i", { className: "bi-x" }))))))))),
+        showMenuDropdown && (react_1.default.createElement("div", { className: "position-fixed w-100 h-100", style: { top: 0, left: 0, zIndex: 999 }, onClick: () => setShowMenuDropdown(false) }))));
 }
 function TabHeader({ tab, isActive, onSwitch, onClose, colorMode }) {
     const activeClass = isActive
@@ -318,6 +323,23 @@ function AppLauncherTab({ isMobile }) {
         .map(path => filteredApps.find(app => app.path === path))
         .filter(Boolean);
     const openApp = (appItem) => {
+        // Check if this is the mobile-settings app and we're in React Native
+        if (appItem.path === 'mobile-settings' && typeof window.__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;
+        }
         (0, tabs_state_1.goToTabPath)(appItem.path);
     };
     return (react_1.default.createElement("div", { className: `container-fluid ${isMobile ? 'p-2' : 'p-4'}`, style: { maxHeight: '100%', overflowY: 'auto' } },