Module Update

src/modules/textbooks/components/chapter-sidebar-list.tsx

@@ -0,0 +1,124 @@
+"use client"
+
+import { useState } from "react"
+import { ChevronRight, FileText, Folder, MoreHorizontal } from "lucide-react"
+import { Chapter } from "../types"
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/shared/components/ui/collapsible"
+import { Button } from "@/shared/components/ui/button"
+import { cn } from "@/shared/lib/utils"
+
+interface ChapterItemProps {
+  chapter: Chapter
+  level?: number
+  selectedId?: string
+  onSelect: (chapter: Chapter) => void
+}
+
+function ChapterItem({ chapter, level = 0, selectedId, onSelect }: ChapterItemProps) {
+  const [isOpen, setIsOpen] = useState(false)
+  const hasChildren = chapter.children && chapter.children.length > 0
+  const isSelected = chapter.id === selectedId
+
+  return (
+    <div className={cn("w-full", level > 0 && "ml-4 border-l pl-2")}>
+      <Collapsible open={isOpen} onOpenChange={setIsOpen}>
+        <div className={cn(
+            "flex items-center group py-1 rounded-md transition-colors",
+            isSelected ? "bg-accent text-accent-foreground" : "hover:bg-muted/50"
+        )}>
+          {hasChildren ? (
+            <CollapsibleTrigger asChild>
+              <Button
+                variant="ghost"
+                size="icon"
+                className="h-6 w-6 shrink-0 p-0 hover:bg-muted"
+                onClick={(e) => e.stopPropagation()} // Prevent selecting parent when toggling
+              >
+                <ChevronRight
+                  className={cn(
+                    "h-4 w-4 transition-transform duration-200 text-muted-foreground",
+                    isOpen && "rotate-90"
+                  )}
+                />
+                <span className="sr-only">Toggle</span>
+              </Button>
+            </CollapsibleTrigger>
+          ) : (
+            <div className="w-6 shrink-0" />
+          )}
+          
+          <div 
+            className={cn(
+                "flex flex-1 items-center gap-2 px-2 py-1.5 text-sm cursor-pointer",
+                level === 0 ? "font-medium" : "text-muted-foreground",
+                isSelected && "text-accent-foreground font-medium"
+            )}
+            onClick={() => onSelect(chapter)}
+          >
+            {hasChildren ? (
+              <Folder className={cn("h-4 w-4", isOpen ? "text-primary" : "text-muted-foreground/70")} />
+            ) : (
+              <FileText className="h-4 w-4 text-muted-foreground/50" />
+            )}
+            <span className="truncate">{chapter.title}</span>
+            
+            <Button
+              variant="ghost"
+              size="icon"
+              className="ml-auto h-6 w-6 opacity-0 group-hover:opacity-100 transition-opacity"
+              onClick={(e) => {
+                  e.stopPropagation();
+                  // Dropdown menu logic here
+              }}
+            >
+              <MoreHorizontal className="h-4 w-4 text-muted-foreground" />
+            </Button>
+          </div>
+        </div>
+
+        {hasChildren && (
+          <CollapsibleContent className="overflow-hidden data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down">
+             <div className="pt-1">
+              {chapter.children!.map((child) => (
+                <ChapterItem 
+                    key={child.id} 
+                    chapter={child} 
+                    level={level + 1} 
+                    selectedId={selectedId}
+                    onSelect={onSelect}
+                />
+              ))}
+            </div>
+          </CollapsibleContent>
+        )}
+      </Collapsible>
+    </div>
+  )
+}
+
+export function ChapterSidebarList({ 
+    chapters, 
+    selectedChapterId, 
+    onSelectChapter 
+}: { 
+    chapters: Chapter[], 
+    selectedChapterId?: string,
+    onSelectChapter: (chapter: Chapter) => void 
+}) {
+  return (
+    <div className="space-y-1">
+      {chapters.map((chapter) => (
+        <ChapterItem 
+            key={chapter.id} 
+            chapter={chapter} 
+            selectedId={selectedChapterId}
+            onSelect={onSelectChapter}
+        />
+      ))}
+    </div>
+  )
+}