fix: Format view count correctly on shared links table

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<React.ComponentProps<typeof TableFromParams>, "columns"> & {
   data: Share[];
@@ -16,7 +18,7 @@ type Props = Omit<React.ComponentProps<typeof TableFromParams>, "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 <TableFromParams columns={columns} data={data} {...rest} />;

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.
  *