@messagevisor/catalog 0.0.1 → 0.1.0

package/src/components/details/MarkdownContent.tsx

@@ -0,0 +1,23 @@
+import ReactMarkdown from "react-markdown";
+
+export function MarkdownContent(props: { value?: string }) {
+  if (!props.value || !props.value.trim()) {
+    return <p className="text-sm text-muted">No description.</p>;
+  }
+
+  return (
+    <div
+      className={[
+        "prose prose-sm max-w-none prose-headings:text-text prose-p:text-text prose-strong:text-text prose-a:text-primary",
+        /* Inline `code`: light fill, slightly darker border for definition */
+        "[&_code]:rounded-md [&_code]:border [&_code]:border-faint [&_code]:bg-elevated [&_code]:px-1.5 [&_code]:py-0.5 [&_code]:font-mono [&_code]:text-[0.8125rem] [&_code]:font-medium [&_code]:text-text",
+        /* Fenced blocks: airy surface with a clearer frame */
+        "[&_pre]:my-3 [&_pre]:rounded-xl [&_pre]:border [&_pre]:border-faint [&_pre]:bg-elevated [&_pre]:p-4 [&_pre]:shadow-sm",
+        /* Reset inner code inside pre (do not use pill/chip styling) */
+        "[&_pre_code]:m-0 [&_pre_code]:block [&_pre_code]:w-full [&_pre_code]:rounded-none [&_pre_code]:border-0 [&_pre_code]:bg-transparent [&_pre_code]:p-0 [&_pre_code]:text-xs [&_pre_code]:font-normal [&_pre_code]:leading-relaxed [&_pre_code]:shadow-none",
+      ].join(" ")}
+    >
+      <ReactMarkdown>{props.value}</ReactMarkdown>
+    </div>
+  );
+}

package/src/components/details/TranslationsTable.tsx

