@remit/ui 0.0.39 → 0.0.40

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remit/ui",
-  "version": "0.0.39",
+  "version": "0.0.40",
   "type": "module",
   "files": [
     "src"

package/src/components/auto-moved-badge.render.test.ts

@@ -39,4 +39,27 @@ describe("AutoMovedBadge", () => {
 		);
 		assert.match(html, /Move back to Junk/);
 	});
+
+	it("renders no filter link when filtersHref is omitted (classifier move)", () => {
+		const html = renderToString(
+			createElement(AutoMovedBadge, {
+				label: "Moved from Junk by Remit",
+				onUndo: () => undefined,
+			}),
+		);
+		assert.doesNotMatch(html, /Manage filter/);
+		assert.doesNotMatch(html, /settings\/filters/);
+	});
+
+	it("renders a Manage filter link to Settings when filtersHref is set", () => {
+		const html = renderToString(
+			createElement(AutoMovedBadge, {
+				label: "Moved from Inbox by Remit",
+				onUndo: () => undefined,
+				filtersHref: "/settings/filters",
+			}),
+		);
+		assert.match(html, /Manage filter/);
+		assert.match(html, /href="\/settings\/filters"/);
+	});
 });

package/src/components/auto-moved-badge.stories.tsx

@@ -34,6 +34,24 @@ export const WithoutUndoAction: Story = {
 	args: { label: "Moved from Junk by Remit", size: "md" },
 };
 
+export const FilterMoveWithManageLink: Story = {
+	args: {
+		label: "Moved from Inbox by Remit",
+		size: "md",
+		onUndo: () => alert("Undo"),
+		filtersHref: "/settings/filters",
+	},
+};
+
+export const FilterMoveListRow: Story = {
+	// The list row is icon + label only — the app gates the Manage link (and
+	// Undo) to the reading-view `md` size, so no `filtersHref` here.
+	args: {
+		label: "Moved from Inbox by Remit",
+		size: "sm",
+	},
+};
+
 export const SideBySide: Story = {
 	render: () => (
 		<div className="flex flex-col items-start gap-3">
@@ -43,6 +61,12 @@ export const SideBySide: Story = {
 				size="md"
 				onUndo={() => undefined}
 			/>
+			<AutoMovedBadge
+				label="Moved from Inbox by Remit"
+				size="md"
+				onUndo={() => undefined}
+				filtersHref="/settings/filters"
+			/>
 		</div>
 	),
 };

package/src/components/auto-moved-badge.tsx

@@ -13,21 +13,31 @@ export interface AutoMovedBadgeProps {
 	 */
 	onUndo?: () => void;
 	undoLabel?: string;
+	/**
+	 * Settings › Filters link, present only for a standing-filter move: undo
+	 * returns the message but never disables the filter, so the badge offers a
+	 * way to reach the filter that keeps moving mail. Omit for a classifier move.
+	 */
+	filtersHref?: string;
+	manageLabel?: string;
 	className?: string;
 }
 
 /**
  * Unobtrusive indicator that Remit auto-moved this message, with an optional
- * inline one-click undo. Purely presentational — the label text and whether
- * the move is still in effect (so the badge should render at all) are the
- * caller's responsibility; this component has no notion of placement/mailbox
- * state.
+ * inline one-click undo and, for a standing-filter move, a link to the filter
+ * in Settings. Purely presentational — the label text, whether the move is
+ * still in effect (so the badge should render at all), and whether a filter
+ * link applies are the caller's responsibility; this component has no notion of
+ * placement/mailbox state.
  */
 export function AutoMovedBadge({
 	label,
 	size = "sm",
 	onUndo,
 	undoLabel = "Undo",
+	filtersHref,
+	manageLabel = "Manage filter",
 	className,
 }: AutoMovedBadgeProps) {
 	return (
@@ -52,6 +62,17 @@ export function AutoMovedBadge({
 					{undoLabel}
 				</button>
 			)}
+			{filtersHref && (
+				<a
+					href={filtersHref}
+					onClick={(event) => {
+						event.stopPropagation();
+					}}
+					className="font-semibold underline decoration-dotted underline-offset-2 hover:decoration-solid"
+				>
+					{manageLabel}
+				</a>
+			)}
 		</Badge>
 	);
 }