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,84 +112,101 @@ 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>
-          {confirmingDelete ? (
-            <>
-              <button
-                disabled
-                className={`${baseButtonClasses} ${normalHoverClasses}`}
-              >
-                Delete from disk?
-              </button>
-              <button
-                onClick={handleDelete}
-                className={`${baseButtonClasses} ${dangerClasses}`}
-              >
-                Yes, delete
-              </button>
-              <button
-                onClick={handleClose}
-                className={`${baseButtonClasses} ${normalHoverClasses}`}
-              >
-                Cancel
-              </button>
-            </>
-          ) : (
-            <>
-              {canvasUrl && (
-                <>
-                  <a
-                    href={canvasUrl}
-                    target="_blank"
-                    rel="noreferrer"
-                    className="unstyled font-bold block px-3 py-1 hover:bg-slate-700 cursor-pointer"
-                    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"
-                  >
-                    Update in Canvas
-                  </button>
-                  <button
-                    onClick={handleDeleteFromCanvas}
-                    disabled={deleteFromCanvas.isPending}
-                    className={`unstyled ${baseButtonClasses} ${dangerClasses}`}
-                  >
-                    Delete from Canvas
-                  </button>
-                </>
-              )}
-              {!canvasUrl && (
+        <div className="p-2">
+          <div className="text-center p-1 text-slate-200 ">{item.name}</div>
+          <div className="flex flex-col gap-2">
+            {confirmingDelete ? (
+              <>
+                <div
+                  className={``}
+                >
+                  Delete from disk?
+                </div>
                 <button
-                  onClick={() => setConfirmingDelete(true)}
+                  onClick={handleClose}
+                  className={`unstyled ${baseButtonClasses} ${normalButtonClass}`}
+                >
+                  Cancel
+                </button>
+                <button
+                  onClick={handleDelete}
                   className={`unstyled ${baseButtonClasses} ${dangerClasses}`}
                 >
-                  Delete from Disk
+                  Yes, delete
                 </button>
-              )}
-              <button
-                onClick={handleDuplicate}
-                className={`unstyled ${baseButtonClasses} ${normalHoverClasses}`}
-              >
-                Duplicate
-              </button>
-            </>
-          )}
-        </>
+              </>
+            ) : (
+              <>
+                {canvasUrl && (
+                  <>
+                    <a
+                      href={canvasUrl}
+                      target="_blank"
+                      rel="noreferrer"
+                      className={` block px-3 ${baseButtonClasses} ${normalButtonClass}`}
+                      onClick={handleClose}
+                    >
+                      View in Canvas
+                    </a>
+                    <button
+                      onClick={handleUpdateCanvas}
+                      disabled={updateInCanvasMutation.isPending}
+                      className={`unstyled ${baseButtonClasses} ${normalButtonClass}`}
+                    >
+                      Update in Canvas
+                    </button>
+                    <button
+                      onClick={handleDeleteFromCanvas}
+                      disabled={deleteFromCanvasMutation.isPending}
+                      className={`unstyled ${baseButtonClasses} ${dangerClasses}`}
+                    >
+                      Delete from Canvas
+                    </button>
+                  </>
+                )}
+                {!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} ${normalButtonClass}`}
+                >
+                  Duplicate
+                </button>
+              </>
+            )}
+          </div>
+        </div>
       )}
     </Modal>
   );