better assignment context menu

src/app/course/[courseName]/calendar/day/itemInDay/DayItemContextMenu.tsx

@@ -11,6 +11,7 @@ import {
   useCanvasAssignmentsQuery,
   useUpdateAssignmentInCanvasMutation,
   useDeleteAssignmentFromCanvasMutation,
+  useAddAssignmentToCanvasMutation,
 } from "@/features/canvas/hooks/canvasAssignmentHooks";
 import { useLocalCourseSettingsQuery } from "@/features/local/course/localCoursesHooks";
 import { baseCanvasUrl } from "@/features/canvas/services/canvasServiceUtils";
@@ -35,12 +36,13 @@ export const AssignmentDayItemContextMenu: FC<{
 }> = ({ modalControl, item, moduleName }) => {
   const { courseName } = useCourseContext();
   const calendarItems = useCalendarItemsContext();
-  const createAssignment = useCreateAssignmentMutation();
-  const deleteLocal = useDeleteAssignmentMutation();
+  const createAssignmentMutation = useCreateAssignmentMutation();
+  const deleteLocalMutation = useDeleteAssignmentMutation();
+  const updateInCanvasMutation = useUpdateAssignmentInCanvasMutation();
+  const deleteFromCanvasMutation = useDeleteAssignmentFromCanvasMutation();
+  const addToCanvasMutation = useAddAssignmentToCanvasMutation();
   const { data: canvasAssignments } = useCanvasAssignmentsQuery();
   const { data: settings } = useLocalCourseSettingsQuery();
-  const updateInCanvas = useUpdateAssignmentInCanvasMutation();
-  const deleteFromCanvas = useDeleteAssignmentFromCanvasMutation();
 
   const [confirmingDelete, setConfirmingDelete] = useState(false);
 
@@ -76,7 +78,7 @@ export const AssignmentDayItemContextMenu: FC<{
       (modules[moduleName]?.assignments ?? []).map((a) => a.name),
     );
     const newName = getDuplicateName(item.name, existingNames);
-    createAssignment.mutate({
+    createAssignmentMutation.mutate({
       courseName,
       moduleName,
       assignmentName: newName,
@@ -86,13 +88,13 @@ export const AssignmentDayItemContextMenu: FC<{
   };
 
   const handleDelete = () => {
-    deleteLocal.mutate({ courseName, moduleName, assignmentName: item.name });
+    deleteLocalMutation.mutate({ courseName, moduleName, assignmentName: item.name });
     handleClose();
   };
 
   const handleUpdateCanvas = () => {
     if (assignmentInCanvas) {
-      updateInCanvas.mutate({
+      updateInCanvasMutation.mutate({
         canvasAssignmentId: assignmentInCanvas.id,
         assignment: item as LocalAssignment,
       });
@@ -102,7 +104,7 @@ export const AssignmentDayItemContextMenu: FC<{
 
   const handleDeleteFromCanvas = () => {
     if (assignmentInCanvas) {
-      deleteFromCanvas.mutate({
+      deleteFromCanvasMutation.mutate({
         canvasAssignmentId: assignmentInCanvas.id,
         assignmentName: item.name,
       });
@@ -110,37 +112,44 @@ export const AssignmentDayItemContextMenu: FC<{
     }
   };
 
-  const baseButtonClasses = "w-full text-left px-4 py-2";
-  const normalHoverClasses = "hover:bg-slate-700 disabled:opacity-50";
+  const handleAddToCanvas = () => {
+    addToCanvasMutation.mutate({
+      assignment: item as LocalAssignment,
+      moduleName,
+    });
+    handleClose();
+  };
+
+  const baseButtonClasses = " font-bold text-left py-1";
+  const normalButtonClass =
+    "hover:bg-blue-900   disabled:opacity-50 bg-blue-900/50 text-blue-50 border border-blue-800/70 rounded ";
   const dangerClasses =
-    "bg-rose-900/30 hover:bg-rose-950 disabled:opacity-50 text-rose-50";
+    "bg-rose-900/30 hover:bg-rose-950 disabled:opacity-50 text-rose-50 border border-rose-900/40 rounded";
   return (
     <Modal modalControl={modalControl} backgroundCoverColor="bg-black/30">
       {() => (
-        <>
-        <div className="text-center p-1 text-slate-200">
-          {item.name}
-        </div>
+        <div className="p-2">
+          <div className="text-center p-1 text-slate-200 ">{item.name}</div>
+          <div className="flex flex-col gap-2">
             {confirmingDelete ? (
               <>
-              <button
-                disabled
-                className={`${baseButtonClasses} ${normalHoverClasses}`}
+                <div
+                  className={``}
                 >
                   Delete from disk?
+                </div>
+                <button
+                  onClick={handleClose}
+                  className={`unstyled ${baseButtonClasses} ${normalButtonClass}`}
+                >
+                  Cancel
                 </button>
                 <button
                   onClick={handleDelete}
-                className={`${baseButtonClasses} ${dangerClasses}`}
+                  className={`unstyled ${baseButtonClasses} ${dangerClasses}`}
                 >
                   Yes, delete
                 </button>
-              <button
-                onClick={handleClose}
-                className={`${baseButtonClasses} ${normalHoverClasses}`}
-              >
-                Cancel
-              </button>
               </>
             ) : (
               <>
@@ -150,21 +159,21 @@ export const AssignmentDayItemContextMenu: FC<{
                       href={canvasUrl}
                       target="_blank"
                       rel="noreferrer"
-                    className="unstyled font-bold block px-3 py-1 hover:bg-slate-700 cursor-pointer"
+                      className={` block px-3 ${baseButtonClasses} ${normalButtonClass}`}
                       onClick={handleClose}
                     >
                       View in Canvas
                     </a>
                     <button
                       onClick={handleUpdateCanvas}
-                    disabled={updateInCanvas.isPending}
-                    className="unstyled w-full text-left px-4 py-2 hover:bg-slate-700 disabled:opacity-50"
+                      disabled={updateInCanvasMutation.isPending}
+                      className={`unstyled ${baseButtonClasses} ${normalButtonClass}`}
                     >
                       Update in Canvas
                     </button>
                     <button
                       onClick={handleDeleteFromCanvas}
-                    disabled={deleteFromCanvas.isPending}
+                      disabled={deleteFromCanvasMutation.isPending}
                       className={`unstyled ${baseButtonClasses} ${dangerClasses}`}
                     >
                       Delete from Canvas
@@ -172,22 +181,32 @@ export const AssignmentDayItemContextMenu: FC<{
                   </>
                 )}
                 {!canvasUrl && (
+                  <>
+                    <button
+                      onClick={handleAddToCanvas}
+                      disabled={addToCanvasMutation.isPending}
+                      className={`unstyled ${baseButtonClasses} ${normalButtonClass}`}
+                    >
+                      Add to Canvas
+                    </button>
                     <button
                       onClick={() => setConfirmingDelete(true)}
                       className={`unstyled ${baseButtonClasses} ${dangerClasses}`}
                     >
                       Delete from Disk
                     </button>
+                  </>
                 )}
                 <button
                   onClick={handleDuplicate}
-                className={`unstyled ${baseButtonClasses} ${normalHoverClasses}`}
+                  className={`unstyled ${baseButtonClasses} ${normalButtonClass}`}
                 >
                   Duplicate
                 </button>
               </>
             )}
-        </>
+          </div>
+        </div>
       )}
     </Modal>
   );