@peers-app/peers-ui 0.25.8 → 0.25.9

package/src/tabs-layout/network-status-indicator.tsx

@@ -3,6 +3,7 @@ import moment from "moment";
 import { useEffect, useId, useRef, useState } from "react";
 import { IDENTITY_ACCEPT_PATH, IDENTITY_ACCOUNT_PATH } from "../screens/identity/identity-routes";
 import { getNetworkDiagnosticsConsumer } from "../screens/network-viewer/network-viewer-ipc";
+import { networkViewerSection } from "../screens/network-viewer/network-viewer-section";
 import { goToTabPath } from "./tabs-state";
 import { type INetworkStatusViewState, useNetworkStatus } from "./use-network-status";
 
@@ -59,6 +60,24 @@ function connectedLabelSuffix(connectedContextCount: number): string {
   return `; ${connectedContextCount} ${connectedContextCount === 1 ? "group" : "groups"} connected`;
 }
 
+function withStuckAttention(
+  presentation: INetworkStatusPresentation,
+  stuckRecoveryCount: number,
+): INetworkStatusPresentation {
+  if (stuckRecoveryCount <= 0) {
+    return presentation;
+  }
+  const attention =
+    stuckRecoveryCount === 1
+      ? "1 record needs attention"
+      : `${stuckRecoveryCount} records need attention`;
+  const labeled = { ...presentation, label: `${presentation.label}; ${attention}` };
+  if (presentation.colorClass === "text-danger") {
+    return labeled;
+  }
+  return { ...labeled, colorClass: "text-warning" };
+}
+
 function connectedGroupsOverlay(
   connectionCount: number,
   connectedContextCount: number,
@@ -104,6 +123,7 @@ export function getNetworkStatusPresentation(
     disconnectedContextCount,
     errorCount,
     state,
+    stuckRecoveryCount,
     syncingContextCount,
   } = viewState.status;
   const disconnectedOverlay =
@@ -116,14 +136,17 @@ export function getNetworkStatusPresentation(
   const groupsOverlay = connectedGroupsOverlay(connectionCount, connectedContextCount);
   const connectedSuffix = groupsOverlay ? connectedLabelSuffix(connectedContextCount) : "";
   if (state === "error") {
-    return {
-      label: `Network error; ${errorCount} sync ${errorCount === 1 ? "error" : "errors"}; ${connectionCount} active ${connectionCount === 1 ? "connection" : "connections"}${connectedSuffix}${disconnectedSuffix}`,
-      shortLabel: "Error",
-      colorClass: "text-danger",
-      mark: "solid",
-      disconnectedGroupsOverlay: disconnectedOverlay,
-      connectedGroupsOverlay: groupsOverlay,
-    };
+    return withStuckAttention(
+      {
+        label: `Network error; ${errorCount} sync ${errorCount === 1 ? "error" : "errors"}; ${connectionCount} active ${connectionCount === 1 ? "connection" : "connections"}${connectedSuffix}${disconnectedSuffix}`,
+        shortLabel: "Error",
+        colorClass: "text-danger",
+        mark: "solid",
+        disconnectedGroupsOverlay: disconnectedOverlay,
+        connectedGroupsOverlay: groupsOverlay,
+      },
+      stuckRecoveryCount,
+    );
   }
   if (state === "syncing" || opts?.holdSyncingVisual) {
     const longSync = state === "syncing" && opts?.syncingLongerThanGreenMs === true;
@@ -131,32 +154,41 @@ export function getNetworkStatusPresentation(
       state === "syncing"
         ? `${syncingContextCount} ${syncingContextCount === 1 ? "context" : "contexts"}`
         : "recent activity";
-    return {
-      label: `Network syncing ${contextsLabel}; ${connectionCount} active ${connectionCount === 1 ? "connection" : "connections"}${connectedSuffix}${disconnectedSuffix}`,
-      shortLabel: "Syncing",
-      colorClass: longSync ? "text-primary" : "text-success",
-      mark: longSync ? "indeterminate" : "pulse",
-      disconnectedGroupsOverlay: disconnectedOverlay,
-      connectedGroupsOverlay: groupsOverlay,
-    };
+    return withStuckAttention(
+      {
+        label: `Network syncing ${contextsLabel}; ${connectionCount} active ${connectionCount === 1 ? "connection" : "connections"}${connectedSuffix}${disconnectedSuffix}`,
+        shortLabel: "Syncing",
+        colorClass: longSync ? "text-primary" : "text-success",
+        mark: longSync ? "indeterminate" : "pulse",
+        disconnectedGroupsOverlay: disconnectedOverlay,
+        connectedGroupsOverlay: groupsOverlay,
+      },
+      stuckRecoveryCount,
+    );
   }
   if (state === "offline") {
-    return {
-      label: "Network offline; no active connections",
-      shortLabel: "Offline",
-      iconClass: "bi-cloud-slash-fill",
-      colorClass: "text-secondary",
-    };
+    return withStuckAttention(
+      {
+        label: "Network offline; no active connections",
+        shortLabel: "Offline",
+        iconClass: "bi-cloud-slash-fill",
+        colorClass: "text-secondary",
+      },
+      stuckRecoveryCount,
+    );
   }
-  return {
-    label: `Network synced; ${connectionCount} active ${connectionCount === 1 ? "connection" : "connections"}${connectedSuffix}${disconnectedSuffix}`,
-    shortLabel: "Synced",
-    iconClass: "bi-check-circle-fill",
-    colorClass: "text-success",
-    compactIcon: true,
-    disconnectedGroupsOverlay: disconnectedOverlay,
-    connectedGroupsOverlay: groupsOverlay,
-  };
+  return withStuckAttention(
+    {
+      label: `Network synced; ${connectionCount} active ${connectionCount === 1 ? "connection" : "connections"}${connectedSuffix}${disconnectedSuffix}`,
+      shortLabel: "Synced",
+      iconClass: "bi-check-circle-fill",
+      colorClass: "text-success",
+      compactIcon: true,
+      disconnectedGroupsOverlay: disconnectedOverlay,
+      connectedGroupsOverlay: groupsOverlay,
+    },
+    stuckRecoveryCount,
+  );
 }
 
 function statusMarkBgClass(colorClass: string): string {
@@ -166,6 +198,9 @@ function statusMarkBgClass(colorClass: string): string {
   if (colorClass === "text-primary") {
     return "bg-primary";
   }
+  if (colorClass === "text-warning") {
+    return "bg-warning";
+  }
   return "bg-success";
 }
 
@@ -307,6 +342,24 @@ function ConnectedDevicesList({ loadState }: { loadState: ConnectionsLoadState }
   );
 }
 
+function StatusCountRow({
+  label,
+  value,
+  className,
+}: {
+  label: string;
+  value: number;
+  className?: string;
+}) {
+  const tone = className ? ` ${className}` : "";
+  return (
+    <>
+      <dt className={`col-7${tone}`}>{label}</dt>
+      <dd className={`col-5 text-end${tone}`}>{value}</dd>
+    </>
+  );
+}
+
 function NetworkStatusDetails({
   detailsId,
   status,
@@ -315,6 +368,7 @@ function NetworkStatusDetails({
   onUseInvite,
   onOpenIdentity,
   onOpenViewer,
+  onOpenRecovery,
 }: {
   detailsId: string;
   status?: INetworkStatusSummary;
@@ -323,6 +377,7 @@ function NetworkStatusDetails({
   onUseInvite: () => void;
   onOpenIdentity: () => void;
   onOpenViewer: () => void;
+  onOpenRecovery: () => void;
 }) {
   return (
     <div
@@ -360,16 +415,21 @@ function NetworkStatusDetails({
         ) : (
           <>
             <dl className="row small mb-2">
-              <dt className="col-7">Connections</dt>
-              <dd className="col-5 text-end">{status.connectionCount}</dd>
-              <dt className="col-7">Syncing contexts</dt>
-              <dd className="col-5 text-end">{status.syncingContextCount}</dd>
-              <dt className="col-7">Sync errors</dt>
-              <dd className="col-5 text-end">{status.errorCount}</dd>
-              <dt className="col-7">Groups connected</dt>
-              <dd className="col-5 text-end">{status.connectedContextCount}</dd>
-              <dt className="col-7">Groups offline</dt>
-              <dd className="col-5 text-end">{status.disconnectedContextCount}</dd>
+              <StatusCountRow label="Connections" value={status.connectionCount} />
+              <StatusCountRow label="Groups connected" value={status.connectedContextCount} />
+              {status.syncingContextCount > 0 && (
+                <StatusCountRow label="Syncing contexts" value={status.syncingContextCount} />
+              )}
+              {status.disconnectedContextCount > 0 && (
+                <StatusCountRow
+                  label="Groups offline"
+                  value={status.disconnectedContextCount}
+                  className="text-warning"
+                />
+              )}
+              {status.errorCount > 0 && (
+                <StatusCountRow label="Sync errors" value={status.errorCount} />
+              )}
               {status.lastSuccessfulSyncAt != null && (
                 <>
                   <dt className="col-7">Last sync</dt>
@@ -388,19 +448,31 @@ function NetworkStatusDetails({
                 {status.errors.length > 1 && ` (+${status.errors.length - 1} more)`}
               </div>
             )}
+            {status.stuckRecoveryCount > 0 && (
+              <div className="alert alert-warning py-2 px-2 small mb-2">
+                {status.stuckRecoveryCount === 1
+                  ? "1 record needs attention"
+                  : `${status.stuckRecoveryCount} records need attention`}
+              </div>
+            )}
             <div className="border-top pt-2 mt-1 mb-2">
-              <div className="small text-muted mb-1">Devices</div>
+              <div className="small text-muted mb-1">Connected Devices</div>
               <ConnectedDevicesList loadState={connectionsLoadState} />
             </div>
           </>
         )}
         <button
           type="button"
-          className="btn btn-sm btn-outline-primary w-100"
+          className={`btn btn-sm btn-outline-primary w-100${status && status.stuckRecoveryCount > 0 ? " mb-2" : ""}`}
           onClick={onOpenViewer}
         >
           Open Network Viewer
         </button>
+        {status && status.stuckRecoveryCount > 0 && (
+          <button type="button" className="btn btn-sm btn-warning w-100" onClick={onOpenRecovery}>
+            Sync recovery
+          </button>
+        )}
       </div>
     </div>
   );
@@ -592,6 +664,12 @@ export function NetworkStatusIndicator({ compact = false }: { compact?: boolean
           }}
           onOpenViewer={() => {
             setOpen(false);
+            networkViewerSection("main");
+            goToTabPath("network-viewer");
+          }}
+          onOpenRecovery={() => {
+            setOpen(false);
+            networkViewerSection("sync-recovery");
             goToTabPath("network-viewer");
           }}
         />

package/src/tabs-layout/use-network-status.test.tsx

@@ -25,6 +25,7 @@ function makeStatus(overrides: Partial<INetworkStatusSummary> = {}): INetworkSta
     errorCount: 0,
     disconnectedContextCount: 0,
     connectedContextCount: 0,
+    stuckRecoveryCount: 0,
     errors: [],
     ...overrides,
   };