diff --git a/app/scenes/Settings/components/SharesTable.tsx b/app/scenes/Settings/components/SharesTable.tsx index 66add0a2f..652bc1276 100644 --- a/app/scenes/Settings/components/SharesTable.tsx +++ b/app/scenes/Settings/components/SharesTable.tsx @@ -1,13 +1,15 @@ import { observer } from "mobx-react"; import * as React from "react"; import { useTranslation } from "react-i18next"; -import { useTheme } from "styled-components"; +import { unicodeCLDRtoBCP47 } from "@shared/utils/date"; import Share from "~/models/Share"; import Avatar from "~/components/Avatar"; import Flex from "~/components/Flex"; import TableFromParams from "~/components/TableFromParams"; import Time from "~/components/Time"; +import useUserLocale from "~/hooks/useUserLocale"; import ShareMenu from "~/menus/ShareMenu"; +import { formatNumber } from "~/utils/language"; type Props = Omit, "columns"> & { data: Share[]; @@ -16,7 +18,7 @@ type Props = Omit, "columns"> & { function SharesTable({ canManage, data, ...rest }: Props) { const { t } = useTranslation(); - const theme = useTheme(); + const language = useUserLocale(); const hasDomain = data.some((share) => share.domain); const columns = React.useMemo( @@ -73,6 +75,13 @@ function SharesTable({ canManage, data, ...rest }: Props) { id: "views", Header: t("Views"), accessor: "views", + Cell: observer(({ value }: { value: number }) => ( + <> + {language + ? formatNumber(value, unicodeCLDRtoBCP47(language)) + : value} + + )), }, canManage ? { @@ -90,7 +99,7 @@ function SharesTable({ canManage, data, ...rest }: Props) { } : undefined, ].filter((i) => i), - [t, theme.accent, hasDomain, canManage] + [t, hasDomain, canManage] ); return ; diff --git a/app/utils/language.ts b/app/utils/language.ts index 5c42a052a..90ae572dd 100644 --- a/app/utils/language.ts +++ b/app/utils/language.ts @@ -2,6 +2,21 @@ import { i18n } from "i18next"; import { unicodeCLDRtoBCP47 } from "@shared/utils/date"; import Desktop from "./Desktop"; +/** + * Formats a number using the user's locale where possible. + * + * @param number The number to format + * @param locale The locale to use for formatting (BCP47 format) + * @returns The formatted number as a string + */ +export function formatNumber(number: number, locale: string) { + try { + return new Intl.NumberFormat(locale).format(number); + } catch (e) { + return number.toString(); + } +} + /** * Detects the user's language based on the browser's language settings. *