@messagevisor/catalog 0.2.0 → 0.4.0

package/src/node/index.ts

@@ -222,6 +222,7 @@ export interface CatalogExportOptions {
   browserRouter?: boolean;
   dev?: boolean;
   devEditors?: CatalogDevEditor[];
+  withTranslationSearch?: boolean;
 }
 
 export interface CatalogServeOptions {
@@ -245,6 +246,7 @@ interface CatalogBuildContext {
   runtime: CatalogRuntime;
   devEditors: CatalogDevEditor[];
   duplicateResultsBySet: Record<string, CatalogDuplicateTranslationsSetResult>;
+  withTranslationSearch: boolean;
 }
 
 interface SourceFileInfo {
@@ -1463,16 +1465,18 @@ async function buildSetCatalog(
     }
     const overrideLocalesList = sortStrings(Array.from(overrideLocalesSet));
 
-    // Build translation shards (direct + inherited + override, all locales combined)
-    for (const localeKey of localeKeys) {
-      const row = resolveTranslationRow(message.translations, localeKey, locales);
-      if (row.source !== "missing" && row.value) {
-        addToTranslationShard(messageKey, row.value);
-      }
-      for (const override of overrides) {
-        const overrideRow = resolveTranslationRow(override.translations, localeKey, locales);
-        if (overrideRow.source !== "missing" && overrideRow.value) {
-          addToTranslationShard(messageKey, overrideRow.value);
+    if (context.withTranslationSearch) {
+      // Build translation shards (direct + inherited + override, all locales combined)
+      for (const localeKey of localeKeys) {
+        const row = resolveTranslationRow(message.translations, localeKey, locales);
+        if (row.source !== "missing" && row.value) {
+          addToTranslationShard(messageKey, row.value);
+        }
+        for (const override of overrides) {
+          const overrideRow = resolveTranslationRow(override.translations, localeKey, locales);
+          if (overrideRow.source !== "missing" && overrideRow.value) {
+            addToTranslationShard(messageKey, overrideRow.value);
+          }
         }
       }
     }
@@ -1494,12 +1498,14 @@ async function buildSetCatalog(
     );
   }
 
-  for (const [prefix, messageMap] of Object.entries(translationShards)) {
-    const shardData: Record<string, string[]> = {};
-    for (const [msgKey, valueSet] of Object.entries(messageMap)) {
-      shardData[msgKey] = Array.from(valueSet);
+  if (context.withTranslationSearch) {
+    for (const [prefix, messageMap] of Object.entries(translationShards)) {
+      const shardData: Record<string, string[]> = {};
+      for (const [msgKey, valueSet] of Object.entries(messageMap)) {
+        shardData[msgKey] = Array.from(valueSet);
+      }
+      await writeJson(path.join(outputDirectoryPath, "translations", `${prefix}.json`), shardData);
     }
-    await writeJson(path.join(outputDirectoryPath, "translations", `${prefix}.json`), shardData);
   }
 
   for (const attributeKey of attributeKeys) {
@@ -1678,6 +1684,7 @@ export async function exportCatalog(
     ? path.resolve(rootDirectoryPath, options.outDir)
     : projectConfig.catalogDirectoryPath;
   const dataDirectoryPath = path.join(outputDirectoryPath, "data");
+  const withTranslationSearch = options.withTranslationSearch === true;
 
   await fs.promises.rm(outputDirectoryPath, { recursive: true, force: true });
   await fs.promises.mkdir(dataDirectoryPath, { recursive: true });
@@ -1701,6 +1708,7 @@ export async function exportCatalog(
     runtime,
     devEditors,
     duplicateResultsBySet,
+    withTranslationSearch,
   };
   const executions = await runtime.getProjectSetExecutions(projectConfig, datasource);
   const setIndexes: Record<string, CatalogSetIndex> = {};
@@ -1725,6 +1733,9 @@ export async function exportCatalog(
     sets: projectConfig.sets,
     setKeys: projectConfig.sets ? executions.map((execution) => execution.set) : [],
     dev: options.dev ? { editors: devEditors } : undefined,
+    features: {
+      translationSearch: withTranslationSearch,
+    },
     links: getRepoLinks(rootDirectoryPath),
     paths: {
       projectHistory: "data/project/history/page-1.json",
@@ -2017,6 +2028,10 @@ export function createCatalogApi(runtime: CatalogRuntime) {
   };
 }
 
+function isWithTranslationSearchEnabled(parsed: CatalogPluginParsedOptions) {
+  return parsed.withTranslationSearch === true || parsed["with-translation-search"] === true;
+}
+
 export function createCatalogPlugin(
   runtime: CatalogRuntime,
   api: ReturnType<typeof createCatalogApi> = createCatalogApi(runtime),
@@ -2026,6 +2041,7 @@ export function createCatalogPlugin(
     handler: async ({ rootDirectoryPath, projectConfig, datasource, parsed }) => {
       const allowedSubcommands = ["export", "serve"];
       const browserRouter = !(parsed.hashRouter || parsed["hash-router"]);
+      const withTranslationSearch = isWithTranslationSearchEnabled(parsed);
 
       if (!parsed.subcommand) {
         await api.exportCatalog(rootDirectoryPath, projectConfig, datasource, {
@@ -2033,6 +2049,7 @@ export function createCatalogPlugin(
           copyAssets: !parsed.noAssets,
           browserRouter,
           dev: true,
+          withTranslationSearch,
         });
         const server = await api.serveCatalog(rootDirectoryPath, projectConfig, datasource, {
           outDir: parsed.outDir,
@@ -2075,6 +2092,7 @@ export function createCatalogPlugin(
               copyAssets: !parsed.noAssets,
               browserRouter,
               dev: true,
+              withTranslationSearch,
             });
             server.triggerReload();
           } catch (error) {
@@ -2122,6 +2140,7 @@ export function createCatalogPlugin(
           outDir: parsed.outDir,
           copyAssets: !parsed.noAssets,
           browserRouter,
+          withTranslationSearch,
         });
       }
 

package/src/pages/EntityDetailPage.spec.ts

@@ -0,0 +1,48 @@
+import type { DuplicateTranslationValue } from "../types";
+import { sortDuplicateValues } from "../utils/duplicateSorting";
+
+function duplicate(value: string, count: number): DuplicateTranslationValue {
+  const messageKeys = Array.from({ length: count }, (_, index) => `message.${index + 1}`);
+
+  return {
+    value,
+    messageKeys,
+    sources: messageKeys.map((messageKey) => ({ messageKey, locale: "en" })),
+  };
+}
+
+describe("Locale duplicate sorting", function () {
+  it("sorts by message count descending by default", function () {
+    const sorted = sortDuplicateValues(
+      [duplicate("two", 2), duplicate("four", 4), duplicate("three", 3)],
+      { column: "messages", direction: "desc" },
+    );
+
+    expect(sorted.map((item) => item.value)).toEqual(["four", "three", "two"]);
+  });
+
+  it("sorts duplicate values alphabetically", function () {
+    const sorted = sortDuplicateValues(
+      [duplicate("Banana", 2), duplicate("Apple", 3), duplicate("Cherry", 2)],
+      { column: "value", direction: "asc" },
+    );
+
+    expect(sorted.map((item) => item.value)).toEqual(["Apple", "Banana", "Cherry"]);
+  });
+
+  it("can reverse both sortable columns", function () {
+    expect(
+      sortDuplicateValues([duplicate("two", 2), duplicate("four", 4)], {
+        column: "messages",
+        direction: "asc",
+      }).map((item) => item.value),
+    ).toEqual(["two", "four"]);
+
+    expect(
+      sortDuplicateValues([duplicate("Apple", 2), duplicate("Banana", 2)], {
+        column: "value",
+        direction: "desc",
+      }).map((item) => item.value),
+    ).toEqual(["Banana", "Apple"]);
+  });
+});

package/src/pages/EntityDetailPage.tsx

@@ -30,9 +30,11 @@ import { PageHeader } from "../components/layout/PageHeader";
 import { Tabs } from "../components/layout/Tabs";
 import { Badge } from "../components/ui/Badge";
 import { CodeBlock } from "../components/ui/CodeBlock";
+import { EntityKey } from "../components/ui/EntityKey";
 import { LabelValueBadge } from "../components/ui/LabelValueBadge";
 import { EmptyState } from "../components/ui/EmptyState";
 import { Input } from "../components/ui/Input";
+import { SearchHighlight } from "../components/ui/SearchHighlight";
 import { FieldGrid } from "../components/details/FieldGrid";
 import { ConditionTree } from "../components/details/ConditionTree";
 import { GroupSegmentTree } from "../components/details/GroupSegmentTree";
@@ -42,6 +44,12 @@ import { UsageLinks } from "../components/details/UsageLinks";
 import { HistoryTimeline } from "../components/history/HistoryTimeline";
 import { useCatalog } from "../context/CatalogContext";
 import { hashTranslationValue } from "../utils/hashTranslationValue";
+import {
+  getNextDuplicateValuesSort,
+  sortDuplicateValues,
+  type DuplicateValuesSort,
+  type SortDirection,
+} from "../utils/duplicateSorting";
 import type { ParsedQuery } from "../utils/searchQuery";
 import { parseQuery } from "../utils/searchQuery";
 
@@ -93,51 +101,6 @@ function slugifyFragment(value: string) {
     .replace(/^-+|-+$/g, "");
 }
 
-function escapeRegExp(value: string) {
-  return value.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
-}
-
-function ExamplesSearchHighlight(props: { text: string; query: string }) {
-  const q = props.query.trim();
-  if (!q) {
-    return <>{props.text}</>;
-  }
-
-  const escaped = escapeRegExp(q);
-  const regex = new RegExp(escaped, "gi");
-  const parts: React.ReactNode[] = [];
-  let lastIndex = 0;
-  let key = 0;
-
-  for (const match of props.text.matchAll(regex)) {
-    if (match.index !== undefined && match.index > lastIndex) {
-      parts.push(props.text.slice(lastIndex, match.index));
-    }
-
-    if (match.index !== undefined) {
-      parts.push(
-        <mark
-          key={`hm-${match.index}-${key++}`}
-          className={[
-            "rounded-[3px] bg-amber-100 px-0.5 py-px text-inherit",
-            "shadow-[inset_0_-2px_0_0_rgba(251,191,36,0.35)] ring-1 ring-amber-400/25 ring-inset",
-            "transition-[background-color,box-shadow] duration-150",
-          ].join(" ")}
-        >
-          {match[0]}
-        </mark>,
-      );
-      lastIndex = match.index + match[0].length;
-    }
-  }
-
-  if (lastIndex < props.text.length) {
-    parts.push(props.text.slice(lastIndex));
-  }
-
-  return <>{parts}</>;
-}
-
 function isEntityPath(value: string | undefined): value is EntityPath {
   return (
     value === "locales" ||
@@ -784,7 +747,7 @@ function FormatRowsTable(props: {
   function segmentBody(segment: string) {
     return segment ? (
       highlight ? (
-        <ExamplesSearchHighlight text={segment} query={highlightNeedle} />
+        <SearchHighlight text={segment} query={highlightNeedle} />
       ) : (
         segment
       )
@@ -850,11 +813,7 @@ function FormatRowsTable(props: {
               row.source === "inherited" ? "text-muted" : "",
             ].join(" ")}
           >
-            {highlight ? (
-              <ExamplesSearchHighlight text={valueText} query={highlightNeedle} />
-            ) : (
-              valueText
-            )}
+            {highlight ? <SearchHighlight text={valueText} query={highlightNeedle} /> : valueText}
           </div>
           {(showInheritedBadge || showTargetBadge) && (
             <div className="flex shrink-0 flex-col items-end justify-center gap-1">
@@ -880,7 +839,7 @@ function FormatRowsTable(props: {
   function renderExampleCellContent(preview: string | undefined) {
     return preview ? (
       highlight ? (
-        <ExamplesSearchHighlight text={preview} query={highlightNeedle} />
+        <SearchHighlight text={preview} query={highlightNeedle} />
       ) : (
         preview
       )
@@ -1077,7 +1036,7 @@ function FormatRowsTable(props: {
                     <td className={flatFormatClass}>
                       <div className="whitespace-pre-wrap [overflow-wrap:anywhere]">
                         {highlight ? (
-                          <ExamplesSearchHighlight text={row.path} query={highlightNeedle} />
+                          <SearchHighlight text={row.path} query={highlightNeedle} />
                         ) : (
                           row.path
                         )}
@@ -1195,7 +1154,15 @@ export function EntityDetailPage() {
   return (
     <div>
       <PageHeader
-        title={`${entityLabels[type].singular}: ${detail.key}`}
+        title={
+          <span className="flex min-w-0 flex-wrap items-baseline gap-x-2 gap-y-1">
+            <span className="whitespace-nowrap">{entityLabels[type].singular}:</span>
+            <EntityKey
+              value={detail.key}
+              className="min-w-0 text-[1.45rem] font-extrabold leading-tight"
+            />
+          </span>
+        }
         description={
           <div className="flex flex-wrap items-center gap-2">
             {entity.archived && <Badge tone="danger">archived</Badge>}
@@ -1638,7 +1605,7 @@ function MessageTranslationOverridesDetails(props: {
                 to={`${getEntityRoute("message", props.messageKey, props.setKey)}/overrides#${key}`}
                 className="text-sm font-semibold text-primary hover:underline"
               >
-                {key}
+                <EntityKey value={key} className="font-semibold" />
               </Link>
               {row.source === "inherited" && row.from && (
                 <LabelValueBadge
@@ -1800,8 +1767,8 @@ export function MessageOverridesTab() {
           <section key={override.key} className="space-y-4">
             <div className="space-y-3">
               <div className="group flex items-center gap-2">
-                <h2 id={override.key} className="font-semibold">
-                  {override.key}
+                <h2 id={override.key} className="font-semibold [overflow-wrap:anywhere]">
+                  <EntityKey value={override.key} className="font-semibold" />
                 </h2>
                 <ExamplePermalink targetId={override.key} />
               </div>
@@ -1950,7 +1917,7 @@ function ExampleTitle(props: {
 }) {
   const titleContent =
     props.highlightQuery?.trim() && props.title ? (
-      <ExamplesSearchHighlight text={props.title} query={props.highlightQuery} />
+      <SearchHighlight text={props.title} query={props.highlightQuery} />
     ) : (
       props.title
     );
@@ -1966,7 +1933,7 @@ function ExampleTitle(props: {
       {props.description?.trim() ? (
         props.highlightQuery?.trim() ? (
           <div className="text-sm text-muted whitespace-pre-wrap [overflow-wrap:anywhere]">
-            <ExamplesSearchHighlight text={props.description.trim()} query={props.highlightQuery} />
+            <SearchHighlight text={props.description.trim()} query={props.highlightQuery} />
           </div>
         ) : (
           <div className="text-sm text-muted">
@@ -2000,7 +1967,7 @@ function ExampleTable(props: {
         .join(" ")}
       style={props.direction ? { unicodeBidi: "plaintext" } : undefined}
     >
-      <ExamplesSearchHighlight
+      <SearchHighlight
         text={
           typeof props.evaluatedTranslation === "string"
             ? props.evaluatedTranslation
@@ -2411,7 +2378,7 @@ function LocaleExampleDetails(props: {
         to={getEntityRoute("locale", localeKey, setKey)}
         className="font-medium text-primary hover:underline"
       >
-        <ExamplesSearchHighlight text={localeKey} query={q} />
+        <SearchHighlight text={localeKey} query={q} />
       </Link>
     ) : (
       <SourceLocaleLink localeKey={localeKey} />
@@ -2435,11 +2402,7 @@ function LocaleExampleDetails(props: {
               to={getEntityRoute("message", example.message, setKey)}
               className="font-medium text-primary hover:underline"
             >
-              {highlight ? (
-                <ExamplesSearchHighlight text={example.message} query={q} />
-              ) : (
-                example.message
-              )}
+              {highlight ? <SearchHighlight text={example.message} query={q} /> : example.message}
             </Link>
           </InputField>
 
@@ -2457,7 +2420,7 @@ function LocaleExampleDetails(props: {
                       .join(" ")}
                     style={localeDirection ? { unicodeBidi: "plaintext" } : undefined}
                   >
-                    <ExamplesSearchHighlight text={example.originalTranslation} query={q} />
+                    <SearchHighlight text={example.originalTranslation} query={q} />
                   </div>
                 ) : (
                   <TranslationValueBlock
@@ -2499,7 +2462,7 @@ function LocaleExampleDetails(props: {
           >
             {highlight ? (
               <pre className="max-w-full whitespace-pre-wrap rounded border border-border bg-elevated p-4 text-xs text-text [overflow-wrap:anywhere]">
-                <ExamplesSearchHighlight text={example.rawMessage} query={q} />
+                <SearchHighlight text={example.rawMessage} query={q} />
               </pre>
             ) : (
               <CodeBlock value={example.rawMessage} />
@@ -2512,7 +2475,7 @@ function LocaleExampleDetails(props: {
         <InputField label="Values">
           {highlight ? (
             <pre className="max-w-full whitespace-pre-wrap rounded border border-border bg-elevated p-4 text-xs text-text [overflow-wrap:anywhere]">
-              <ExamplesSearchHighlight text={JSON.stringify(example.values, null, 2)} query={q} />
+              <SearchHighlight text={JSON.stringify(example.values, null, 2)} query={q} />
             </pre>
           ) : (
             <JsonValueBlock value={example.values} />
@@ -2524,7 +2487,7 @@ function LocaleExampleDetails(props: {
         <InputField label="Context">
           {highlight ? (
             <pre className="max-w-full whitespace-pre-wrap rounded border border-border bg-elevated p-4 text-xs text-text [overflow-wrap:anywhere]">
-              <ExamplesSearchHighlight text={JSON.stringify(example.context, null, 2)} query={q} />
+              <SearchHighlight text={JSON.stringify(example.context, null, 2)} query={q} />
             </pre>
           ) : (
             <JsonValueBlock value={example.context} />
@@ -2535,11 +2498,7 @@ function LocaleExampleDetails(props: {
       {typeof example.timeZone !== "undefined" && (
         <InputField label="Time zone">
           <span className="font-mono text-sm text-text">
-            {highlight ? (
-              <ExamplesSearchHighlight text={example.timeZone} query={q} />
-            ) : (
-              example.timeZone
-            )}
+            {highlight ? <SearchHighlight text={example.timeZone} query={q} /> : example.timeZone}
           </span>
         </InputField>
       )}
@@ -2547,11 +2506,7 @@ function LocaleExampleDetails(props: {
       {typeof example.currency !== "undefined" && (
         <InputField label="Currency">
           <span className="font-mono text-sm text-text">
-            {highlight ? (
-              <ExamplesSearchHighlight text={example.currency} query={q} />
-            ) : (
-              example.currency
-            )}
+            {highlight ? <SearchHighlight text={example.currency} query={q} /> : example.currency}
           </span>
         </InputField>
       )}
@@ -2560,7 +2515,7 @@ function LocaleExampleDetails(props: {
         <InputField label="Formats">
           {highlight ? (
             <pre className="max-w-full whitespace-pre-wrap rounded border border-border bg-elevated p-4 text-xs text-text [overflow-wrap:anywhere]">
-              <ExamplesSearchHighlight text={JSON.stringify(example.formats, null, 2)} query={q} />
+              <SearchHighlight text={JSON.stringify(example.formats, null, 2)} query={q} />
             </pre>
           ) : (
             <JsonValueBlock value={example.formats} />
@@ -2703,14 +2658,14 @@ function LocaleExamplesCompactView(props: {
                   onClick={() => toggleExample(exampleId)}
                 >
                   <td className="border-b border-border px-3 py-2 font-medium text-muted">
-                    <ExamplesSearchHighlight
+                    <SearchHighlight
                       text={getLocaleExampleCompactLabel(example)}
                       query={props.searchQuery}
                     />
                   </td>
                   <td className="min-w-0 border-b border-border px-3 py-2 text-muted">
                     <div className="whitespace-pre-wrap [overflow-wrap:anywhere]">
-                      <ExamplesSearchHighlight
+                      <SearchHighlight
                         text={example.description || "—"}
                         query={props.searchQuery}
                       />
@@ -2725,7 +2680,7 @@ function LocaleExamplesCompactView(props: {
                     style={props.localeDirection ? { unicodeBidi: "plaintext" } : undefined}
                   >
                     <div className="whitespace-pre-wrap [overflow-wrap:anywhere]">
-                      <ExamplesSearchHighlight
+                      <SearchHighlight
                         text={
                           typeof example.evaluatedTranslation === "string"
                             ? example.evaluatedTranslation
@@ -2743,7 +2698,7 @@ function LocaleExamplesCompactView(props: {
                         <div className="group flex items-center gap-2">
                           <h3 className="text-sm font-semibold">
                             {props.searchQuery.trim() ? (
-                              <ExamplesSearchHighlight
+                              <SearchHighlight
                                 text={getLocaleExampleTitle(example)}
                                 query={props.searchQuery}
                               />
@@ -2930,12 +2885,24 @@ function filterDuplicateValuesBySearch(
   });
 }
 
+function SortArrow(props: { active: boolean; direction: SortDirection }) {
+  return (
+    <span className={props.active ? "text-primary" : "text-muted/60"} aria-hidden="true">
+      {props.active ? (props.direction === "asc" ? "↑" : "↓") : "↕"}
+    </span>
+  );
+}
+
 export function LocaleDuplicatesTab() {
   const { detail, setKey } = useEntityDetail();
   const [searchParams, setSearchParams] = useSearchParams();
   const [duplicates, setDuplicates] = React.useState<LocaleDuplicates | null>(null);
   const [error, setError] = React.useState<string | null>(null);
   const [expandedDuplicateHashes, setExpandedDuplicateHashes] = React.useState<string[]>([]);
+  const [sort, setSort] = React.useState<DuplicateValuesSort>({
+    column: "messages",
+    direction: "desc",
+  });
   const localeDirection = (detail.entity as Record<string, any>).direction as string | undefined;
   const searchQuery = searchParams.get("q") ?? "";
 
@@ -3018,9 +2985,9 @@ export function LocaleDuplicatesTab() {
     return <p className="text-sm text-muted">No duplicate translations found for this locale.</p>;
   }
 
-  const visibleDuplicateValues = filterDuplicateValuesBySearch(
-    duplicates.duplicateValues,
-    searchQuery,
+  const visibleDuplicateValues = sortDuplicateValues(
+    filterDuplicateValuesBySearch(duplicates.duplicateValues, searchQuery),
+    sort,
   );
 
   return (
@@ -3066,8 +3033,48 @@ export function LocaleDuplicatesTab() {
             </colgroup>
             <thead className="bg-elevated text-left text-[11px] uppercase tracking-wide text-muted">
               <tr>
-                <th className="border-b border-border px-3 py-2 font-semibold">Duplicate value</th>
-                <th className="border-b border-border px-3 py-2 font-semibold">Messages</th>
+                <th
+                  className="border-b border-border px-3 py-2 font-semibold"
+                  aria-sort={
+                    sort.column === "value"
+                      ? sort.direction === "asc"
+                        ? "ascending"
+                        : "descending"
+                      : "none"
+                  }
+                >
+                  <button
+                    type="button"
+                    className="inline-flex cursor-pointer items-center gap-1 text-left font-semibold uppercase tracking-wide text-muted transition-colors hover:text-text"
+                    onClick={() =>
+                      setSort((current) => getNextDuplicateValuesSort(current, "value"))
+                    }
+                  >
+                    <span>Duplicate value</span>
+                    <SortArrow active={sort.column === "value"} direction={sort.direction} />
+                  </button>
+                </th>
+                <th
+                  className="border-b border-border px-3 py-2 font-semibold"
+                  aria-sort={
+                    sort.column === "messages"
+                      ? sort.direction === "asc"
+                        ? "ascending"
+                        : "descending"
+                      : "none"
+                  }
+                >
+                  <button
+                    type="button"
+                    className="inline-flex cursor-pointer items-center gap-1 text-left font-semibold uppercase tracking-wide text-muted transition-colors hover:text-text"
+                    onClick={() =>
+                      setSort((current) => getNextDuplicateValuesSort(current, "messages"))
+                    }
+                  >
+                    <span>Messages</span>
+                    <SortArrow active={sort.column === "messages"} direction={sort.direction} />
+                  </button>
+                </th>
               </tr>
             </thead>
             <tbody>
@@ -3097,7 +3104,7 @@ export function LocaleDuplicatesTab() {
                         style={localeDirection ? { unicodeBidi: "plaintext" } : undefined}
                       >
                         <div className="truncate">
-                          <ExamplesSearchHighlight text={duplicate.value} query={searchQuery} />
+                          <SearchHighlight text={duplicate.value} query={searchQuery} />
                         </div>
                       </td>
                       <td className="min-w-0 border-b border-border px-3 py-2 text-muted">
@@ -3141,9 +3148,9 @@ export function LocaleDuplicatesTab() {
                                         <td className="min-w-0 border-b border-border px-3 py-2">
                                           <Link
                                             to={getEntityRoute("message", messageKey, setKey)}
-                                            className="font-medium text-primary hover:underline"
+                                            className="font-medium text-primary [overflow-wrap:anywhere] hover:underline"
                                           >
-                                            <ExamplesSearchHighlight
+                                            <SearchHighlight
                                               text={messageKey}
                                               query={searchQuery}
                                             />
@@ -3158,7 +3165,7 @@ export function LocaleDuplicatesTab() {
                                                 className="font-medium text-primary hover:underline"
                                                 onClick={(event) => event.stopPropagation()}
                                               >
-                                                <ExamplesSearchHighlight
+                                                <SearchHighlight
                                                   text={sourceLocale}
                                                   query={searchQuery}
                                                 />

package/src/pages/ListPage.tsx

@@ -7,6 +7,7 @@ import type { CatalogIndex, EntityPath } from "../types";
 import { EntityList } from "../components/lists/EntityList";
 import { PageHeader } from "../components/layout/PageHeader";
 import { EmptyState } from "../components/ui/EmptyState";
+import { useCatalog } from "../context/CatalogContext";
 
 function isEntityPath(value: string | undefined): value is EntityPath {
   return (
@@ -20,6 +21,7 @@ function isEntityPath(value: string | undefined): value is EntityPath {
 
 export function ListPage() {
   const { entityPath, setKey } = useParams();
+  const { manifest } = useCatalog();
   const [index, setIndex] = React.useState<CatalogIndex | null>(null);
   const [error, setError] = React.useState<string | null>(null);
 
@@ -53,6 +55,7 @@ export function ListPage() {
         entities={index.entities[type]}
         setKey={setKey}
         allEntities={index.entities}
+        translationSearchEnabled={manifest.features?.translationSearch === true}
       />
     </div>
   );

package/src/types.ts

@@ -88,6 +88,9 @@ export interface CatalogManifest {
     source: string;
     commit: string;
   };
+  features?: {
+    translationSearch?: boolean;
+  };
   paths: {
     projectHistory: string;
     root?: string;