@clef-sh/ui 0.1.20 → 0.1.21

package/src/client/components/MatrixGrid.tsx

@@ -1,7 +1,8 @@
 import React from "react";
-import { theme } from "../theme";
+import { Hash } from "lucide-react";
 import { EnvBadge } from "./EnvBadge";
 import { StatusDot } from "./StatusDot";
+import { Table } from "../primitives";
 import type { MatrixStatus } from "@clef-sh/core";
 
 export interface MatrixGridProps {
@@ -44,261 +45,116 @@ export function MatrixGrid({
   syncingNs,
 }: MatrixGridProps) {
   return (
-    <div
-      data-testid="matrix-table"
-      style={{
-        background: theme.surface,
-        border: `1px solid ${theme.border}`,
-        borderRadius: 12,
-        overflow: "hidden",
-      }}
-    >
-      {/* Header row */}
-      <div
-        style={{
-          display: "grid",
-          gridTemplateColumns: `180px ${environments.map(() => "1fr").join(" ")}`,
-          borderBottom: `1px solid ${theme.border}`,
-          background: "#0D0F14",
-        }}
-      >
-        <div
-          style={{
-            padding: "12px 20px",
-            fontFamily: theme.sans,
-            fontSize: 11,
-            fontWeight: 600,
-            color: theme.textMuted,
-            textTransform: "uppercase",
-            letterSpacing: "0.08em",
-          }}
-        >
-          Namespace
-        </div>
-        {environments.map((env) => (
-          <div
-            key={env.name}
-            style={{
-              padding: "12px 20px",
-              display: "flex",
-              alignItems: "center",
-              gap: 8,
-              borderLeft: `1px solid ${theme.border}`,
-            }}
-          >
-            <EnvBadge env={env.name} />
-            <span
-              style={{
-                fontFamily: theme.sans,
-                fontSize: 12,
-                fontWeight: 500,
-                color: theme.text,
-              }}
-            >
-              {env.name}
-            </span>
-          </div>
-        ))}
-      </div>
-
-      {/* Namespace rows */}
-      {namespaces.map((ns, i) => {
-        const nsCells = matrixStatuses.filter((s) => s.cell.namespace === ns.name);
-        const hasDrift = nsCells.some((s) =>
-          s.issues.some((issue) => issue.type === "missing_keys"),
-        );
-
-        return (
-          <div
-            key={ns.name}
-            data-testid={`matrix-row-${ns.name}`}
-            role="button"
-            tabIndex={0}
-            onClick={() => onNamespaceClick?.(ns.name)}
-            onKeyDown={(e) => {
-              if (e.key === "Enter") onNamespaceClick?.(ns.name);
-            }}
-            // Cell-level clicks pass the environment; row-level is fallback
-            style={{
-              display: "grid",
-              gridTemplateColumns: `180px ${environments.map(() => "1fr").join(" ")}`,
-              borderBottom: i < namespaces.length - 1 ? `1px solid ${theme.border}` : "none",
-              cursor: onNamespaceClick ? "pointer" : "default",
-              transition: "background 0.1s",
-            }}
-            onMouseEnter={(e) => {
-              (e.currentTarget as HTMLElement).style.background = theme.surfaceHover;
-            }}
-            onMouseLeave={(e) => {
-              (e.currentTarget as HTMLElement).style.background = "transparent";
-            }}
-          >
-            {/* Namespace label */}
-            <div
-              style={{
-                padding: "16px 20px",
-                display: "flex",
-                alignItems: "center",
-                gap: 10,
+    <Table data-testid="matrix-table">
+      <Table.Header>
+        <tr>
+          <Table.HeaderCell className="w-[180px]">Namespace</Table.HeaderCell>
+          {environments.map((env) => (
+            <Table.HeaderCell key={env.name} className="border-l border-edge">
+              <span className="inline-flex items-center gap-2">
+                <EnvBadge env={env.name} />
+                <span className="font-sans text-[12px] font-medium text-bone normal-case tracking-normal">
+                  {env.name}
+                </span>
+              </span>
+            </Table.HeaderCell>
+          ))}
+        </tr>
+      </Table.Header>
+      <tbody>
+        {namespaces.map((ns) => {
+          const nsCells = matrixStatuses.filter((s) => s.cell.namespace === ns.name);
+          const hasDrift = nsCells.some((s) =>
+            s.issues.some((issue) => issue.type === "missing_keys"),
+          );
+          return (
+            <Table.Row
+              key={ns.name}
+              data-testid={`matrix-row-${ns.name}`}
+              role="button"
+              tabIndex={0}
+              interactive={Boolean(onNamespaceClick)}
+              tone={hasDrift ? "drift" : undefined}
+              onClick={() => onNamespaceClick?.(ns.name)}
+              onKeyDown={(e) => {
+                if (e.key === "Enter") onNamespaceClick?.(ns.name);
               }}
             >
-              <span
-                style={{
-                  fontFamily: theme.mono,
-                  fontSize: 11,
-                  color: theme.textDim,
-                }}
-              >
-                //
-              </span>
-              <span
-                style={{
-                  fontFamily: theme.mono,
-                  fontSize: 13,
-                  fontWeight: 600,
-                  color: theme.text,
-                  flex: 1,
-                }}
-              >
-                {ns.name}
-              </span>
-              {hasDrift && syncingNs !== ns.name && onSyncClick && (
-                <button
-                  data-testid={`sync-btn-${ns.name}`}
-                  onClick={(e) => {
-                    e.stopPropagation();
-                    onSyncClick(ns.name);
-                  }}
-                  style={{
-                    fontFamily: theme.sans,
-                    fontSize: 10,
-                    fontWeight: 600,
-                    color: theme.accent,
-                    background: `${theme.accent}18`,
-                    border: `1px solid ${theme.accent}33`,
-                    borderRadius: 4,
-                    padding: "2px 8px",
-                    cursor: "pointer",
-                  }}
-                >
-                  Sync
-                </button>
-              )}
-            </div>
-
-            {/* Environment cells */}
-            {environments.map((env) => {
-              const cellStatus = matrixStatuses.find(
-                (s) => s.cell.namespace === ns.name && s.cell.environment === env.name,
-              );
-              const statusType = cellStatus ? getStatusType(cellStatus) : "ok";
-              const keyCount = cellStatus?.keyCount ?? 0;
-              const lastMod = cellStatus?.lastModified
-                ? formatDate(
-                    cellStatus.lastModified instanceof Date
-                      ? cellStatus.lastModified
-                      : new Date(cellStatus.lastModified as unknown as string),
-                  )
-                : "never";
-              const missingKeyCount = cellStatus
-                ? new Set(
-                    cellStatus.issues
-                      .filter((i) => i.type === "missing_keys" && i.key)
-                      .map((i) => i.key),
-                  ).size
-                : 0;
-              const warnKeyCount = cellStatus
-                ? cellStatus.issues.filter((i) => i.type === "schema_warning").length
-                : 0;
-              const cellPending = cellStatus?.pendingCount ?? 0;
-
-              return (
-                <div
-                  key={env.name}
-                  onClick={(e) => {
-                    e.stopPropagation();
-                    onNamespaceClick?.(ns.name, env.name);
-                  }}
-                  style={{
-                    padding: "14px 20px",
-                    borderLeft: `1px solid ${theme.border}`,
-                    display: "flex",
-                    flexDirection: "column",
-                    gap: 5,
-                  }}
-                >
-                  <div style={{ display: "flex", alignItems: "center", gap: 7 }}>
-                    <StatusDot status={statusType} />
-                    <span
-                      style={{
-                        fontFamily: theme.mono,
-                        fontSize: 11,
-                        color: theme.textMuted,
+              <Table.Cell className="px-5 py-4">
+                <div className="flex items-center gap-2.5">
+                  <Hash size={11} strokeWidth={1.75} className="text-ash-deep" aria-hidden="true" />
+                  <span className="flex-1 font-mono text-[13px] font-semibold text-bone">
+                    {ns.name}
+                  </span>
+                  {hasDrift && syncingNs !== ns.name && onSyncClick && (
+                    <button
+                      data-testid={`sync-btn-${ns.name}`}
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        onSyncClick(ns.name);
                       }}
+                      className="rounded border border-gold-500/30 bg-gold-500/10 px-2 py-0.5 font-sans text-[10px] font-semibold text-gold-500 cursor-pointer hover:bg-gold-500/20"
                     >
-                      {keyCount} keys
-                    </span>
-                    {missingKeyCount > 0 && (
-                      <span
-                        style={{
-                          fontFamily: theme.mono,
-                          fontSize: 10,
-                          color: theme.red,
-                          background: theme.redDim,
-                          border: `1px solid ${theme.red}33`,
-                          borderRadius: 3,
-                          padding: "1px 5px",
-                        }}
-                      >
-                        -{missingKeyCount} missing
-                      </span>
-                    )}
-                    {warnKeyCount > 0 && (
-                      <span
-                        style={{
-                          fontFamily: theme.mono,
-                          fontSize: 10,
-                          color: theme.yellow,
-                          background: theme.yellowDim,
-                          border: `1px solid ${theme.yellow}33`,
-                          borderRadius: 3,
-                          padding: "1px 5px",
-                        }}
-                      >
-                        {warnKeyCount} warn
-                      </span>
-                    )}
-                    {cellPending > 0 && (
-                      <span
-                        style={{
-                          fontFamily: theme.mono,
-                          fontSize: 10,
-                          color: theme.accent,
-                          background: `${theme.accent}18`,
-                          border: `1px solid ${theme.accent}33`,
-                          borderRadius: 3,
-                          padding: "1px 5px",
-                        }}
-                      >
-                        {cellPending} pending
-                      </span>
-                    )}
-                  </div>
-                  <div
-                    style={{
-                      fontFamily: theme.mono,
-                      fontSize: 10,
-                      color: theme.textDim,
-                    }}
-                  >
-                    {lastMod}
-                  </div>
+                      Sync
+                    </button>
+                  )}
                 </div>
-              );
-            })}
-          </div>
-        );
-      })}
-    </div>
+              </Table.Cell>
+              {environments.map((env) => {
+                const cellStatus = matrixStatuses.find(
+                  (s) => s.cell.namespace === ns.name && s.cell.environment === env.name,
+                );
+                const statusType = cellStatus ? getStatusType(cellStatus) : "ok";
+                const keyCount = cellStatus?.keyCount ?? 0;
+                const lastMod = cellStatus?.lastModified
+                  ? formatDate(
+                      cellStatus.lastModified instanceof Date
+                        ? cellStatus.lastModified
+                        : new Date(cellStatus.lastModified as unknown as string),
+                    )
+                  : "never";
+                const missingKeyCount = cellStatus
+                  ? new Set(
+                      cellStatus.issues
+                        .filter((i) => i.type === "missing_keys" && i.key)
+                        .map((i) => i.key),
+                    ).size
+                  : 0;
+                const warnKeyCount = cellStatus
+                  ? cellStatus.issues.filter((i) => i.type === "schema_warning").length
+                  : 0;
+                const cellPending = cellStatus?.pendingCount ?? 0;
+                return (
+                  <Table.Cell key={env.name} className="border-l border-edge px-5 py-3.5">
+                    <div className="flex flex-col gap-1.5">
+                      <div className="flex items-center gap-1.5">
+                        <StatusDot status={statusType} />
+                        <span className="font-mono text-[11px] text-ash">{keyCount} keys</span>
+                        {missingKeyCount > 0 && (
+                          <span className="rounded-sm border border-stop-500/20 bg-stop-500/10 px-1.5 py-px font-mono text-[10px] text-stop-500">
+                            -{missingKeyCount} missing
+                          </span>
+                        )}
+                        {warnKeyCount > 0 && (
+                          <span className="rounded-sm border border-warn-500/20 bg-warn-500/10 px-1.5 py-px font-mono text-[10px] text-warn-500">
+                            {warnKeyCount} warn
+                          </span>
+                        )}
+                        {cellPending > 0 && (
+                          <span className="rounded-sm border border-gold-500/20 bg-gold-500/10 px-1.5 py-px font-mono text-[10px] text-gold-500">
+                            {cellPending} pending
+                          </span>
+                        )}
+                      </div>
+                      <div className="font-mono text-[10px] text-ash-deep">{lastMod}</div>
+                    </div>
+                  </Table.Cell>
+                );
+              })}
+            </Table.Row>
+          );
+        })}
+      </tbody>
+    </Table>
   );
 }