Remove upcoming features in hero page

Author: iamdevlinph

PLANS.md

@@ -69,7 +69,7 @@ Implementation is intentionally deferred. Keep every item unchecked until the co
 
 - [x] Welcome users and link the available tracker features.
 - [x] Show linked counts for owned characters, owned monsterlings, cleared codex entries, and loadouts.
-- [x] Preview planned Checklist, Artifact, Equipment, and complete Loadout features.
+- [x] Hide the optional roadmap section when no upcoming features are configured.
 
 ## SEO: Available
 

src/components/home/home-feature-sections.tsx

@@ -67,41 +67,43 @@ export const HomeFeatureSections = ({
 			</div>
 		</section>
 
-		<section aria-labelledby="upcoming-heading">
-			<div className="mb-4 flex items-end justify-between gap-4">
-				<div>
-					<h2
-						id="upcoming-heading"
-						className="text-2xl font-semibold tracking-tight"
-					>
-						Coming next
-					</h2>
-					<p className="mt-1 text-sm text-muted-foreground">
-						More ways to plan and track your account are on the roadmap.
-					</p>
+		{upcomingFeatures.length > 0 && (
+			<section aria-labelledby="upcoming-heading">
+				<div className="mb-4 flex items-end justify-between gap-4">
+					<div>
+						<h2
+							id="upcoming-heading"
+							className="text-2xl font-semibold tracking-tight"
+						>
+							Coming next
+						</h2>
+						<p className="mt-1 text-sm text-muted-foreground">
+							More ways to plan and track your account are on the roadmap.
+						</p>
+					</div>
+					<span className="hidden rounded-full border px-3 py-1 text-xs font-medium text-muted-foreground sm:inline-flex">
+						Planned
+					</span>
 				</div>
-				<span className="hidden rounded-full border px-3 py-1 text-xs font-medium text-muted-foreground sm:inline-flex">
-					Planned
-				</span>
-			</div>
-			<div className="grid gap-3 sm:grid-cols-2">
-				{upcomingFeatures.map(({ title, description, icon: Icon }) => (
-					<Card
-						key={title}
-						className="gap-3 border-dashed bg-muted/20 py-4 shadow-none"
-					>
-						<CardHeader className="grid-cols-[auto_1fr] items-center gap-x-3 px-4">
-							<span className="row-span-2 rounded-lg border bg-background p-2 text-muted-foreground">
-								<Icon className="size-4" aria-hidden="true" />
-							</span>
-							<CardTitle className="text-sm">{title}</CardTitle>
-							<CardDescription className="col-start-2 leading-5">
-								{description}
-							</CardDescription>
-						</CardHeader>
-					</Card>
-				))}
-			</div>
-		</section>
+				<div className="grid gap-3 sm:grid-cols-2">
+					{upcomingFeatures.map(({ title, description, icon: Icon }) => (
+						<Card
+							key={title}
+							className="gap-3 border-dashed bg-muted/20 py-4 shadow-none"
+						>
+							<CardHeader className="grid-cols-[auto_1fr] items-center gap-x-3 px-4">
+								<span className="row-span-2 rounded-lg border bg-background p-2 text-muted-foreground">
+									<Icon className="size-4" aria-hidden="true" />
+								</span>
+								<CardTitle className="text-sm">{title}</CardTitle>
+								<CardDescription className="col-start-2 leading-5">
+									{description}
+								</CardDescription>
+							</CardHeader>
+						</Card>
+					))}
+				</div>
+			</section>
+		)}
 	</>
 );

src/components/home/home-page.test.tsx

@@ -1,7 +1,9 @@
 // @vitest-environment jsdom
 import { cleanup, fireEvent, render, screen } from "@testing-library/react";
+import { ShieldCheck } from "lucide-react";
 import type { ComponentProps } from "react";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { HomeFeatureSections } from "@/components/home/home-feature-sections";
 import { HomePage } from "@/components/home/home-page";
 import {
 	initialCodexFilters,
@@ -93,12 +95,34 @@ describe("HomePage", () => {
 		expect(screen.getAllByText("—")).toHaveLength(6);
 	});
 
-	it("presents upcoming features without linking to unfinished pages", () => {
+	it("hides the roadmap when no upcoming features are configured", () => {
 		render(<HomePage />);
 
-		expect(screen.getByText("Equipment")).toBeTruthy();
+		expect(screen.queryByRole("heading", { name: "Coming next" })).toBeNull();
+		expect(screen.queryByText("Equipment")).toBeNull();
 		expect(
 			screen.getByRole("link", { name: "Explore Checklist" }),
 		).toBeTruthy();
+		expect(
+			screen.getByRole("link", { name: "Explore Artifacts" }),
+		).toBeTruthy();
+	});
+
+	it("shows the roadmap when upcoming features are configured", () => {
+		render(
+			<HomeFeatureSections
+				features={[]}
+				upcomingFeatures={[
+					{
+						title: "Equipment",
+						description: "Manage equipment across slots and categories.",
+						icon: ShieldCheck,
+					},
+				]}
+			/>,
+		);
+
+		expect(screen.getByRole("heading", { name: "Coming next" })).toBeTruthy();
+		expect(screen.getByText("Equipment")).toBeTruthy();
 	});
 });

src/components/home/home-page.tsx

@@ -5,13 +5,11 @@ import {
 	Camera,
 	Gem,
 	PawPrint,
-	ShieldCheck,
 	UserRoundCheck,
 } from "lucide-react";
 import {
 	type HomeFeature,
 	HomeFeatureSections,
-	type UpcomingFeature,
 } from "@/components/home/home-feature-sections";
 import { HomeHero } from "@/components/home/home-hero";
 import {
@@ -79,19 +77,6 @@ const features: HomeFeature[] = [
 	},
 ];
 
-const upcomingFeatures: UpcomingFeature[] = [
-	{
-		title: "Equipment",
-		description: "Manage equipment across slots and categories.",
-		icon: ShieldCheck,
-	},
-	{
-		title: "Complete Loadouts",
-		description: "Assign artifacts and equipment to each loadout character.",
-		icon: Blocks,
-	},
-];
-
 export const HomePage = () => {
 	const charactersOwned = useAppStore((state) => state.charactersOwned);
 	const monsterlingsOwned = useAppStore((state) => state.monsterlingsOwned);