feat: use contents table for full section hierarchy in reader (sections array instead of single title)

webapp/tipitaka-api/app/services/page_service.py

@@ -26,11 +26,7 @@ class PageService:
             cursor.execute("""
                 SELECT p.id, p.volume_id, v.volume_number, p.page_number,
                        p.content_text, p.content_html, v.title,
-                       v.total_pages,
-                       (SELECT c2.title FROM contents c2
-                        WHERE c2.volume_id = p.volume_id
-                          AND c2.page_number <= p.page_number
-                        ORDER BY c2.page_number DESC LIMIT 1) AS section_title
+                       v.total_pages
                 FROM pages p
                 JOIN volumes v ON p.volume_id = v.id
                 WHERE v.volume_number = ? AND p.page_number = ?
@@ -40,6 +36,22 @@ class PageService:
             if not row:
                 return None
 
+            # Get all section headings for this page (including parent pages)
+            cursor.execute("""
+                SELECT DISTINCT c.title, c.level
+                FROM contents c
+                WHERE c.volume_id = ? AND c.page_number <= ?
+                  AND c.level IN (0, 1)
+                  AND c.title NOT LIKE '%---%'
+                  AND c.title NOT LIKE '%หน้าว่าง%'
+                ORDER BY c.page_number, c.level, c.id
+            """, (row["volume_id"], page_number))
+            sections = [
+                {"title": r["title"].strip(), "level": r["level"]}
+                for r in cursor.fetchall()
+                if r["title"].strip()
+            ]
+
             cleaned = self.search_service.clean_text(row["content_text"])
 
             # If page has less than 50 chars, return blank content
@@ -53,7 +65,7 @@ class PageService:
                 "content_text": "" if is_blank else cleaned,
                 "content_html": "" if is_blank else (row["content_html"] or ""),
                 "title": row["title"],
-                "section_title": row["section_title"] or "",
+                "sections": sections,
                 "is_blank": is_blank,
             }
 

webapp/tipitaka-web/src/components/layout/ReaderPanel.tsx

@@ -19,17 +19,31 @@ const SHELL_STYLES: Record<string, string> = {
 };
 
 // Split on double-newline → paragraphs; preserve single newlines as <br/>
-const renderContent = (text: string, fontSize: number, sectionTitle: string) => {
+const renderContent = (text: string, fontSize: number, sections: {title: string; level: number}[]) => {
   const paragraphs = text.split(/\n\n+/).filter(Boolean);
   return (
     <div
       style={{ fontSize: `${fontSize}px`, lineHeight: '2.1' }}
       className="reader-content text-left space-y-5"
     >
-      {sectionTitle && (
-        <h2 className="text-[#c8860a] text-xl md:text-2xl font-bold mb-6 leading-snug border-b border-[#c8860a]/20 pb-3">
-          {sectionTitle}
-        </h2>
+      {/* Section hierarchy breadcrumb */}
+      {sections.length > 0 && (
+        <div className="mb-6 space-y-1">
+          {sections.map((sec, i) => (
+            <div key={i} className={sec.level === 0 ? '' : 'ml-4'}>
+              {sec.level === 0 ? (
+                <h2 className="text-[#c8860a] text-xl md:text-2xl font-bold leading-snug">
+                  {sec.title}
+                </h2>
+              ) : (
+                <h3 className="text-[#c8860a]/80 text-base md:text-lg font-semibold leading-snug mt-1">
+                  {sec.title}
+                </h3>
+              )}
+            </div>
+          ))}
+          <div className="border-b border-[#c8860a]/20 mt-3" />
+        </div>
       )}
       {paragraphs.map((para, idx) => {
         // Detect sub-headings: ends with colon, or story-heading pattern like "เรื่องXXX ๑ เรื่อง"
@@ -65,7 +79,7 @@ const ReaderPanel: React.FC = () => {
   const {
     currentVolume, currentPage,
     setCurrentContent, setTotalPages,
-    setSectionTitle, setVolumeTitle,
+    setVolumeTitle,
   } = useReaderStore();
 
   const { theme, fontSize } = useThemeStore();
@@ -86,7 +100,6 @@ const ReaderPanel: React.FC = () => {
         setContent(data);
         setCurrentContent(data.content_text || '');
         if (data.total_pages) setTotalPages(data.total_pages);
-        if (data.section_title) setSectionTitle(data.section_title);
         if (data.title) setVolumeTitle(data.title);
       })
       .catch(err => console.error('Page load error:', err))
@@ -129,7 +142,7 @@ const ReaderPanel: React.FC = () => {
                 </p>
               </header>
 
-              {renderContent(content.content_text || '', fontSize, content.section_title)}
+              {renderContent(content.content_text || '', fontSize, content.sections || [])}
 
               <footer className="mt-12 pt-6 border-t border-[#888]/10 text-center">
                 <span className="text-xs text-[#888]">