fix: rtl common translation unnecessary (#1246)

* fix: rtl common translation unnecessary * fix: format issue
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>
  );
 };