@peers-app/peers-ui 0.13.0 → 0.13.1

package/dist/components/lazy-list.js

@@ -72,7 +72,7 @@ function LazyList(props) {
         if (renderItems.length < 50 && !allLoaded && !loading() && !isLoadingSync.current) {
             loadMore();
         }
-    }, [renderItems.length, allLoaded, loading()]);
+    }, [renderItems.length, allLoaded]);
     (0, react_1.useEffect)(() => {
         itemsObsAry([]);
         setAllLoaded(false);

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

@@ -30,11 +30,17 @@ function applyColorMode(modePreference) {
     }
     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)';
     }
+    const themeMeta = document.querySelector('meta[name="theme-color"]');
+    if (themeMeta) {
+        themeMeta.setAttribute('content', mode === 'light' ? '#ffffff' : '#212529');
+    }
     (0, exports.colorMode)(mode);
     exports.colorMode.notifySubscribers();
     return mode;

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

@@ -83,7 +83,8 @@ const AdvancedSettingsTab = () => {
         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(DeleteLocalDatabase, null),
+        react_1.default.createElement(ImportOldPeersData, null)));
 };
 const ProfileSection = () => {
     const [deviceId] = (0, hooks_1.useObservable)(peers_sdk_1.thisDeviceId);
@@ -236,6 +237,156 @@ const DeleteLocalDatabase = () => {
                 }
             } }, "Delete Local Database")));
 };
+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 [loading, setLoading] = (0, react_1.useState)(false);
+    const [result, setResult] = (0, react_1.useState)(null);
+    const [error, setError] = (0, react_1.useState)('');
+    const handleFileSelect = (e) => {
+        const file = e.target.files?.[0];
+        if (!file)
+            return;
+        // Electron exposes .path on File objects
+        const path = file.path;
+        if (path) {
+            setFilePath(path);
+            setFileName(file.name);
+        }
+        else {
+            setFileName(file.name);
+            setFilePath('');
+            setError('File path not available. This feature requires the Electron desktop app.');
+        }
+        setResult(null);
+        setError('');
+    };
+    const handleDryRun = async () => {
+        if (!filePath)
+            return;
+        setLoading(true);
+        setError('');
+        setResult(null);
+        try {
+            const response = await peers_sdk_1.rpcServerCalls.runTool(IMPORT_TOOL_ID, {
+                filePath,
+                dryRun: true,
+            });
+            if (response?.result) {
+                setResult(response.result);
+            }
+            else {
+                setError('Unexpected response from import tool');
+            }
+        }
+        catch (err) {
+            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 })));
+};
+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())))))))));
+};
 const showLogoutInSettings = typeof window !== 'undefined'
     && !window.electronAPI
     && !window.ReactNativeWebView;

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

@@ -83,6 +83,7 @@ function TabsLayoutApp() {
         return;
     }
     if (!userId) {
+        document.getElementById('appLoadingDiv')?.remove();
         return react_1.default.createElement(setup_user_1.SetupUser, null);
     }
     else {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@peers-app/peers-ui",
-  "version": "0.13.0",
+  "version": "0.13.1",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/peers-app/peers-ui.git"
@@ -26,7 +26,7 @@
     "test:coverage": "jest --coverage"
   },
   "peerDependencies": {
-    "@peers-app/peers-sdk": "^0.13.0",
+    "@peers-app/peers-sdk": "^0.13.1",
     "bootstrap": "^5.3.3",
     "react": "^18.0.0",
     "react-dom": "^18.0.0"
@@ -36,7 +36,7 @@
     "@babel/preset-env": "^7.24.5",
     "@babel/preset-react": "^7.24.1",
     "@babel/preset-typescript": "^7.27.1",
-    "@peers-app/peers-sdk": "0.13.0",
+    "@peers-app/peers-sdk": "0.13.1",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.3.0",

package/src/components/lazy-list.tsx

@@ -47,7 +47,7 @@ export function LazyList<T>(props: IProps<T>) {
     if (renderItems.length < 50 && !allLoaded && !loading() && !isLoadingSync.current) {
       loadMore();
     }
-  }, [renderItems.length, allLoaded, loading()]);
+  }, [renderItems.length, allLoaded]);
 
   useEffect(() => {
     itemsObsAry([]);

package/src/screens/settings/color-mode-dropdown.tsx

@@ -28,10 +28,17 @@ function applyColorMode(modePreference?: ColorModePreference): ColorMode {
   }
   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)';
   }
