chore: consolidate platform split checks

2026-07-10 12:51:19 +02:00
parent 150b720f12
commit 635d25c74c
216 changed files with 23336 additions and 4077 deletions
@@ -0,0 +1,64 @@
+import { AlertTriangle, Info } from "lucide-react";
+import type { ReactNode } from "react";
+import AdvancedOptionsPanel from "./AdvancedOptionsPanel";
+
+export type ActionBlockerReason = {
+  summary: ReactNode;
+  details?: ReactNode;
+  requiredAction?: ReactNode;
+  actor?: ReactNode;
+  target?: ReactNode;
+  technicalDetails?: ReactNode;
+};
+
+type ActionBlockerHintProps = {
+  reason: ActionBlockerReason;
+  tone?: "info" | "warning" | "danger";
+  className?: string;
+};
+
+function joinClasses(...classes: Array<string | undefined | false>) {
+  return classes.filter(Boolean).join(" ");
+}
+
+export default function ActionBlockerHint({ reason, tone = "warning", className = "" }: ActionBlockerHintProps) {
+  const Icon = tone === "info" ? Info : AlertTriangle;
+  const hasActionRows = Boolean(reason.requiredAction || reason.actor || reason.target);
+
+  return (
+    <section className={joinClasses("action-blocker-hint", `tone-${tone}`, className)}>
+      <Icon className="action-blocker-icon" size={18} aria-hidden="true" />
+      <div className="action-blocker-copy">
+        <strong>{reason.summary}</strong>
+        {reason.details && <p>{reason.details}</p>}
+        {hasActionRows && (
+          <dl>
+            {reason.requiredAction && (
+              <>
+                <dt>Required action</dt>
+                <dd>{reason.requiredAction}</dd>
+              </>
+            )}
+            {reason.actor && (
+              <>
+                <dt>Who can fix it</dt>
+                <dd>{reason.actor}</dd>
+              </>
+            )}
+            {reason.target && (
+              <>
+                <dt>Where to go</dt>
+                <dd>{reason.target}</dd>
+              </>
+            )}
+          </dl>
+        )}
+        {reason.technicalDetails && (
+          <AdvancedOptionsPanel title="Technical details" className="action-blocker-technical">
+            <div>{reason.technicalDetails}</div>
+          </AdvancedOptionsPanel>
+        )}
+      </div>
+    </section>
+  );
+}