@peers-app/peers-ui 0.14.0 → 0.15.0

package/dist/screens/settings/color-mode-dropdown.js

@@ -1,69 +1,50 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ColorModeDropdown = exports.colorModePreference = exports.colorMode = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
 const peers_sdk_1 = require("@peers-app/peers-sdk");
-const react_1 = __importDefault(require("react"));
 const hooks_1 = require("../../hooks");
-exports.colorMode = (0, peers_sdk_1.deviceVar)('colorMode', {
-    defaultValue: 'dark',
+exports.colorMode = (0, peers_sdk_1.deviceVar)("colorMode", {
+    defaultValue: "dark",
 });
-exports.colorModePreference = (0, peers_sdk_1.deviceVar)('colorModePreference', {
-    defaultValue: 'dark',
+exports.colorModePreference = (0, peers_sdk_1.deviceVar)("colorModePreference", {
+    defaultValue: "dark",
 });
 function applyColorMode(modePreference) {
     if (!modePreference) {
-        modePreference = (0, exports.colorModePreference)() || 'dark';
+        modePreference = (0, exports.colorModePreference)() || "dark";
     }
     else {
         (0, exports.colorModePreference)(modePreference);
     }
     let mode = (0, exports.colorMode)();
-    if (modePreference === 'auto') {
-        const isDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
-        mode = isDarkMode ? 'dark' : 'light';
+    if (modePreference === "auto") {
+        const isDarkMode = window.matchMedia?.("(prefers-color-scheme: dark)").matches;
+        mode = isDarkMode ? "dark" : "light";
     }
     else {
         mode = modePreference;
     }
-    document.documentElement.setAttribute('data-bs-theme', mode);
-    if (mode === 'light') {
-        document.documentElement.style.backgroundColor = '';
-        document.body.style.backgroundColor = 'initial';
+    document.documentElement.setAttribute("data-bs-theme", mode);
+    if (mode === "light") {
+        document.documentElement.style.backgroundColor = "";
+        document.body.style.backgroundColor = "initial";
     }
     else {
-        document.documentElement.style.backgroundColor = 'rgb(33, 37, 41)';
-        document.body.style.backgroundColor = 'rgb(33, 37, 41)';
+        document.documentElement.style.backgroundColor = "rgb(33, 37, 41)";
+        document.body.style.backgroundColor = "rgb(33, 37, 41)";
     }
     const themeMeta = document.querySelector('meta[name="theme-color"]');
     if (themeMeta) {
-        themeMeta.setAttribute('content', mode === 'light' ? '#ffffff' : '#212529');
+        themeMeta.setAttribute("content", mode === "light" ? "#ffffff" : "#212529");
     }
     (0, exports.colorMode)(mode);
     exports.colorMode.notifySubscribers();
     return mode;
 }
-exports.colorModePreference.subscribe(newValue => applyColorMode(newValue));
+exports.colorModePreference.subscribe((newValue) => applyColorMode(newValue));
 const ColorModeDropdown = () => {
     const [modePreference] = (0, hooks_1.useObservable)(exports.colorModePreference);
-    return (react_1.default.createElement("div", { className: "dropdown" },
-        react_1.default.createElement("button", { className: "btn btn-secondary dropdown-toggle", type: "button", id: "colorModeDropdown", "data-bs-toggle": "dropdown", "aria-expanded": "false" },
-            "Color Mode: ",
-            (0, peers_sdk_1.camelCaseToSpaces)(modePreference)),
-        react_1.default.createElement("ul", { className: "dropdown-menu", "aria-labelledby": "colorModeDropdown" },
-            react_1.default.createElement("li", null,
-                react_1.default.createElement("button", { className: "dropdown-item", onClick: () => (0, exports.colorModePreference)('auto') },
-                    "Auto ",
-                    modePreference === 'auto' && '✓')),
-            react_1.default.createElement("li", null,
-                react_1.default.createElement("button", { className: "dropdown-item", onClick: () => (0, exports.colorModePreference)('light') },
-                    "Light ",
-                    modePreference === 'light' && '✓')),
-            react_1.default.createElement("li", null,
-                react_1.default.createElement("button", { className: "dropdown-item", onClick: () => (0, exports.colorModePreference)('dark') },
-                    "Dark ",
-                    modePreference === 'dark' && '✓')))));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "dropdown", children: [(0, jsx_runtime_1.jsxs)("button", { className: "btn btn-secondary dropdown-toggle", type: "button", id: "colorModeDropdown", "data-bs-toggle": "dropdown", "aria-expanded": "false", children: ["Color Mode: ", (0, peers_sdk_1.camelCaseToSpaces)(modePreference)] }), (0, jsx_runtime_1.jsxs)("ul", { className: "dropdown-menu", "aria-labelledby": "colorModeDropdown", children: [(0, jsx_runtime_1.jsx)("li", { children: (0, jsx_runtime_1.jsxs)("button", { className: "dropdown-item", onClick: () => (0, exports.colorModePreference)("auto"), children: ["Auto ", modePreference === "auto" && "✓"] }) }), (0, jsx_runtime_1.jsx)("li", { children: (0, jsx_runtime_1.jsxs)("button", { className: "dropdown-item", onClick: () => (0, exports.colorModePreference)("light"), children: ["Light ", modePreference === "light" && "✓"] }) }), (0, jsx_runtime_1.jsx)("li", { children: (0, jsx_runtime_1.jsxs)("button", { className: "dropdown-item", onClick: () => (0, exports.colorModePreference)("dark"), children: ["Dark ", modePreference === "dark" && "✓"] }) })] })] }));
 };
 exports.ColorModeDropdown = ColorModeDropdown;

package/dist/screens/settings/settings-page.d.ts

@@ -1,2 +1,2 @@
-import React from 'react';
+import type React from "react";
 export declare const SettingsPage: React.FC;

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

@@ -34,62 +34,51 @@ var __importStar = (this && this.__importStar) || (function () {
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SettingsPage = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
 const peers_sdk_1 = require("@peers-app/peers-sdk");
-const react_1 = __importStar(require("react"));
+const react_1 = require("react");
 const input_1 = require("../../components/input");
-const tooltip_1 = require("../../components/tooltip");
 const tabs_1 = require("../../components/tabs");
+const tooltip_1 = require("../../components/tooltip");
 const globals = __importStar(require("../../globals"));
 const hooks_1 = require("../../hooks");
 const color_mode_dropdown_1 = require("./color-mode-dropdown");
 const voice_settings_1 = require("./voice-settings");
 const SettingsPage = () => {
-    return (react_1.default.createElement("div", { className: 'container-fluid' },
-        react_1.default.createElement(tabs_1.Tabs, { tabs: [
+    return ((0, jsx_runtime_1.jsx)("div", { className: "container-fluid", children: (0, jsx_runtime_1.jsx)(tabs_1.Tabs, { tabs: [
                 {
-                    name: 'User',
-                    content: react_1.default.createElement(UserSettingsTab, null),
+                    name: "User",
+                    content: (0, jsx_runtime_1.jsx)(UserSettingsTab, {}),
                     active: true,
                 },
                 {
-                    name: 'Appearance',
-                    content: react_1.default.createElement(AppearanceSettingsTab, null),
+                    name: "Appearance",
+                    content: (0, jsx_runtime_1.jsx)(AppearanceSettingsTab, {}),
                 },
                 {
-                    name: 'Voice',
-                    content: react_1.default.createElement(voice_settings_1.VoiceSettings, null),
+                    name: "Voice",
+                    content: (0, jsx_runtime_1.jsx)(voice_settings_1.VoiceSettings, {}),
                 },
                 {
-                    name: 'Advanced',
-                    content: react_1.default.createElement(AdvancedSettingsTab, null),
+                    name: "Advanced",
+                    content: (0, jsx_runtime_1.jsx)(AdvancedSettingsTab, {}),
                 },
-            ] })));
+            ] }) }));
 };
 exports.SettingsPage = SettingsPage;
 const UserSettingsTab = () => {
-    return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(ProfileSection, null),
-        react_1.default.createElement(LogoutSection, null)));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ProfileSection, {}), (0, jsx_runtime_1.jsx)(LogoutSection, {})] }));
 };
 const AppearanceSettingsTab = () => {
-    return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement("h5", { className: "mb-3" }, "Appearance"),
-        react_1.default.createElement(color_mode_dropdown_1.ColorModeDropdown, null)));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("h5", { className: "mb-3", children: "Appearance" }), (0, jsx_runtime_1.jsx)(color_mode_dropdown_1.ColorModeDropdown, {})] }));
 };
 const AdvancedSettingsTab = () => {
-    return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement("h5", { className: "mb-3" }, "Advanced Settings"),
-        react_1.default.createElement(PackagesRootDirectory, null),
-        react_1.default.createElement(ReloadPackagesOnPageRefresh, null),
-        react_1.default.createElement(AutoUpdatePeersCore, null),
-        react_1.default.createElement(ResetDeviceSyncInfos, null),
-        react_1.default.createElement(DeleteLocalDatabase, null),
-        react_1.default.createElement(ImportOldPeersData, null)));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("h5", { className: "mb-3", children: "Advanced Settings" }), (0, jsx_runtime_1.jsx)(PackagesRootDirectory, {}), (0, jsx_runtime_1.jsx)(ReloadPackagesOnPageRefresh, {}), (0, jsx_runtime_1.jsx)(AutoUpdatePeersCore, {}), (0, jsx_runtime_1.jsx)(ResetDeviceSyncInfos, {}), (0, jsx_runtime_1.jsx)(DeleteLocalDatabase, {}), (0, jsx_runtime_1.jsx)(ImportOldPeersData, {}), (0, jsx_runtime_1.jsx)(ResetChangeTracking, {})] }));
 };
 const ProfileSection = () => {
     const [deviceId] = (0, hooks_1.useObservable)(peers_sdk_1.thisDeviceId);
-    const deviceName = (0, hooks_1.useObservableState)('');
-    const savedDeviceName = (0, hooks_1.useObservableState)('');
+    const deviceName = (0, hooks_1.useObservableState)("");
+    const savedDeviceName = (0, hooks_1.useObservableState)("");
     const me = (0, hooks_1.usePromise)(async () => {
         const userContext = await (0, peers_sdk_1.getUserContext)();
         return (0, peers_sdk_1.Users)(userContext.userDataContext).initDoc(globals.me);
@@ -102,15 +91,15 @@ const ProfileSection = () => {
             try {
                 const userContext = await (0, peers_sdk_1.getUserContext)();
                 const device = await (0, peers_sdk_1.Devices)(userContext.userDataContext).get(deviceId);
-                deviceName(device?.name || '');
-                savedDeviceName(device?.name || '');
+                deviceName(device?.name || "");
+                savedDeviceName(device?.name || "");
             }
             catch (err) {
-                console.error('Error loading device name:', err);
+                console.error("Error loading device name:", err);
             }
         };
         loadDevice();
-    }, [deviceId]);
+    }, [deviceId, deviceName, savedDeviceName]);
     const handleSave = async () => {
         try {
             // Save user profile
@@ -123,7 +112,7 @@ const ProfileSection = () => {
             if (deviceId && deviceName() !== savedDeviceName()) {
                 const userContext = await (0, peers_sdk_1.getUserContext)();
                 const devicesTable = (0, peers_sdk_1.Devices)(userContext.userDataContext);
-                const device = await devicesTable.get(deviceId) || {
+                const device = (await devicesTable.get(deviceId)) || {
                     deviceId,
                     userId: userContext.userId,
                     firstSeen: new Date(),
@@ -136,8 +125,8 @@ const ProfileSection = () => {
             }
         }
         catch (err) {
-            console.error('Error saving profile:', err);
-            alert('Failed to save: ' + err.message);
+            console.error("Error saving profile:", err);
+            alert(`Failed to save: ${err.message}`);
         }
     };
     // Subscribe to changes
@@ -147,104 +136,81 @@ const ProfileSection = () => {
         return null;
     }
     const hasChanges = !!me.q() || deviceName() !== savedDeviceName();
-    return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement("div", { className: "d-flex align-items-center mb-3" },
-            react_1.default.createElement("h5", { className: "mb-0 me-auto" }, "Settings"),
-            react_1.default.createElement("button", { className: "btn btn-primary btn-sm", onClick: handleSave, disabled: !hasChanges }, "Save")),
-        react_1.default.createElement("div", { className: "mb-3" },
-            react_1.default.createElement("small", { className: "form-label" }, "Display Name:"),
-            react_1.default.createElement(input_1.Input, { value: me.qs.name, className: "form-control", placeholder: "Enter your name" })),
-        react_1.default.createElement("div", { className: "mb-3" },
-            react_1.default.createElement("small", { className: "form-label" },
-                "Device Name:",
-                react_1.default.createElement(tooltip_1.Tooltip, { markdownContent: "Give this device a friendly name to identify it in your network." })),
-            react_1.default.createElement(input_1.Input, { value: deviceName, className: "form-control", placeholder: "e.g., My Laptop" })),
-        react_1.default.createElement("div", { className: "mb-3" },
-            react_1.default.createElement("small", { className: "form-label" },
-                "User ID:",
-                react_1.default.createElement(tooltip_1.Tooltip, { markdownContent: "This uniquely identifies you to all other users." })),
-            react_1.default.createElement(input_1.Input, { value: me.userId, className: "form-control", disabled: true })),
-        react_1.default.createElement("div", { className: "row" },
-            react_1.default.createElement("div", { className: "col-md-6 mb-3" },
-                react_1.default.createElement("small", { className: "form-label" },
-                    "Public Key:",
-                    react_1.default.createElement(tooltip_1.Tooltip, { markdownContent: "This is your public key that other users will use to verify your signatures." })),
-                react_1.default.createElement(input_1.Input, { value: me.publicKey, className: "form-control form-control-sm", disabled: true })),
-            react_1.default.createElement("div", { className: "col-md-6 mb-3" },
-                react_1.default.createElement("small", { className: "form-label" },
-                    "Public Box Key:",
-                    react_1.default.createElement(tooltip_1.Tooltip, { markdownContent: "This is the public key that other users can use to encrypt data so that only you can open it." })),
-                react_1.default.createElement(input_1.Input, { value: me.publicBoxKey, className: "form-control form-control-sm", disabled: true }))),
-        react_1.default.createElement("div", { className: "mb-3" },
-            react_1.default.createElement("small", { className: "form-label" },
-                "Device ID:",
-                react_1.default.createElement(tooltip_1.Tooltip, { markdownContent: "This uniquely identifies this device on Peers networks." })),
-            react_1.default.createElement(input_1.Input, { value: deviceId || '', className: "form-control form-control-sm", disabled: true }))));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: "d-flex align-items-center mb-3", children: [(0, jsx_runtime_1.jsx)("h5", { className: "mb-0 me-auto", children: "Settings" }), (0, jsx_runtime_1.jsx)("button", { className: "btn btn-primary btn-sm", onClick: handleSave, disabled: !hasChanges, children: "Save" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "mb-3", children: [(0, jsx_runtime_1.jsx)("small", { className: "form-label", children: "Display Name:" }), (0, jsx_runtime_1.jsx)(input_1.Input, { value: me.qs.name, className: "form-control", placeholder: "Enter your name" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "mb-3", children: [(0, jsx_runtime_1.jsxs)("small", { className: "form-label", children: ["Device Name:", (0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { markdownContent: "Give this device a friendly name to identify it in your network." })] }), (0, jsx_runtime_1.jsx)(input_1.Input, { value: deviceName, className: "form-control", placeholder: "e.g., My Laptop" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "mb-3", children: [(0, jsx_runtime_1.jsxs)("small", { className: "form-label", children: ["User ID:", (0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { markdownContent: "This uniquely identifies you to all other users." })] }), (0, jsx_runtime_1.jsx)(input_1.Input, { value: me.userId, className: "form-control", disabled: true })] }), (0, jsx_runtime_1.jsxs)("div", { className: "row", children: [(0, jsx_runtime_1.jsxs)("div", { className: "col-md-6 mb-3", children: [(0, jsx_runtime_1.jsxs)("small", { className: "form-label", children: ["Public Key:", (0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { markdownContent: "This is your public key that other users will use to verify your signatures." })] }), (0, jsx_runtime_1.jsx)(input_1.Input, { value: me.publicKey, className: "form-control form-control-sm", disabled: true })] }), (0, jsx_runtime_1.jsxs)("div", { className: "col-md-6 mb-3", children: [(0, jsx_runtime_1.jsxs)("small", { className: "form-label", children: ["Public Box Key:", (0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { markdownContent: "This is the public key that other users can use to encrypt data so that only you can open it." })] }), (0, jsx_runtime_1.jsx)(input_1.Input, { value: me.publicBoxKey, className: "form-control form-control-sm", disabled: true })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "mb-3", children: [(0, jsx_runtime_1.jsxs)("small", { className: "form-label", children: ["Device ID:", (0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { markdownContent: "This uniquely identifies this device on Peers networks." })] }), (0, jsx_runtime_1.jsx)(input_1.Input, { value: deviceId || "", className: "form-control form-control-sm", disabled: true })] })] }));
 };
 const PackagesRootDirectory = () => {
-    return (react_1.default.createElement("div", { className: 'mt-3' },
-        react_1.default.createElement("small", null,
-            "Packages Directory:",
-            react_1.default.createElement(tooltip_1.Tooltip, { markdownContent: `Changing this will not effect existing packages.` })),
-        react_1.default.createElement(input_1.Input, { value: peers_sdk_1.packagesRootDir, className: 'form-control' })));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "mt-3", children: [(0, jsx_runtime_1.jsxs)("small", { children: ["Packages Directory:", (0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { markdownContent: `Changing this will not effect existing packages.` })] }), (0, jsx_runtime_1.jsx)(input_1.Input, { value: peers_sdk_1.packagesRootDir, className: "form-control" })] }));
 };
 const ReloadPackagesOnPageRefresh = () => {
     (0, hooks_1.useObservable)(peers_sdk_1.reloadPackagesOnPageRefresh);
-    return (react_1.default.createElement("div", null,
-        react_1.default.createElement("label", { htmlFor: "isPrimary", className: "form-label small mt-2 me-2" }, "Reload Packages on Page Load:"),
-        react_1.default.createElement("input", { type: "checkbox", checked: (0, peers_sdk_1.reloadPackagesOnPageRefresh)(), onChange: (e) => {
-                const checked = e.target.checked;
-                (0, peers_sdk_1.reloadPackagesOnPageRefresh)(checked);
-            } }),
-        react_1.default.createElement(tooltip_1.Tooltip, { markdownContent: `Checking this will reload all packages very time the page is loaded.  Particularly useful while developing packages.` })));
+    return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("label", { htmlFor: "isPrimary", className: "form-label small mt-2 me-2", children: "Reload Packages on Page Load:" }), (0, jsx_runtime_1.jsx)("input", { type: "checkbox", checked: (0, peers_sdk_1.reloadPackagesOnPageRefresh)(), onChange: (e) => {
+                    const checked = e.target.checked;
+                    (0, peers_sdk_1.reloadPackagesOnPageRefresh)(checked);
+                } }), (0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { markdownContent: `Checking this will reload all packages very time the page is loaded.  Particularly useful while developing packages.` })] }));
 };
 const AutoUpdatePeersCore = () => {
     (0, hooks_1.useObservable)(peers_sdk_1.autoUpdatePeersCore);
-    return (react_1.default.createElement("div", null,
-        react_1.default.createElement("label", { htmlFor: "autoUpdatePeersCore", className: "form-label small mt-2 me-2" }, "Auto-update peers-core on startup:"),
-        react_1.default.createElement("input", { type: "checkbox", checked: (0, peers_sdk_1.autoUpdatePeersCore)(), onChange: (e) => {
-                const checked = e.target.checked;
-                (0, peers_sdk_1.autoUpdatePeersCore)(checked);
-            } }),
-        react_1.default.createElement(tooltip_1.Tooltip, { markdownContent: `When enabled, the peers-core system package is automatically updated from the bundled version on every app startup. Disable this if you want to manage peers-core manually.` })));
+    return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("label", { htmlFor: "autoUpdatePeersCore", className: "form-label small mt-2 me-2", children: "Auto-update peers-core on startup:" }), (0, jsx_runtime_1.jsx)("input", { type: "checkbox", checked: (0, peers_sdk_1.autoUpdatePeersCore)(), onChange: (e) => {
+                    const checked = e.target.checked;
+                    (0, peers_sdk_1.autoUpdatePeersCore)(checked);
+                } }), (0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { markdownContent: `When enabled, the peers-core system package is automatically updated from the bundled version on every app startup. Disable this if you want to manage peers-core manually.` })] }));
 };
 const ResetDeviceSyncInfos = () => {
-    return (react_1.default.createElement("div", { className: 'mt-3' },
-        react_1.default.createElement("button", { className: 'btn btn-secondary btn-sm ms-2', onClick: async () => {
+    return ((0, jsx_runtime_1.jsx)("div", { className: "mt-3", children: (0, jsx_runtime_1.jsx)("button", { className: "btn btn-secondary btn-sm ms-2", onClick: async () => {
                 try {
                     await peers_sdk_1.rpcServerCalls.resetAllDeviceSyncInfo();
-                    alert('All device sync info has been reset.  Syncing in progress...');
+                    alert("All device sync info has been reset.  Syncing in progress...");
                 }
                 catch (err) {
-                    console.error('Error while resetting all device sync info', err);
+                    console.error("Error while resetting all device sync info", err);
                 }
-            } }, "Reset All Device Sync Info")));
+            }, children: "Reset All Device Sync Info" }) }));
 };
 const DeleteLocalDatabase = () => {
-    return (react_1.default.createElement("div", { className: 'mt-3' },
-        react_1.default.createElement("button", { className: 'btn btn-danger btn-sm ms-2', onClick: async () => {
-                const confirmed = confirm('Are you sure you want to delete the local database for the current group? ' +
-                    'This will remove all local data. You will need to restart the app and re-sync from other devices.');
+    return ((0, jsx_runtime_1.jsx)("div", { className: "mt-3", children: (0, jsx_runtime_1.jsx)("button", { className: "btn btn-danger btn-sm ms-2", onClick: async () => {
+                const confirmed = confirm("Are you sure you want to delete the local database for the current group? " +
+                    "This will remove all local data. You will need to restart the app and re-sync from other devices.");
                 if (!confirmed)
                     return;
                 try {
                     await peers_sdk_1.rpcServerCalls.deleteLocalDatabase();
-                    alert('Local database has been deleted. Please restart the app.');
+                    alert("Local database has been deleted. Please restart the app.");
                 }
                 catch (err) {
-                    console.error('Error while deleting local database', err);
-                    alert('Failed to delete local database: ' + err.message);
+                    console.error("Error while deleting local database", err);
+                    alert(`Failed to delete local database: ${err.message}`);
                 }
-            } }, "Delete Local Database")));
+            }, children: "Delete Local Database" }) }));
+};
+const ResetChangeTracking = () => {
+    const [busy, setBusy] = (0, react_1.useState)(false);
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "mt-4 pt-3 border-top", children: [(0, jsx_runtime_1.jsx)("h6", { className: "mb-2", children: "Change tracking" }), (0, jsx_runtime_1.jsx)("small", { className: "text-muted d-block mb-2", children: "Clears all change history for the current group and rebuilds it from your current database rows. Device sync cursors are cleared; a full resync with peers may follow. Use when debugging sync issues." }), (0, jsx_runtime_1.jsx)("button", { className: "btn btn-warning btn-sm", disabled: busy, onClick: async () => {
+                    const confirmed = window.confirm("Reset Change Tracking will clear all change history and rebuild it from scratch. This may take a while. Continue?");
+                    if (!confirmed)
+                        return;
+                    setBusy(true);
+                    try {
+                        await peers_sdk_1.rpcServerCalls.resetChangeTracking();
+                        await peers_sdk_1.rpcServerCalls.flushDatabases();
+                        alert("Change tracking reset successfully.");
+                    }
+                    catch (err) {
+                        console.error("Error while resetting change tracking", err);
+                        alert(`Failed to reset change tracking: ${err.message || String(err)}`);
+                    }
+                    finally {
+                        setBusy(false);
+                    }
+                }, children: busy ? "Resetting…" : "Reset Change Tracking" })] }));
 };
