feat : update

components/public/structured-guide.tsx

@@ -21,6 +21,7 @@ import { GuideImageExport } from "@/components/public/guide-image-export";
 import { ConstellationImage } from "@/components/public/constellation-image";
 import { RichTextContent } from "@/components/rich-text-content";
 import { LiveRefresh } from "@/components/live-refresh";
+import { GuideTopicIndicator } from "@/components/guide-topic-indicator";
 import { rarityGradientClass, rarityTextClass } from "@/lib/catalog/rarity";
 import { elementIconFilter } from "@/lib/catalog/element";
 import type { PublicGuide } from "@/lib/guides/queries";
@@ -126,13 +127,14 @@ export function StructuredGuideShell({
           <Link
             href={`/${guide.slug}`}
             className={cn(
-              "flex min-h-8 shrink-0 items-center gap-2 whitespace-nowrap rounded-md px-3 text-sm transition-colors outline-none focus-visible:ring-2 focus-visible:ring-ring",
+              "relative isolate flex min-h-8 shrink-0 items-center gap-2 whitespace-nowrap rounded-md px-3 text-sm transition-colors outline-none focus-visible:ring-2 focus-visible:ring-ring",
               !section
-                ? "bg-muted text-foreground"
+                ? "text-foreground"
                 : "text-muted-foreground hover:bg-muted hover:text-foreground",
             )}
             prefetch
           >
+            {!section ? <GuideTopicIndicator guideId={guide.id} surface="public" /> : null}
             <Image
               src={navigationIconPath("overview")!}
               alt=""
@@ -147,13 +149,14 @@ export function StructuredGuideShell({
               key={item.id}
               href={`/${guide.slug}/${item.slug}`}
               className={cn(
-                "flex min-h-8 shrink-0 items-center gap-2 whitespace-nowrap rounded-md px-3 text-sm transition-colors outline-none focus-visible:ring-2 focus-visible:ring-ring",
+                "relative isolate flex min-h-8 shrink-0 items-center gap-2 whitespace-nowrap rounded-md px-3 text-sm transition-colors outline-none focus-visible:ring-2 focus-visible:ring-ring",
                 section === item.slug
-                  ? "bg-muted text-foreground"
+                  ? "text-foreground"
                   : "text-muted-foreground hover:bg-muted hover:text-foreground",
               )}
               prefetch
             >
+              {section === item.slug ? <GuideTopicIndicator guideId={guide.id} surface="public" /> : null}
               {navigationIconPath(item.slug) ? (
                 <Image
                   src={navigationIconPath(item.slug)!}