feat(classes): optimize teacher dashboard ui and implement grade management

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

@@ -1,8 +1,11 @@
 "use client"
 
 import { useState } from "react"
-import { ChevronRight, FileText, Folder, MoreHorizontal, Plus, Trash2 } from "lucide-react"
+import { ChevronRight, FileText, Folder, Plus, Trash2, GripVertical } from "lucide-react"
 import { toast } from "sonner"
+import { DndContext, closestCenter, KeyboardSensor, PointerSensor, useSensor, useSensors, DragEndEvent } from "@dnd-kit/core"
+import { SortableContext, sortableKeyboardCoordinates, verticalListSortingStrategy, useSortable } from "@dnd-kit/sortable"
+import { CSS } from "@dnd-kit/utilities"
 import { Chapter } from "../types"
 import {
   Collapsible,
@@ -10,13 +13,6 @@ import {
   CollapsibleTrigger,
 } from "@/shared/components/ui/collapsible"
 import { Button } from "@/shared/components/ui/button"
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from "@/shared/components/ui/dropdown-menu"
 import {
   AlertDialog,
   AlertDialogAction,
@@ -29,54 +25,62 @@ import {
 } from "@/shared/components/ui/alert-dialog"
 import { cn } from "@/shared/lib/utils"
 import { CreateChapterDialog } from "./create-chapter-dialog"
-import { deleteChapterAction } from "../actions"
+import { deleteChapterAction, reorderChaptersAction } from "../actions"
 
-interface ChapterItemProps {
+interface SortableChapterItemProps {
   chapter: Chapter
-  level?: number
+  level: number
   selectedId?: string
   onSelect: (chapter: Chapter) => void
   textbookId: string
+  onDelete: (chapter: Chapter) => void
+  onCreateSub: (parentId: string) => void
 }
 
-function ChapterItem({ chapter, level = 0, selectedId, onSelect, textbookId }: ChapterItemProps) {
-  const [isOpen, setIsOpen] = useState(false)
-  const [showCreateDialog, setShowCreateDialog] = useState(false)
-  const [showDeleteDialog, setShowDeleteDialog] = useState(false)
-  const [isDeleting, setIsDeleting] = useState(false)
+function SortableChapterItem({ chapter, level, selectedId, onSelect, textbookId, onDelete, onCreateSub }: SortableChapterItemProps) {
+  const [isOpen, setIsOpen] = useState(level === 0)
   const hasChildren = chapter.children && chapter.children.length > 0
   const isSelected = chapter.id === selectedId
 
-  const handleDelete = async () => {
-    setIsDeleting(true)
-    const res = await deleteChapterAction(chapter.id, textbookId)
-    setIsDeleting(false)
-    if (res.success) {
-      toast.success(res.message)
-      setShowDeleteDialog(false)
-    } else {
-      toast.error(res.message)
-    }
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    transform,
+    transition,
+    isDragging,
+  } = useSortable({ id: chapter.id })
+
+  const style = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+    zIndex: isDragging ? 10 : 1,
+    position: "relative" as const,
   }
 
   return (
-    <div className={cn("w-full", level > 0 && "ml-4 border-l pl-2")}>
+    <div ref={setNodeRef} style={style} className={cn(level > 0 && "ml-2 border-l border-muted/30 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"
+            "flex items-center group py-1.5 px-2 rounded-md transition-colors cursor-pointer select-none",
+            isSelected ? "bg-accent text-accent-foreground font-medium" : "hover:bg-muted/50 text-muted-foreground hover:text-foreground",
+            isDragging && "opacity-50"
         )}>
+          <div {...attributes} {...listeners} className="mr-1 cursor-grab opacity-0 group-hover:opacity-100 transition-opacity p-1 hover:bg-muted rounded">
+             <GripVertical className="h-3.5 w-3.5 text-muted-foreground/50" />
+          </div>
+
           {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
+                className="h-5 w-5 shrink-0 p-0 mr-1 hover:bg-transparent text-muted-foreground/70"
+                onClick={(e) => e.stopPropagation()} 
               >
                 <ChevronRight
                   className={cn(
-                    "h-4 w-4 transition-transform duration-200 text-muted-foreground",
+                    "h-3.5 w-3.5 transition-transform duration-200",
                     isOpen && "rotate-90"
                   )}
                 />
@@ -84,124 +88,257 @@ function ChapterItem({ chapter, level = 0, selectedId, onSelect, textbookId }: C
               </Button>
             </CollapsibleTrigger>
           ) : (
-            <div className="w-6 shrink-0" />
+            <div className="w-5 shrink-0 mr-1" />
           )}
           
           <div 
-            className={cn(
-                "flex flex-1 min-w-0 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"
-            )}
+            className="flex-1 min-w-0 flex items-center gap-2"
             onClick={() => onSelect(chapter)}
           >
             {hasChildren ? (
-              <Folder className={cn("h-4 w-4", isOpen ? "text-primary" : "text-muted-foreground/70")} />
+              <Folder className={cn("h-4 w-4 shrink-0 transition-colors", isOpen || isSelected ? "text-blue-500/80" : "text-muted-foreground/50")} />
             ) : (
-              <FileText className="h-4 w-4 text-muted-foreground/50" />
+              <FileText className={cn("h-4 w-4 shrink-0 transition-colors", isSelected ? "text-blue-500/80" : "text-muted-foreground/50")} />
             )}
-            <span className="truncate flex-1 min-w-0">{chapter.title}</span>
-            
-            <DropdownMenu>
-              <DropdownMenuTrigger asChild>
-                <Button
-                  variant="ghost"
-                  size="icon"
-                  className="ml-auto h-6 w-6 opacity-100 md:opacity-0 md:group-hover:opacity-100 transition-opacity focus:opacity-100"
-                  onClick={(e) => e.stopPropagation()}
-                >
-                  <MoreHorizontal className="h-4 w-4 text-muted-foreground" />
-                </Button>
-              </DropdownMenuTrigger>
-              <DropdownMenuContent align="end">
-                <DropdownMenuItem
-                  onSelect={() => setShowCreateDialog(true)}
-                >
-                  <Plus />
-                  Add Subchapter
-                </DropdownMenuItem>
-                <DropdownMenuSeparator />
-                <DropdownMenuItem variant="destructive" onSelect={() => setShowDeleteDialog(true)}>
-                  <Trash2 />
-                  Delete
-                </DropdownMenuItem>
-              </DropdownMenuContent>
-            </DropdownMenu>
+            <span className="truncate text-sm">{chapter.title}</span>
+          </div>
+
+          <div className="flex items-center opacity-0 group-hover:opacity-100 transition-opacity ml-2">
+              <Button
+                variant="ghost"
+                size="icon"
+                className="h-6 w-6 text-muted-foreground hover:text-foreground"
+                onClick={(e) => {
+                  e.stopPropagation()
+                  onCreateSub(chapter.id)
+                }}
+                title="Add Subchapter"
+              >
+                <Plus className="h-3.5 w-3.5" />
+              </Button>
+              <Button
+                variant="ghost"
+                size="icon"
+                className="h-6 w-6 text-muted-foreground hover:text-destructive"
+                onClick={(e) => {
+                  e.stopPropagation()
+                  onDelete(chapter)
+                }}
+                title="Delete Chapter"
+              >
+                <Trash2 className="h-3.5 w-3.5" />
+              </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} 
+        
+        <CollapsibleContent>
+          <div className="pt-1">
+             {hasChildren && (
+                <RecursiveSortableList 
+                    items={chapter.children!} 
+                    level={level + 1}
                     selectedId={selectedId}
                     onSelect={onSelect}
                     textbookId={textbookId}
+                    onDelete={onDelete}
+                    onCreateSub={onCreateSub}
                 />
-              ))}
-            </div>
-          </CollapsibleContent>
-        )}
+             )}
+          </div>
+        </CollapsibleContent>
       </Collapsible>
