Rename variables: dynamicMdContent→sidebarMdContent, localDynamicMdContent→dynamicMdContent

Co-authored-by: na-trium-144 <[email protected]>

Author: Copilot

app/[docs_id]/dynamicMdContext.tsx

@@ -3,38 +3,38 @@
 import { createContext, ReactNode, useContext, useState } from "react";
 import { DynamicMarkdownSection } from "./pageContent";
 
-export interface IDynamicMdContext {
-  dynamicMdContent: DynamicMarkdownSection[];
-  setDynamicMdContent: React.Dispatch<React.SetStateAction<DynamicMarkdownSection[]>>;
+export interface ISidebarMdContext {
+  sidebarMdContent: DynamicMarkdownSection[];
+  setSidebarMdContent: React.Dispatch<React.SetStateAction<DynamicMarkdownSection[]>>;
 }
 
-const DynamicMdContext = createContext<IDynamicMdContext | null>(null);
+const SidebarMdContext = createContext<ISidebarMdContext | null>(null);
 
-export function useDynamicMdContext() {
-  const context = useContext(DynamicMdContext);
+export function useSidebarMdContext() {
+  const context = useContext(SidebarMdContext);
   if (!context) {
     throw new Error(
-      "useDynamicMdContext must be used within a DynamicMdProvider"
+      "useSidebarMdContext must be used within a SidebarMdProvider"
     );
   }
   return context;
 }
 
-export function useDynamicMdContextOptional() {
-  return useContext(DynamicMdContext);
+export function useSidebarMdContextOptional() {
+  return useContext(SidebarMdContext);
 }
 
-export function DynamicMdProvider({
+export function SidebarMdProvider({
   children,
 }: {
   children: ReactNode;
 }) {
-  const [dynamicMdContent, setDynamicMdContent] =
+  const [sidebarMdContent, setSidebarMdContent] =
     useState<DynamicMarkdownSection[]>([]);
 
   return (
-    <DynamicMdContext.Provider value={{ dynamicMdContent, setDynamicMdContent }}>
+    <SidebarMdContext.Provider value={{ sidebarMdContent, setSidebarMdContent }}>
       {children}
-    </DynamicMdContext.Provider>
+    </SidebarMdContext.Provider>
   );
 }

app/[docs_id]/pageContent.tsx

@@ -5,7 +5,7 @@ import { MarkdownSection } from "./splitMarkdown";
 import { ChatForm } from "./chatForm";
 import { Heading, StyledMarkdown } from "./markdown";
 import { useChatHistoryContext } from "./chatHistory";
-import { useDynamicMdContext } from "./dynamicMdContext";
+import { useSidebarMdContext } from "./dynamicMdContext";
 import clsx from "clsx";
 
 // MarkdownSectionに追加で、ユーザーが今そのセクションを読んでいるかどうか、などの動的な情報を持たせる
@@ -20,10 +20,10 @@ interface PageContentProps {
   docs_id: string;
 }
 export function PageContent(props: PageContentProps) {
-  const { setDynamicMdContent } = useDynamicMdContext();
+  const { setSidebarMdContent } = useSidebarMdContext();
 
   // SSR用のローカルstate
-  const [localDynamicMdContent, setLocalDynamicMdContent] = useState<
+  const [dynamicMdContent, setDynamicMdContent] = useState<
     DynamicMarkdownSection[]
   >(
     props.splitMdContent.map((section, i) => ({
@@ -40,14 +40,14 @@ export function PageContent(props: PageContentProps) {
       inView: false,
       sectionId: `${props.docs_id}-${i}`,
     }));
-    setLocalDynamicMdContent(newContent);
     setDynamicMdContent(newContent);
+    setSidebarMdContent(newContent);
 
     // クリーンアップ：コンポーネントがアンマウントされたらcontextをクリア
     return () => {
-      setDynamicMdContent([]);
+      setSidebarMdContent([]);
     };
-  }, [props.splitMdContent, props.docs_id, setDynamicMdContent]);
+  }, [props.splitMdContent, props.docs_id, setSidebarMdContent]);
 
   const sectionRefs = useRef<Array<HTMLDivElement | null>>([]);
   // sectionRefsの長さをsplitMdContentに合わせる
@@ -70,15 +70,15 @@ export function PageContent(props: PageContentProps) {
       };
 
       // ローカルstateとcontextの両方を更新
-      setLocalDynamicMdContent(updateContent);
       setDynamicMdContent(updateContent);
+      setSidebarMdContent(updateContent);
     };
     window.addEventListener("scroll", handleScroll);
     handleScroll();
     return () => {
       window.removeEventListener("scroll", handleScroll);
     };
-  }, [setDynamicMdContent]);
+  }, [setSidebarMdContent]);
 
   const [isFormVisible, setIsFormVisible] = useState(false);
 
