Implement expandable volume breakdown with page chips in search panel

webapp/tipitaka-api/app/schemas.py

@@ -45,7 +45,7 @@ class SearchResponse(BaseModel):
     total_results: int
     results: List[SearchResultItem]
     time_taken_ms: float
-    breakdown_by_volume: Dict[int, Dict[str, int]]
+    breakdown_by_volume: Dict[int, Dict[str, Any]]
     search_mode: str = "fts"
     highlight_words: List[str] = Field(default_factory=list)
 

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

@@ -636,7 +636,8 @@ class SearchService:
                     cursor.execute("""
                         SELECT p.volume_id, COUNT(*) as cnt,
                                MIN(p.page_number) as first_page,
-                               MAX(p.page_number) as last_page
+                               MAX(p.page_number) as last_page,
+                               group_concat(p.page_number, ',') as page_list
                         FROM pages_fts f
                         JOIN pages p ON f.rowid = p.id
                         WHERE pages_fts MATCH ?
@@ -644,12 +645,17 @@ class SearchService:
                         ORDER BY p.volume_id
                     """, (fts_q,))
                     for row in cursor.fetchall():
+                        raw_pages = row["page_list"]
+                        pages = []
+                        if raw_pages:
+                            pages = sorted(list(set(int(x) for x in raw_pages.split(",") if x.strip())))
                         breakdown_data[row["volume_id"]] = {
                             "count": row["cnt"],
                             "first_page": row["first_page"],
                             "last_page": row["last_page"],
+                            "pages": pages,
                         }
-                    total_count = sum(r["cnt"] for r in cursor.fetchall()) or sum(v["count"] for v in breakdown_data.values())
+                    total_count = sum(v["count"] for v in breakdown_data.values())
         except Exception:
             pass
 

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

@@ -55,6 +55,14 @@ const NavDrawer: React.FC = () => {
 
   const [modeDropdownOpen, setModeDropdownOpen] = useState(false);
   const modeDropdownRef = useRef<HTMLDivElement>(null);
+  const [expandedVols, setExpandedVols] = useState<Record<number, boolean>>({});
+
+  const toggleVolExpand = (volId: number) => {
+    setExpandedVols(prev => ({
+      ...prev,
+      [volId]: !prev[volId]
+    }));
+  };
 
   const [toc, setToc] = useState<any[]>([]);
   const [loadingToc, setLoadingToc] = useState(false);
@@ -418,32 +426,69 @@ const NavDrawer: React.FC = () => {
 
                   {/* Volume breakdown bars — แสดงทุกเล่มที่พบ ไม่จำกัดจำนวน */}
                   {Object.keys(breakdown).length > 1 && (
-                    <div className={`p-3 rounded-xl border ${s.border} ${s.tab} space-y-1.5`}>
+                    <div className={`p-3 rounded-xl border ${s.border} ${s.tab} space-y-2`}>
                       <p className="text-[10px] font-bold text-[#888] uppercase mb-1">การกระจายตัว</p>
                       {Object.entries(breakdown)
                         .sort((a, b) => Number(a[0]) - Number(b[0]))
                         .map(([volId, stats]) => {
-                          const vol = volumes.find(v => v.id === Number(volId));
+                          const numericVolId = Number(volId);
+                          const vol = volumes.find(v => v.id === numericVolId);
                           const maxCount = Math.max(...Object.values(breakdown).map(s => s.count));
                           const pct = (stats.count / maxCount) * 100;
+                          const isExpanded = !!expandedVols[numericVolId];
+                          const hasPages = stats.pages && stats.pages.length > 0;
+
                           return (
-                            <button
-                              key={volId}
-                              onClick={() => vol && jumpToPage(vol.volume_number, stats.first_page, getHighlightString())}
-                              className="w-full text-left space-y-0.5 group/bar"
-                            >
-                              <div className="flex justify-between text-[9px] text-[#888] group-hover/bar:text-[#c8860a] transition-colors">
-                                <span className="truncate max-w-[180px]">เล่ม {vol?.volume_number}</span>
-                                <span>{stats.count}</span>
-                              </div>
-                              <div className="h-1 bg-white/10 rounded-full">
-                                <motion.div
-                                  initial={{ width: 0 }}
-                                  animate={{ width: `${pct}%` }}
-                                  className="h-full bg-[#c8860a] rounded-full group-hover/bar:bg-[#9a6307] transition-colors"
-                                />
+                            <div key={volId} className="space-y-1.5 border-b border-white/5 last:border-b-0 pb-1.5 last:pb-0">
+                              {/* Header Bar Area (คลิกเพื่อขยาย) */}
+                              <div
+                                onClick={() => toggleVolExpand(numericVolId)}
+                                className="w-full text-left space-y-0.5 cursor-pointer group/bar"
+                              >
+                                <div className="flex justify-between text-[9px] text-[#888] group-hover/bar:text-[#c8860a] transition-colors font-bold">
+                                  <span className="truncate max-w-[185px]">เล่ม {vol?.volume_number} — {vol?.title}</span>
+                                  <span className="flex items-center gap-1">
+                                    <span>{stats.count}</span>
+                                    {hasPages && (
+                                      <ChevronDown size={10} className={`transform transition-transform ${isExpanded ? 'rotate-180 text-[#c8860a]' : 'opacity-40'}`} />
+                                    )}
+                                  </span>
+                                </div>
+                                <div className="h-1 bg-white/10 rounded-full">
+                                  <motion.div
+                                    initial={{ width: 0 }}
+                                    animate={{ width: `${pct}%` }}
+                                    className="h-full bg-[#c8860a] rounded-full group-hover/bar:bg-[#9a6307] transition-colors"
+                                  />
+                                </div>
                               </div>
-                            </button>
+
+                              {/* Expanded Page Chips */}
+                              <AnimatePresence>
+                                {isExpanded && hasPages && (
+                                  <motion.div
+                                    initial={{ height: 0, opacity: 0 }}
+                                    animate={{ height: 'auto', opacity: 1 }}
+                                    exit={{ height: 0, opacity: 0 }}
+                                    transition={{ duration: 0.2 }}
+                                    className="overflow-hidden pl-1 pr-1 pt-1"
+                                  >
+                                    <div className="flex flex-wrap gap-1 max-h-36 overflow-y-auto custom-scrollbar">
+                                      {stats.pages?.map((pageNum) => (
+                                        <button
+                                          key={pageNum}
+                                          type="button"
+                                          onClick={() => vol && jumpToPage(vol.volume_number, pageNum, getHighlightString())}
+                                          className="text-[9px] font-mono px-1.5 py-0.5 rounded bg-white/10 hover:bg-[#c8860a] hover:text-white transition-colors text-center min-w-[32px] border border-white/5"
+                                        >
+                                          {pageNum}
+                                        </button>
+                                      ))}
+                                    </div>
+                                  </motion.div>
+                                )}
+                              </AnimatePresence>
+                            </div>
                           );
                         })}
                     </div>

webapp/tipitaka-web/src/stores/searchStore.ts

@@ -17,6 +17,7 @@ interface SearchResult {
 interface VolumeStats {
   count: number;
   first_page: number;
+  pages?: number[];
 }
 
 const PREF_KEY = 'tipitaka_search_mode';