Table of Content functionality

frontend/src/app/stories/[id]/detail/page.tsx

@@ -10,6 +10,7 @@ import AppLayout from '../../../../components/layout/AppLayout';
 import Button from '../../../../components/ui/Button';
 import LoadingSpinner from '../../../../components/ui/LoadingSpinner';
 import TagDisplay from '../../../../components/tags/TagDisplay';
+import TableOfContents from '../../../../components/stories/TableOfContents';
 import { calculateReadingTime } from '../../../../lib/settings';
 
 export default function StoryDetailPage() {
@@ -366,6 +367,15 @@ export default function StoryDetailPage() {
               </div>
             )}
 
+            {/* Table of Contents */}
+            <TableOfContents 
+              htmlContent={story.contentHtml || ''} 
+              onItemClick={(item) => {
+                // Scroll to the story reading view with the specific heading
+                window.location.href = `/stories/${story.id}#${item.id}`;
+              }}
+            />
+
             {/* Tags */}
             {story.tags && story.tags.length > 0 && (
               <div className="theme-card theme-shadow rounded-lg p-4">