@peers-app/peers-ui 0.27.2 → 0.27.4

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

@@ -1,82 +0,0 @@
-import { camelCaseToSpaces, deviceVar } from "@peers-app/peers-sdk";
-import { useObservable } from "../../hooks";
-
-export type ColorModePreference = "light" | "dark" | "auto";
-export type ColorMode = "light" | "dark";
-
-export const colorMode = deviceVar<ColorMode>("colorMode", {
-  defaultValue: "dark",
-});
-
-export const colorModePreference = deviceVar<ColorModePreference>("colorModePreference", {
-  defaultValue: "dark",
-});
-
-function applyColorMode(modePreference?: ColorModePreference): ColorMode {
-  if (!modePreference) {
-    modePreference = colorModePreference() || "dark";
-  } else {
-    colorModePreference(modePreference);
-  }
-  let mode = colorMode();
-  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";
-  } 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();
-
-  return mode;
-}
-
-colorModePreference.subscribe((newValue) => applyColorMode(newValue));
-
-export const ColorModeDropdown = () => {
-  const [modePreference] = useObservable(colorModePreference);
-
-  return (
-    <div className="dropdown">
-      <button
-        className="btn btn-secondary dropdown-toggle"
-        type="button"
-        id="colorModeDropdown"
-        data-bs-toggle="dropdown"
-        aria-expanded="false"
-      >
-        Color Mode: {camelCaseToSpaces(modePreference)}
-      </button>
-      <ul className="dropdown-menu" aria-labelledby="colorModeDropdown">
-        <li>
-          <button className="dropdown-item" onClick={() => colorModePreference("auto")}>
-            Auto {modePreference === "auto" && "✓"}
-          </button>
-        </li>
-        <li>
-          <button className="dropdown-item" onClick={() => colorModePreference("light")}>
-            Light {modePreference === "light" && "✓"}
-          </button>
-        </li>
-        <li>
-          <button className="dropdown-item" onClick={() => colorModePreference("dark")}>
-            Dark {modePreference === "dark" && "✓"}
-          </button>
-        </li>
-      </ul>
-    </div>
-  );
-};

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

@@ -1,24 +0,0 @@
-import { renderToStaticMarkup } from "react-dom/server";
-import { SettingsPage } from "./settings-page";
-
-jest.mock("../../components/tooltip", () => ({ Tooltip: () => null }));
-jest.mock("../../hooks", () => ({ usePromise: () => undefined, useObservable: () => [false] }));
-jest.mock("../../components/tabs", () => ({
-  Tabs: ({ tabs }: any) => (
-    <>
-      {tabs.map((tab: any) => (
-        <div key={tab.name}>{tab.content}</div>
-      ))}
-    </>
-  ),
-}));
-jest.mock("../../root-layout/layout-picker", () => ({ LayoutPicker: () => <div>Layout</div> }));
-jest.mock("./color-mode-dropdown", () => ({ ColorModeDropdown: () => <div>Theme</div> }));
-jest.mock("../../globals", () => ({ me: {}, isDesktop: () => false }));
-
-test("Settings renders advanced controls without the retired Tasks importer", () => {
-  const html = renderToStaticMarkup(<SettingsPage />);
-  expect(html).toContain("Advanced Settings");
-  expect(html).not.toContain("Import Old Peers");
-  expect(html).not.toContain("Dry Run");
-});

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