-const IMPORT_TOOL_ID = '00mh0wlipkdbeaw8imptsk001';
+const IMPORT_TOOL_ID = "00mh0wlipkdbeaw8imptsk001";
 const ImportOldPeersData = () => {
     const fileInputRef = (0, react_1.useRef)(null);
-    const [filePath, setFilePath] = (0, react_1.useState)('');
-    const [fileName, setFileName] = (0, react_1.useState)('');
+    const [filePath, setFilePath] = (0, react_1.useState)("");
+    const [_fileName, setFileName] = (0, react_1.useState)("");
     const [loading, setLoading] = (0, react_1.useState)(false);
     const [result, setResult] = (0, react_1.useState)(null);
-    const [error, setError] = (0, react_1.useState)('');
+    const [error, setError] = (0, react_1.useState)("");
     const handleFileSelect = (e) => {
         const file = e.target.files?.[0];
         if (!file)
@@ -257,17 +223,17 @@ const ImportOldPeersData = () => {
         }
         else {
             setFileName(file.name);
-            setFilePath('');
-            setError('File path not available. This feature requires the Electron desktop app.');
+            setFilePath("");
+            setError("File path not available. This feature requires the Electron desktop app.");
         }
         setResult(null);
-        setError('');
+        setError("");
     };
     const handleDryRun = async () => {
         if (!filePath)
             return;
         setLoading(true);
-        setError('');
+        setError("");
         setResult(null);
         try {
             const response = await peers_sdk_1.rpcServerCalls.runTool(IMPORT_TOOL_ID, {
@@ -278,127 +244,34 @@ const ImportOldPeersData = () => {
                 setResult(response.result);
             }
             else {
-                setError('Unexpected response from import tool');
+                setError("Unexpected response from import tool");
             }
         }
         catch (err) {
-            setError(err.message || 'Failed to run dry run');
+            setError(err.message || "Failed to run dry run");
         }
         finally {
             setLoading(false);
         }
     };
-    return (react_1.default.createElement("div", { className: "mt-4 pt-3 border-top" },
-        react_1.default.createElement("h6", { className: "mb-2" }, "Import Old Peers Data"),
-        react_1.default.createElement("small", { className: "text-muted d-block mb-2" }, "Import tasks and log entries from an old peers JSON export file."),
-        react_1.default.createElement("div", { className: "d-flex align-items-center gap-2 mb-2" },
-            react_1.default.createElement("input", { ref: fileInputRef, type: "file", accept: ".json", className: "form-control form-control-sm", style: { maxWidth: 350 }, onChange: handleFileSelect }),
-            react_1.default.createElement("button", { className: "btn btn-outline-primary btn-sm", onClick: handleDryRun, disabled: !filePath || loading }, loading ? 'Analyzing...' : 'Dry Run')),
-        error && (react_1.default.createElement("div", { className: "alert alert-danger py-1 px-2 small mt-2" }, error)),
-        result && react_1.default.createElement(DryRunResults, { result: result })));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "mt-4 pt-3 border-top", children: [(0, jsx_runtime_1.jsx)("h6", { className: "mb-2", children: "Import Old Peers Data" }), (0, jsx_runtime_1.jsx)("small", { className: "text-muted d-block mb-2", children: "Import tasks and log entries from an old peers JSON export file." }), (0, jsx_runtime_1.jsxs)("div", { className: "d-flex align-items-center gap-2 mb-2", children: [(0, jsx_runtime_1.jsx)("input", { ref: fileInputRef, type: "file", accept: ".json", className: "form-control form-control-sm", style: { maxWidth: 350 }, onChange: handleFileSelect }), (0, jsx_runtime_1.jsx)("button", { className: "btn btn-outline-primary btn-sm", onClick: handleDryRun, disabled: !filePath || loading, children: loading ? "Analyzing..." : "Dry Run" })] }), error && (0, jsx_runtime_1.jsx)("div", { className: "alert alert-danger py-1 px-2 small mt-2", children: error }), result && (0, jsx_runtime_1.jsx)(DryRunResults, { result: result })] }));
 };
 const DryRunResults = ({ result }) => {
     const sm = result.statusMapping;
     const um = result.userMapping;
-    return (react_1.default.createElement("div", { className: "mt-2" },
-        react_1.default.createElement("div", { className: "alert alert-info py-2 px-3 small" },
-            react_1.default.createElement("strong", null, "Summary:"),
-            " ",
-            result.totalTasks.toLocaleString(),
-            " tasks and ",
-            result.totalLogEntries.toLocaleString(),
-            " log entries across ",
-            result.groups.length,
-            " groups (",
-            result.totalRecords.toLocaleString(),
-            " total records in file)"),
-        result.warnings.length > 0 && (react_1.default.createElement("div", { className: "alert alert-warning py-2 px-3 small" },
-            react_1.default.createElement("strong", null, "Warnings:"),
-            react_1.default.createElement("ul", { className: "mb-0 ps-3" }, result.warnings.map((w, i) => react_1.default.createElement("li", { key: i }, w))))),
-        react_1.default.createElement("details", { className: "mb-2" },
-            react_1.default.createElement("summary", { className: "small fw-bold", style: { cursor: 'pointer' } }, "Status Mapping"),
-            react_1.default.createElement("table", { className: "table table-sm small mt-1" },
-                react_1.default.createElement("thead", null,
-                    react_1.default.createElement("tr", null,
-                        react_1.default.createElement("th", null, "Mapping"),
-                        react_1.default.createElement("th", { className: "text-end" }, "Count"))),
-                react_1.default.createElement("tbody", null,
-                    react_1.default.createElement("tr", null,
-                        react_1.default.createElement("td", null, "In-Progress \u2192 Done"),
-                        react_1.default.createElement("td", { className: "text-end" }, sm.inProgressToDone.toLocaleString())),
-                    react_1.default.createElement("tr", null,
-                        react_1.default.createElement("td", null, "In-Progress \u2192 In-Progress"),
-                        react_1.default.createElement("td", { className: "text-end" }, sm.inProgressKeep.toLocaleString())),
-                    react_1.default.createElement("tr", null,
-                        react_1.default.createElement("td", null, "Queued \u2192 Done"),
-                        react_1.default.createElement("td", { className: "text-end" }, sm.queuedToDone.toLocaleString())),
-                    react_1.default.createElement("tr", null,
-                        react_1.default.createElement("td", null, "Queued \u2192 Queued"),
-                        react_1.default.createElement("td", { className: "text-end" }, sm.queuedKeep.toLocaleString())),
-                    react_1.default.createElement("tr", null,
-                        react_1.default.createElement("td", null, "Backlog \u2192 Done"),
-                        react_1.default.createElement("td", { className: "text-end" }, sm.backlogToDone.toLocaleString())),
-                    react_1.default.createElement("tr", null,
-                        react_1.default.createElement("td", null, "Backlog \u2192 Backlog"),
-                        react_1.default.createElement("td", { className: "text-end" }, sm.backlogKeep.toLocaleString())),
-                    react_1.default.createElement("tr", null,
-                        react_1.default.createElement("td", null, "No status \u2192 Done"),
-                        react_1.default.createElement("td", { className: "text-end" }, sm.noStatusToDone.toLocaleString())),
-                    react_1.default.createElement("tr", null,
-                        react_1.default.createElement("td", null, "No status \u2192 Backlog"),
-                        react_1.default.createElement("td", { className: "text-end" }, sm.noStatusToBacklog.toLocaleString()))))),
-        react_1.default.createElement("details", { className: "mb-2" },
-            react_1.default.createElement("summary", { className: "small fw-bold", style: { cursor: 'pointer' } }, "User Mapping"),
-            react_1.default.createElement("table", { className: "table table-sm small mt-1" },
-                react_1.default.createElement("thead", null,
-                    react_1.default.createElement("tr", null,
-                        react_1.default.createElement("th", null, "User"),
-                        react_1.default.createElement("th", { className: "text-end" }, "Tasks"))),
-                react_1.default.createElement("tbody", null,
-                    react_1.default.createElement("tr", null,
-                        react_1.default.createElement("td", null, "Mark"),
-                        react_1.default.createElement("td", { className: "text-end" }, um.mark.toLocaleString())),
-                    react_1.default.createElement("tr", null,
-                        react_1.default.createElement("td", null, "Blair"),
-                        react_1.default.createElement("td", { className: "text-end" }, um.blair.toLocaleString())),
-                    react_1.default.createElement("tr", null,
-                        react_1.default.createElement("td", null, "Other \u2192 Mark"),
-                        react_1.default.createElement("td", { className: "text-end" }, um.other.toLocaleString()))))),
-        react_1.default.createElement("details", { open: true, className: "mb-2" },
-            react_1.default.createElement("summary", { className: "small fw-bold", style: { cursor: 'pointer' } },
-                "Groups (",
-                result.groups.length,
-                ")"),
-            react_1.default.createElement("table", { className: "table table-sm small mt-1" },
-                react_1.default.createElement("thead", null,
-                    react_1.default.createElement("tr", null,
-                        react_1.default.createElement("th", null, "Group"),
-                        react_1.default.createElement("th", null, "Route"),
-                        react_1.default.createElement("th", { className: "text-end" }, "Tasks"),
-                        react_1.default.createElement("th", { className: "text-end" }, "Active"),
-                        react_1.default.createElement("th", { className: "text-end" }, "Done"),
-                        react_1.default.createElement("th", { className: "text-end" }, "Logs"))),
-                react_1.default.createElement("tbody", null, result.groups.map(g => (react_1.default.createElement("tr", { key: g.groupId },
-                    react_1.default.createElement("td", null, g.groupName),
-                    react_1.default.createElement("td", null,
-                        react_1.default.createElement("span", { className: `badge bg-${g.context === 'home' ? 'success' : 'secondary'}` }, g.context)),
-                    react_1.default.createElement("td", { className: "text-end" }, g.taskCount.toLocaleString()),
-                    react_1.default.createElement("td", { className: "text-end" }, g.activeCount.toLocaleString()),
-                    react_1.default.createElement("td", { className: "text-end" }, g.doneCount.toLocaleString()),
-                    react_1.default.createElement("td", { className: "text-end" }, g.logEntryCount.toLocaleString())))))))));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "mt-2", children: [(0, jsx_runtime_1.jsxs)("div", { className: "alert alert-info py-2 px-3 small", children: [(0, jsx_runtime_1.jsx)("strong", { children: "Summary:" }), " ", result.totalTasks.toLocaleString(), " tasks and", " ", result.totalLogEntries.toLocaleString(), " log entries across ", result.groups.length, " groups (", result.totalRecords.toLocaleString(), " total records in file)"] }), result.warnings.length > 0 && ((0, jsx_runtime_1.jsxs)("div", { className: "alert alert-warning py-2 px-3 small", children: [(0, jsx_runtime_1.jsx)("strong", { children: "Warnings:" }), (0, jsx_runtime_1.jsx)("ul", { className: "mb-0 ps-3", children: result.warnings.map((w, i) => ((0, jsx_runtime_1.jsx)("li", { children: w }, i))) })] })), (0, jsx_runtime_1.jsxs)("details", { className: "mb-2", children: [(0, jsx_runtime_1.jsx)("summary", { className: "small fw-bold", style: { cursor: "pointer" }, children: "Status Mapping" }), (0, jsx_runtime_1.jsxs)("table", { className: "table table-sm small mt-1", children: [(0, jsx_runtime_1.jsx)("thead", { children: (0, jsx_runtime_1.jsxs)("tr", { children: [(0, jsx_runtime_1.jsx)("th", { children: "Mapping" }), (0, jsx_runtime_1.jsx)("th", { className: "text-end", children: "Count" })] }) }), (0, jsx_runtime_1.jsxs)("tbody", { children: [(0, jsx_runtime_1.jsxs)("tr", { children: [(0, jsx_runtime_1.jsx)("td", { children: "In-Progress \u2192 Done" }), (0, jsx_runtime_1.jsx)("td", { className: "text-end", children: sm.inProgressToDone.toLocaleString() })] }), (0, jsx_runtime_1.jsxs)("tr", { children: [(0, jsx_runtime_1.jsx)("td", { children: "In-Progress \u2192 In-Progress" }), (0, jsx_runtime_1.jsx)("td", { className: "text-end", children: sm.inProgressKeep.toLocaleString() })] }), (0, jsx_runtime_1.jsxs)("tr", { children: [(0, jsx_runtime_1.jsx)("td", { children: "Queued \u2192 Done" }), (0, jsx_runtime_1.jsx)("td", { className: "text-end", children: sm.queuedToDone.toLocaleString() })] }), (0, jsx_runtime_1.jsxs)("tr", { children: [(0, jsx_runtime_1.jsx)("td", { children: "Queued \u2192 Queued" }), (0, jsx_runtime_1.jsx)("td", { className: "text-end", children: sm.queuedKeep.toLocaleString() })] }), (0, jsx_runtime_1.jsxs)("tr", { children: [(0, jsx_runtime_1.jsx)("td", { children: "Backlog \u2192 Done" }), (0, jsx_runtime_1.jsx)("td", { className: "text-end", children: sm.backlogToDone.toLocaleString() })] }), (0, jsx_runtime_1.jsxs)("tr", { children: [(0, jsx_runtime_1.jsx)("td", { children: "Backlog \u2192 Backlog" }), (0, jsx_runtime_1.jsx)("td", { className: "text-end", children: sm.backlogKeep.toLocaleString() })] }), (0, jsx_runtime_1.jsxs)("tr", { children: [(0, jsx_runtime_1.jsx)("td", { children: "No status \u2192 Done" }), (0, jsx_runtime_1.jsx)("td", { className: "text-end", children: sm.noStatusToDone.toLocaleString() })] }), (0, jsx_runtime_1.jsxs)("tr", { children: [(0, jsx_runtime_1.jsx)("td", { children: "No status \u2192 Backlog" }), (0, jsx_runtime_1.jsx)("td", { className: "text-end", children: sm.noStatusToBacklog.toLocaleString() })] })] })] })] }), (0, jsx_runtime_1.jsxs)("details", { className: "mb-2", children: [(0, jsx_runtime_1.jsx)("summary", { className: "small fw-bold", style: { cursor: "pointer" }, children: "User Mapping" }), (0, jsx_runtime_1.jsxs)("table", { className: "table table-sm small mt-1", children: [(0, jsx_runtime_1.jsx)("thead", { children: (0, jsx_runtime_1.jsxs)("tr", { children: [(0, jsx_runtime_1.jsx)("th", { children: "User" }), (0, jsx_runtime_1.jsx)("th", { className: "text-end", children: "Tasks" })] }) }), (0, jsx_runtime_1.jsxs)("tbody", { children: [(0, jsx_runtime_1.jsxs)("tr", { children: [(0, jsx_runtime_1.jsx)("td", { children: "Mark" }), (0, jsx_runtime_1.jsx)("td", { className: "text-end", children: um.mark.toLocaleString() })] }), (0, jsx_runtime_1.jsxs)("tr", { children: [(0, jsx_runtime_1.jsx)("td", { children: "Blair" }), (0, jsx_runtime_1.jsx)("td", { className: "text-end", children: um.blair.toLocaleString() })] }), (0, jsx_runtime_1.jsxs)("tr", { children: [(0, jsx_runtime_1.jsx)("td", { children: "Other \u2192 Mark" }), (0, jsx_runtime_1.jsx)("td", { className: "text-end", children: um.other.toLocaleString() })] })] })] })] }), (0, jsx_runtime_1.jsxs)("details", { open: true, className: "mb-2", children: [(0, jsx_runtime_1.jsxs)("summary", { className: "small fw-bold", style: { cursor: "pointer" }, children: ["Groups (", result.groups.length, ")"] }), (0, jsx_runtime_1.jsxs)("table", { className: "table table-sm small mt-1", children: [(0, jsx_runtime_1.jsx)("thead", { children: (0, jsx_runtime_1.jsxs)("tr", { children: [(0, jsx_runtime_1.jsx)("th", { children: "Group" }), (0, jsx_runtime_1.jsx)("th", { children: "Route" }), (0, jsx_runtime_1.jsx)("th", { className: "text-end", children: "Tasks" }), (0, jsx_runtime_1.jsx)("th", { className: "text-end", children: "Active" }), (0, jsx_runtime_1.jsx)("th", { className: "text-end", children: "Done" }), (0, jsx_runtime_1.jsx)("th", { className: "text-end", children: "Logs" })] }) }), (0, jsx_runtime_1.jsx)("tbody", { children: result.groups.map((g) => ((0, jsx_runtime_1.jsxs)("tr", { children: [(0, jsx_runtime_1.jsx)("td", { children: g.groupName }), (0, jsx_runtime_1.jsx)("td", { children: (0, jsx_runtime_1.jsx)("span", { className: `badge bg-${g.context === "home" ? "success" : "secondary"}`, children: g.context }) }), (0, jsx_runtime_1.jsx)("td", { className: "text-end", children: g.taskCount.toLocaleString() }), (0, jsx_runtime_1.jsx)("td", { className: "text-end", children: g.activeCount.toLocaleString() }), (0, jsx_runtime_1.jsx)("td", { className: "text-end", children: g.doneCount.toLocaleString() }), (0, jsx_runtime_1.jsx)("td", { className: "text-end", children: g.logEntryCount.toLocaleString() })] }, g.groupId))) })] })] })] }));
 };
