Add session limit info icon

frontend/locales/en.json

@@ -123,6 +123,7 @@
     },
     "nav": {
       "devices": "Devices",
+      "device_limit_error": "Device limit reached",
       "plan": "Plan",
       "settings": "Settings"
     },
@@ -295,7 +296,8 @@
         "inactive_90_days": "All your sessions have been active in the last 90 days."
       },
       "num_devices_filtered_header": "{{filtered_count}} devices match your filter ({{total_count}} total)",
-      "num_devices_header": "{{num_devices}} devices"
+      "num_devices_header": "{{num_devices}} devices",
+      "session_limit_info": "Limit: {{limit}} devices max"
     },
     "verify_email": {
       "code_expired_alert": {

frontend/src/routes/_account.sessions.index.tsx

@@ -6,7 +6,8 @@
 
 import { queryOptions, useSuspenseQuery } from "@tanstack/react-query";
 import { notFound } from "@tanstack/react-router";
-import { H3, H4 } from "@vector-im/compound-web";
+import { H3, H4, Tooltip } from "@vector-im/compound-web";
+import IconInfo from "@vector-im/compound-design-tokens/assets/web/icons/info";
 import { useTranslation } from "react-i18next";
 import * as v from "valibot";
 import { ButtonLink } from "../components/ButtonLink";
@@ -186,11 +187,21 @@ function Sessions(): React.ReactElement {
     );
   }
 
-  // TODO
-  let todoSessionLimit = null;
+  // Include a little info icon explaining the session limit (if there is one) (best to
+  // be transparent)
+  let sessionLimitInfo = null;
   if (sessionLimit) {
-    todoSessionLimit = (
-      <div>TODO: Limited to {sessionLimit.softLimit} devices</div>
+    const sessionLimitInfoText = t(
+      "frontend.user_sessions_overview.session_limit_info",
+      {
+        limit: sessionLimit.softLimit,
+        total_count: overviewViewer.unfilteredAppSessions.totalCount,
+      });
+
+    sessionLimitInfo = (
+      <Tooltip label={sessionLimitInfoText}>
+        <IconInfo />
+      </Tooltip>
     );
   }
 
@@ -199,8 +210,10 @@ function Sessions(): React.ReactElement {
       <H3>{t("frontend.user_sessions_overview.heading")}</H3>
       <BrowserSessionsOverview user={overviewViewer} />
 
-      <H4>{deviceHeaderText}</H4>
-      {todoSessionLimit}
+      <H4 className="flex gap-1 items-center">
+        {deviceHeaderText}
+        {sessionLimitInfo}
+      </H4>
       <Separator kind="section" />
       <div className="flex gap-2 justify-start items-center">
         <Filter

frontend/src/routes/_account.tsx

@@ -7,7 +7,7 @@
 import { queryOptions, useSuspenseQuery } from "@tanstack/react-query";
 import { notFound, Outlet } from "@tanstack/react-router";
 import IconErrorSolid from "@vector-im/compound-design-tokens/assets/web/icons/error-solid";
-import { Heading } from "@vector-im/compound-web";
+import { Heading, Tooltip } from "@vector-im/compound-web";
 import { useTranslation } from "react-i18next";
 import Layout from "../components/Layout";
 import NavBar from "../components/NavBar";
@@ -70,7 +70,9 @@ function Account(): React.ReactElement {
             <NavItem to="/">{t("frontend.nav.settings")}</NavItem>
             <NavItem to="/sessions">
               {t("frontend.nav.devices")}{" "}
-              <IconErrorSolid className={styles.navBarErrorIcon} />
+              <Tooltip label={t("frontend.nav.device_limit_error")}>
+                <IconErrorSolid className={styles.navBarErrorIcon} />
+              </Tooltip>
             </NavItem>
             {planManagementIframeUri && (
               <NavItem to="/plan">{t("frontend.nav.plan")}</NavItem>