diff --git a/frontend/locales/en.json b/frontend/locales/en.json index 687f51ab1..63525633b 100644 --- a/frontend/locales/en.json +++ b/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": { diff --git a/frontend/src/routes/_account.sessions.index.tsx b/frontend/src/routes/_account.sessions.index.tsx index e9863db63..b59b0bbbf 100644 --- a/frontend/src/routes/_account.sessions.index.tsx +++ b/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 = ( -