Catalog to Planner Drag and Drop

Yeah, it can do it now but it looks a little awkward. Will fix in next commit.

Author: liug88

src/components/course/Course.tsx

@@ -111,7 +111,7 @@ function PlannerCourseView({
           )}
         >
           <div className="flex gap-2 items-center">
-            <button ref={handleRef}>
+            <button ref={handleRef} type="button" aria-label="Drag to reorder">
               <MdDragIndicator size={22} />
             </button>
             <CourseLabel course={course.data} showCredits />
@@ -122,7 +122,11 @@ function PlannerCourseView({
             onOpenChange={setPopoverOpen}
           >
             <Popover.Trigger asChild>
-              <button className="outline-none">
+              <button
+                type="button"
+                className="outline-none"
+                aria-label="Course options"
+              >
                 <MdOutlineMoreHoriz className="cursor-pointer text-2xl" />
               </button>
             </Popover.Trigger>

src/features/catalog/components/CatalogCourse.tsx

@@ -1,5 +1,6 @@
 import { useState } from "react";
 
+import { useDraggable } from "@dnd-kit/react";
 import { motion } from "framer-motion";
 import { IoAdd } from "react-icons/io5";
 
@@ -26,6 +27,12 @@ const Course: React.FC<CourseProps> = ({ course }) => {
   const { filters } = useCatalog();
   const { getCourseCount } = useCourseWorkspace();
 
+  const { ref, isDragging } = useDraggable({
+    id: `catalog-${course.subj_code}-${course.code_num}`,
+    type: "catalog-course",
+    data: { type: "catalog-course", course },
+  });
+
   const attrFilters = findFiltersForCourse(
     course.attr_list || [],
     filters.attributes,
@@ -43,7 +50,8 @@ const Course: React.FC<CourseProps> = ({ course }) => {
 
   return (
     <div
-      className="relative bg-carpipink hover:cursor-pointer hover:bg-darkblue/10 border-1 border-black rounded-xl w-full p-4"
+      ref={ref}
+      className={`relative bg-carpipink hover:cursor-pointer hover:bg-darkblue/10 border-1 border-black rounded-xl w-full p-4 ${isDragging ? "opacity-50" : ""}`}
       onClick={toggleOpen}
     >
       <CourseBadge
@@ -98,6 +106,8 @@ interface AddButtonProps {
 const AddButton: React.FC<AddButtonProps> = ({ addCourse }) => {
   return (
     <button
+      type="button"
+      aria-label="Add course to toolbox"
       className={`hover:cursor-pointer hover:bg-darkblue hover:text-carpipink border-2 border-darkblue rounded-full p-1 text-4xl`}
       onClick={addCourse}
     >

src/features/dnd/dnd.tsx

@@ -4,8 +4,10 @@ import { PointerSensor, KeyboardSensor } from "@dnd-kit/dom";
 import { DragDropProvider, DragDropEventHandlers } from "@dnd-kit/react";
 import { isSortable } from "@dnd-kit/react/sortable";
 
+import { v4 as uuidv4 } from "uuid";
+
 import { useCourseWorkspace } from "@/core/workspace/useCourseWorkspace";
-import { UserCourse } from "@/lib/types";
+import { APICourse, UserCourse } from "@/lib/types";
 
 export default function WorkspaceDndProvider({
   children,
@@ -85,6 +87,9 @@ export default function WorkspaceDndProvider({
       const targetType = target.data?.type;
       const sourceCourse = source.data?.course as UserCourse | undefined;
 
+      // Catalog courses are handled in onDragEnd only
+      if (sourceType === "catalog-course") return;
+
       if (!sourceCourse) return;
 
       let targetIndex;
@@ -175,6 +180,40 @@ export default function WorkspaceDndProvider({
       const sourceType = source.data?.type;
       const targetType = target.data?.type;
 
+      // --- CATALOG TO PLANNER ---
+      if (sourceType === "catalog-course") {
+        const apiCourse = source.data?.course as APICourse | undefined;
+        if (!apiCourse) return;
+
+        const targetSemesterId =
+          targetType === "semester"
+            ? target.data?.semesterId || targetId
+            : courseLocationMap.get(targetId)?.semesterId;
+
+        if (!targetSemesterId) return;
+
+        let targetIndex;
+        if (isSortable(target)) {
+          targetIndex = target.index;
+        } else {
+          const targetSemester =
+            plannerCourses[
+              courseLocationMap.get(targetId)?.semesterIndex || -1
+            ];
+          targetIndex = targetSemester?.courseList.length || 0;
+        }
+
+        const newCourse: UserCourse = {
+          id: uuidv4(),
+          name: `${apiCourse.subj_code} ${apiCourse.code_num}`,
+          count: 1,
+          data: apiCourse,
+        };
+
+        addCourseToSemester(targetSemesterId, newCourse, targetIndex);
+        return;
+      }
+
       // --- UTILITY DROPZONES ---
       if (targetId === "garbage") {
         const semId = courseLocationMap.get(sourceId)?.semesterId;
@@ -223,6 +262,7 @@ export default function WorkspaceDndProvider({
       resetToolbox,
       consolidateToolbox,
       courseLocationMap,
+      addCourseToSemester,
       removeCourseFromSemester,
       removeCourseFromToolbox,
       insertCourseIntoToolbox,

src/features/planner/components/semester/SemesterBlock.tsx

@@ -41,7 +41,7 @@ export default function SemesterBlock({ semester, index }: SemesterBlockProps) {
   // --- DROPPABLE: For receiving Courses inside the Semester ---
   const { ref: droppableRef, isDropTarget } = useDroppable({
     id: `dropzone-${semester.semesterID}`,
-    accept: ["planner-course", "toolbox-course"], // Accept courses
+    accept: ["planner-course", "toolbox-course", "catalog-course"], // Accept courses
     data: { type: "semester", semesterId: semester.semesterID },
   });
 
@@ -102,6 +102,8 @@ export default function SemesterBlock({ semester, index }: SemesterBlockProps) {
           <div className="flex items-center gap-2 flex-1 min-w-0">
             <button
               ref={handleRef}
+              type="button"
+              aria-label="Drag to reorder semester"
               className={cn(
                 "hover:bg-darkblue/20 py-1.5 px-0.75 rounded-lg shrink-0 ",
                 isDragging
@@ -136,6 +138,7 @@ export default function SemesterBlock({ semester, index }: SemesterBlockProps) {
           <div className="flex items-center gap-1">
             <div className="relative group/delete-btn flex flex-col items-center">
               <button
+                type="button"
                 onClick={() => handleDeleteSemester(semester.semesterID)}
                 className="text-darkblue/40 hover:text-rosewood transition-colors p-1 hover:bg-rosewood/10 rounded-lg hover:cursor-pointer"
                 aria-label="Delete Semester"

src/features/toolbox/GarbageBin.tsx

@@ -48,6 +48,8 @@ export default function GarbageBin() {
   return (
     <button
       ref={ref}
+      type="button"
+      aria-label="Delete course"
       className={cn(
         "w-fit transition-opacity duration-200",
         showBin ? "opacity-100" : "opacity-0 pointer-events-none",