@peers-app/peers-ui 0.8.0 → 0.8.1

package/dist/tabs-layout/tabs-state.d.ts

@@ -1,4 +1,4 @@
-import { IAppNav, IPackage } from "@peers-app/peers-sdk";
+import { IAppNav, IPackage, Observable } from "@peers-app/peers-sdk";
 export interface TabState {
     tabId: string;
     packageId?: string;
@@ -7,9 +7,15 @@ export interface TabState {
     iconClassName?: string;
 }
 export declare const launcherApp: TabState;
-export declare const activeTabs: import("@peers-app/peers-sdk").PersistentVar<TabState[]>;
-export declare const activeTabId: import("@peers-app/peers-sdk").PersistentVar<string>;
-export declare const recentlyUsedApps: import("@peers-app/peers-sdk").PersistentVar<string[]>;
+export declare const activeTabs: Observable<TabState[]> & {
+    loadingPromise: Promise<void>;
+};
+export declare const activeTabId: Observable<string> & {
+    loadingPromise: Promise<void>;
+};
+export declare const recentlyUsedApps: Observable<string[]> & {
+    loadingPromise: Promise<void>;
+};
 export declare const initializedTabs: Set<string>;
 export declare function goToTabPath(path: string): void;
 export declare const handleMainPathChanged: (oldPath: string, newPath: string, setNewMainPath: ((path: string) => any)) => void;

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

@@ -14,16 +14,53 @@ exports.launcherApp = {
     title: 'Apps',
     iconClassName: 'bi-grid-3x3-gap',
 };
-// Global persistent variables for tab state
-exports.activeTabs = (0, peers_sdk_1.groupDeviceVar)('activeTabs', {
+// Persistent vars for storage (write-only, no subscription to avoid oscillation)
+const _persistentActiveTabs = (0, peers_sdk_1.groupDeviceVar)('activeTabs', {
     defaultValue: [exports.launcherApp],
 });
-exports.activeTabId = (0, peers_sdk_1.groupDeviceVar)('activeTabId', {
+const _persistentActiveTabId = (0, peers_sdk_1.groupDeviceVar)('activeTabId', {
     defaultValue: 'launcher',
 });
-exports.recentlyUsedApps = (0, peers_sdk_1.groupUserVar)('recentlyUsedApps', {
+const _persistentRecentlyUsedApps = (0, peers_sdk_1.groupUserVar)('recentlyUsedApps', {
     defaultValue: [],
 });
+// In-memory observables for UI state (loaded once, then write-through to persistent vars)
+exports.activeTabs = (() => {
+    const obs = (0, peers_sdk_1.observable)([exports.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 });
+})();
+exports.activeTabId = (() => {
+    const obs = (0, peers_sdk_1.observable)('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 });
+})();
+exports.recentlyUsedApps = (() => {
+    const obs = (0, peers_sdk_1.observable)([]);
+    // 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 });
+})();
 exports.initializedTabs = new Set();
 function goToTabPath(path) {
     const tab = (0, exports.activeTabs)().find(t => t.path === path);

package/dist/ui-router/ui-loader.js

@@ -225,26 +225,59 @@ const UILoader = (args) => {
     return react_1.default.createElement(UIAsyncLoader, { ...args });
 };
 const uiLoadingPromises = {};
+// Check if we're running in a React Native WebView (has injectUIBundle available)
+const isReactNativeWebView = typeof window.ReactNativeWebView !== 'undefined';
 function loadUIBundle(pkg, forceRefresh) {
     // Dynamically import the bundle
     let importPromise = uiLoadingPromises[pkg.packageId];
     if (!importPromise || forceRefresh) {
+        const sTime = Date.now();
         console.log(`loading ui bundle for ${pkg.name}`);
         importPromise = new Promise(async (resolve, reject) => {
             try {
-                let bundleCode = '';
-                if (pkg.uiBundleFileId) {
-                    bundleCode = await peers_sdk_1.rpcServerCalls.getFileContents(pkg.uiBundleFileId);
+                if (!pkg.uiBundleFileId) {
+                    resolve();
+                    return;
                 }
-                if (bundleCode) {
-                    const exportUIs = (peerUIs) => {
-                        // TODO maybe add packageId that this came from
-                        peerUIs?.uis?.forEach(ui => {
-                            peersUIs[ui.peersUIId] = ui;
-                        });
-                    };
-                    const bundleFunction = new Function('exportUIs', bundleCode);
-                    await bundleFunction(exportUIs);
+                // Use fast injection path for React Native WebView
+                if (isReactNativeWebView && peers_sdk_1.rpcServerCalls.injectUIBundle) {
+                    // Set up listeners for bundle load completion
+                    const _window = window;
+                    _window.__peersUIs = _window.__peersUIs || {};
+                    const loadPromise = new Promise((resolveLoad, rejectLoad) => {
+                        const fileId = pkg.uiBundleFileId;
+                        _window.__peersUIBundleLoaded = (loadedFileId) => {
+                            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, errorMsg) => {
+                            if (errorFileId === fileId) {
+                                rejectLoad(new Error(errorMsg));
+                            }
+                        };
+                    });
+                    await peers_sdk_1.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 peers_sdk_1.rpcServerCalls.getFileContents(pkg.uiBundleFileId);
+                    if (bundleCode) {
+                        const exportUIs = (peerUIs) => {
+                            peerUIs?.uis?.forEach(ui => {
+                                peersUIs[ui.peersUIId] = ui;
+                            });
+                        };
+                        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();
             }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@peers-app/peers-ui",
-  "version": "0.8.0",
+  "version": "0.8.1",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/peers-app/peers-ui.git"
@@ -27,7 +27,7 @@
   },
   "peerDependencies": {
     "bootstrap": "^5.3.3",
-    "@peers-app/peers-sdk": "^0.8.0",
+    "@peers-app/peers-sdk": "^0.8.1",
     "react": "^18.0.0",
     "react-dom": "^18.0.0"
   },
@@ -57,7 +57,7 @@
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^30.0.5",
     "path-browserify": "^1.0.1",
-    "@peers-app/peers-sdk": "0.8.0",
+    "@peers-app/peers-sdk": "0.8.1",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
     "string-width": "^7.1.0",

package/src/command-palette/command-palette.ts

@@ -1,4 +1,4 @@
-import { deviceVar } from "@peers-app/peers-sdk";
+import { observable } from "@peers-app/peers-sdk";
 import { goToTabPath } from '../tabs-layout/tabs-state';
 
 export interface Command {
@@ -12,14 +12,10 @@ export interface Command {
   isAvailable?: () => boolean;
 }
 
-// Command palette state (using device scope but with temporary defaults)
-export const isCommandPaletteOpen = deviceVar<boolean>('commandPaletteOpen', {
-  defaultValue: false,
-});
+// Command palette state (in-memory only, no persistence needed)
+export const isCommandPaletteOpen = observable<boolean>(false);
 
-export const commandSearchQuery = deviceVar<string>('commandSearchQuery', {
-  defaultValue: '',
-});
+export const commandSearchQuery = observable<string>('');
 
 // Command registry
 const registeredCommands = new Map<string, Command>();

package/src/components/group-switcher.tsx

@@ -4,9 +4,10 @@ import { usePromise } from '../hooks';
 
 interface GroupSwitcherProps {
   colorMode: string;
+  isMobile?: boolean;
 }
 
-export function GroupSwitcher({ colorMode }: GroupSwitcherProps) {
+export function GroupSwitcher({ colorMode, isMobile = false }: GroupSwitcherProps) {
   const [showDropdown, setShowDropdown] = useState(false);
   const [showCreateModal, setShowCreateModal] = useState(false);
   const [allGroups, setAllGroups] = useState<IGroup[]>([]);
@@ -62,16 +63,17 @@ export function GroupSwitcher({ colorMode }: GroupSwitcherProps) {
     <>
       <div className="dropdown">
         <button
-          className="btn btn-sm me-2 d-flex align-items-center"
+          className={`btn btn-sm ${isMobile ? '' : 'me-2'} d-flex align-items-center`}
           onClick={() => setShowDropdown(!showDropdown)}
           title={`Current group: ${getGroupName(currentGroup)}`}
           style={{
-            padding: '4px 8px',
+            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';
@@ -82,10 +84,12 @@ export function GroupSwitcher({ colorMode }: GroupSwitcherProps) {
             e.currentTarget.style.color = isDark ? '#adb5bd' : '#6c757d';
           }}
         >
-          <i className={`${getGroupIcon(currentGroup)} me-1`} style={{ fontSize: '14px' }} />
-          <span className="text-truncate" style={{ maxWidth: '80px' }}>
-            {getGroupName(currentGroup)}
-          </span>
+          <i className={`${getGroupIcon(currentGroup)} ${isMobile ? '' : 'me-1'}`} style={{ fontSize: '14px' }} />
+          {!isMobile && (
+            <span className="text-truncate" style={{ maxWidth: '80px' }}>
+              {getGroupName(currentGroup)}
+            </span>
+          )}
           <i className="bi-chevron-down ms-1" style={{ fontSize: '10px' }} />
         </button>
 

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

@@ -3,6 +3,25 @@ import { TrustLevel } from '@peers-app/peers-sdk';
 import { LoadingIndicator } from '../../components/loading-indicator';
 import { TrustLevelBadge } from '../../components/trust-level-badge';
 
+/** 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 IDeviceDetails {
   deviceId: string;
@@ -30,6 +49,11 @@ interface IDeviceDetails {
       isPreferred: boolean;
     };
   };
+  // Throughput stats
+  bytesSent?: number;
+  bytesReceived?: number;
+  sendRateMBps?: number;
+  receiveRateMBps?: number;
 }
 
 interface IDeviceDetailsModalProps {
@@ -190,6 +214,37 @@ export function DeviceDetailsModal({ deviceId, onClose, onDisconnect }: IDeviceD
                 </div>
               </div>
 
+              {/* Throughput Stats */}
+              <div className="mb-4">
+                <h6 className="border-bottom pb-2 mb-3">Throughput</h6>
+                <div className="row">
+                  <div className="col-md-6 mb-3">
+                    <strong>Send Rate:</strong>
+                    <br />
+                    <span className="text-success">
+                      ↑ {formatRate(device.sendRateMBps)}
+                    </span>
+                  </div>
+                  <div className="col-md-6 mb-3">
+                    <strong>Receive Rate:</strong>
+                    <br />
+                    <span className="text-primary">
+                      ↓ {formatRate(device.receiveRateMBps)}
+                    </span>
+                  </div>
+                  <div className="col-md-6 mb-3">
+                    <strong>Total Sent:</strong>
+                    <br />
+                    <span>{formatBytes(device.bytesSent || 0)}</span>
+                  </div>
+                  <div className="col-md-6 mb-3">
+                    <strong>Total Received:</strong>
+                    <br />
+                    <span>{formatBytes(device.bytesReceived || 0)}</span>
+                  </div>
+                </div>
+              </div>
+
               {/* Shared Groups */}
               {device.sharedGroups.length > 0 && (
                 <div className="mb-4">

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>