@messagevisor/catalog 0.8.0 → 0.13.0

package/src/pages/EntityDetailPage.tsx

@@ -50,6 +50,7 @@ import {
   type DuplicateValuesSort,
   type SortDirection,
 } from "../utils/duplicateSorting";
+import { getRelevantIcuFormats } from "../utils/relevantIcuFormats";
 import type { ParsedQuery } from "../utils/searchQuery";
 import { parseQuery } from "../utils/searchQuery";
 
@@ -342,6 +343,19 @@ function orderedFormatTypePillKeys(typesFromData: string[]): string[] {
   return [...FORMAT_TYPE_PRIMARY_PILLS, ...rest];
 }
 
+function orderedFormatSectionKeys(typesFromData: string[]): string[] {
+  const available = new Set(typesFromData);
+  const primary = FORMAT_TYPE_PRIMARY_PILLS.filter((type) => available.has(type));
+  const rest = typesFromData
+    .filter((type) => !FORMAT_TYPE_PRIMARY_PILLS.includes(type))
+    .sort((a, b) => a.localeCompare(b));
+  return [...primary, ...rest];
+}
+
+function formatStyleFragmentId(type: string, style: string): string {
+  return `format-${slugifyFragment(`${type}-${style || "default"}`)}`;
+}
+
 function setSearchParam(searchParams: URLSearchParams, key: string, value?: string) {
   const next = new URLSearchParams(searchParams);
 
@@ -729,6 +743,8 @@ function FormatRowsTable(props: {
     );
   }
 
+  useScrollToHash([splitPath, q, props.selectedFormatType, rows.length, visibleRows.length]);
+
   if (rows.length === 0) {
     return <p className="text-sm text-muted">No formats found.</p>;
   }
@@ -743,6 +759,19 @@ function FormatRowsTable(props: {
   }
 
   const splitPlans = splitPath ? buildFormatSplitRowPlans(visibleRows) : null;
+  const splitSectionKeys = splitPath
+    ? orderedFormatSectionKeys(collectSortedFormatTypes(visibleRows))
+    : [];
+  const splitRowsByType = splitPath
+    ? visibleRows.reduce<Record<string, FormatRow[]>>((groups, row) => {
+        const type = splitFormatPath(row.path).type;
+        if (!groups[type]) {
+          groups[type] = [];
+        }
+        groups[type].push(row);
+        return groups;
+      }, {})
+    : {};
 
   function segmentBody(segment: string) {
     return segment ? (
@@ -756,6 +785,48 @@ function FormatRowsTable(props: {
     );
   }
 
+  function renderFormatSourceBadge(row: FormatRow) {
+    if (row.source === "inherited" && row.from) {
+      return (
+        <LabelValueBadge
+          label="inherited from"
+          value={row.from}
+          to={getEntityRoute("locale", row.from, setKey)}
+          tone="inheritance"
+          compact
+        />
+      );
+    }
+
+    if (row.source === "target") {
+      return <LabelValueBadge label="from" value="target" tone="neutral" compact />;
+    }
+
+    return null;
+  }
+
+  function renderFormatSourceMeta(row: FormatRow) {
+    if (row.source === "inherited" && row.from) {
+      return (
+        <div className="text-[10px] font-normal leading-snug text-faint">
+          Inherited from{" "}
+          <Link
+            to={getEntityRoute("locale", row.from, setKey)}
+            className="font-medium text-muted hover:text-primary hover:underline"
+          >
+            {row.from}
+          </Link>
+        </div>
+      );
+    }
+
+    if (row.source === "target") {
+      return <div className="text-[10px] font-normal leading-snug text-faint">Target override</div>;
+    }
+
+    return null;
+  }
+
   /** Plain text in the cell. Param stays monospace for paths. */
   function renderSplitSegment(segment: string, role: "type" | "style" | "param") {
     const body = segmentBody(segment);
@@ -776,6 +847,23 @@ function FormatRowsTable(props: {
     );
   }
 
+  function renderSplitStyleCellContent(plan: FormatSplitRowPlan) {
+    const sourceMeta = renderFormatSourceMeta(plan.row);
+    const fragmentId = formatStyleFragmentId(plan.parts.type, plan.parts.style);
+
+    return (
+      <div className="flex min-w-0 flex-col items-start gap-1.5">
+        <a
+          href={`#${fragmentId}`}
+          className="w-full min-w-0 rounded-sm text-text hover:text-primary hover:underline"
+        >
+          {renderSplitSegment(plan.parts.style, "style")}
+        </a>
+        {sourceMeta}
+      </div>
+    );
+  }
+
   function bandSurfaceClass(band: number) {
     return band % 2 === 0 ? "bg-surface" : "bg-elevated/[0.2]";
   }
@@ -801,8 +889,7 @@ function FormatRowsTable(props: {
 
   function renderValueColumn(row: FormatRow, bandAndPaddingClass: string) {
     const valueText = formatValue(row.value);
-    const showInheritedBadge = row.source === "inherited" && Boolean(row.from);
-    const showTargetBadge = row.source === "target";
+    const badge = splitPath ? null : renderFormatSourceBadge(row);
 
     return (
       <td className={[bandAndPaddingClass, formatSplitCellBorderClass("value")].join(" ")}>
@@ -815,21 +902,8 @@ function FormatRowsTable(props: {
           >
             {highlight ? <SearchHighlight text={valueText} query={highlightNeedle} /> : valueText}
           </div>
-          {(showInheritedBadge || showTargetBadge) && (
-            <div className="flex shrink-0 flex-col items-end justify-center gap-1">
-              {showInheritedBadge && row.from ? (
-                <LabelValueBadge
-                  label="inherited from"
-                  value={row.from}
-                  to={getEntityRoute("locale", row.from, setKey)}
-                  tone="inheritance"
-                  compact
-                />
-              ) : null}
-              {showTargetBadge ? (
-                <LabelValueBadge label="from" value="target" tone="neutral" compact />
-              ) : null}
-            </div>
+          {badge && (
+            <div className="flex shrink-0 flex-col items-end justify-center gap-1">{badge}</div>
           )}
         </div>
       </td>
@@ -881,6 +955,109 @@ function FormatRowsTable(props: {
     );
   }
 
+  function renderSplitTable(plans: FormatSplitRowPlan[]) {
+    return (
+      <div className="min-w-0 overflow-x-auto rounded-lg border border-border">
+        <table className="w-full min-w-[34rem] table-fixed border-collapse bg-surface text-xs">
+          <colgroup>
+            {showExampleColumn ? (
+              <>
+                <col className="min-w-0 w-[24%]" />
+                <col className="min-w-0 w-[18%]" />
+                <col className="min-w-0 w-[28%]" />
+                <col className="min-w-0 w-[30%]" />
+              </>
+            ) : (
+              <>
+                <col className="min-w-0 w-[30%]" />
+                <col className="min-w-0 w-[30%]" />
+                <col className="min-w-0 w-[40%]" />
+              </>
+            )}
+          </colgroup>
+          <thead className="bg-elevated text-left text-[11px] uppercase tracking-wide text-muted">
+            <tr>
+              <th className="align-middle border-b border-r border-border/50 px-3 py-2 font-semibold">
+                Style
+              </th>
+              {showExampleColumn ? (
+                <th className="align-middle border-b border-r border-border/50 px-3 py-2 font-semibold">
+                  Example
+                </th>
+              ) : null}
+              <th className="align-middle border-b border-r border-border/40 px-3 py-2 font-semibold">
+                Param
+              </th>
+              <th className="align-middle border-b border-border px-3 py-2 font-semibold">Value</th>
+            </tr>
+          </thead>
+          <tbody>
+            {plans.map((plan) => {
+              const bandClass = bandSurfaceClass(plan.typeBand);
+
+              return (
+                <tr key={plan.row.path}>
+                  {plan.showStyleCell ? (
+                    <td
+                      id={formatStyleFragmentId(plan.parts.type, plan.parts.style)}
+                      rowSpan={plan.styleRowSpan}
+                      className={[
+                        "align-middle min-w-0 scroll-mt-2 px-3 py-2 font-medium",
+                        bandClass,
+                        formatSplitCellBorderClass("style"),
+                      ].join(" ")}
+                    >
+                      {renderSplitStyleCellContent(plan)}
+                    </td>
+                  ) : null}
+                  {renderSplitExampleColumn(plan, bandClass)}
+                  <td
+                    className={[
+                      "align-middle min-w-0 px-3 py-2 font-medium text-muted",
+                      bandClass,
+                      formatSplitCellBorderClass("param"),
+                    ].join(" ")}
+                  >
+                    {renderSplitSegment(plan.parts.param, "param")}
+                  </td>
+                  {renderValueColumn(
+                    plan.row,
+                    ["align-middle min-w-0 px-3 py-2", bandClass].join(" "),
+                  )}
+                </tr>
+              );
+            })}
+          </tbody>
+        </table>
+      </div>
+    );
+  }
+
+  if (splitPath) {
+    return (
+      <div className="space-y-5">
+        {splitSectionKeys.map((typeKey) => {
+          const sectionRows = splitRowsByType[typeKey] || [];
+          const sectionPlans = buildFormatSplitRowPlans(sectionRows);
+          const styleCount = new Set(
+            sectionRows.map((row) => splitFormatPath(row.path).style).filter(Boolean),
+          ).size;
+          return (
+            <section key={typeKey} className="space-y-2">
+              <div className="flex items-baseline justify-between gap-3">
+                <h3 className="text-sm font-semibold text-text">{typeKey}</h3>
+                <span className="text-xs text-muted">
+                  {styleCount} {styleCount === 1 ? "style" : "styles"}
+                </span>
+              </div>
+              {renderSplitTable(sectionPlans)}
+            </section>
+          );
+        })}
+      </div>
+    );
+  }
+
   return (
     <div className="min-w-0 overflow-x-auto rounded-xl border border-border">
       <table className="w-full min-w-[40rem] table-fixed border-collapse bg-surface text-xs">
@@ -896,9 +1073,9 @@ function FormatRowsTable(props: {
                 </>
               ) : (
                 <>
-                  <col className="min-w-0 w-[22%]" />
-                  <col className="min-w-0 w-[36%]" />
-                  <col className="min-w-0 w-[42%]" />
+                  <col className="min-w-0 w-[28%]" />
+                  <col className="min-w-0 w-[32%]" />
+                  <col className="min-w-0 w-[40%]" />
                 </>
               )
             ) : showExampleColumn ? (
@@ -912,9 +1089,9 @@ function FormatRowsTable(props: {
             ) : (
               <>
                 <col className="min-w-0 w-[12%]" />
-                <col className="min-w-0 w-[18%]" />
-                <col className="min-w-0 w-[32%]" />
-                <col className="min-w-0 w-[38%]" />
+                <col className="min-w-0 w-[24%]" />
+                <col className="min-w-0 w-[28%]" />
+                <col className="min-w-0 w-[36%]" />
               </>
             )}
           </colgroup>
@@ -1003,7 +1180,7 @@ function FormatRowsTable(props: {
                           formatSplitCellBorderClass("style"),
                         ].join(" ")}
                       >
-                        {renderSplitSegment(plan.parts.style, "style")}
+                        {renderSplitStyleCellContent(plan)}
                       </td>
                     ) : null}
                     {renderSplitExampleColumn(plan, bandClass)}
@@ -2366,12 +2543,18 @@ function LocaleExampleDetails(props: {
   example: EvaluatedLocaleExample;
   setKey?: string;
   localeDirection?: string;
+  computedFormats?: unknown;
   showLocale?: boolean;
   highlightQuery?: string;
 }) {
   const { example, setKey, localeDirection } = props;
   const q = props.highlightQuery?.trim() ?? "";
   const highlight = Boolean(q);
+  const relevantFormats = getRelevantIcuFormats(
+    example.rawMessage || example.originalTranslation,
+    props.computedFormats,
+    example.formats,
+  );
 
   function localeLink(localeKey: string) {
     return highlight ? (
@@ -2523,6 +2706,18 @@ function LocaleExampleDetails(props: {
           )}
         </InputField>
       )}
+
+      {typeof relevantFormats !== "undefined" && (
+        <InputField label="Relevant 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]">
+              <SearchHighlight text={JSON.stringify(relevantFormats, null, 2)} query={q} />
+            </pre>
+          ) : (
+            <JsonValueBlock value={relevantFormats} />
+          )}
+        </InputField>
+      )}
     </div>
   );
 }
@@ -2531,6 +2726,7 @@ function LocaleExamplesExpandedView(props: {
   examples: EvaluatedLocaleExample[];
   setKey?: string;
   localeDirection?: string;
+  computedFormats?: unknown;
   searchQuery: string;
 }) {
   return (
@@ -2556,6 +2752,7 @@ function LocaleExamplesExpandedView(props: {
                   example={example}
                   setKey={props.setKey}
                   localeDirection={props.localeDirection}
+                  computedFormats={props.computedFormats}
                   showLocale={false}
                   highlightQuery={props.searchQuery}
                 />
@@ -2575,6 +2772,7 @@ function LocaleExamplesCompactView(props: {
   examples: EvaluatedLocaleExample[];
   setKey?: string;
   localeDirection?: string;
+  computedFormats?: unknown;
   searchQuery: string;
 }) {
   const [expandedExampleIds, setExpandedExampleIds] = React.useState<string[]>([]);
@@ -2714,6 +2912,7 @@ function LocaleExamplesCompactView(props: {
                           example={example}
                           setKey={props.setKey}
                           localeDirection={props.localeDirection}
+                          computedFormats={props.computedFormats}
                           showLocale={false}
                           highlightQuery={props.searchQuery}
                         />
@@ -2849,6 +3048,7 @@ export function LocaleExamplesTab() {
           examples={filteredExamples}
           setKey={setKey}
           localeDirection={localeDirection}
+          computedFormats={detail.computedFormats}
           searchQuery={searchQuery}
         />
       ) : (
@@ -2856,6 +3056,7 @@ export function LocaleExamplesTab() {
           examples={filteredExamples}
           setKey={setKey}
           localeDirection={localeDirection}
+          computedFormats={detail.computedFormats}
           searchQuery={searchQuery}
         />
       )}

package/src/utils/relevantIcuFormats.spec.ts

@@ -0,0 +1,99 @@
+import { extractIcuFormatStyleReferences, getRelevantIcuFormats } from "./relevantIcuFormats";
+
+describe("relevant ICU formats", function () {
+  const computedFormats = {
+    number: {
+      decimal: { maximumFractionDigits: 2 },
+      roundingExpand: { maximumFractionDigits: 2, roundingMode: "expand" },
+    },
+    date: {
+      fullStyle: { dateStyle: "full" },
+    },
+    time: {
+      seconds: { hour: "numeric", minute: "2-digit", second: "2-digit" },
+    },
+  };
+
+  it("finds a named number style in a raw message", function () {
+    expect(
+      getRelevantIcuFormats("Value: {value, number, roundingExpand}", computedFormats),
+    ).toEqual({
+      number: {
+        roundingExpand: { maximumFractionDigits: 2, roundingMode: "expand" },
+      },
+    });
+  });
+
+  it("can use the original translation from a message-key example", function () {
+    expect(getRelevantIcuFormats("Amount: {amount, number, decimal}", computedFormats)).toEqual({
+      number: {
+        decimal: { maximumFractionDigits: 2 },
+      },
+    });
+  });
+
+  it("includes date and time styles", function () {
+    expect(
+      getRelevantIcuFormats(
+        "When: {when, date, fullStyle} at {when, time, seconds}",
+        computedFormats,
+      ),
+    ).toEqual({
+      date: {
+        fullStyle: { dateStyle: "full" },
+      },
+      time: {
+        seconds: { hour: "numeric", minute: "2-digit", second: "2-digit" },
+      },
+    });
+  });
+
+  it("deduplicates repeated styles while preserving first-seen type order", function () {
+    expect(
+      extractIcuFormatStyleReferences(
+        "{amount, number, decimal} then {otherAmount, number, decimal}",
+      ),
+    ).toEqual({
+      number: ["decimal"],
+    });
+  });
+
+  it("finds style references nested in ICU plural and select branches", function () {
+    expect(
+      getRelevantIcuFormats(
+        "{count, plural, one {{amount, number, decimal}} other {{when, date, fullStyle}}}",
+        computedFormats,
+      ),
+    ).toEqual({
+      number: {
+        decimal: { maximumFractionDigits: 2 },
+      },
+      date: {
+        fullStyle: { dateStyle: "full" },
+      },
+    });
+  });
+
+  it("ignores unknown styles, skeletons, and non-format ICU constructs", function () {
+    expect(
+      getRelevantIcuFormats(
+        "{amount, number, missing} {when, date, ::yyyyMMdd} {status, select, open {Open} other {Other}}",
+        computedFormats,
+      ),
+    ).toBeUndefined();
+  });
+
+  it("applies inline example formats as style-level overrides", function () {
+    expect(
+      getRelevantIcuFormats("{amount, number, decimal}", computedFormats, {
+        number: {
+          decimal: { maximumFractionDigits: 4 },
+        },
+      }),
+    ).toEqual({
+      number: {
+        decimal: { maximumFractionDigits: 4 },
+      },
+    });
+  });
+});

package/src/utils/relevantIcuFormats.ts

@@ -0,0 +1,129 @@
+type FormatBucket = Record<string, unknown>;
+type FormatPresetsLike = Record<string, FormatBucket | unknown>;
+
+const ICU_FORMAT_TYPES = ["number", "date", "time"] as const;
+
+type IcuFormatType = (typeof ICU_FORMAT_TYPES)[number];
+
+const ICU_FORMAT_TYPE_SET = new Set<string>(ICU_FORMAT_TYPES);
+
+function isPlainObject(value: unknown): value is Record<string, unknown> {
+  return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+
+function mergeFormatPresetsLike(
+  parent?: FormatPresetsLike,
+  child?: FormatPresetsLike,
+): FormatPresetsLike | undefined {
+  if (!isPlainObject(parent)) {
+    return isPlainObject(child) ? child : undefined;
+  }
+
+  if (!isPlainObject(child)) {
+    return parent;
+  }
+
+  const result: FormatPresetsLike = { ...parent };
+
+  for (const typeKey of Object.keys(child)) {
+    const parentStyles = result[typeKey];
+    const childStyles = child[typeKey];
+
+    if (!isPlainObject(parentStyles) || !isPlainObject(childStyles)) {
+      result[typeKey] = childStyles;
+      continue;
+    }
+
+    result[typeKey] = {
+      ...parentStyles,
+      ...childStyles,
+    };
+  }
+
+  return result;
+}
+
+function normalizeIcuStyleName(value: string) {
+  const style = value.trim();
+
+  if (!style || style.startsWith("::")) {
+    return undefined;
+  }
+
+  return style.replace(/,$/, "").trim() || undefined;
+}
+
+export function extractIcuFormatStyleReferences(message: string | undefined) {
+  const references: Partial<Record<IcuFormatType, string[]>> = {};
+
+  if (!message) {
+    return references;
+  }
+
+  const pattern = /\{[^{}]*,\s*(number|date|time)\s*,\s*([^{}]+?)\}/g;
+  let match: RegExpExecArray | null;
+
+  while ((match = pattern.exec(message))) {
+    const type = match[1] as IcuFormatType;
+    const style = normalizeIcuStyleName(match[2]);
+
+    if (!style) {
+      continue;
+    }
+
+    if (!references[type]) {
+      references[type] = [];
+    }
+
+    if (!references[type]!.includes(style)) {
+      references[type]!.push(style);
+    }
+  }
+
+  return references;
+}
+
+export function getRelevantIcuFormats(
+  message: string | undefined,
+  computedFormats: unknown,
+  exampleFormats?: unknown,
+) {
+  const effectiveFormats = mergeFormatPresetsLike(
+    isPlainObject(computedFormats) ? computedFormats : undefined,
+    isPlainObject(exampleFormats) ? exampleFormats : undefined,
+  );
+  const references = extractIcuFormatStyleReferences(message);
+  const relevant: Partial<Record<IcuFormatType, Record<string, unknown>>> = {};
+
+  if (!effectiveFormats) {
+    return undefined;
+  }
+
+  for (const typeKey of Object.keys(references)) {
+    if (!ICU_FORMAT_TYPE_SET.has(typeKey)) {
+      continue;
+    }
+
+    const type = typeKey as IcuFormatType;
+    const styles = references[type] || [];
+    const availableStyles = effectiveFormats[type];
+
+    if (!isPlainObject(availableStyles)) {
+      continue;
+    }
+
+    for (const style of styles) {
+      if (!Object.prototype.hasOwnProperty.call(availableStyles, style)) {
+        continue;
+      }
+
+      if (!relevant[type]) {
+        relevant[type] = {};
+      }
+
+      relevant[type]![style] = availableStyles[style];
+    }
+  }
+
+  return Object.keys(relevant).length > 0 ? relevant : undefined;
+}