@peers-app/peers-ui 0.26.2 → 0.26.4

package/dist/tabs-layout/network-status-indicator.d.ts

@@ -31,7 +31,10 @@ interface INetworkStatusPresentation {
         count: number;
         colorClass: "text-success" | "text-danger";
     };
-    /** Bottom-left yellow upgrade arrow when this device has an app update available. */
+    /**
+     * Yellow upgrade arrow on the lower-left corner of the status mark when this device
+     * has an app update available. Kept on the mark so it does not hang below the tab strip.
+     */
     updateAvailableOverlay?: boolean;
 }
 /** Convert host availability and network state into accessible indicator text and styling. */

package/dist/tabs-layout/network-status-indicator.js

@@ -352,12 +352,18 @@ function NetworkStatusIndicator({ compact = false }) {
                                     fontWeight: 700,
                                     right: "-0.28rem",
                                     bottom: "-0.32rem",
-                                }, "aria-hidden": "true", children: presentation.disconnectedGroupsOverlay.count })), presentation.updateAvailableOverlay && ((0, jsx_runtime_1.jsx)("i", { className: `network-status-update-badge bi ${app_update_controls_1.APP_UPDATE_ICON_CLASS} text-warning position-absolute`, style: {
-                                    fontSize: "0.5rem",
-                                    lineHeight: 1,
-                                    left: "-0.3rem",
-                                    bottom: "-0.32rem",
-                                }, "aria-hidden": "true" }))] }), !compact && ((0, jsx_runtime_1.jsxs)("span", { className: "small", children: [viewState.status?.connectionCount ?? 0, (0, jsx_runtime_1.jsx)("span", { className: "visually-hidden", children: " connections" })] }))] }), open && ((0, jsx_runtime_1.jsx)(NetworkStatusDetails, { detailsId: detailsId, status: viewState.status, appUpdate: appUpdate, unavailable: viewState.availability !== "ready", connectionsLoadState: connectionsLoadState, onUseInvite: () => {
+                                }, "aria-hidden": "true", children: presentation.disconnectedGroupsOverlay.count })), presentation.updateAvailableOverlay && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("i", { className: `network-status-update-badge bi ${app_update_controls_1.APP_UPDATE_ICON_CLASS} text-warning position-absolute`, style: {
+                                            fontSize: "0.5rem",
+                                            lineHeight: 1,
+                                            width: "0.5rem",
+                                            height: "0.5rem",
+                                            left: "-0.46rem",
+                                            bottom: "-0.08rem",
+                                        }, "aria-hidden": "true" }), (0, jsx_runtime_1.jsx)("style", { children: `
+                .network-status-update-badge.bi::before {
+                  vertical-align: 0;
+                }
+              ` })] }))] }), !compact && ((0, jsx_runtime_1.jsxs)("span", { className: "small", children: [viewState.status?.connectionCount ?? 0, (0, jsx_runtime_1.jsx)("span", { className: "visually-hidden", children: " connections" })] }))] }), open && ((0, jsx_runtime_1.jsx)(NetworkStatusDetails, { detailsId: detailsId, status: viewState.status, appUpdate: appUpdate, unavailable: viewState.availability !== "ready", connectionsLoadState: connectionsLoadState, onUseInvite: () => {
                     setOpen(false);
                     (0, tabs_state_1.goToTabPath)(identity_routes_1.IDENTITY_ACCEPT_PATH);
                 }, onOpenIdentity: () => {

package/dist/tabs-layout/network-status-indicator.test.js

@@ -362,7 +362,7 @@ describe("NetworkStatusIndicator", () => {
         view.rerender((0, jsx_runtime_1.jsx)(network_status_indicator_1.NetworkStatusIndicator, {}));
         const badge = view.container.querySelector(".network-status-update-badge");
         expect(badge).toHaveClass("bi-arrow-up-circle-fill", "text-warning");
-        expect(badge).toHaveStyle({ left: "-0.3rem", bottom: "-0.32rem" });
+        expect(badge).toHaveStyle({ left: "-0.46rem", bottom: "-0.08rem" });
         react_1.fireEvent.click(view.getByRole("button", { name: /Version 1\.1\.0 is ready to install/ }));
         const section = view.getByTestId("app-update-section");
         expect(section).toHaveTextContent("Installs automatically the next time Peers restarts");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@peers-app/peers-ui",
-  "version": "0.26.2",
+  "version": "0.26.4",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/peers-app/peers-ui.git"
@@ -30,7 +30,7 @@
     "lint:fix": "biome check --write ."
   },
   "peerDependencies": {
-    "@peers-app/peers-sdk": "^0.26.2",
+    "@peers-app/peers-sdk": "^0.26.4",
     "bootstrap": "^5.3.3",
     "react": "^18.0.0",
     "react-dom": "^18.0.0"
@@ -41,7 +41,7 @@
     "@babel/preset-react": "^7.24.1",
     "@babel/preset-typescript": "^7.27.1",
     "@biomejs/biome": "2.3.11",
-    "@peers-app/peers-sdk": "0.26.2",
+    "@peers-app/peers-sdk": "0.26.4",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.3.0",

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

@@ -454,7 +454,7 @@ describe("NetworkStatusIndicator", () => {
     view.rerender(<NetworkStatusIndicator />);
     const badge = view.container.querySelector(".network-status-update-badge");
     expect(badge).toHaveClass("bi-arrow-up-circle-fill", "text-warning");
-    expect(badge).toHaveStyle({ left: "-0.3rem", bottom: "-0.32rem" });
+    expect(badge).toHaveStyle({ left: "-0.46rem", bottom: "-0.08rem" });
 
     fireEvent.click(view.getByRole("button", { name: /Version 1\.1\.0 is ready to install/ }));
     const section = view.getByTestId("app-update-section");

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

@@ -57,7 +57,10 @@ 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. */
+  /**
+   * Yellow upgrade arrow on the lower-left corner of the status mark when this device
+   * has an app update available. Kept on the mark so it does not hang below the tab strip.
+   */
   updateAvailableOverlay?: boolean;
 }
 
@@ -679,16 +682,26 @@ export function NetworkStatusIndicator({ compact = false }: { compact?: boolean
             </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"
-            />
+            <>
+              <i
+                className={`network-status-update-badge bi ${APP_UPDATE_ICON_CLASS} text-warning position-absolute`}
+                style={{
+                  fontSize: "0.5rem",
+                  lineHeight: 1,
+                  width: "0.5rem",
+                  height: "0.5rem",
+                  left: "-0.46rem",
+                  bottom: "-0.08rem",
+                }}
+                aria-hidden="true"
+              />
+              {/* Bootstrap Icons shift the glyph below the em box; keep it inside this badge. */}
+              <style>{`
+                .network-status-update-badge.bi::before {
+                  vertical-align: 0;
+                }
+              `}</style>
+            </>
           )}
         </span>
         {!compact && (