+
+  const themeMeta = document.querySelector('meta[name="theme-color"]');
+  if (themeMeta) {
+    themeMeta.setAttribute('content', mode === 'light' ? '#ffffff' : '#212529');
+  }
   colorMode(mode);
   colorMode.notifySubscribers();
 

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

@@ -1,5 +1,5 @@
 import { autoUpdatePeersCore, Devices, getUserContext, IDevice, packagesRootDir, reloadPackagesOnPageRefresh, rpcServerCalls, thisDeviceId, TrustLevel, Users } from "@peers-app/peers-sdk";
-import React, { useEffect } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { Input } from '../../components/input';
 import { Tooltip } from '../../components/tooltip';
 import { Tabs } from '../../components/tabs';
@@ -61,6 +61,7 @@ const AdvancedSettingsTab: React.FC = () => {
       <AutoUpdatePeersCore />
       <ResetDeviceSyncInfos />
       <DeleteLocalDatabase />
+      <ImportOldPeersData />
     </>
   );
 };
@@ -324,6 +325,210 @@ const DeleteLocalDatabase: React.FC = () => {
   );
 }
 
+const IMPORT_TOOL_ID = '00mh0wlipkdbeaw8imptsk001';
+
+interface IDryRunResult {
+  totalRecords: number;
+  totalTasks: number;
+  totalLogEntries: number;
+  groups: {
+    groupId: string;
+    groupName: string;
+    context: 'personal' | 'home';
+    taskCount: number;
+    activeCount: number;
+    doneCount: number;
+    rootTaskCount: number;
+    subtaskCount: number;
+    logEntryCount: number;
+  }[];
+  statusMapping: {
+    inProgressToDone: number;
+    inProgressKeep: number;
+    queuedToDone: number;
+    queuedKeep: number;
+    backlogToDone: number;
+    backlogKeep: number;
+    noStatusToDone: number;
+    noStatusToBacklog: number;
+  };
+  userMapping: {
+    mark: number;
+    blair: number;
+    other: number;
+  };
+  warnings: string[];
+}
+
+const ImportOldPeersData: React.FC = () => {
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const [filePath, setFilePath] = useState<string>('');
+  const [fileName, setFileName] = useState<string>('');
+  const [loading, setLoading] = useState(false);
+  const [result, setResult] = useState<IDryRunResult | null>(null);
+  const [error, setError] = useState<string>('');
+
+  const handleFileSelect = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (!file) return;
+    // Electron exposes .path on File objects
+    const path = (file as any).path as string | undefined;
+    if (path) {
+      setFilePath(path);
+      setFileName(file.name);
+    } else {
+      setFileName(file.name);
+      setFilePath('');
+      setError('File path not available. This feature requires the Electron desktop app.');
+    }
+    setResult(null);
+    setError('');
+  };
+
+  const handleDryRun = async () => {
+    if (!filePath) return;
+    setLoading(true);
+    setError('');
+    setResult(null);
+    try {
+      const response = await rpcServerCalls.runTool(IMPORT_TOOL_ID, {
+        filePath,
+        dryRun: true,
+      });
+      if (response?.result) {
+        setResult(response.result);
+      } else {
+        setError('Unexpected response from import tool');
+      }
+    } catch (err) {
+      setError((err as Error).message || 'Failed to run dry run');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="mt-4 pt-3 border-top">
+      <h6 className="mb-2">Import Old Peers Data</h6>
+      <small className="text-muted d-block mb-2">
+        Import tasks and log entries from an old peers JSON export file.
+      </small>
+
+      <div className="d-flex align-items-center gap-2 mb-2">
+        <input
+          ref={fileInputRef}
+          type="file"
+          accept=".json"
+          className="form-control form-control-sm"
+          style={{ maxWidth: 350 }}
+          onChange={handleFileSelect}
+        />
+        <button
+          className="btn btn-outline-primary btn-sm"
+          onClick={handleDryRun}
+          disabled={!filePath || loading}
+        >
+          {loading ? 'Analyzing...' : 'Dry Run'}
+        </button>
+      </div>
+
+      {error && (
+        <div className="alert alert-danger py-1 px-2 small mt-2">{error}</div>
+      )}
+
+      {result && <DryRunResults result={result} />}
+    </div>
+  );
+};
+
+const DryRunResults: React.FC<{ result: IDryRunResult }> = ({ result }) => {
+  const sm = result.statusMapping;
+  const um = result.userMapping;
+
+  return (
+    <div className="mt-2">
+      <div className="alert alert-info py-2 px-3 small">
+        <strong>Summary:</strong> {result.totalTasks.toLocaleString()} tasks
+        and {result.totalLogEntries.toLocaleString()} log entries
+        across {result.groups.length} groups
+        ({result.totalRecords.toLocaleString()} total records in file)
+      </div>
+
+      {result.warnings.length > 0 && (
+        <div className="alert alert-warning py-2 px-3 small">
+          <strong>Warnings:</strong>
+          <ul className="mb-0 ps-3">
+            {result.warnings.map((w, i) => <li key={i}>{w}</li>)}
+          </ul>
+        </div>
+      )}
+
+      <details className="mb-2">
+        <summary className="small fw-bold" style={{ cursor: 'pointer' }}>
+          Status Mapping
+        </summary>
+        <table className="table table-sm small mt-1">
+          <thead><tr><th>Mapping</th><th className="text-end">Count</th></tr></thead>
+          <tbody>
+            <tr><td>In-Progress → Done</td><td className="text-end">{sm.inProgressToDone.toLocaleString()}</td></tr>
+            <tr><td>In-Progress → In-Progress</td><td className="text-end">{sm.inProgressKeep.toLocaleString()}</td></tr>
+            <tr><td>Queued → Done</td><td className="text-end">{sm.queuedToDone.toLocaleString()}</td></tr>
+            <tr><td>Queued → Queued</td><td className="text-end">{sm.queuedKeep.toLocaleString()}</td></tr>
+            <tr><td>Backlog → Done</td><td className="text-end">{sm.backlogToDone.toLocaleString()}</td></tr>
+            <tr><td>Backlog → Backlog</td><td className="text-end">{sm.backlogKeep.toLocaleString()}</td></tr>
+            <tr><td>No status → Done</td><td className="text-end">{sm.noStatusToDone.toLocaleString()}</td></tr>
+            <tr><td>No status → Backlog</td><td className="text-end">{sm.noStatusToBacklog.toLocaleString()}</td></tr>
+          </tbody>
+        </table>
+      </details>
+
+      <details className="mb-2">
+        <summary className="small fw-bold" style={{ cursor: 'pointer' }}>
+          User Mapping
+        </summary>
+        <table className="table table-sm small mt-1">
+          <thead><tr><th>User</th><th className="text-end">Tasks</th></tr></thead>
+          <tbody>
+            <tr><td>Mark</td><td className="text-end">{um.mark.toLocaleString()}</td></tr>
+            <tr><td>Blair</td><td className="text-end">{um.blair.toLocaleString()}</td></tr>
+            <tr><td>Other → Mark</td><td className="text-end">{um.other.toLocaleString()}</td></tr>
+          </tbody>
+        </table>
+      </details>
+
+      <details open className="mb-2">
+        <summary className="small fw-bold" style={{ cursor: 'pointer' }}>
+          Groups ({result.groups.length})
+        </summary>
+        <table className="table table-sm small mt-1">
+          <thead>
+            <tr>
+              <th>Group</th>
+              <th>Route</th>
+              <th className="text-end">Tasks</th>
+              <th className="text-end">Active</th>
+              <th className="text-end">Done</th>
+              <th className="text-end">Logs</th>
+            </tr>
+          </thead>
+          <tbody>
+            {result.groups.map(g => (
+              <tr key={g.groupId}>
+                <td>{g.groupName}</td>
+                <td><span className={`badge bg-${g.context === 'home' ? 'success' : 'secondary'}`}>{g.context}</span></td>
+                <td className="text-end">{g.taskCount.toLocaleString()}</td>
+                <td className="text-end">{g.activeCount.toLocaleString()}</td>
+                <td className="text-end">{g.doneCount.toLocaleString()}</td>
+                <td className="text-end">{g.logEntryCount.toLocaleString()}</td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </details>
+    </div>
+  );
+};
+
 const showLogoutInSettings = typeof window !== 'undefined'
   && !(window as any).electronAPI
   && !(window as any).ReactNativeWebView;

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

@@ -73,6 +73,7 @@ export function TabsLayoutApp() {
   }
 
   if (!userId) {
+    document.getElementById('appLoadingDiv')?.remove();
     return <SetupUser />;
   } else {
     return <TabsLayout userId={userId} />;