feat : update

components/admin/guide-section-nav.tsx

@@ -4,6 +4,7 @@ import Image from "next/image";
 import Link from "next/link";
 import type { MouseEvent } from "react";
 
+import { GuideTopicIndicator } from "@/components/guide-topic-indicator";
 import { ScrollableNav } from "@/components/public/scrollable-nav";
 import { navigationIconPath } from "@/lib/navigation";
 import { cn } from "@/lib/utils";
@@ -19,9 +20,11 @@ const sections = [
 export function GuideSectionNav({
   characterKey,
   current,
+  guideId,
 }: {
   characterKey: string;
   current: "overview" | (typeof sections)[number]["slug"];
+  guideId: string;
 }) {
   const confirmNavigation = (event: MouseEvent<HTMLAnchorElement>) => {
     const browserWindow = window as Window & { __guideHasUnsavedChanges?: boolean };
@@ -39,10 +42,11 @@ export function GuideSectionNav({
         prefetch
         onClick={confirmNavigation}
         className={cn(
-          "flex min-h-8 shrink-0 items-center gap-2 rounded-md px-3 text-sm outline-none focus-visible:ring-2 focus-visible:ring-ring",
-          current === "overview" ? "bg-muted text-foreground" : "text-muted-foreground hover:bg-muted hover:text-foreground",
+          "relative isolate flex min-h-8 shrink-0 items-center gap-2 rounded-md px-3 text-sm outline-none focus-visible:ring-2 focus-visible:ring-ring",
+          current === "overview" ? "text-foreground" : "text-muted-foreground hover:bg-muted hover:text-foreground",
         )}
       >
+        {current === "overview" ? <GuideTopicIndicator guideId={guideId} surface="admin" /> : null}
         <Image src={navigationIconPath("overview")!} alt="" width={20} height={20} className="size-5 object-contain" />
         Overview
       </Link>
@@ -55,10 +59,11 @@ export function GuideSectionNav({
             prefetch
             onClick={confirmNavigation}
             className={cn(
-              "flex min-h-8 shrink-0 items-center gap-2 rounded-md px-3 text-sm outline-none focus-visible:ring-2 focus-visible:ring-ring",
-              current === section.slug ? "bg-muted text-foreground" : "text-muted-foreground hover:bg-muted hover:text-foreground",
+              "relative isolate flex min-h-8 shrink-0 items-center gap-2 rounded-md px-3 text-sm outline-none focus-visible:ring-2 focus-visible:ring-ring",
+              current === section.slug ? "text-foreground" : "text-muted-foreground hover:bg-muted hover:text-foreground",
             )}
           >
+            {current === section.slug ? <GuideTopicIndicator guideId={guideId} surface="admin" /> : null}
             {iconPath ? <Image src={iconPath} alt="" width={20} height={20} className="size-5 object-contain" /> : null}
             {section.label}
           </Link>

components/guide-topic-indicator.tsx

@@ -0,0 +1,22 @@
+import { ViewTransition } from "react";
+
+export function GuideTopicIndicator({
+  guideId,
+  surface,
+}: {
+  guideId: string;
+  surface: "public" | "admin";
+}) {
+  return (
+    <ViewTransition
+      name={`guide-topic-indicator-${surface}-${guideId}`}
+      share="guide-topic-indicator"
+      default="none"
+    >
+      <span
+        aria-hidden="true"
+        className="absolute inset-0 -z-10 rounded-md bg-muted"
+      />
+    </ViewTransition>
+  );
+}

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)!}