@peers-app/peers-ui 0.26.0 → 0.26.2

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

@@ -1,6 +1,13 @@
-import type { INetworkConnectionInfo, INetworkStatusSummary } from "@peers-app/peers-sdk";
+import type {
+  IAppUpdateStatus,
+  INetworkConnectionInfo,
+  INetworkStatusSummary,
+} from "@peers-app/peers-sdk";
 import moment from "moment";
 import { useEffect, useId, useRef, useState } from "react";
+import { APP_UPDATE_ICON_CLASS, AppUpdatePopoverSection } from "../app-updates/app-update-controls";
+import { describeAppUpdateStatus, hasAppUpdate } from "../app-updates/app-updates-consumer";
+import { useAppUpdateStatus } from "../app-updates/use-app-update-status";
 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";
@@ -50,6 +57,8 @@ interface INetworkStatusPresentation {
    * Green when > 0; red zero when connected devices exist but no groups are live.
    */
   connectedGroupsOverlay?: { count: number; colorClass: "text-success" | "text-danger" };
+  /** Bottom-left yellow upgrade arrow when this device has an app update available. */
+  updateAvailableOverlay?: boolean;
 }
 
 function disconnectedLabelSuffix(disconnectedContextCount: number): string {
@@ -191,6 +200,28 @@ export function getNetworkStatusPresentation(
   );
 }
 
+/**
+ * Add the app-update badge and label to a network status presentation. Applies in every
+ * network state, offline included, because installing does not depend on connectivity.
+ *
+ * @param presentation - Presentation from {@link getNetworkStatusPresentation}.
+ * @param appUpdate - This device's update status, if known.
+ * @returns The presentation, with `updateAvailableOverlay` when an update is available.
+ */
+export function withAppUpdate(
+  presentation: INetworkStatusPresentation,
+  appUpdate: IAppUpdateStatus | undefined,
+): INetworkStatusPresentation {
+  if (!appUpdate?.supported || !hasAppUpdate(appUpdate)) {
+    return presentation;
+  }
+  return {
+    ...presentation,
+    label: `${presentation.label}; ${describeAppUpdateStatus(appUpdate)}`,
+    updateAvailableOverlay: true,
+  };
+}
+
 function statusMarkBgClass(colorClass: string): string {
   if (colorClass === "text-danger") {
     return "bg-danger";
@@ -363,6 +394,7 @@ function StatusCountRow({
 function NetworkStatusDetails({
   detailsId,
   status,
+  appUpdate,
   unavailable,
   connectionsLoadState,
   onUseInvite,
@@ -372,6 +404,7 @@ function NetworkStatusDetails({
 }: {
   detailsId: string;
   status?: INetworkStatusSummary;
+  appUpdate?: IAppUpdateStatus;
   unavailable: boolean;
   connectionsLoadState: ConnectionsLoadState;
   onUseInvite: () => void;
@@ -406,6 +439,7 @@ function NetworkStatusDetails({
             Identity
           </button>
         </div>
+        <AppUpdatePopoverSection status={appUpdate} />
         <h6 className="card-title mb-2">Network status</h6>
         {unavailable || !status ? (
           <p className="small text-muted mb-3">
@@ -481,6 +515,7 @@ function NetworkStatusDetails({
 /** Accessible reactive network status button and details popover. */
 export function NetworkStatusIndicator({ compact = false }: { compact?: boolean }) {
   const viewState = useNetworkStatus();
+  const appUpdate = useAppUpdateStatus();
   const [displaySyncing, setDisplaySyncing] = useState(false);
   const [syncingLongerThanGreenMs, setSyncingLongerThanGreenMs] = useState(false);
   const [open, setOpen] = useState(false);
@@ -553,10 +588,13 @@ export function NetworkStatusIndicator({ compact = false }: { compact?: boolean
   }, [open, diagnosticsReady, connectionCount]);
 
   const holdSyncingVisual = displaySyncing && !rawIsSyncing;
-  const presentation = getNetworkStatusPresentation(viewState, {
-    syncingLongerThanGreenMs,
-    holdSyncingVisual,
-  });
+  const presentation = withAppUpdate(
+    getNetworkStatusPresentation(viewState, {
+      syncingLongerThanGreenMs,
+      holdSyncingVisual,
+    }),
+    appUpdate,
+  );
 
   useEffect(() => {
     if (!open) {
@@ -640,6 +678,18 @@ export function NetworkStatusIndicator({ compact = false }: { compact?: boolean
               {presentation.disconnectedGroupsOverlay.count}
             </span>
           )}
+          {presentation.updateAvailableOverlay && (
+            <i
+              className={`network-status-update-badge bi ${APP_UPDATE_ICON_CLASS} text-warning position-absolute`}
+              style={{
+                fontSize: "0.5rem",
+                lineHeight: 1,
+                left: "-0.3rem",
+                bottom: "-0.32rem",
+              }}
+              aria-hidden="true"
+            />
+          )}
         </span>
         {!compact && (
           <span className="small">
@@ -652,6 +702,7 @@ export function NetworkStatusIndicator({ compact = false }: { compact?: boolean
         <NetworkStatusDetails
           detailsId={detailsId}
           status={viewState.status}
+          appUpdate={appUpdate}
           unavailable={viewState.availability !== "ready"}
           connectionsLoadState={connectionsLoadState}
           onUseInvite={() => {