@@ -1,426 +0,0 @@
-import {
-  autoUpdatePeersCore,
-  DISPLAY_NAME_MAX_LENGTH,
-  getUserContext,
-  packagesRootDir,
-  reloadPackagesOnPageRefresh,
-  rpcServerCalls,
-  Users,
-} from "@peers-app/peers-sdk";
-import type React from "react";
-import { useEffect, useState } from "react";
-import { AppUpdatesSettings } from "../../app-updates/app-updates-settings";
-import { Input } from "../../components/input";
-import { Tabs } from "../../components/tabs";
-import { Tooltip } from "../../components/tooltip";
-import * as globals from "../../globals";
-import { useObservable, usePromise } from "../../hooks";
-import { LayoutPicker } from "../../root-layout/layout-picker";
-import { identityTools } from "../device-pairing/identity-ipc";
-import { IDENTITY_ACCOUNT_PATH, IDENTITY_PAIR_PATH } from "../identity/identity-routes";
-import { getNetworkControlConsumer } from "../network-viewer/network-viewer-ipc";
-import { ColorModeDropdown } from "./color-mode-dropdown";
-
-type PeersHostWindow = Window & {
-  electronAPI?: unknown;
-  ReactNativeWebView?: unknown;
-};
-
-const isBrowserPwaHost =
-  typeof window !== "undefined" &&
-  !(window as PeersHostWindow).electronAPI &&
-  !(window as PeersHostWindow).ReactNativeWebView;
-
-type PeersGlobal = typeof globalThis & {
-  __PEERS_APP_VERSION__?: string;
-};
-
-function getAppVersion() {
-  return (globalThis as PeersGlobal).__PEERS_APP_VERSION__ || "unknown";
-}
-
-/** Application settings organized by user, system, and developer concerns. */
-export const SettingsPage: React.FC = () => {
-  return (
-    <div className="d-flex flex-column h-100 overflow-hidden" style={{ minHeight: 0 }}>
-      <div className="container-fluid flex-grow-1 overflow-auto" style={{ minHeight: 0 }}>
-        <Tabs
-          tabs={[
-            {
-              name: "User",
-              content: <UserSettingsTab />,
-              active: true,
-            },
-            {
-              name: "Appearance",
-              content: <AppearanceSettingsTab />,
-            },
-            {
-              name: "Updates",
-              content: <AppUpdatesSettings />,
-            },
-            {
-              name: "Advanced",
-              content: <AdvancedSettingsTab />,
-            },
-          ]}
-        />
-      </div>
-      <footer className="flex-shrink-0 border-top px-3 py-2 small text-muted">
-        Peers {getAppVersion()}
-      </footer>
-    </div>
-  );
-};
-
-const UserSettingsTab: React.FC = () => {
-  return (
-    <>
-      <ProfileSection />
-      <IdentityAccountSection />
-      <AddDeviceSection />
-      <LogoutSection />
-    </>
-  );
-};
-
-const AppearanceSettingsTab: React.FC = () => {
-  return (
-    <>
-      <h5 className="mb-3">Appearance</h5>
-      <div className="mb-3">
-        <ColorModeDropdown />
-      </div>
-      <div className="mb-3">
-        <LayoutPicker />
-      </div>
-    </>
-  );
-};
-
-const AdvancedSettingsTab: React.FC = () => {
-  return (
-    <>
-      <h5 className="mb-3">Advanced Settings</h5>
-      <PackagesRootDirectory />
-      <ReloadPackagesOnPageRefresh />
-      <AutoUpdatePeersCore />
-      <ResetDeviceSyncInfos />
-      <DeleteLocalDatabase />
-      <CleanupOldDataDir />
-      <ResetChangeTracking />
-    </>
-  );
-};
-
-const ProfileSection: React.FC = () => {
-  const me = usePromise(async () => {
-    const userContext = await getUserContext();
-    return Users(userContext.userDataContext).initDoc(globals.me);
-  });
-
-  const handleSave = async () => {
-    try {
-      // Save user profile (only when it actually changed). Pass me.toJS() — the
-      // raw doc's fields are non-enumerable getters that get dropped when the
-      // signAndSave call is serialized to JSON over the socket to the server.
-      if (me?.q()) {
-        const userContext = await getUserContext();
-        const updatedUser = me.toJS();
-        updatedUser.name = updatedUser.name.slice(0, DISPLAY_NAME_MAX_LENGTH);
-        await Users(userContext.userDataContext).signAndSave(updatedUser);
-        me.qs.name(updatedUser.name);
-        me.q(0); // Reset change counter
-      }
-    } catch (err) {
-      console.error("Error saving profile:", err);
-      alert(`Failed to save: ${(err as Error).message}`);
-    }
-  };
-
-  // Subscribe to changes
-  useObservable(me?.q);
-
-  if (!me) {
-    return null;
-  }
-
-  const hasChanges = !!me.q();
-
-  return (
-    <>
-      <div className="d-flex align-items-center mb-3">
-        <h5 className="mb-0 me-auto">Profile</h5>
-        <button className="btn btn-primary btn-sm" onClick={handleSave} disabled={!hasChanges}>
-          Save
-        </button>
-      </div>
-
-      <div className="mb-3">
-        <label className="form-label small" htmlFor="settings-display-name">
-          Display name
-        </label>
-        <Input
-          id="settings-display-name"
-          value={me.qs.name}
-          className="form-control"
-          maxLength={DISPLAY_NAME_MAX_LENGTH}
-          placeholder="Enter your name"
-        />
-      </div>
-    </>
-  );
-};
-
-const IdentityAccountSection: React.FC = () => {
-  return (
-    <section className="mt-4 pt-3 border-top">
-      <h6>Identity account</h6>
-      <p className="small text-muted">
-        View account identifiers, security keys, this device’s ID, and Peers Services registration.
-      </p>
-      <a href={`#${IDENTITY_ACCOUNT_PATH}`} className="btn btn-outline-primary">
-        View Identity account
-      </a>
-    </section>
-  );
-};
-
-const AddDeviceSection: React.FC = () => {
-  return (
-    <section className="mt-4 pt-3 border-top">
-      <h6>Add another device</h6>
-      <p className="small text-muted">
-        On the new device choose “Sign in from another device”, then type the code it shows on
-        Identity → Devices and approve. Account access is transferred only after you approve.
-      </p>
-      <a href={`#${IDENTITY_PAIR_PATH}`} className="btn btn-outline-primary">
-        Add another device
-      </a>
-    </section>
-  );
-};
-
-const PackagesRootDirectory: React.FC = () => {
-  return (
-    <div className="mt-3">
-      <small>
-        Packages Directory:
-        <Tooltip markdownContent={`Changing this will not effect existing packages.`} />
-      </small>
-      <Input value={packagesRootDir} className="form-control" />
-    </div>
-  );
-};
-
-const ReloadPackagesOnPageRefresh: React.FC = () => {
-  useObservable(reloadPackagesOnPageRefresh);
-  return (
-    <div>
-      <label htmlFor="isPrimary" className="form-label small mt-2 me-2">
-        Reload Packages on Page Load:
-      </label>
-      <input
-        type="checkbox"
-        checked={reloadPackagesOnPageRefresh()}
-        onChange={(e) => {
-          const checked = (e.target as HTMLInputElement).checked;
-          reloadPackagesOnPageRefresh(checked);
-        }}
-      />
-      <Tooltip
-        markdownContent={`Checking this will reload all packages very time the page is loaded.  Particularly useful while developing packages.`}
-      />
-    </div>
-  );
-};
-
-const AutoUpdatePeersCore: React.FC = () => {
-  useObservable(autoUpdatePeersCore);
-  return (
-    <div>
-      <label htmlFor="autoUpdatePeersCore" className="form-label small mt-2 me-2">
-        Auto-update peers-core on startup:
-      </label>
-      <input
-        type="checkbox"
-        checked={autoUpdatePeersCore()}
-        onChange={(e) => {
-          const checked = (e.target as HTMLInputElement).checked;
-          autoUpdatePeersCore(checked);
-        }}
-      />
-      <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.`}
-      />
-    </div>
-  );
-};
-
-const ResetDeviceSyncInfos: React.FC = () => {
-  return (
-    <div className="mt-3">
-      <button
-        className="btn btn-secondary btn-sm ms-2"
-        onClick={async () => {
-          try {
-            const result = await (await getNetworkControlConsumer()).tools.resetDeviceSyncInfo();
-            if (!result.success) {
-              alert(result.message);
-              return;
-            }
-            alert("All device sync info has been reset.  Syncing in progress...");
-          } catch (err) {
-            console.error("Error while resetting all device sync info", err);
-            alert(`Failed to reset device sync info: ${(err as Error).message || String(err)}`);
-          }
-        }}
-      >
-        Reset All Device Sync Info
-      </button>
-    </div>
-  );
-};
-
-const DeleteLocalDatabase: React.FC = () => {
-  return (
-    <div className="mt-3">
-      <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 removes local data for the current personal or group context only. " +
-              "The context will be rebuilt by re-syncing from another of your online devices. " +
-              "Account credentials and other contexts are not deleted.",
-          );
-          if (!confirmed) return;
-          try {
-            await rpcServerCalls.deleteLocalDatabase();
-            if (isBrowserPwaHost) {
-              window.location.reload();
-              return;
-            }
-            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 as Error).message}`);
-          }
-        }}
-      >
-        Delete Local Database
-      </button>
-    </div>
-  );
-};
-
-const CleanupOldDataDir: React.FC = () => {
-  const [info, setInfo] = useState<{ path: string; sizeMB: number } | null | undefined>(undefined);
-  const [busy, setBusy] = useState(false);
-
-  useEffect(() => {
-    rpcServerCalls
-      .getOldDataDirInfo()
-      .then(setInfo)
-      .catch(() => setInfo(null));
-  }, []);
-
-  if (info === undefined || info === null) return null;
-
-  return (
-    <div className="mt-4 pt-3 border-top">
-      <h6 className="mb-2">Clean up old data directory</h6>
-      <small className="text-muted d-block mb-2">
-        Your data has been migrated to <code>~/peers/data</code>. The old copy below can be deleted
-        once you've confirmed everything works.
-      </small>
-      <small className="text-muted d-block mb-2">
-        <strong>Old location:</strong> <code>{info.path}</code> ({info.sizeMB} MB)
-      </small>
-      <button
-        className="btn btn-danger btn-sm"
-        disabled={busy}
-        onClick={async () => {
-          const confirmed = confirm(
-            `Delete the old data directory? This will free ~${info.sizeMB} MB.\n\n${info.path}\n\nThis cannot be undone.`,
-          );
-          if (!confirmed) return;
-          setBusy(true);
-          try {
-            await rpcServerCalls.cleanupOldDataDir();
-            setInfo(null);
-            alert("Old data directory deleted.");
-          } catch (err) {
-            alert(`Failed to delete: ${(err as Error).message}`);
-          } finally {
-            setBusy(false);
-          }
-        }}
-      >
-        {busy ? "Deleting..." : "Delete Old Data Directory"}
-      </button>
-    </div>
-  );
-};
-
-const ResetChangeTracking: React.FC = () => {
-  const [busy, setBusy] = useState(false);
-  return (
-    <div className="mt-4 pt-3 border-top">
-      <h6 className="mb-2">Change tracking</h6>
-      <small className="text-muted d-block mb-2">
-        Clears change history for every personal and group context on this device and rebuilds it
-        from current rows. Device sync cursors are cleared; a full resync with peers may follow. Use
-        when debugging sync issues.
-      </small>
-      <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 {
-            const result = await (await getNetworkControlConsumer()).tools.resetChangeTracking();
-            if (!result.success) {
-              alert(result.message);
-              return;
-            }
-            await rpcServerCalls.flushDatabases();
-            alert("Change tracking reset successfully.");
-          } catch (err) {
-            console.error("Error while resetting change tracking", err);
-            alert(`Failed to reset change tracking: ${(err as Error).message || String(err)}`);
-          } finally {
-            setBusy(false);
-          }
-        }}
-      >
-        {busy ? "Resetting…" : "Reset Change Tracking"}
-      </button>
-    </div>
-  );
-};
-
-const LogoutSection: React.FC = () => {
-  if (!isBrowserPwaHost) return null;
-  return (
-    <div className="mt-4 pt-3 border-top">
-      <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 (await identityTools()).signOut();
-        }}
-      >
-        Logout
-      </button>
-    </div>
-  );
-};