-const showLogoutInSettings = typeof window !== 'undefined'
-    && !window.electronAPI
-    && !window.ReactNativeWebView;
+const showLogoutInSettings = typeof window !== "undefined" &&
+    !window.electronAPI &&
+    !window.ReactNativeWebView;
 const LogoutSection = () => {
     if (!showLogoutInSettings)
         return null;
-    return (react_1.default.createElement("div", { className: "mt-4 pt-3 border-top" },
-        react_1.default.createElement("button", { className: "btn btn-outline-danger btn-sm", onClick: async () => {
-                const confirmed = confirm('Are you sure you want to logout? This will clear your credentials from this browser. ' +
-                    'Make sure you have your User ID and Secret Key saved securely, or you will lose access to your account.');
+    return ((0, jsx_runtime_1.jsx)("div", { className: "mt-4 pt-3 border-top", children: (0, jsx_runtime_1.jsx)("button", { className: "btn btn-outline-danger btn-sm", onClick: async () => {
+                const confirmed = confirm("Are you sure you want to logout? This will clear your credentials from this browser. " +
+                    "Make sure you have your User ID and Secret Key saved securely, or you will lose access to your account.");
                 if (!confirmed)
                     return;
                 await peers_sdk_1.rpcServerCalls.logout();
-            } }, "Logout")));
+            }, children: "Logout" }) }));
 };

package/dist/screens/settings/voice-settings-agent.d.ts

@@ -1,2 +1,2 @@
-import React from 'react';
+import type React from "react";
 export declare const VoiceSettingsAgent: React.FC;