Cleanup pass 2

app/components/sections/RuleStack/RuleStack.container.tsx

@@ -6,6 +6,7 @@
 
 import { memo, useEffect, useState } from "react";
 import { useRouter } from "next/navigation";
+import { useTranslation } from "../../../contexts/MessagesContext";
 import { logger } from "../../../../lib/logger";
 import { prepareFreshCreateFlowEntry } from "../../../(app)/create/utils/prepareFreshCreateFlowEntry";
 import {
@@ -34,6 +35,8 @@ declare global {
 const RuleStackContainer = memo<RuleStackProps>(
   ({ className = "", initialGridEntries, translationNamespace, twoColumnsFromMd }) => {
   const router = useRouter();
+  const namespace = translationNamespace ?? "pages.home.ruleStack";
+  const t = useTranslation(namespace);
   const [gridEntries, setGridEntries] = useState<TemplateGridCardEntry[] | null>(
     () => initialGridEntries ?? null,
   );
@@ -107,7 +110,9 @@ const RuleStackContainer = memo<RuleStackProps>(
       className={className}
       onTemplateClick={handleTemplateClick}
       gridEntries={gridEntries}
-      translationNamespace={translationNamespace ?? "pages.home.ruleStack"}
+      sectionTitle={t("title")}
+      sectionSubtitle={t("subtitle")}
+      seeAllTemplatesLabel={t("button.seeAllTemplates")}
       twoColumnsFromMd={twoColumnsFromMd}
     />
   );

app/components/sections/RuleStack/RuleStack.types.ts

@@ -23,6 +23,8 @@ export interface RuleStackViewProps {
   onTemplateClick: (_slug: string) => void;
   /** `null` while loading curated templates from the API. */
   gridEntries: TemplateGridCardEntry[] | null;
-  translationNamespace: string;
+  sectionTitle: string;
+  sectionSubtitle: string;
+  seeAllTemplatesLabel: string;
   twoColumnsFromMd?: boolean;
 }

app/components/sections/RuleStack/RuleStack.view.tsx

@@ -1,6 +1,5 @@
 "use client";
 
-import { useTranslation } from "../../../contexts/MessagesContext";
 import SectionHeader from "../../type/SectionHeader";
 import Button from "../../buttons/Button";
 import { GovernanceTemplateGrid } from "../GovernanceTemplateGrid";
@@ -12,12 +11,11 @@ export function RuleStackView({
   className,
   onTemplateClick,
   gridEntries,
-  translationNamespace,
+  sectionTitle,
+  sectionSubtitle,
+  seeAllTemplatesLabel,
   twoColumnsFromMd = false,
 }: RuleStackViewProps) {
-  const t = useTranslation(translationNamespace);
-  const buttonText = t("button.seeAllTemplates");
-
   return (
     <section
       data-figma-node="22085-860413"
@@ -35,8 +33,8 @@ export function RuleStackView({
       `}
     >
       <SectionHeader
-        title={t("title")}
-        subtitle={t("subtitle")}
+        title={sectionTitle}
+        subtitle={sectionSubtitle}
         variant="multi-line"
         ruleStackDesktopTypeScale
         twoColumnsFromMd={twoColumnsFromMd}
@@ -69,7 +67,7 @@ export function RuleStackView({
           size="large"
           href="/templates"
         >
-          {buttonText}
+          {seeAllTemplatesLabel}
         </Button>
       </div>
     </section>