Help Improvement 8 — Related Articles

interface HelpPageData {
  // ... existing fields ...
  related?: string[];  // slugs of related topics
}

{
  slug: "blog",
  title: "Blog Posts",
  // ...
  related: ["content-briefs", "activities", "calendar"],
}

// In packages/ui/src/HelpPage.tsx
 
// Add to the bottom of the page, after all sections + rating footer:
{relatedPages.length > 0 && !inDrawer && (
  <aside className="mt-10 border-t pt-6">
    <h3 className="text-sm font-semibold text-muted-foreground uppercase tracking-wide mb-3">
      Related articles
    </h3>
    <ul className="space-y-2">
      {relatedPages.map(p => (
        <li key={p.slug}>
          <Link
            href={`${basePath ?? "/help"}/${p.slug}`}
            className="flex items-center gap-2 text-sm text-foreground
              hover:text-violet-600 transition-colors group"
          >
            <BookOpen className="w-3.5 h-3.5 shrink-0 text-muted-foreground group-hover:text-violet-600" />
            {p.title}
          </Link>
        </li>
      ))}
    </ul>
  </aside>
)}

const relatedPages = useMemo(() => {
  if (!data.related?.length || !allPages) return [];
  return data.related
    .map(slug => allPages.find(p => p.slug === slug))
    .filter((p): p is HelpPageData => !!p);
}, [data.related, allPages]);