-
-      <AlertDialog open={showDeleteDialog} onOpenChange={setShowDeleteDialog}>
-        <AlertDialogContent>
-          <AlertDialogHeader>
-            <AlertDialogTitle>Delete chapter?</AlertDialogTitle>
-            <AlertDialogDescription>
-              This will delete this chapter and all its subchapters and linked knowledge points.
-            </AlertDialogDescription>
-          </AlertDialogHeader>
-          <AlertDialogFooter>
-            <AlertDialogCancel disabled={isDeleting}>Cancel</AlertDialogCancel>
-            <AlertDialogAction
-              className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
-              onClick={handleDelete}
-              disabled={isDeleting}
-            >
-              {isDeleting ? "Deleting..." : "Delete"}
-            </AlertDialogAction>
-          </AlertDialogFooter>
-        </AlertDialogContent>
-      </AlertDialog>
-
-      <CreateChapterDialog
-        textbookId={textbookId}
-        parentId={chapter.id}
-        trigger={null}
-        open={showCreateDialog}
-        onOpenChange={setShowCreateDialog}
-      />
     </div>
   )
 }
 
-export function ChapterSidebarList({ 
-    chapters, 
-    selectedChapterId, 
-    onSelectChapter,
-    textbookId,
-}: { 
-    chapters: Chapter[], 
-    selectedChapterId?: string,
-    onSelectChapter: (chapter: Chapter) => void 
-    textbookId: string
+function RecursiveSortableList({ items, level, selectedId, onSelect, textbookId, onDelete, onCreateSub }: { 
+    items: Chapter[], 
+    level: number, 
+    selectedId?: string, 
+    onSelect: (c: Chapter) => void,
+    textbookId: string,
+    onDelete: (c: Chapter) => void,
+    onCreateSub: (pid: string) => void
 }) {
+    return (
+        <SortableContext items={items.map(i => i.id)} strategy={verticalListSortingStrategy}>
+            {items.map((chapter) => (
+                <SortableChapterItem 
+                    key={chapter.id} 
+                    chapter={chapter} 
+                    level={level}
+                    selectedId={selectedId}
+                    onSelect={onSelect}
+                    textbookId={textbookId}
+                    onDelete={onDelete}
+                    onCreateSub={onCreateSub}
+                />
+            ))}
+        </SortableContext>
+    )
+}
+
+interface ChapterSidebarListProps {
+  chapters: Chapter[]
+  selectedChapterId?: string
+  onSelectChapter: (chapter: Chapter) => void
+  textbookId: string
+}
+
+export function ChapterSidebarList({ chapters, selectedChapterId, onSelectChapter, textbookId }: ChapterSidebarListProps) {
+  const [showCreateDialog, setShowCreateDialog] = useState(false)
+  const [createParentId, setCreateParentId] = useState<string | undefined>(undefined)
+  
+  const [showDeleteDialog, setShowDeleteDialog] = useState(false)
+  const [deleteTarget, setDeleteTarget] = useState<Chapter | null>(null)
+  const [isDeleting, setIsDeleting] = useState(false)
+
+  const sensors = useSensors(
+      useSensor(PointerSensor, { activationConstraint: { distance: 5 } }),
+      useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates })
+  )
+
+  const handleDragEnd = async (event: DragEndEvent) => {
+      const { active, over } = event
+      if (!over || active.id === over.id) return
+
+      // Find which list the items belong to
+      // Since we only support sibling reordering for now, we assume active and over are in the same list
+      // We need a helper to find the parent of an item in the tree
+      const findParent = (items: Chapter[], id: string): Chapter | null => {
+          for (const item of items) {
+              if (item.children?.some(c => c.id === id)) return item
+              if (item.children) {
+                  const found = findParent(item.children, id)
+                  if (found) return found
+              }
+          }
+          return null
+      }
+
+      const activeParent = findParent(chapters, active.id as string)
+      const overParent = findParent(chapters, over.id as string)
+      
+      // If parents don't match (and neither is root), we can't reorder easily in this simplified version
+      // But actually, we need to check if they are in the same list.
+      // If both are root items (activeParent is null), they are siblings.
+      
+      const getSiblings = (parentId: string | null) => {
+          if (!parentId) return chapters
+          const parent = chapters.find(c => c.id === parentId) // This only finds root parents, we need recursive find
+          
+          const findNode = (nodes: Chapter[], id: string): Chapter | null => {
+              for (const node of nodes) {
+                  if (node.id === id) return node
+                  if (node.children) {
+                      const found = findNode(node.children, id)
+                      if (found) return found
+                  }
+              }
+              return null
+          }
+          
+          return findNode(chapters, parentId)?.children || []
+      }
+
+      // Simplified logic: We trust dnd-kit's SortableContext to only allow valid drops if we restricted it?
+      // No, dnd-kit allows dropping anywhere by default unless restricted.
+      
+      // We need to find the list that contains the 'active' item
+      // And the list that contains the 'over' item.
+      // If they are the same list, we reorder.
+      
+      let activeList: Chapter[] = chapters
+      let activeParentId: string | null = null
+      
+      if (activeParent) {
+          activeList = activeParent.children || []
+          activeParentId = activeParent.id
+      } else {
+           // Check if active is in root
+           if (!chapters.some(c => c.id === active.id)) {
+               // Should not happen if tree is consistent
+               return 
+           }
+      }
+      
+      // Check if over is in the same list
+      if (activeList.some(c => c.id === over.id)) {
+          const oldIndex = activeList.findIndex((item) => item.id === active.id)
+          const newIndex = activeList.findIndex((item) => item.id === over.id)
+          
+          await reorderChaptersAction(active.id as string, newIndex, activeParentId, textbookId)
+          toast.success("Order updated")
+      }
+  }
+
+  const handleDelete = async () => {
+    if (!deleteTarget) return
+    setIsDeleting(true)
+    const res = await deleteChapterAction(deleteTarget.id, textbookId)
+    setIsDeleting(false)
+    if (res.success) {
+      toast.success(res.message)
+      setShowDeleteDialog(false)
+      setDeleteTarget(null)
+    } else {
+      toast.error(res.message)
+    }
+  }
+
+  const handleDeleteRequest = (chapter: Chapter) => {
+      if (chapter.children && chapter.children.length > 0) {
+          toast.error("Cannot delete chapter with subchapters")
+          return
+      }
+      setDeleteTarget(chapter)
+      setShowDeleteDialog(true)
+  }
+
+  const handleCreateSubRequest = (parentId: string) => {
+      setCreateParentId(parentId)
+      setShowCreateDialog(true)
+  }
+
   return (
-    <div className="space-y-1">
-      {chapters.map((chapter) => (
-        <ChapterItem 
-            key={chapter.id} 
-            chapter={chapter} 
+    <DndContext sensors={sensors} collisionDetection={closestCenter} onDragEnd={handleDragEnd}>
+        <RecursiveSortableList 
+            items={chapters} 
+            level={0} 
             selectedId={selectedChapterId}
             onSelect={onSelectChapter}
             textbookId={textbookId}
+            onDelete={handleDeleteRequest}
+            onCreateSub={handleCreateSubRequest}
         />
-      ))}
-    </div>
+
+        <CreateChapterDialog 
+            textbookId={textbookId} 
+            parentId={createParentId}
+            open={showCreateDialog}
+            onOpenChange={(open) => {
+                setShowCreateDialog(open)
+                if (!open) setCreateParentId(undefined)
+            }}
+        />
+        
+        <AlertDialog open={showDeleteDialog} onOpenChange={setShowDeleteDialog}>
+            <AlertDialogContent>
+            <AlertDialogHeader>
+                <AlertDialogTitle>Delete Chapter?</AlertDialogTitle>
+                <AlertDialogDescription>
+                This will permanently delete <span className="font-medium text-foreground">{deleteTarget?.title}</span>.
+                This action cannot be undone.
+                </AlertDialogDescription>
+            </AlertDialogHeader>
+            <AlertDialogFooter>
+                <AlertDialogCancel>Cancel</AlertDialogCancel>
+                <AlertDialogAction onClick={handleDelete} className="bg-destructive text-destructive-foreground hover:bg-destructive/90" disabled={isDeleting}>
+                {isDeleting ? "Deleting..." : "Delete"}
+                </AlertDialogAction>
+            </AlertDialogFooter>
+            </AlertDialogContent>
+        </AlertDialog>
+    </DndContext>
   )
 }