feat: enhance footnote extraction and display at bottom of page

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

@@ -1,4 +1,5 @@
 import re
+from typing import Optional
 from app.database.sqlite_db import SQLiteDB
 from app.services.search_service import SearchService
 
@@ -273,14 +274,44 @@ class PageService:
             cleaned = self.search_service.clean_text(row["content_text"])
             is_blank = self._is_blank_page(cleaned)
 
-            # Extract end markers from raw content_html: <B> tags containing "จบ"
+            # Extract end markers and footnotes from raw content_html
             raw_html = row["content_html"] or ""
             end_markers = []
+            footnotes = []
+            
             if not is_blank and raw_html:
+                # End markers
                 for m in re.finditer(r'<B>(.*?จบ.*?)</B>', raw_html, re.IGNORECASE):
                     tm = m.group(1).strip()
                     if tm and tm not in end_markers:
                         end_markers.append(tm)
+                
+                # All Footnotes
+                # Strip line numbers first as they might precede the @ on the same line
+                fn_html = re.sub(r'<span\s+class="LineNumber">.*?</span>', '', raw_html)
+                lines = fn_html.split('\n')
+                current_fn = None
+                for line in lines:
+                    line_strip = line.strip()
+                    if not line_strip.startswith('@'):
+                        continue
+                        
+                    line_plain = re.sub(r'<[^>]+>', '', line_strip)
+                    # Match @ marker content
+                    # e.g. @๑ เนื้อหา... or @(๑) เนื้อหา...
+                    m = re.match(r'^@\s*([(\[]?[\u0E50-\u0E59\d]+[)\]-]?)\s*(.*)', line_plain)
+                    if m:
+                        marker = m.group(1).strip()
+                        text = m.group(2).strip()
+                        # Clean marker for lookup: [๑] -> ๑
+                        clean_marker = re.sub(r'[()\[\]-]', '', marker).strip()
+                        
+                        if clean_marker and not re.search(r'เชิงอรรถ', marker):
+                            current_fn = {"id": marker, "content": text}
+                            footnotes.append(current_fn)
+                    elif current_fn:
+                        # Continuation line starting with @
+                        current_fn["content"] += " " + line_plain.lstrip('@').strip()
 
             return {
                 "id": row["id"],
@@ -294,6 +325,7 @@ class PageService:
                 "title": row["title"],
                 "sections": sections,
                 "end_markers": end_markers,
+                "footnotes": footnotes,
                 "is_blank": is_blank,
             }
 
@@ -366,14 +398,17 @@ class PageService:
             
             for line in lines:
                 line_strip = line.strip()
+                # Remove tags for matching to handle @<I>๑</I>
+                line_plain = re.sub(r'<[^>]+>', '', line_strip)
+                
                 # Definition start pattern: matches @ followed by optional bracket/paren and the id
                 # e.g. @๑, @(๑), @[๑], @๑-
                 start_pattern = rf'^@\s*[(\[]?{re.escape(clean_id)}[)\]-]?.*'
                 
-                if re.match(start_pattern, line_strip):
+                if re.match(start_pattern, line_plain):
                     capturing = True
-                    # Strip the @ and marker part
-                    content = re.sub(rf'^@\s*[(\[]?{re.escape(clean_id)}[)\]-]?\s*', '', line_strip)
+                    # Strip the @ and marker part from the plain text to get content
+                    content = re.sub(rf'^@\s*[(\[]?{re.escape(clean_id)}[)\]-]?\s*', '', line_plain)
                     if content:
                         found_lines.append(content)
                 elif capturing:

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

@@ -152,7 +152,9 @@ const ReaderPanel: React.FC = () => {
           x: rect.left + rect.width / 2,
           y: rect.bottom,
           id: target.innerText,
-          type: isAbbrev ? 'abbrev' : 'footnote'
+          type: isAbbrev ? 'abbrev' : 'footnote',
+          vol: currentVolume,
+          page: currentPage
         });
       }
     }
@@ -210,6 +212,26 @@ const ReaderPanel: React.FC = () => {
                 </>
               )}
 
+              {/* Footnotes Section */}
+              {content.footnotes && content.footnotes.length > 0 && (
+                <div className="mt-16 pt-8 border-t border-[#c8860a]/20">
+                  <h5 className="text-[#c8860a] text-xs font-bold tracking-widest uppercase mb-6 flex items-center gap-2">
+                    <svg className="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M16 4v12l-4-2-4 2V4M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
+                    </svg>
+                    เชิงอรรถ (Footnotes)
+                  </h5>
+                  <div className="space-y-4">
+                    {content.footnotes.map((fn: any, idx: number) => (
+                      <div key={idx} className="flex gap-3 text-[13px] leading-relaxed text-white/50 hover:text-white/80 transition-colors">
+                        <span className="text-[#c8860a] font-bold min-w-[24px] text-right shrink-0">{fn.id}</span>
+                        <span className="font-light">{fn.content}</span>
+                      </div>
+                    ))}
+                  </div>
+                </div>
+              )}
+
               <footer className="mt-12 pt-6 border-t border-[#888]/10 text-center">
                 <span className="text-xs text-[#888]">
                   — เล่ม {currentVolume} หน้า {currentPage} —

