Add context to share dynamicMdContent and highlight current section in sidebar

Co-authored-by: na-trium-144 <100704180+na-trium-144@users.noreply.github.com>

Author: Copilot

app/[docs_id]/dynamicMdContext.tsx

@@ -0,0 +1,42 @@
+"use client";
+
+import { createContext, ReactNode, useContext, useState } from "react";
+import { DynamicMarkdownSection } from "./pageContent";
+
+export interface IDynamicMdContext {
+  dynamicMdContent: DynamicMarkdownSection[];
+  setDynamicMdContent: React.Dispatch<React.SetStateAction<DynamicMarkdownSection[]>>;
+}
+
+const DynamicMdContext = createContext<IDynamicMdContext | null>(null);
+
+export function useDynamicMdContext() {
+  const context = useContext(DynamicMdContext);
+  if (!context) {
+    throw new Error(
+      "useDynamicMdContext must be used within a DynamicMdProvider"
+    );
+  }
+  return context;
+}
+
+export function useDynamicMdContextOptional() {
+  return useContext(DynamicMdContext);
+}
+
+export function DynamicMdProvider({
+  children,
+  initialContent,
+}: {
+  children: ReactNode;
+  initialContent: DynamicMarkdownSection[];
+}) {
+  const [dynamicMdContent, setDynamicMdContent] =
+    useState<DynamicMarkdownSection[]>(initialContent);
+
+  return (
+    <DynamicMdContext.Provider value={{ dynamicMdContent, setDynamicMdContent }}>
+      {children}
+    </DynamicMdContext.Provider>
+  );
+}

app/[docs_id]/page.tsx

@@ -6,6 +6,7 @@ import { MarkdownSection, splitMarkdown } from "./splitMarkdown";
 import pyodideLock from "pyodide/pyodide-lock.json";
 import { PageContent } from "./pageContent";
 import { ChatHistoryProvider } from "./chatHistory";
+import { DynamicMdProvider } from "./dynamicMdContext";
 import { getChat } from "@/lib/chatHistory";
 
 export default async function Page({
@@ -52,13 +53,21 @@ export default async function Page({
 
   const initialChatHistories = getChat(docs_id);
 
+  const initialDynamicMdContent = (await splitMdContent).map((section, i) => ({
+    ...section,
+    inView: false,
+    sectionId: `${docs_id}-${i}`,
+  }));
+
   return (
     <ChatHistoryProvider initialChatHistories={await initialChatHistories}>
-      <PageContent
-        documentContent={await mdContent}
-        splitMdContent={await splitMdContent}
-        docs_id={docs_id}
-      />
+      <DynamicMdProvider initialContent={initialDynamicMdContent}>
+        <PageContent
+          documentContent={await mdContent}
+          splitMdContent={await splitMdContent}
+          docs_id={docs_id}
+        />
+      </DynamicMdProvider>
     </ChatHistoryProvider>
   );
 }

app/[docs_id]/pageContent.tsx

@@ -5,6 +5,7 @@ import { MarkdownSection } from "./splitMarkdown";
 import { ChatForm } from "./chatForm";
 import { Heading, StyledMarkdown } from "./markdown";
 import { useChatHistoryContext } from "./chatHistory";
+import { useDynamicMdContext } from "./dynamicMdContext";
 import clsx from "clsx";
 
 // MarkdownSectionに追加で、ユーザーが今そのセクションを読んでいるかどうか、などの動的な情報を持たせる
@@ -19,16 +20,8 @@ interface PageContentProps {
   docs_id: string;
 }
 export function PageContent(props: PageContentProps) {
-  const [dynamicMdContent, setDynamicMdContent] = useState<
-    DynamicMarkdownSection[]
-  >(
-    // useEffectで更新するのとは別に、SSRのための初期値
-    props.splitMdContent.map((section, i) => ({
-      ...section,
-      inView: false,
-      sectionId: `${props.docs_id}-${i}`,
-    }))
-  );
+  const { dynamicMdContent, setDynamicMdContent } = useDynamicMdContext();
+
   useEffect(() => {
     // props.splitMdContentが変わったときにdynamicMdContentを更新
     setDynamicMdContent(
@@ -38,7 +31,7 @@ export function PageContent(props: PageContentProps) {
         sectionId: `${props.docs_id}-${i}`,
       }))
     );
-  }, [props.splitMdContent, props.docs_id]);
+  }, [props.splitMdContent, props.docs_id, setDynamicMdContent]);
 
   const sectionRefs = useRef<Array<HTMLDivElement | null>>([]);
   // sectionRefsの長さをsplitMdContentに合わせる