@@ -91,7 +91,7 @@ export function PageContent(props: PageContentProps) {
         gridTemplateColumns: `1fr auto`,
       }}
     >
-      {localDynamicMdContent.map((section, index) => (
+      {dynamicMdContent.map((section, index) => (
         <>
           <div
             className="max-w-200"
@@ -147,7 +147,7 @@ export function PageContent(props: PageContentProps) {
         <div className="fixed bottom-4 right-4 left-4 lg:left-84 z-20">
           <ChatForm
             documentContent={props.documentContent}
-            sectionContent={localDynamicMdContent}
+            sectionContent={dynamicMdContent}
             docs_id={props.docs_id}
             close={() => setIsFormVisible(false)}
           />

app/layout.tsx

@@ -9,7 +9,7 @@ import { PyodideProvider } from "./terminal/python/pyodide";
 import { WandboxProvider } from "./terminal/wandbox/wandbox";
 import { EmbedContextProvider } from "./terminal/embedContext";
 import { AutoAnonymousLogin } from "./accountMenu";
-import { DynamicMdProvider } from "./[docs_id]/dynamicMdContext";
+import { SidebarMdProvider } from "./[docs_id]/dynamicMdContext";
 
 export const metadata: Metadata = {
   title: "Create Next App",
@@ -23,7 +23,7 @@ export default function RootLayout({
     <html lang="ja">
       <body className="w-screen h-screen">
         <AutoAnonymousLogin />
-        <DynamicMdProvider>
+        <SidebarMdProvider>
           <div className="drawer lg:drawer-open">
             <input id="drawer-toggle" type="checkbox" className="drawer-toggle" />
             <div className="drawer-content flex flex-col">
@@ -43,7 +43,7 @@ export default function RootLayout({
               <Sidebar />
             </div>
           </div>
-        </DynamicMdProvider>
+        </SidebarMdProvider>
       </body>
     </html>
   );

app/sidebar.tsx

@@ -4,15 +4,15 @@ import { usePathname } from "next/navigation";
 import { pagesList } from "./pagesList";
 import { AccountMenu } from "./accountMenu";
 import { ThemeToggle } from "./[docs_id]/themeToggle";
-import { useDynamicMdContext } from "./[docs_id]/dynamicMdContext";
+import { useSidebarMdContext } from "./[docs_id]/dynamicMdContext";
 
 export function Sidebar() {
   const pathname = usePathname();
   const docs_id = pathname.replace(/^\//, "");
-  const { dynamicMdContent } = useDynamicMdContext();
+  const { sidebarMdContent } = useSidebarMdContext();
 
   // 現在表示中のセクション（最初にinViewがtrueのもの）を見つける
-  const currentSectionIndex = dynamicMdContent.findIndex(
+  const currentSectionIndex = sidebarMdContent.findIndex(
     (section) => section.inView
   );
   return (
@@ -62,9 +62,9 @@ export function Sidebar() {
                       <span className="mr-0">{page.id}.</span>
                       {page.title}
                     </Link>
-                    {`${group.id}-${page.id}` === docs_id && dynamicMdContent.length > 0 && (
+                    {`${group.id}-${page.id}` === docs_id && sidebarMdContent.length > 0 && (
                       <ul className="ml-4 text-sm">
-                        {dynamicMdContent.slice(1).map((section, idx) => {
+                        {sidebarMdContent.slice(1).map((section, idx) => {
                           // idx + 1 は実際のsectionIndexに対応（slice(1)で最初を除外しているため）
                           const isCurrentSection = idx + 1 === currentSectionIndex;
                           return (