feat: implement bff layer

app/books/tlc/[chapter]/page.tsx

@@ -141,6 +141,31 @@ function TlcSidebar({
   const introItems = items.filter((item) => item.type === "intro-segment");
   const chapterItems = items.filter((item) => item.type === "chapter");
 
+  // Group chapters by part (if parts exist)
+  const hasParts = chapterItems.some((item) => item.partNumber != null);
+
+  const partGroups: {
+    partNumber: number;
+    partTitle: string;
+    chapters: TlcSidebarItem[];
+  }[] = [];
+  if (hasParts) {
+    const partMap = new Map<
+      number,
+      { partTitle: string; chapters: TlcSidebarItem[] }
+    >();
+    for (const item of chapterItems) {
+      const pn = item.partNumber ?? 0;
+      const pt = item.partTitle ?? `Part ${pn}`;
+      if (!partMap.has(pn)) partMap.set(pn, { partTitle: pt, chapters: [] });
+      partMap.get(pn)!.chapters.push(item);
+    }
+    for (const [partNumber, { partTitle, chapters }] of partMap) {
+      partGroups.push({ partNumber, partTitle, chapters });
+    }
+    partGroups.sort((a, b) => a.partNumber - b.partNumber);
+  }
+
   return (
     <aside className="hidden lg:block w-56 shrink-0 sticky top-[89px] self-start max-h-[calc(100vh-89px)] overflow-y-auto py-8 pr-4">
       {/* Front Matter */}
@@ -161,23 +186,40 @@ function TlcSidebar({
         </>
       )}
 
-      {/* Chapters */}
-      {chapterItems.length > 0 && (
-        <>
-          <h2 className="text-xs font-bold uppercase tracking-wider text-muted-foreground mb-3 px-2">
-            Chapters
-          </h2>
-          <nav className="flex flex-col gap-0.5">
-            {chapterItems.map((item) => (
-              <SidebarLink
-                key={item.slug}
-                item={item}
-                isActive={item.slug === currentSlug}
-              />
-            ))}
-          </nav>
-        </>
-      )}
+      {/* Chapters — grouped by part if available */}
+      {hasParts
+        ? partGroups.map((group) => (
+            <div key={group.partNumber} className="mb-4">
+              <h2 className="text-xs font-bold uppercase tracking-wider text-muted-foreground mb-3 px-2">
+                {group.partTitle}
+              </h2>
+              <nav className="flex flex-col gap-0.5">
+                {group.chapters.map((item) => (
+                  <SidebarLink
+                    key={item.slug}
+                    item={item}
+                    isActive={item.slug === currentSlug}
+                  />
+                ))}
+              </nav>
+            </div>
+          ))
+        : chapterItems.length > 0 && (
+            <>
+              <h2 className="text-xs font-bold uppercase tracking-wider text-muted-foreground mb-3 px-2">
+                Chapters
+              </h2>
+              <nav className="flex flex-col gap-0.5">
+                {chapterItems.map((item) => (
+                  <SidebarLink
+                    key={item.slug}
+                    item={item}
+                    isActive={item.slug === currentSlug}
+                  />
+                ))}
+              </nav>
+            </>
+          )}
     </aside>
   );
 }
@@ -189,14 +231,7 @@ function SidebarLink({
   item: TlcSidebarItem;
   isActive: boolean;
 }) {
-  let label: string;
-  if (item.type === "chapter" && item.chapter != null) {
-    // Extract just the title portion after "Chapter N: "
-    const titlePart = item.label.replace(/^Chapter \d+:\s*/, "");
-    label = `${item.chapter}. ${titlePart}`;
-  } else {
-    label = item.label;
-  }
+  const label = item.label;
 
   return (
     <Link