fix: rtl common translation unnecessary (#1246)

* fix: rtl common translation unnecessary * fix: format issue
2026-02-26 16:30:57 +01:00 · 2024-10-05 16:31:15 +02:00
parent b14f82b4bb
commit 770768eb21
13 changed files with 40 additions and 95 deletions
--- a/apps/nextjs/src/app/[locale]/_client-providers/mantine.tsx
+++ b/apps/nextjs/src/app/[locale]/_client-providers/mantine.tsx
@@ -3,7 +3,7 @@
 import type { PropsWithChildren } from "react";
 import { useState } from "react";
 import type { MantineColorScheme, MantineColorSchemeManager } from "@mantine/core";
-import { createTheme, isMantineColorScheme, MantineProvider } from "@mantine/core";
+import { createTheme, DirectionProvider, isMantineColorScheme, MantineProvider } from "@mantine/core";
 import dayjs from "dayjs";

 import { clientApi } from "@homarr/api/client";
@@ -14,16 +14,18 @@ export const CustomMantineProvider = ({ children }: PropsWithChildren) => {
  const manager = useColorSchemeManager();

  return (
-    <MantineProvider
-      defaultColorScheme="auto"
-      colorSchemeManager={manager}
-      theme={createTheme({
-        primaryColor: "red",
-        autoContrast: true,
-      })}
-    >
-      {children}
-    </MantineProvider>
+    <DirectionProvider>
+      <MantineProvider
+        defaultColorScheme="auto"
+        colorSchemeManager={manager}
+        theme={createTheme({
+          primaryColor: "red",
+          autoContrast: true,
+        })}
+      >
+        {children}
+      </MantineProvider>
+    </DirectionProvider>
  );
 };

--- a/apps/nextjs/src/app/[locale]/layout.tsx
+++ b/apps/nextjs/src/app/[locale]/layout.tsx
@@ -12,6 +12,7 @@ import { env } from "@homarr/auth/env.mjs";
 import { auth } from "@homarr/auth/next";
 import { ModalProvider } from "@homarr/modals";
 import { Notifications } from "@homarr/notifications";
+import { getScopedI18n } from "@homarr/translation/server";

 import { Analytics } from "~/components/layout/analytics";
 import { SearchEngineOptimization } from "~/components/layout/search-engine-optimization";
@@ -56,6 +57,8 @@ export const viewport: Viewport = {
 export default async function Layout(props: { children: React.ReactNode; params: { locale: string } }) {
  const session = await auth();
  const colorScheme = cookies().get("homarr-color-scheme")?.value ?? "light";
+  const tCommon = await getScopedI18n("common");
+  const direction = tCommon("direction");

  const StackedProvider = composeWrappers([
    (innerProps) => {
@@ -70,7 +73,7 @@ export default async function Layout(props: { children: React.ReactNode; params:

  return (
    // Instead of ColorSchemScript we use data-mantine-color-scheme to prevent flickering
-    <html lang="en" data-mantine-color-scheme={colorScheme} suppressHydrationWarning>
+    <html lang="en" dir={direction} data-mantine-color-scheme={colorScheme} suppressHydrationWarning>
      <head>
        <Analytics />
        <SearchEngineOptimization />
--- a/apps/nextjs/src/app/[locale]/manage/search-engines/page.tsx
+++ b/apps/nextjs/src/app/[locale]/manage/search-engines/page.tsx
@@ -31,7 +31,6 @@ export default async function SearchEnginesPage(props: SearchEnginesPageProps) {
  const searchParams = searchParamsSchema.parse(props.searchParams);
  const { items: searchEngines, totalCount } = await api.searchEngine.getPaginated(searchParams);

-  const t = await getI18n();
  const tEngine = await getScopedI18n("search.engine");

  return (
@@ -40,13 +39,7 @@ export default async function SearchEnginesPage(props: SearchEnginesPageProps) {
      <Stack>
        <Title>{tEngine("page.list.title")}</Title>
        <Group justify="space-between" align="center">
-          <SearchInput
-            placeholder={t("common.rtl", {
-              value: tEngine("search"),
-              symbol: "...",
-            })}
-            defaultValue={searchParams.search}
-          />
+          <SearchInput placeholder={`${tEngine("search")}...`} defaultValue={searchParams.search} />
          <MobileAffixButton component={Link} href="/manage/search-engines/new">
            {tEngine("page.create.title")}
          </MobileAffixButton>
--- a/apps/nextjs/src/app/[locale]/manage/users/groups/[id]/members/page.tsx
+++ b/apps/nextjs/src/app/[locale]/manage/users/groups/[id]/members/page.tsx
@@ -48,13 +48,7 @@ export default async function GroupsDetailPage({ params, searchParams }: GroupsD
      )}

      <Group justify="space-between">
-        <SearchInput
-          placeholder={t("common.rtl", {
-            value: tMembers("search"),
-            symbol: "...",
-          })}
-          defaultValue={searchParams.search}
-        />
+        <SearchInput placeholder={`${tMembers("search")}...`} defaultValue={searchParams.search} />
        {isProviderEnabled("credentials") && (
          <AddGroupMember groupId={group.id} presentUserIds={group.members.map((member) => member.id)} />
        )}
--- a/apps/nextjs/src/app/[locale]/manage/users/groups/page.tsx
+++ b/apps/nextjs/src/app/[locale]/manage/users/groups/page.tsx
@@ -36,13 +36,7 @@ export default async function GroupsListPage(props: GroupsListPageProps) {
      <Stack>
        <Title>{t("group.title")}</Title>
        <Group justify="space-between">
-          <SearchInput
-            placeholder={t("common.rtl", {
-              value: t("group.search"),
-              symbol: "...",
-            })}
-            defaultValue={searchParams.search}
-          />
+          <SearchInput placeholder={`${t("group.search")}...`} defaultValue={searchParams.search} />
          <AddGroup />
        </Group>
        <Table striped highlightOnHover>
--- a/apps/nextjs/src/components/layout/header/search.tsx
+++ b/apps/nextjs/src/components/layout/header/search.tsx
@@ -21,10 +21,7 @@ export const DesktopSearchInput = () => {
      leftSection={<IconSearch size={20} stroke={1.5} />}
      onClick={openSpotlight}
    >
-      {t("common.rtl", {
-        value: t("search.placeholder"),
-        symbol: "...",
-      })}
+      {`${t("search.placeholder")}...`}
    </TextInput>
  );
 };
--- a/packages/spotlight/src/components/spotlight.tsx
+++ b/packages/spotlight/src/components/spotlight.tsx
@@ -51,10 +51,7 @@ export const Spotlight = () => {
      store={spotlightStore}
    >
      <MantineSpotlight.Search
-        placeholder={t("common.rtl", {
-          value: t("search.placeholder"),
-          symbol: "...",
-        })}
+        placeholder={`${t("search.placeholder")}...`}
        ref={inputRef}
        leftSectionWidth={activeMode.modeKey !== "help" ? 80 : 48}
        leftSection={
--- a/packages/translation/src/lang/en.ts
+++ b/packages/translation/src/lang/en.ts
@@ -527,10 +527,8 @@ export default {
    },
  },
  common: {
-    rtl: "{value}{symbol}",
-    symbols: {
-      colon: ": ",
-    },
+    // Either "ltr" or "rtl"
+    direction: "ltr",
    beta: "Beta",
    error: "Error",
    action: {
--- a/packages/widgets/src/app/component.tsx
+++ b/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}
--- a/packages/widgets/src/dns-hole/summary/component.tsx
+++ b/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">
--- a/packages/widgets/src/downloads/component.tsx
+++ b/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) => (
--- a/packages/widgets/src/media-requests/stats/component.tsx
+++ b/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} />
--- a/packages/widgets/src/weather/icon.tsx
+++ b/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>
  );
 };