fix: rtl common translation unnecessary (#1246)

* fix: rtl common translation unnecessary

* fix: format issue

packages/widgets/src/app/component.tsx

@@ -59,11 +59,7 @@ export default function AppWidget({ options, isEditMode }: WidgetComponentProps<
         </Flex>
       </Tooltip.Floating>
       {options.pingEnabled && app.href ? (
-        <Suspense
-          fallback={
-            <PingDot color="blue" tooltip={t("common.rtl", { symbol: "…", value: t("common.action.loading") })} />
-          }
-        >
+        <Suspense fallback={<PingDot color="blue" tooltip={`${t("common.action.loading")}…`} />}>
           <PingIndicator href={app.href} />
         </Suspense>
       ) : null}

packages/widgets/src/dns-hole/summary/component.tsx

@@ -100,14 +100,11 @@ const stats = [
   },
   {
     icon: IconPercentage,
-    value: (data, t) =>
-      t("common.rtl", {
-        value: formatNumber(
-          data.reduce((count, { adsBlockedTodayPercentage }) => count + adsBlockedTodayPercentage, 0),
-          2,
-        ),
-        symbol: "%",
-      }),
+    value: (data) =>
+      `${formatNumber(
+        data.reduce((count, { adsBlockedTodayPercentage }) => count + adsBlockedTodayPercentage, 0),
+        2,
+      )}%`,
     label: (t) => t("widget.dnsHoleSummary.data.adsBlockedTodayPercentage"),
     color: "rgba(255, 165, 20, 0.4)", // YELLOW
   },
@@ -135,7 +132,7 @@ const stats = [
 
 interface StatItem {
   icon: TablerIcon;
-  value: (x: DnsHoleSummary[], t: TranslationFunction) => string;
+  value: (x: DnsHoleSummary[]) => string;
   label: stringOrTranslation;
   color: string;
 }
@@ -184,14 +181,14 @@ const StatCard = ({ item, data, usePiHoleColors, t }: StatCardProps) => {
           gap="1cqmin"
         >
           <Text
-            key={item.value(data, t)}
+            key={item.value(data)}
             className="summary-card-value text-flash"
             ta="center"
             size="20cqmin"
             fw="bold"
             style={{ "--glow-size": "2.5cqmin" }}
           >
-            {item.value(data, t)}
+            {item.value(data)}
           </Text>
           {item.label && (
             <Text className="summary-card-label" ta="center" size="15cqmin">

packages/widgets/src/downloads/component.tsx

@@ -641,8 +641,6 @@ export default function DownloadClientsWidget({
     },
   });
 
-  const isLangRtl = tCommon("rtl", { value: "0", symbol: "1" }).startsWith("1");
-
   //Used for Global Torrent Ratio
   const globalTraffic = clients
     .filter(({ integration: { kind } }) =>
@@ -676,13 +674,12 @@ export default function DownloadClientsWidget({
         px="var(--space-size)"
         justify={integrationTypes.includes("torrent") ? "space-between" : "end"}
         style={{
-          flexDirection: isLangRtl ? "row-reverse" : "row",
           borderTop: "0.0625rem solid var(--border-color)",
         }}
       >
         {integrationTypes.includes("torrent") && (
-          <Group pt="var(--space-size)" style={{ flexDirection: isLangRtl ? "row-reverse" : "row" }}>
-            <Text>{tCommon("rtl", { value: t("globalRatio"), symbol: tCommon("symbols.colon") })}</Text>
+          <Group pt="var(--space-size)">
+            <Text>{`${t("globalRatio")}:`}</Text>
             <Text>{(globalTraffic.up / globalTraffic.down).toFixed(2)}</Text>
           </Group>
         )}
@@ -758,21 +755,10 @@ const NormalizedLine = ({
   values?: number | string | string[];
 }) => {
   const t = useScopedI18n("widget.downloads.items");
-  const tCommon = useScopedI18n("common");
-  const translatedKey = t(`${itemKey}.detailsTitle`);
-  const isLangRtl = tCommon("rtl", { value: "0", symbol: "1" }).startsWith("1"); //Maybe make a common "isLangRtl" somewhere
-  const keyString = tCommon("rtl", { value: translatedKey, symbol: tCommon("symbols.colon") });
   if (typeof values !== "number" && (values === undefined || values.length === 0)) return null;
   return (
-    <Group
-      w="100%"
-      display="flex"
-      style={{ flexDirection: isLangRtl ? "row-reverse" : "row" }}
-      align="top"
-      justify="space-between"
-      wrap="nowrap"
-    >
-      <Text>{keyString}</Text>
+    <Group w="100%" display="flex" align="top" justify="space-between" wrap="nowrap">
+      <Text>{`${t(`${itemKey}.detailsTitle`)}:`}</Text>
       {Array.isArray(values) ? (
         <Stack>
           {values.map((value) => (

packages/widgets/src/media-requests/stats/component.tsx

@@ -31,7 +31,6 @@ export default function MediaServerWidget({
   itemId,
 }: WidgetComponentProps<"mediaRequests-requestStats">) {
   const t = useScopedI18n("widget.mediaRequests-requestStats");
-  const tCommon = useScopedI18n("common");
   const isQueryEnabled = Boolean(itemId);
   const { data: requestStats, isError: _isError } = clientApi.widget.mediaRequests.getStats.useQuery(
     {
@@ -188,8 +187,7 @@ export default function MediaServerWidget({
                   {user.displayName}
                 </Text>
                 <Text className="mediaRequests-stats-users-user-request-count" size="4cqmin">
-                  {tCommon("rtl", { value: t("titles.users.requests"), symbol: tCommon("symbols.colon") }) +
-                    user.requestCount}
+                  {`${t("titles.users.requests")}: ${user.requestCount}`}
                 </Text>
               </Stack>
               <Space flex={1} />

packages/widgets/src/weather/icon.tsx

@@ -62,18 +62,8 @@ export const WeatherDescription = ({ weatherOnly, time, weatherCode, maxTemp, mi
     <Stack align="center" gap="0">
       <Text fz="24px">{dayjs(time).format("dddd MMMM D YYYY")}</Text>
       <Text fz="16px">{t(`kind.${name}`)}</Text>
-      <Text fz="16px">
-        {tCommon("rtl", {
-          value: tCommon("information.max"),
-          symbol: tCommon("symbols.colon"),
-        }) + maxTemp}
-      </Text>
-      <Text fz="16px">
-        {tCommon("rtl", {
-          value: tCommon("information.min"),
-          symbol: tCommon("symbols.colon"),
-        }) + minTemp}
-      </Text>
+      <Text fz="16px">{`${tCommon("information.max")}: ${maxTemp}`}</Text>
+      <Text fz="16px">{`${tCommon("information.min")}: ${minTemp}`}</Text>
     </Stack>
   );
 };