@@ -65,7 +58,7 @@ export function PageContent(props: PageContentProps) {
     return () => {
       window.removeEventListener("scroll", handleScroll);
     };
-  }, []);
+  }, [setDynamicMdContent]);
 
   const [isFormVisible, setIsFormVisible] = useState(false);
 

app/sidebar.tsx

@@ -6,18 +6,31 @@ import { splitMarkdown } from "./[docs_id]/splitMarkdown";
 import { pagesList } from "./pagesList";
 import { AccountMenu } from "./accountMenu";
 import { ThemeToggle } from "./[docs_id]/themeToggle";
+import { useDynamicMdContextOptional } from "./[docs_id]/dynamicMdContext";
 
 const fetcher: Fetcher<string, string> = (url) =>
   fetch(url).then((r) => r.text());
 
 export function Sidebar() {
   const pathname = usePathname();
   const docs_id = pathname.replace(/^\//, "");
-  const { data, error, isLoading } = useSWR(`/docs/${docs_id}.md`, fetcher);
+  const dynamicMdContextValue = useDynamicMdContextOptional();
+  
+  // コンテキストが利用可能な場合はそれを使用し、そうでない場合はフェッチする
+  const { data, error, isLoading } = useSWR(
+    dynamicMdContextValue ? null : `/docs/${docs_id}.md`,
+    fetcher
+  );
 
   if (error) console.error("Sidebar fetch error:", error);
 
-  const splitmdcontent = splitMarkdown(data ?? "");
+  // コンテキストがある場合はそれを使用、ない場合はフェッチしたデータを使用
+  const splitmdcontent = dynamicMdContextValue?.dynamicMdContent ?? splitMarkdown(data ?? "");
+  
+  // 現在表示中のセクション（最初にinViewがtrueのもの）を見つける
+  const currentSectionIndex = dynamicMdContextValue?.dynamicMdContent.findIndex(
+    (section) => section.inView
+  ) ?? -1;
   return (
     <div className="bg-base-200 h-full w-80 overflow-y-auto">
       {/* todo: 背景色ほんとにこれでいい？ */}
@@ -67,14 +80,23 @@ export function Sidebar() {
                     </Link>
                     {`${group.id}-${page.id}` === docs_id && !isLoading && (
                       <ul className="ml-4 text-sm">
-                        {splitmdcontent.slice(1).map((section, idx) => (
-                          <li
-                            key={idx}
-                            style={{ marginLeft: section.level - 2 + "em" }}
-                          >
-                            <Link href={`#${idx + 1}`}>{section.title}</Link>
-                          </li>
-                        ))}
+                        {splitmdcontent.slice(1).map((section, idx) => {
+                          // idx + 1 は実際のsectionIndexに対応（slice(1)で最初を除外しているため）
+                          const isCurrentSection = idx + 1 === currentSectionIndex;
+                          return (
+                            <li
+                              key={idx}
+                              style={{ marginLeft: section.level - 2 + "em" }}
+                            >
+                              <Link
+                                href={`#${idx + 1}`}
+                                className={isCurrentSection ? "font-bold" : ""}
+                              >
+                                {section.title}
+                              </Link>
+                            </li>
+                          );
+                        })}
                       </ul>
                     )}
                   </li>