fix: add rtl compliance for symbols #366 (#406)

apps/nextjs/src/app/[locale]/manage/users/groups/[id]/members/page.tsx

@@ -14,7 +14,7 @@ import {
 
 import type { RouterOutputs } from "@homarr/api";
 import { api } from "@homarr/api/server";
-import { getScopedI18n } from "@homarr/translation/server";
+import { getI18n, getScopedI18n } from "@homarr/translation/server";
 import { SearchInput, UserAvatar } from "@homarr/ui";
 
 import { AddGroupMember } from "./_add-group-member";
@@ -33,6 +33,7 @@ export default async function GroupsDetailPage({
   params,
   searchParams,
 }: GroupsDetailPageProps) {
+  const t = await getI18n();
   const tMembers = await getScopedI18n("management.page.group.setting.members");
   const group = await api.group.getById({ id: params.id });
 
@@ -49,7 +50,10 @@ export default async function GroupsDetailPage({
       <Title>{tMembers("title")}</Title>
       <Group justify="space-between">
         <SearchInput
-          placeholder={`${tMembers("search")}...`}
+          placeholder={t("common.rtl", {
+            value: tMembers("search"),
+            symbol: "...",
+          })}
           defaultValue={searchParams.search}
         />
         <AddGroupMember

apps/nextjs/src/app/[locale]/manage/users/groups/page.tsx

@@ -53,7 +53,10 @@ export default async function GroupsListPage(props: GroupsListPageProps) {
         <Title>{t("group.title")}</Title>
         <Group justify="space-between">
           <SearchInput
-            placeholder={`${t("group.search")}...`}
+            placeholder={t("common.rtl", {
+              value: t("group.search"),
+              symbol: "...",
+            })}
             defaultValue={searchParams.search}
           />
           <AddGroup />

packages/spotlight/src/component.tsx

@@ -100,7 +100,10 @@ export const Spotlight = () => {
       store={spotlightStore}
     >
       <MantineSpotlight.Search
-        placeholder={t("common.search.placeholder")}
+        placeholder={t("common.rtl", {
+          value: t("common.search.placeholder"),
+          symbol: "...",
+        })}
         leftSection={<IconSearch stroke={1.5} />}
       />
 

packages/translation/src/lang/de.ts

@@ -144,6 +144,7 @@ export default {
     },
   },
   common: {
+    rtl: "{value}{symbol}",
     action: {
       backToOverview: "Zurück zur Übersicht",
       create: "Erstellen",
@@ -157,7 +158,7 @@ export default {
     },
     noResults: "Keine Ergebnisse gefunden",
     search: {
-      placeholder: "Suche nach etwas...",
+      placeholder: "Suche nach etwas",
       nothingFound: "Nichts gefunden",
     },
   },

packages/translation/src/lang/en.ts

@@ -337,6 +337,7 @@ export default {
     },
   },
   common: {
+    rtl: "{value}{symbol}",
     action: {
       add: "Add",
       apply: "Apply",
@@ -383,7 +384,7 @@ export default {
       },
     },
     search: {
-      placeholder: "Search for anything...",
+      placeholder: "Search for anything",
       nothingFound: "Nothing found",
       group: {
         all: "All",