webapp/tipitaka-web/src/components/reader/ReferencePopup.tsx

@@ -6,6 +6,8 @@ export interface RefPopupPos {
   y: number;
   id: string;
   type: 'abbrev' | 'footnote';
+  vol: number;
+  page: number;
 }
 
 interface Props {
@@ -79,36 +81,62 @@ const ReferencePopup: React.FC<Props> = ({ pos, onClose }) => {
             position: 'fixed',
             left: pos.x,
             top: pos.y,
-            transform: 'translate(-50%, 8px)', // 8px gap below the target
+            transform: 'translate(-50%, 8px)',
             zIndex: 9998,
           }}
-          className="w-72 p-4 rounded-xl shadow-2xl bg-[#1a1a2e] border border-[#3a3a5e] text-[#e8e4da] text-sm leading-relaxed"
+          className="w-80 rounded-2xl shadow-[0_20px_50px_rgba(0,0,0,0.5)] bg-[#1a1a2e]/90 backdrop-blur-xl border border-white/10 text-[#e8e4da] overflow-hidden"
         >
-          <div className="flex items-center gap-2 mb-2 pb-2 border-b border-[#3a3a5e]">
-            <span className="text-[#c8860a] font-bold">{pos.id}</span>
-            <span className="text-xs text-[#888]">
-              {pos.type === 'abbrev' ? 'ขยายความส่วนที่ย่อ' : 'เชิงอรรถ'}
-            </span>
-            {isLoading && <span className="ml-auto animate-pulse text-[10px]">กำลังโหลด...</span>}
-          </div>
+          {/* Gradient top bar */}
+          <div className="h-1 bg-gradient-to-r from-[#c8860a]/0 via-[#c8860a] to-[#c8860a]/0" />
           
-          <div className="max-h-48 overflow-y-auto custom-scrollbar">
-            {isLoading ? (
-              <div className="space-y-2 py-1">
-                <div className="h-3 bg-white/5 rounded w-full animate-pulse" />
-                <div className="h-3 bg-white/5 rounded w-5/6 animate-pulse" />
-                <div className="h-3 bg-white/5 rounded w-4/6 animate-pulse" />
+          <div className="p-4">
+            <div className="flex items-center justify-between mb-3 pb-2 border-b border-white/5">
+              <div className="flex items-center gap-2">
+                <span className="bg-[#c8860a] text-[#1a1a2e] text-xs font-bold px-1.5 py-0.5 rounded">
+                  {pos.id}
+                </span>
+                <span className="text-xs font-medium text-white/50 tracking-wide uppercase">
+                  {pos.type === 'abbrev' ? 'Abbreviation' : 'Footnote'}
+                </span>
+              </div>
+              <button 
+                onClick={onClose}
+                className="text-white/30 hover:text-white/70 transition-colors"
+              >
+                <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+                </svg>
+              </button>
+            </div>
+            
+            <div className="max-h-60 overflow-y-auto custom-scrollbar pr-1">
+              {isLoading ? (
+                <div className="space-y-3 py-1">
+                  <div className="h-3 bg-white/10 rounded-full w-full animate-pulse" />
+                  <div className="h-3 bg-white/10 rounded-full w-5/6 animate-pulse" />
+                  <div className="h-3 bg-white/10 rounded-full w-4/6 animate-pulse" />
+                </div>
+              ) : (
+                <div className="text-[15px] leading-relaxed font-light text-white/90">
+                  {content || (
+                    <span className="text-white/40 italic">ไม่พบข้อมูลอ้างอิง</span>
+                  )}
+                </div>
+              )}
+            </div>
+            
+            {pos.type === 'abbrev' && !isLoading && (
+              <div className="mt-3 pt-2 border-t border-white/5 flex items-center gap-1.5">
+                <div className="w-1.5 h-1.5 rounded-full bg-[#c8860a] animate-pulse" />
+                <span className="text-[10px] text-white/30 uppercase tracking-tighter">AI Expanded</span>
               </div>
-            ) : (
-              <p className="text-[#e8e4da]/90">
-                {content || "ไม่พบข้อมูลอ้างอิง"}
-              </p>
             )}
           </div>
-          {/* tail arrow pointing up */}
+
+          {/* Tail arrow */}
           <div
-            className="pointer-events-none absolute left-1/2 -translate-x-1/2 -top-[6px]
-                       w-3 h-3 bg-[#1a1a2e] border-l border-t border-[#3a3a5e] rotate-45"
+            className="pointer-events-none absolute left-1/2 -translate-x-1/2 -top-[5px]
+                       w-2.5 h-2.5 bg-[#1a1a2e] border-l border-t border-white/10 rotate-45"
           />
         </motion.div>
       )}