@peers-app/peers-ui 0.15.5 → 0.16.1

package/src/screens/data-explorer/data-explorer.tsx

@@ -13,11 +13,19 @@ interface ITableInfo {
   bytes?: number;
 }
 
+interface IDeletedTableInfo {
+  tableName: string;
+  tableId: string;
+  deletedAt: string;
+}
+
 type DataExplorerElectronApi = {
   getCurrentContext: () => Promise<{ contextName: string }>;
   getAllTables: () => Promise<ITableInfo[]>;
   compactDatabase: (beforeTimestamp?: number) => Promise<void>;
   resetChangeTracking: () => Promise<void>;
+  deleteTable: (tableName: string) => Promise<void>;
+  getDeletedTables: () => Promise<IDeletedTableInfo[]>;
 };
 
 type WindowWithDataExplorer = Window & {
@@ -28,11 +36,112 @@ function getDataExplorerApi(): DataExplorerElectronApi | undefined {
   return (window as WindowWithDataExplorer).electronAPI?.dataExplorer;
 }
 
+function formatRelativeTime(isoString: string): string {
+  const date = new Date(isoString);
+  const now = Date.now();
+  const diffMs = now - date.getTime();
+  const diffMin = Math.floor(diffMs / 60_000);
+  if (diffMin < 1) return "just now";
+  if (diffMin < 60) return `${diffMin}m ago`;
+  const diffHrs = Math.floor(diffMin / 60);
+  if (diffHrs < 24) return `${diffHrs}h ago`;
+  const diffDays = Math.floor(diffHrs / 24);
+  if (diffDays < 30) return `${diffDays}d ago`;
+  return date.toLocaleDateString();
+}
+
+function DeleteConfirmModal({
+  tableName,
+  onConfirm,
+  onCancel,
+}: {
+  tableName: string;
+  onConfirm: () => void;
+  onCancel: () => void;
+}) {
+  const [confirmText, setConfirmText] = useState("");
+  const [deleting, setDeleting] = useState(false);
+
+  const handleConfirm = async () => {
+    setDeleting(true);
+    try {
+      await onConfirm();
+    } finally {
+      setDeleting(false);
+    }
+  };
+
+  return (
+    <div
+      className="position-fixed top-0 start-0 w-100 h-100 d-flex align-items-center justify-content-center"
+      style={{ zIndex: 1050, backgroundColor: "rgba(0,0,0,0.5)" }}
+      onClick={onCancel}
+    >
+      <div
+        className="card shadow-lg"
+        style={{ maxWidth: 480, width: "100%" }}
+        onClick={(e) => e.stopPropagation()}
+      >
+        <div className="card-header bg-danger text-white d-flex justify-content-between align-items-center">
+          <strong>Delete Table</strong>
+          <button type="button" className="btn-close btn-close-white" onClick={onCancel} />
+        </div>
+        <div className="card-body">
+          <div className="alert alert-danger mb-3">
+            <i className="bi bi-exclamation-triangle-fill me-2" />
+            This will permanently delete all data for <strong>{tableName}</strong> on this device
+            and all synced devices once synced.
+          </div>
+          <label className="form-label">
+            Type <strong>{tableName}</strong> to confirm:
+          </label>
+          <input
+            type="text"
+            className="form-control"
+            value={confirmText}
+            onChange={(e) => setConfirmText(e.target.value)}
+            placeholder={tableName}
+            // biome-ignore lint/a11y/noAutofocus: confirmation input needs immediate focus
+            autoFocus
+          />
+        </div>
+        <div className="card-footer d-flex justify-content-end gap-2">
+          <button
+            type="button"
+            className="btn btn-secondary"
+            onClick={onCancel}
+            disabled={deleting}
+          >
+            Cancel
+          </button>
+          <button
+            type="button"
+            className="btn btn-danger"
+            disabled={confirmText !== tableName || deleting}
+            onClick={handleConfirm}
+          >
+            {deleting ? (
+              <>
+                <span className="spinner-border spinner-border-sm me-1" />
+                Deleting...
+              </>
+            ) : (
+              "Delete Table"
+            )}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
 export function DataExplorerList() {
   const [tables, setTables] = useState<ITableInfo[]>([]);
+  const [deletedTables, setDeletedTables] = useState<IDeletedTableInfo[]>([]);
   const [loading, setLoading] = useState(true);
   const [currentContext, setCurrentContext] = useState<string>("");
   const [compacting, setCompacting] = useState(false);
+  const [deleteTarget, setDeleteTarget] = useState<string | null>(null);
 
   const formatBytes = (bytes: number | undefined) => {
     if (bytes === undefined) return "-";
@@ -48,10 +157,10 @@ export function DataExplorerList() {
     const kb = 1024;
     const mb = kb * 1024;
 
-    if (bytes < 10 * kb) return "text-secondary"; // 0 to 10KB: secondary (gray)
-    if (bytes < 10 * mb) return "text-primary"; // 10KB to 10MB: primary (blue)
-    if (bytes < 100 * mb) return "text-warning"; // 10MB to 100MB: warning (orange)
-    return "text-danger"; // >100MB: danger (red)
+    if (bytes < 10 * kb) return "text-secondary";
+    if (bytes < 10 * mb) return "text-primary";
+    if (bytes < 100 * mb) return "text-warning";
+    return "text-danger";
   };
 
   const loadTables = useCallback(async () => {
@@ -64,22 +173,21 @@ export function DataExplorerList() {
         return;
       }
 
-      // Get current context info
       const contextInfo = await api.getCurrentContext();
       setCurrentContext(contextInfo.contextName);
 
-      // Get all tables from IPC
       const allTablesInfo = await api.getAllTables();
-
-      // Sort by registered status first, then by table name
       allTablesInfo.sort((a: ITableInfo, b: ITableInfo) => {
         if (a.isRegistered !== b.isRegistered) {
           return a.isRegistered ? -1 : 1;
         }
         return a.tableName.localeCompare(b.tableName);
       });
-
       setTables(allTablesInfo);
+
+      const deleted = await api.getDeletedTables();
+      deleted.sort((a, b) => a.tableName.localeCompare(b.tableName));
+      setDeletedTables(deleted);
     } catch (error) {
       console.error("Error loading tables:", error);
     } finally {
@@ -87,6 +195,22 @@ export function DataExplorerList() {
     }
   }, []);
 
+  const handleDeleteTable = async () => {
+    if (!deleteTarget) return;
+    const api = getDataExplorerApi();
+    if (!api) return;
+
+    try {
+      await api.deleteTable(deleteTarget);
+      setDeleteTarget(null);
+      setLoading(true);
+      await loadTables();
+    } catch (error: unknown) {
+      console.error("Error deleting table:", error);
+      alert(`Error deleting table: ${error instanceof Error ? error.message : String(error)}`);
+    }
+  };
+
   const compactDatabase = async (beforeTimestamp?: number) => {
     try {
       setCompacting(true);
@@ -110,7 +234,6 @@ export function DataExplorerList() {
       await api.compactDatabase(beforeTimestamp);
       alert(`Database compacted successfully!${isExtreme ? " (Extreme mode)" : ""}`);
 
-      // Reload tables to show updated sizes
       setLoading(true);
       await loadTables();
     } catch (error: unknown) {
@@ -141,7 +264,6 @@ export function DataExplorerList() {
       await api.resetChangeTracking();
       alert("Change tracking reset successfully!");
 
-      // Reload tables to show updated sizes
       setLoading(true);
       await loadTables();
     } catch (error: unknown) {
@@ -180,8 +302,19 @@ export function DataExplorerList() {
     );
   }
 
+  const registeredTables = tables.filter((t) => t.isRegistered);
+  const unregisteredTables = tables.filter((t) => !t.isRegistered);
+
   return (
     <div className="container-fluid p-4">
+      {deleteTarget && (
+        <DeleteConfirmModal
+          tableName={deleteTarget}
+          onConfirm={handleDeleteTable}
+          onCancel={() => setDeleteTarget(null)}
+        />
+      )}
+
       {/* Navigation Tabs */}
       <ul className="nav nav-tabs mb-4">
         <li className="nav-item">
@@ -303,14 +436,14 @@ export function DataExplorerList() {
       <div className="card mb-4">
         <div className="card-body">
           <h5 className="card-title">
-            Registered Tables ({tables.filter((t) => t.isRegistered).length})
+            Registered Tables ({registeredTables.length})
             <span className="badge bg-success ms-2">Active</span>
           </h5>
           <p className="text-muted small">
             These tables are registered with the TableContainer and actively used by the
             application.
           </p>
-          {tables.filter((t) => t.isRegistered).length === 0 ? (
+          {registeredTables.length === 0 ? (
             <p className="text-muted">No registered tables found</p>
           ) : (
             <div className="table-responsive">
@@ -321,27 +454,36 @@ export function DataExplorerList() {
                     <th>Table ID</th>
                     <th className="text-end">Row Count</th>
                     <th className="text-end">Bytes</th>
+                    <th style={{ width: "1%" }}></th>
                   </tr>
                 </thead>
                 <tbody>
-                  {tables
-                    .filter((t) => t.isRegistered)
-                    .map((table) => (
-                      <tr key={table.tableName}>
-                        <td>
-                          <strong>{table.tableName}</strong>
-                        </td>
-                        <td>
-                          <code className="text-muted small">{table.tableId || "system"}</code>
-                        </td>
-                        <td className="text-end">
-                          {table.rowCount !== undefined ? table.rowCount.toLocaleString() : "-"}
-                        </td>
-                        <td className={`text-end fw-bold ${getBytesColorClass(table.bytes)}`}>
-                          {formatBytes(table.bytes)}
-                        </td>
-                      </tr>
-                    ))}
+                  {registeredTables.map((table) => (
+                    <tr key={table.tableName}>
+                      <td>
+                        <strong>{table.tableName}</strong>
+                      </td>
+                      <td>
+                        <code className="text-muted small">{table.tableId || "system"}</code>
+                      </td>
+                      <td className="text-end">
+                        {table.rowCount !== undefined ? table.rowCount.toLocaleString() : "-"}
+                      </td>
+                      <td className={`text-end fw-bold ${getBytesColorClass(table.bytes)}`}>
+                        {formatBytes(table.bytes)}
+                      </td>
+                      <td>
+                        <button
+                          type="button"
+                          className="btn btn-sm btn-outline-danger border-0"
+                          title={`Delete ${table.tableName}`}
+                          onClick={() => setDeleteTarget(table.tableName)}
+                        >
+                          <i className="bi bi-trash" />
+                        </button>
+                      </td>
+                    </tr>
+                  ))}
                 </tbody>
               </table>
             </div>
@@ -350,11 +492,11 @@ export function DataExplorerList() {
       </div>
 
       {/* Unregistered Tables (Raw SQLite) */}
-      {tables.some((t) => !t.isRegistered) && (
-        <div className="card">
+      {unregisteredTables.length > 0 && (
+        <div className="card mb-4">
           <div className="card-body">
             <h5 className="card-title">
-              Unregistered Tables ({tables.filter((t) => !t.isRegistered).length})
+              Unregistered Tables ({unregisteredTables.length})
               <span className="badge bg-warning text-dark ms-2">Raw SQLite</span>
             </h5>
             <p className="text-muted small">
@@ -370,51 +512,104 @@ export function DataExplorerList() {
                     <th className="text-end">Row Count</th>
                     <th className="text-end">Bytes</th>
                     <th>SQL Definition</th>
+                    <th style={{ width: "1%" }}></th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {unregisteredTables.map((table) => (
+                    <tr key={table.tableName}>
+                      <td>
+                        <strong>{table.tableName}</strong>
+                      </td>
+                      <td>
+                        <span className="badge bg-secondary">{table.type || "table"}</span>
+                      </td>
+                      <td className="text-end">
+                        {table.rowCount !== undefined ? table.rowCount.toLocaleString() : "-"}
+                      </td>
+                      <td className={`text-end fw-bold ${getBytesColorClass(table.bytes)}`}>
+                        {formatBytes(table.bytes)}
+                      </td>
+                      <td>
+                        {table.sql ? (
+                          <details>
+                            <summary
+                              className="cursor-pointer text-primary"
+                              style={{ cursor: "pointer" }}
+                            >
+                              <small>View SQL</small>
+                            </summary>
+                            <pre
+                              className="mt-2 p-2 bg-body-secondary border rounded"
+                              style={{
+                                fontSize: "0.75rem",
+                                maxHeight: "300px",
+                                overflow: "auto",
+                              }}
+                            >
+                              <code className="text-body">{table.sql}</code>
+                            </pre>
+                          </details>
+                        ) : (
+                          <span className="text-muted small">-</span>
+                        )}
+                      </td>
+                      <td>
+                        <button
+                          type="button"
+                          className="btn btn-sm btn-outline-danger border-0"
+                          title={`Delete ${table.tableName}`}
+                          onClick={() => setDeleteTarget(table.tableName)}
+                        >
+                          <i className="bi bi-trash" />
+                        </button>
+                      </td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* Deleted Tables */}
+      {deletedTables.length > 0 && (
+        <div className="card mb-4">
+          <div className="card-body">
+            <h5 className="card-title">
+              Deleted Tables ({deletedTables.length})
+              <span className="badge bg-danger ms-2">Deleted</span>
+            </h5>
+            <p className="text-muted small">
+              These tables have been deleted. Their definitions are retained so other devices know
+              to stop syncing data for them.
+            </p>
+            <div className="table-responsive">
+              <table className="table table-hover table-sm">
+                <thead>
+                  <tr>
+                    <th>Table Name</th>
+                    <th>Table ID</th>
+                    <th>Deleted At</th>
                   </tr>
                 </thead>
                 <tbody>
-                  {tables
-                    .filter((t) => !t.isRegistered)
-                    .map((table) => (
-                      <tr key={table.tableName}>
-                        <td>
-                          <strong>{table.tableName}</strong>
-                        </td>
-                        <td>
-                          <span className="badge bg-secondary">{table.type || "table"}</span>
-                        </td>
-                        <td className="text-end">
-                          {table.rowCount !== undefined ? table.rowCount.toLocaleString() : "-"}
-                        </td>
-                        <td className={`text-end fw-bold ${getBytesColorClass(table.bytes)}`}>
-                          {formatBytes(table.bytes)}
-                        </td>
-                        <td>
-                          {table.sql ? (
-                            <details>
-                              <summary
-                                className="cursor-pointer text-primary"
-                                style={{ cursor: "pointer" }}
-                              >
-                                <small>View SQL</small>
-                              </summary>
-                              <pre
-                                className="mt-2 p-2 bg-body-secondary border rounded"
-                                style={{
-                                  fontSize: "0.75rem",
-                                  maxHeight: "300px",
-                                  overflow: "auto",
-                                }}
-                              >
-                                <code className="text-body">{table.sql}</code>
-                              </pre>
-                            </details>
-                          ) : (
-                            <span className="text-muted small">-</span>
-                          )}
-                        </td>
-                      </tr>
-                    ))}
+                  {deletedTables.map((table) => (
+                    <tr key={table.tableId}>
+                      <td>
+                        <strong className="text-muted">{table.tableName}</strong>
+                      </td>
+                      <td>
+                        <code className="text-muted small">{table.tableId}</code>
+                      </td>
+                      <td>
+                        <span title={new Date(table.deletedAt).toLocaleString()}>
+                          {formatRelativeTime(table.deletedAt)}
+                        </span>
+                      </td>
+                    </tr>
+                  ))}
                 </tbody>
               </table>
             </div>

package/src/screens/setup-user.tsx

@@ -46,6 +46,11 @@ export const SetupUser = () => {
           console.error("Error auto-installing peers-core:", err);
         });
 
+      // Register with peers-services
+      await rpcServerCalls.registerWithPeersServices().catch((err: unknown) => {
+        console.warn("Auto-registration with peers-services deferred:", err);
+      });
+
       // Success - reload the app
       window.location.reload();
     } catch (err) {

package/src/system-apps/account.app.ts

@@ -0,0 +1,7 @@
+import type { IAppNav } from "@peers-app/peers-sdk";
+
+export const accountApp: IAppNav = {
+  name: "Account",
+  iconClassName: "bi-person-circle",
+  navigationPath: "account",
+};

package/src/system-apps/index.ts

@@ -1,5 +1,6 @@
 import type { IAppNav, IPackage } from "@peers-app/peers-sdk";
 
+export { accountApp } from "./account.app";
 export { assistantsApp } from "./assistants.app";
 export { consoleLogsApp } from "./console-logs.app";
 export { contactsApp } from "./contacts.app";
@@ -18,6 +19,7 @@ export { typesApp } from "./types.app";
 export { variablesApp } from "./variables.app";
 export { workflowsApp } from "./workflows.app";
 
+import { accountApp } from "./account.app";
 import { assistantsApp } from "./assistants.app";
 import { consoleLogsApp } from "./console-logs.app";
 import { contactsApp } from "./contacts.app";
@@ -64,6 +66,7 @@ export const systemApps: IAppNav[] = [
   joinGroupApp,
 
   // User & Settings Apps
+  accountApp,
   settingsApp,
   // Mobile Settings (only in React Native)
   ...(isReactNative() ? [mobileSettingsApp] : []),