feat: modernize widget experience

packages/widgets/src/_inputs/widget-location-input.tsx

@@ -21,8 +21,9 @@ import { IconClick, IconListSearch } from "@tabler/icons-react";
 import type { RouterOutputs } from "@homarr/api";
 import { clientApi } from "@homarr/api/client";
 import { createModal, useModalAction } from "@homarr/modals";
-import { useScopedI18n } from "@homarr/translation/client";
+import { useCurrentIntlLocale, useScopedI18n } from "@homarr/translation/client";
 
+import { formatLocalizedCompactNumber } from "../common/locale";
 import type { OptionLocation } from "../options";
 import type { CommonWidgetInputProps } from "./common";
 import { useWidgetInputTranslation } from "./common";
@@ -128,7 +129,7 @@ const LocationSearchModal = createModal<LocationSearchInnerProps>(({ actions, in
   if (error) {
     return (
       <Alert title={tCommon("error")} color="red">
-        {error.message}
+        {tCommon("action.tryAgain")}
       </Alert>
     );
   }
@@ -187,6 +188,7 @@ interface LocationSearchTableRowProps {
 
 const LocationSelectTableRow = ({ city, onLocationSelect, closeModal }: LocationSearchTableRowProps) => {
   const t = useScopedI18n("widget.common.location.table");
+  const locale = useCurrentIntlLocale();
   const onSelect = useCallback(() => {
     onLocationSelect({
       name: city.name,
@@ -196,8 +198,6 @@ const LocationSelectTableRow = ({ city, onLocationSelect, closeModal }: Location
     closeModal();
   }, [city, onLocationSelect, closeModal]);
 
-  const formatter = Intl.NumberFormat("en", { notation: "compact" });
-
   return (
     <Table.Tr>
       <Table.Td>
@@ -215,7 +215,7 @@ const LocationSelectTableRow = ({ city, onLocationSelect, closeModal }: Location
       </Table.Td>
       <Table.Td>
         {city.population ? (
-          <Text style={{ whiteSpace: "nowrap" }}>{formatter.format(city.population)}</Text>
+          <Text style={{ whiteSpace: "nowrap" }}>{formatLocalizedCompactNumber(city.population, locale)}</Text>
         ) : (
           <Text c="gray"> {t("population.fallback")}</Text>
         )}

packages/widgets/src/_inputs/widget-multiReleasesRepositories-input.tsx

@@ -271,19 +271,19 @@ const ProviderTokensSection = ({ itemId, repositories }: { itemId: string; repos
   const { data: configuredKinds = [], refetch } = clientApi.widget.secrets.getConfiguredKinds.useQuery({ itemId });
   const setSecret = clientApi.widget.secrets.setSecret.useMutation({
     onSuccess: () => refetch(),
-    onError: (error) => {
+    onError: () => {
       showErrorNotification({
-        title: "Failed to save token",
-        message: error.message,
+        title: tRepository("tokens.label"),
+        message: tRepository("tokens.notConfigured"),
       });
     },
   });
   const deleteSecret = clientApi.widget.secrets.deleteSecret.useMutation({
     onSuccess: () => refetch(),
-    onError: (error) => {
+    onError: () => {
       showErrorNotification({
-        title: "Failed to delete token",
-        message: error.message,
+        title: tRepository("tokens.label"),
+        message: tRepository("tokens.notConfigured"),
       });
     },
   });