change things

src/modules/admin/pages/library/units/ViewLibraryUnit.jsx

@@ -10,6 +10,7 @@ import { useLibrary } from "@/contexts/AdminLibraryContext";
 import { PageMeta } from "@/contexts/MetadataContext";
 import AppBreadcrumb from "@/components/generic/Breadcrumb/AppBreadcrumb";
 import AttachLessonsDialog from "../../../components/library/AttachLessonsDialog";
+import AttachCoursesDialog from "../../../components/library/AttachCoursesDialog";
 import { Button } from "@/components/ui/button";
 import { Badge } from "@/components/ui/badge";
 import { Spinner } from "@/components/ui/spinner";
@@ -20,11 +21,12 @@ export default function ViewLibraryUnit() {
   const { unitId } = useParams();
   const {
     fetchUnit, unit, loading,
-    attachLessonsToUnit, detachLessonFromUnit, reorderUnitLessons,
+    attachLessonsToUnit, detachLessonFromUnit, detachUnitFromCourse, attachUnitToCourses, reorderUnitLessons,
   } = useLibrary();
 
   const [initializing, setInitializing] = useState(true);
   const [attachOpen, setAttachOpen] = useState(false);
+  const [attachCourseOpen, setAttachCourseOpen] = useState(false);
   const [descExpanded, setDescExpanded] = useState(false);
 
   useEffect(() => {
@@ -57,6 +59,16 @@ export default function ViewLibraryUnit() {
     fetchUnit(unitId);
   };
 
+  const handleDetachCourse = async (courseId) => {
+    await detachUnitFromCourse(unitId, courseId);
+    fetchUnit(unitId);
+  };
+
+  const handleAttachCourses = async (courseIds) => {
+    await attachUnitToCourses(unitId, courseIds);
+    fetchUnit(unitId);
+  };
+
   const handleAttach = async (lessonIds) => {
     await attachLessonsToUnit(unitId, lessonIds);
     fetchUnit(unitId);
@@ -101,6 +113,21 @@ export default function ViewLibraryUnit() {
                 )}
               </div>
               <div className="flex gap-2 shrink-0">
+                <Button size="sm" variant="outline" onClick={() => setAttachCourseOpen(true)}>
+                  <Link2 className="h-3.5 w-3.5 mr-1.5" /> Attach to Course
+                </Button>
+                {courses.map((c) => (
+                  <Button
+                    key={c.course_id}
+                    size="sm"
+                    variant="destructive"
+                    onClick={() => handleDetachCourse(c.course_id)}
+                    disabled={loading}
+                    title={`Detach from ${c.title} (unit stays in library)`}
+                  >
+                    <Unlink className="h-3.5 w-3.5 mr-1.5" /> Detach from Course
+                  </Button>
+                ))}
                 <Button size="sm" variant="outline" onClick={() => navigate(`/admin/units/${unitId}/edit`)}>
                   <Pencil className="h-3.5 w-3.5 mr-1.5" /> Edit
                 </Button>
@@ -249,6 +276,14 @@ export default function ViewLibraryUnit() {
         onAttach={handleAttach}
         loading={loading}
       />
+
+      <AttachCoursesDialog
+        open={attachCourseOpen}
+        onOpenChange={setAttachCourseOpen}
+        attachedCourseIds={courses.map((c) => c.course_id)}
+        onAttach={handleAttachCourses}
+        loading={loading}
+      />
     </section>
   );
 }