fix(site): remove topic and vendor filter strip pending UI/UX redesign

Author: codercatdev

apps/site/src/components/TopicFilterStrip.astro

@@ -1,113 +1,12 @@
 ---
 /**
- * `TopicFilterStrip.astro` | Clickable Vendor & Topic Pills with Official Light/Dark Logos.
- *
- * Supports two modes:
- * 1. In-Page Filter Mode (`basePath="/podcasts"` or `basePath="/blog"`):
- *    Filters the current listing feed in-place without losing above-the-fold context,
- *    while preserving shareable `?topic=[slug]` URLs and infinite scroll.
- * 2. Hub Navigation Mode (default when `basePath` is omitted):
- *    Navigates directly to `/topics` and `/topic/[slug]`.
+ * `TopicFilterStrip.astro`
+ * Temporarily disabled pending UI/UX redesign.
  */
-import { TOPICS } from "@/lib/topics";
-
 interface Props {
 	activeSlug?: string;
 	label?: string;
-	/** When set (e.g. "/podcasts" or "/blog"), pills filter the current listing page in-place. */
 	basePath?: string;
 	allLabel?: string;
 }
-
-const {
-	activeSlug = "",
-	label = "Browse by Topic & Vendor:",
-	basePath,
-	allLabel = basePath ? "All" : "All Topics",
-} = Astro.props;
-
-const allHref = basePath ?? "/topics";
 ---
-
-<nav
-	class="my-6 flex flex-wrap items-center gap-2.5"
-	aria-label="Topics and Vendor Filter"
-	data-topic-filter-strip={basePath ? "in-page" : "hub"}
-	data-base-path={basePath}
->
-	<span class="mr-1 font-mono text-xs font-extrabold uppercase tracking-wider text-[#2A1155]/70 dark:text-slate-400">
-		{label}
-	</span>
-	<a
-		href={allHref}
-		data-topic-pill={basePath ? "" : undefined}
-		data-topic-title={basePath ? allLabel : undefined}
-		aria-current={!activeSlug ? "true" : undefined}
-		class:list={[
-			"topic-filter-pill inline-flex items-center gap-2 rounded-full border-2 border-[#2A1155] px-3.5 py-1.5 font-display text-xs font-black transition-all hover:-translate-y-0.5 shadow-sketch-sm",
-			!activeSlug
-				? "bg-[#7C3AED] text-white dark:border-white/50"
-				: "bg-white text-[#2A1155] hover:bg-[#EDE9FE] hover:text-[#7C3AED] dark:border-white/25 dark:bg-[#131B2E] dark:text-slate-100 dark:hover:bg-purple-950/60",
-		]}
-	>
-		<span>{allLabel}</span>
-	</a>
-	{
-		TOPICS.map((topic) => {
-			const isActive = activeSlug === topic.slug;
-			const pillHref = basePath
-				? `${basePath}?topic=${topic.slug}`
-				: `/topic/${topic.slug}`;
-			return (
-				<a
-					href={pillHref}
-					data-topic-pill={basePath ? topic.slug : undefined}
-					data-topic-title={basePath ? topic.title : undefined}
-					data-topic-hub={`/topic/${topic.slug}`}
-					aria-current={isActive ? "true" : undefined}
-					class:list={[
-						"topic-filter-pill inline-flex items-center gap-2 rounded-full border-2 border-[#2A1155] px-3.5 py-1.5 font-display text-xs font-black transition-all hover:-translate-y-0.5 shadow-sketch-sm",
-						isActive
-							? "bg-[#7C3AED] text-white dark:border-white/50"
-							: "bg-white text-[#2A1155] hover:bg-[#EDE9FE] hover:text-[#7C3AED] dark:border-white/25 dark:bg-[#131B2E] dark:text-slate-100 dark:hover:bg-purple-950/60",
-					]}
-				>
-					{topic.symbolLight && (
-						<img
-							src={topic.symbolLight}
-							data-src-light={topic.symbolLight}
-							data-src-dark={topic.symbolDark ?? topic.symbolLight}
-							alt=""
-							aria-hidden="true"
-							class="h-3.5 w-auto object-contain dark:hidden"
-							loading="lazy"
-							decoding="async"
-						/>
-					)}
-					{topic.symbolDark && (
-						<img
-							src={topic.symbolDark}
-							alt=""
-							aria-hidden="true"
-							class="hidden h-3.5 w-auto object-contain dark:block"
-							loading="lazy"
-							decoding="async"
-						/>
-					)}
-					<span>{topic.title}</span>
-				</a>
-			);
-		})
-	}
-	{
-		basePath && (
-			<a
-				href="/topics"
-				class="ml-auto inline-flex items-center gap-1 rounded-full border border-dashed border-[#2A1155]/40 bg-[#EDE9FE]/60 px-3 py-1 font-mono text-[11px] font-extrabold text-[#7C3AED] transition-colors hover:bg-[#EDE9FE] dark:border-purple-400/40 dark:bg-purple-950/40 dark:text-purple-200"
-			>
-				<span>Topic Hubs</span>
-				<span>&rarr;</span>
-			</a>
-		)
-	}
-</nav>

apps/site/src/pages/index.astro

@@ -3,7 +3,6 @@ import AjYarnTrail from "@/components/AjYarnTrail.astro";
 import AnimatedHero from "@/components/AnimatedHero.astro";
 import CoverImage from "@/components/CoverImage.astro";
 import HomeSection from "@/components/HomeSection.astro";
-import TopicFilterStrip from "@/components/TopicFilterStrip.astro";
 import BaseLayout from "@/layouts/BaseLayout.astro";
 import type { ContentListItem } from "@/lib/content";
 import { coursesQuery, homePageQuery } from "@/lib/sanity/queries";
@@ -49,11 +48,6 @@ const spotlightHref = spotlightPodcast
 	{/* Section 1: Dual-Theme Video-First Chalkboard Hero ("free. fun. purrfect.") */}
 	<AnimatedHero />
 
-	{/* Official Vendor & Topic Hub Strip */}
-	<div class="mx-auto max-w-7xl px-4 pb-4 sm:px-6">
-		<TopicFilterStrip label="Explore Official Vendor & Topic Hubs:" />
-	</div>
-
 	<AjYarnTrail variant="left-to-right" />
 
 	{/* Section 2: "learn by building." Dual Layout (System Flow Diagram + Featured Podcast Episode) */}