SaaS fixes (#6578)

Co-authored-by: Claude Opus 4.8 <[email protected]> Co-authored-by: James Brunton <[email protected]> Co-authored-by: Reece Browne <[email protected]> Co-authored-by: ConnorYoh <[email protected]> Co-authored-by: Reece <[email protected]> Co-authored-by: EthanHealy01 <[email protected]> Co-authored-by: Ludy <[email protected]>
2026-07-15 19:10:47 +02:00 · 2026-06-16 16:41:25 +01:00
parent 96accea984
commit ddf78d11ae
415 changed files with 29552 additions and 5855 deletions
@@ -0,0 +1,39 @@
+import type { ReactNode } from "react";
+import "@shared/components/SettingsRow.css";
+
+export interface SettingsRowProps {
+  /** Left-aligned setting name. */
+  label: ReactNode;
+  /** Optional secondary line under the label. */
+  description?: ReactNode;
+  /** Right-aligned control (toggle / select / input / button). */
+  control: ReactNode;
+  className?: string;
+}
+
+/**
+ * Horizontal settings row: label (+ optional description) on the left, control
+ * right-aligned. The companion to vertical {@link FormField} — use this for the
+ * label-left/control-right settings pattern (the layout ToggleSwitch's docs
+ * point at). Stack rows inside a {@code Card padding="none"} for a settings list.
+ */
+export function SettingsRow({
+  label,
+  description,
+  control,
+  className,
+}: SettingsRowProps) {
+  return (
+    <div
+      className={["sui-settingsrow", className ?? ""].filter(Boolean).join(" ")}
+    >
+      <div className="sui-settingsrow__text">
+        <span className="sui-settingsrow__label">{label}</span>
+        {description && (
+          <span className="sui-settingsrow__desc">{description}</span>
+        )}
+      </div>
+      <div className="sui-settingsrow__control">{control}</div>
+    </div>
+  );
+}