{searchResults.map((course, index) => (
))}
diff --git a/src/features/dnd/dnd.tsx b/src/features/dnd/dnd.tsx
index b6f0013..f8b5003 100644
--- a/src/features/dnd/dnd.tsx
+++ b/src/features/dnd/dnd.tsx
@@ -1,11 +1,19 @@
import { useState, useCallback, useRef, useMemo } from "react";
import { PointerSensor, KeyboardSensor } from "@dnd-kit/dom";
-import { DragDropProvider, DragDropEventHandlers } from "@dnd-kit/react";
+import {
+ DragDropProvider,
+ DragDropEventHandlers,
+ DragOverlay,
+ useDragOperation,
+} from "@dnd-kit/react";
import { isSortable } from "@dnd-kit/react/sortable";
+import { MdDragIndicator, MdOutlineMoreHoriz } from "react-icons/md";
+import { v4 as uuidv4 } from "uuid";
+import CourseLabel from "@/components/course/CourseLabel";
import { useCourseWorkspace } from "@/core/workspace/useCourseWorkspace";
-import { UserCourse } from "@/lib/types";
+import { APICourse, UserCourse } from "@/lib/types";
export default function WorkspaceDndProvider({
children,
@@ -17,6 +25,7 @@ export default function WorkspaceDndProvider({
toolboxCourses,
moveSemester,
addCourseToSemester,
+ addCourseToToolbox,
removeCourseFromSemester,
removeCourseFromToolbox,
resetPlanner,
@@ -24,6 +33,7 @@ export default function WorkspaceDndProvider({
consolidateToolbox,
moveCourseInSemester,
insertCourseIntoToolbox,
+ moveCourseInToolbox,
} = useCourseWorkspace();
const snapshotToolbox = useRef(structuredClone(toolboxCourses));
@@ -57,12 +67,20 @@ export default function WorkspaceDndProvider({
return map;
}, [plannerCourses]);
- const handleDragStart = useCallback<
- DragDropEventHandlers["onDragStart"]
- >(() => {
- snapshotPlanner.current = structuredClone(plannerCourses);
- snapshotToolbox.current = structuredClone(toolboxCourses);
- }, [plannerCourses, toolboxCourses]);
+ const handleDragStart = useCallback
(
+ (event) => {
+ const { source } = event.operation;
+ snapshotPlanner.current = structuredClone(plannerCourses);
+ snapshotToolbox.current = structuredClone(toolboxCourses);
+ if (source?.data?.type === "catalog-course") {
+ // Mint a fresh placeholder id per drag and stash it on source.data so
+ // any component reading useDragOperation() can identify the in-flight
+ // placeholder without a parallel context.
+ source.data = { ...source.data, placeholderId: uuidv4() };
+ }
+ },
+ [plannerCourses, toolboxCourses],
+ );
const handleDragOver = useCallback(
(event) => {
@@ -83,8 +101,109 @@ export default function WorkspaceDndProvider({
const sourceType = source.data?.type;
const targetType = target.data?.type;
- const sourceCourse = source.data?.course as UserCourse | undefined;
+ // --- CATALOG TO PLANNER / TOOLBOX ---
+ if (sourceType === "catalog-course") {
+ const apiCourse = source.data?.course as APICourse | undefined;
+ const placeholderId = source.data?.placeholderId as string | undefined;
+ if (!apiCourse || !placeholderId) return;
+
+ const existingLocation = courseLocationMap.get(placeholderId);
+ const toolboxIndex = toolboxCourses.findIndex(
+ (c) => c.id === placeholderId,
+ );
+ const isInToolbox = toolboxIndex !== -1;
+
+ const courseToPlace: UserCourse = {
+ id: placeholderId,
+ name: `${apiCourse.subj_code} ${apiCourse.code_num}`,
+ count: 1,
+ credits: apiCourse.credit_max,
+ data: apiCourse,
+ };
+
+ const isToolboxTarget =
+ targetId === "toolbox" || targetType === "toolbox-course";
+
+ // --- CATALOG OVER TOOLBOX: maintain a ghost entry in the toolbox ---
+ if (isToolboxTarget) {
+ // Pull the placeholder out of the planner if it's there
+ if (existingLocation) {
+ removeCourseFromSemester(
+ existingLocation.semesterId,
+ placeholderId,
+ );
+ }
+
+ const targetToolboxIndex = isSortable(target)
+ ? target.index
+ : toolboxCourses.length;
+
+ if (!isInToolbox) {
+ insertCourseIntoToolbox(courseToPlace, targetToolboxIndex);
+ } else if (
+ toolboxIndex !== targetToolboxIndex &&
+ targetToolboxIndex !== undefined
+ ) {
+ moveCourseInToolbox(toolboxIndex, targetToolboxIndex);
+ }
+ return;
+ }
+
+ const targetSemesterId =
+ targetType === "semester"
+ ? target.data?.semesterId || targetId
+ : courseLocationMap.get(targetId)?.semesterId;
+
+ if (!targetSemesterId) return;
+
+ // Moving out of the toolbox ghost into a semester
+ if (isInToolbox) {
+ removeCourseFromToolbox(placeholderId);
+ }
+
+ let catalogTargetIndex: number | undefined;
+ if (isSortable(target)) {
+ catalogTargetIndex = target.index;
+ } else {
+ const targetSemester =
+ plannerCourses[
+ courseLocationMap.get(targetId)?.semesterIndex ?? -1
+ ];
+ catalogTargetIndex = targetSemester?.courseList.length ?? 0;
+ }
+
+ if (!existingLocation) {
+ addCourseToSemester(
+ targetSemesterId,
+ courseToPlace,
+ catalogTargetIndex,
+ );
+ } else if (existingLocation.semesterId === targetSemesterId) {
+ const currentIndex = existingLocation.index;
+ if (
+ currentIndex !== undefined &&
+ currentIndex !== -1 &&
+ currentIndex !== catalogTargetIndex
+ ) {
+ moveCourseInSemester(
+ existingLocation.semesterId,
+ currentIndex,
+ catalogTargetIndex,
+ );
+ }
+ } else {
+ removeCourseFromSemester(existingLocation.semesterId, placeholderId);
+ addCourseToSemester(
+ targetSemesterId,
+ courseToPlace,
+ catalogTargetIndex,
+ );
+ }
+ return;
+ }
+
+ const sourceCourse = source.data?.course as UserCourse | undefined;
if (!sourceCourse) return;
let targetIndex;
@@ -150,18 +269,54 @@ export default function WorkspaceDndProvider({
},
[
plannerCourses,
+ toolboxCourses,
addCourseToSemester,
removeCourseFromToolbox,
removeCourseFromSemester,
courseLocationMap,
moveCourseInSemester,
insertCourseIntoToolbox,
+ moveCourseInToolbox,
],
);
const handleDragEnd = useCallback(
(event) => {
const { source, target } = event.operation;
+ const sourceType = source?.data?.type;
+
+ // --- CATALOG DRAG END ---
+ // Catalog placements are committed incrementally in handleDragOver, so we
+ // only need to undo on an explicit cancel (Escape), handle a toolbox drop,
+ // or otherwise leave the placed course in the planner as-is.
+ if (sourceType === "catalog-course") {
+ const placeholderId = source?.data?.placeholderId as string | undefined;
+ const apiCourse = source?.data?.course as APICourse | undefined;
+ const targetId = target?.id as string | undefined;
+ const targetType = target?.data?.type;
+
+ if (event.canceled) {
+ resetPlanner(snapshotPlanner.current);
+ resetToolbox(snapshotToolbox.current);
+ return;
+ }
+
+ if (targetId === "toolbox" || targetType === "toolbox-course") {
+ // Replace the ghost toolbox entry (if any) with a smart-add so
+ // duplicate counts increment instead of creating a parallel row.
+ if (placeholderId) {
+ const hadGhost = toolboxCourses.some((c) => c.id === placeholderId);
+ if (hadGhost) removeCourseFromToolbox(placeholderId);
+ }
+ if (apiCourse) addCourseToToolbox(apiCourse);
+ consolidateToolbox();
+ return;
+ }
+
+ // Successful planner drop or released outside -- course is already
+ // committed to the semester via handleDragOver; nothing more to do.
+ return;
+ }
if (event.canceled || !target) {
resetPlanner(snapshotPlanner.current);
@@ -172,7 +327,6 @@ export default function WorkspaceDndProvider({
const sourceId = source.id as string;
const targetId = target.id as string;
- const sourceType = source.data?.type;
const targetType = target.data?.type;
// --- UTILITY DROPZONES ---
@@ -218,10 +372,12 @@ export default function WorkspaceDndProvider({
},
[
plannerCourses,
+ toolboxCourses,
moveSemester,
resetPlanner,
resetToolbox,
consolidateToolbox,
+ addCourseToToolbox,
courseLocationMap,
removeCourseFromSemester,
removeCourseFromToolbox,
@@ -237,6 +393,29 @@ export default function WorkspaceDndProvider({
onDragEnd={handleDragEnd}
>
{children}
+
);
}
+
+function CatalogDragOverlay() {
+ const operation = useDragOperation();
+ const apiCourse =
+ operation?.source?.data?.type === "catalog-course"
+ ? (operation.source.data.course as APICourse)
+ : null;
+
+ return (
+
+ {apiCourse && (
+
+ )}
+
+ );
+}
diff --git a/src/features/planner/components/semester/SemesterBlock.tsx b/src/features/planner/components/semester/SemesterBlock.tsx
index a397b16..398a469 100644
--- a/src/features/planner/components/semester/SemesterBlock.tsx
+++ b/src/features/planner/components/semester/SemesterBlock.tsx
@@ -2,7 +2,7 @@ import React, { useState, useRef, useEffect } from "react";
import { CollisionPriority } from "@dnd-kit/abstract";
import { closestCenter } from "@dnd-kit/collision";
-import { useDroppable } from "@dnd-kit/react";
+import { useDroppable, useDragOperation } from "@dnd-kit/react";
import { useSortable } from "@dnd-kit/react/sortable";
import { AnimatePresence } from "framer-motion";
import { MdDragIndicator, MdDeleteOutline } from "react-icons/md";
@@ -38,10 +38,14 @@ export default function SemesterBlock({ semester, index }: SemesterBlockProps) {
collisionDetector: closestCenter,
});
+ const dragOperation = useDragOperation();
+ const isDraggingCatalog =
+ dragOperation?.source?.data?.type === "catalog-course";
+
// --- 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 },
});
@@ -104,6 +108,8 @@ export default function SemesterBlock({ semester, index }: SemesterBlockProps) {