@@ -0,0 +1,263 @@
+import { Link } from "react-router-dom";
+import * as React from "react";
+
+import type { TranslationRow } from "../../types";
+import { getEntityRoute } from "../../entityTypes";
+import { useEntityDetail } from "../../pages/EntityDetailPage";
+
+function getDirectionClassName(direction?: string) {
+  return direction === "rtl" ? "text-right" : "";
+}
+
+function getDirectionStyle(direction?: string) {
+  if (!direction) {
+    return undefined;
+  }
+
+  return { unicodeBidi: "plaintext" as const };
+}
+
+function setWindowHash(targetId?: string) {
+  if (typeof window === "undefined") {
+    return;
+  }
+
+  const url = new URL(window.location.href);
+
+  if (!targetId) {
+    url.hash = "";
+  } else {
+    url.hash = targetId;
+  }
+
+  window.history.replaceState(null, "", url.toString());
+}
+
+export function TranslationsTable(props: {
+  translations?: Record<string, string>;
+  rows?: TranslationRow[];
+  linkLocales?: boolean;
+  showSource?: boolean;
+  translationLabel?: string;
+  comparisonLabel?: string;
+  comparisonValues?: Record<string, string | undefined>;
+  localeDirections?: Record<string, string | undefined>;
+  renderMetaCell?: (entry: TranslationRow) => React.ReactNode;
+  renderExpandedRow?: (entry: TranslationRow) => React.ReactNode;
+  getRowKey?: (entry: TranslationRow) => string;
+  getRowFragmentId?: (entry: TranslationRow) => string;
+}) {
+  const { setKey } = useEntityDetail();
+  const showSource = props.showSource !== false;
+  const entries: TranslationRow[] = props.rows
+    ? props.rows
+    : Object.entries(props.translations || {})
+        .sort(([a], [b]) => a.localeCompare(b))
+        .map(([locale, value]) => ({ locale, value, source: "direct" as const }));
+  const [expandedRowKeys, setExpandedRowKeys] = React.useState<string[]>([]);
+  const [lastOpenedRowFragmentId, setLastOpenedRowFragmentId] = React.useState<string | null>(null);
+
+  if (entries.length === 0) {
+    return <p className="text-sm text-muted">No translations found.</p>;
+  }
+
+  React.useEffect(() => {
+    if (typeof window === "undefined" || !props.getRowFragmentId) {
+      return;
+    }
+
+    const hashTargetId = decodeURIComponent(window.location.hash.slice(1));
+
+    if (!hashTargetId) {
+      return;
+    }
+
+    const matchingEntry = entries.find((entry) => props.getRowFragmentId?.(entry) === hashTargetId);
+
+    if (!matchingEntry) {
+      return;
+    }
+
+    const rowKey = props.getRowKey ? props.getRowKey(matchingEntry) : matchingEntry.locale;
+
+    setExpandedRowKeys((current) => (current.includes(rowKey) ? current : [...current, rowKey]));
+    setLastOpenedRowFragmentId(hashTargetId);
+  }, [entries, props.getRowFragmentId, props.getRowKey]);
+
+  React.useEffect(() => {
+    if (!lastOpenedRowFragmentId || typeof window === "undefined") {
+      return;
+    }
+
+    const frame = window.requestAnimationFrame(() => {
+      const targetElement = document.getElementById(lastOpenedRowFragmentId);
+
+      if (!targetElement) {
+        return;
+      }
+
+      targetElement.scrollIntoView({ block: "start" });
+    });
+
+    return () => {
+      window.cancelAnimationFrame(frame);
+    };
+  }, [lastOpenedRowFragmentId]);
+
+  const columnCount =
+    2 + (props.comparisonLabel ? 1 : 0) + (props.renderMetaCell ? 1 : 0) + (showSource ? 1 : 0);
+
+  return (
+    <div className="overflow-hidden rounded border border-border">
+      <table className="w-full border-collapse bg-surface text-xs">
+        <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">Locale</th>
+            <th className="border-b border-border px-3 py-2 font-semibold">
+              {props.translationLabel || "Translation"}
+            </th>
+            {props.comparisonLabel && (
+              <th className="border-b border-border px-3 py-2 font-semibold">
+                {props.comparisonLabel}
+              </th>
+            )}
+            {props.renderMetaCell && (
+              <th className="border-b border-border px-3 py-2 font-semibold" />
+            )}
+            {showSource && (
+              <th className="border-b border-border px-3 py-2 font-semibold">Source</th>
+            )}
+          </tr>
+        </thead>
+        <tbody>
+          {entries.map((entry) => {
+            const rowKey = props.getRowKey ? props.getRowKey(entry) : entry.locale;
+            const rowFragmentId = props.getRowFragmentId?.(entry);
+            const isExpandable = Boolean(props.renderExpandedRow);
+            const isExpanded = expandedRowKeys.includes(rowKey);
+
+            return (
+              <React.Fragment key={rowKey}>
+                <tr
+                  id={rowFragmentId}
+                  className={
+                    isExpandable
+                      ? [
+                          "cursor-pointer transition-colors",
+                          isExpanded ? "bg-elevated" : "hover:bg-elevated/60",
+                        ].join(" ")
+                      : undefined
+                  }
+                  onClick={
+                    isExpandable
+                      ? () =>
+                          setExpandedRowKeys((current) => {
+                            if (current.includes(rowKey)) {
+                              const nextExpandedRowKeys = current.filter(
+                                (value) => value !== rowKey,
+                              );
+                              const nextLastOpenedRowKey =
+                                rowFragmentId && lastOpenedRowFragmentId === rowFragmentId
+                                  ? nextExpandedRowKeys[nextExpandedRowKeys.length - 1] || null
+                                  : current[current.length - 1] || null;
+                              const nextLastOpenedRowFragmentId = nextLastOpenedRowKey
+                                ? props.getRowFragmentId?.(
+                                    entries.find(
+                                      (item) =>
+                                        (props.getRowKey ? props.getRowKey(item) : item.locale) ===
+                                        nextLastOpenedRowKey,
+                                    ) as TranslationRow,
+                                  ) || null
+                                : null;
+
+                              setLastOpenedRowFragmentId(nextLastOpenedRowFragmentId);
+                              setWindowHash(nextLastOpenedRowFragmentId || undefined);
+                              return nextExpandedRowKeys;
+                            }
+
+                            if (rowFragmentId) {
+                              setLastOpenedRowFragmentId(rowFragmentId);
+                              setWindowHash(rowFragmentId);
+                            }
+
+                            return [...current, rowKey];
+                          })
+                      : undefined
+                  }
+                >
+                  <td className="border-b border-border px-3 py-2 font-medium">
+                    {props.linkLocales ? (
+                      <Link
+                        to={getEntityRoute("locale", entry.locale, setKey)}
+                        className="font-medium text-primary hover:underline"
+                        onClick={(event) => event.stopPropagation()}
+                      >
+                        {entry.locale}
+                      </Link>
+                    ) : (
+                      entry.locale
+                    )}
+                  </td>
+                  <td
+                    className={[
+                      "border-b border-border px-3 py-2",
+                      entry.source === "inherited" ? "text-faint" : "",
+                      getDirectionClassName(props.localeDirections?.[entry.locale]),
+                    ].join(" ")}
+                    dir={props.localeDirections?.[entry.locale]}
+                    style={getDirectionStyle(props.localeDirections?.[entry.locale])}
+                  >
+                    {entry.value || "—"}
+                  </td>
+                  {props.comparisonLabel && (
+                    <td
+                      className={[
+                        "border-b border-border px-3 py-2 text-muted",
+                        getDirectionClassName(props.localeDirections?.[entry.locale]),
+                      ].join(" ")}
+                      dir={props.localeDirections?.[entry.locale]}
+                      style={getDirectionStyle(props.localeDirections?.[entry.locale])}
+                    >
+                      {props.comparisonValues?.[entry.locale] || "—"}
+                    </td>
+                  )}
+                  {props.renderMetaCell && (
+                    <td className="border-b border-border px-3 py-2">
+                      {props.renderMetaCell(entry)}
+                    </td>
+                  )}
+                  {showSource && (
+                    <td className="border-b border-border px-3 py-2 text-muted">
+                      {entry.source}
+                      {entry.from ? (
+                        <>
+                          {" from "}
+                          <Link
+                            to={getEntityRoute("locale", entry.from, setKey)}
+                            className="font-medium text-primary hover:underline"
+                            onClick={(event) => event.stopPropagation()}
+                          >
+                            {entry.from}
+                          </Link>
+                        </>
+                      ) : (
+                        ""
+                      )}
+                    </td>
+                  )}
+                </tr>
+                {isExpandable && isExpanded && (
+                  <tr className="bg-background/60">
+                    <td colSpan={columnCount} className="border-b border-border px-4 py-4">
+                      {props.renderExpandedRow?.(entry)}
+                    </td>
+                  </tr>
+                )}
+              </React.Fragment>
+            );
+          })}
+        </tbody>
+      </table>
+    </div>
+  );
+}

package/src/components/details/UsageLinks.tsx

@@ -0,0 +1,29 @@
+import { Link } from "react-router-dom";
+
+import type { EntityType } from "../../types";
+import { getEntityRoute } from "../../entityTypes";
+
+export function UsageLinks(props: { type: EntityType; keys?: string[]; setKey?: string }) {
+  if (!props.keys || props.keys.length === 0) {
+    return <p className="text-sm text-muted">No usage found.</p>;
+  }
+
+  return (
+    <ul className="list-inside list-disc space-y-1 text-sm">
+      {props.keys.map((key) => (
+        <li key={key}>
+          <Link
+            className="text-primary hover:underline"
+            to={getEntityRoute(
+              props.type,
+              props.type === "attribute" ? key.split(".")[0] : key,
+              props.setKey,
+            )}
+          >
+            {key}
+          </Link>
+        </li>
+      ))}
+    </ul>
+  );
+}

package/src/components/history/HistoryTimeline.tsx

@@ -0,0 +1,122 @@
+import * as React from "react";
+import { Link } from "react-router-dom";
+
+import { fetchHistoryPage } from "../../api";
+import { entityLabels, getEntityRoute } from "../../entityTypes";
+import type { HistoryEntry } from "../../types";
+import { formatCatalogTimestamp } from "../../utils/formatCatalogTimestamp";
+import { CATALOG_HISTORY_VISIBLE_ENTITY_LIMIT } from "../../config";
+import { Button } from "../ui/Button";
+import { EmptyState } from "../ui/EmptyState";
+
+function HistoryEntryCard(props: { entry: HistoryEntry; setKey?: string; commitUrl?: string }) {
+  const [expanded, setExpanded] = React.useState(false);
+  const hasMore = props.entry.entities.length > CATALOG_HISTORY_VISIBLE_ENTITY_LIMIT;
+  const visibleEntities = expanded
+    ? props.entry.entities
+    : props.entry.entities.slice(0, CATALOG_HISTORY_VISIBLE_ENTITY_LIMIT);
+
+  return (
+    <li
+      key={`${props.entry.commit}-${props.entry.timestamp}`}
+      className="rounded-lg border border-border bg-surface p-4 shadow-sm ring-1 ring-black/5"
+    >
+      <div className="text-sm">
+        <span className="font-semibold">{props.entry.author}</span>{" "}
+        <a
+          className="text-primary hover:underline"
+          href={
+            props.commitUrl?.replace("{{hash}}", props.entry.commit) || `#${props.entry.commit}`
+          }
+          target="_blank"
+          rel="noreferrer"
+        >
+          {formatCatalogTimestamp(props.entry.timestamp)}
+        </a>
+      </div>
+      <ul className="mt-3 list-inside list-disc space-y-1 text-sm text-muted">
+        {visibleEntities.map((entity) => (
+          <li key={`${entity.type}-${entity.key}`}>
+            {entity.type !== "test" ? entityLabels[entity.type].singular : "Test"}{" "}
+            {entity.type !== "test" ? (
+              <Link
+                className="font-medium text-primary hover:underline"
+                to={getEntityRoute(entity.type, entity.key, entity.set || props.setKey)}
+              >
+                {entity.key}
+              </Link>
+            ) : (
+              entity.key
+            )}
+          </li>
+        ))}
+      </ul>
+      {hasMore && (
+        <button
+          type="button"
+          onClick={() => setExpanded((current) => !current)}
+          className="mt-3 text-sm font-semibold text-primary hover:underline"
+        >
+          {expanded
+            ? "See less"
+            : `See more (${props.entry.entities.length - CATALOG_HISTORY_VISIBLE_ENTITY_LIMIT} more)`}
+        </button>
+      )}
+    </li>
+  );
+}
+
+export function HistoryTimeline(props: { path: string; setKey?: string; commitUrl?: string }) {
+  const [entries, setEntries] = React.useState<HistoryEntry[]>([]);
+  const [page, setPage] = React.useState(0);
+  const [totalPages, setTotalPages] = React.useState(1);
+  const [error, setError] = React.useState<string | null>(null);
+
+  async function loadPage(nextPage: number) {
+    try {
+      const response = await fetchHistoryPage(props.path, nextPage);
+      setEntries((current) => [...current, ...response.entries]);
+      setPage(response.page);
+      setTotalPages(response.totalPages);
+    } catch (err) {
+      setError((err as Error).message);
+    }
+  }
+
+  React.useEffect(() => {
+    setEntries([]);
+    setPage(0);
+    setTotalPages(1);
+    setError(null);
+    loadPage(1);
+  }, [props.path]);
+
+  if (error) {
+    return <EmptyState title="History unavailable" description={error} />;
+  }
+
+  if (entries.length === 0 && page > 0) {
+    return <EmptyState title="No history found" />;
+  }
+
+  return (
+    <div className="space-y-4">
+      <ol className="space-y-4">
+        {entries.map((entry) => (
+          <HistoryEntryCard
+            key={`${entry.commit}-${entry.timestamp}`}
+            entry={entry}
+            setKey={props.setKey}
+            commitUrl={props.commitUrl}
+          />
+        ))}
+      </ol>
+
+      {page < totalPages && (
+        <Button onClick={() => loadPage(page + 1)} className="w-full">
+          Load more
+        </Button>
+      )}
+    </div>
+  );
+}