better assignment context menu

src/app/course/[courseName]/calendar/day/Day.tsx

@@ -5,7 +5,7 @@ import {
 } from "@/features/local/utils/timeUtils";
 import { useDraggingContext } from "../../context/drag/draggingContext";
 import { useLocalCourseSettingsQuery } from "@/features/local/course/localCoursesHooks";
-import { ItemInDay } from "./ItemInDay";
+import { ItemInDay } from "./itemInDay/ItemInDay";
 import { useTodaysItems } from "./useTodaysItems";
 import { DayTitle } from "./DayTitle";
 import { getDayOfWeek } from "@/features/local/course/localCourseSettings";
@@ -13,7 +13,7 @@ import { getDayOfWeek } from "@/features/local/course/localCourseSettings";
 export default function Day({ day, month }: { day: string; month: number }) {
   const dayAsDate = getDateFromStringOrThrow(
     day,
-    "calculating same month in day"
+    "calculating same month in day",
   );
   const isToday =
     getDateOnlyMarkdownString(new Date()) ===
@@ -31,8 +31,8 @@ export default function Day({ day, month }: { day: string; month: number }) {
     (holidaysHappeningToday, holiday) => {
       const holidayDates = holiday.days.map((d) =>
         getDateOnlyMarkdownString(
-          getDateFromStringOrThrow(d, "holiday date in day component")
-        )
+          getDateFromStringOrThrow(d, "holiday date in day component"),
+        ),
       );
       const today = getDateOnlyMarkdownString(dayAsDate);
 
@@ -40,16 +40,16 @@ export default function Day({ day, month }: { day: string; month: number }) {
         return [...holidaysHappeningToday, holiday.name];
       return holidaysHappeningToday;
     },
-    [] as string[]
+    [] as string[],
   );
 
   const semesterStart = getDateFromStringOrThrow(
     settings.startDate,
-    "comparing start date in day"
+    "comparing start date in day",
   );
   const semesterEnd = getDateFromStringOrThrow(
     settings.endDate,
-    "comparing end date in day"
+    "comparing end date in day",
   );
 
   const isInSemester = semesterStart < dayAsDate && semesterEnd > dayAsDate;
@@ -90,7 +90,7 @@ export default function Day({ day, month }: { day: string; month: number }) {
                 status={status}
                 message={message}
               />
-            )
+            ),
           )}
           {todaysQuizzes.map(({ quiz, moduleName, status, message }) => (
             <ItemInDay

src/app/course/[courseName]/calendar/day/ItemInDay.tsx

@@ -1,256 +0,0 @@
-"use client";
-import { IModuleItem } from "@/features/local/modules/IModuleItem";
-import { getModuleItemUrl } from "@/services/urlUtils";
-import Link from "next/link";
-import { ReactNode, useCallback, useState } from "react";
-import { useCourseContext } from "../../context/courseContext";
-import { useTooltip } from "@/components/useTooltip";
-import MarkdownDisplay from "@/components/MarkdownDisplay";
-import { DraggableItem } from "../../context/drag/draggingContext";
-import ClientOnly from "@/components/ClientOnly";
-import { useDragStyleContext } from "../../context/drag/dragStyleContext";
-import { Tooltip } from "../../../../../components/Tooltip";
-import { ContextMenu, ContextMenuItem } from "@/components/ContextMenu";
-import {
-  useCanvasAssignmentsQuery,
-  useUpdateAssignmentInCanvasMutation,
-  useDeleteAssignmentFromCanvasMutation,
-} from "@/features/canvas/hooks/canvasAssignmentHooks";
-import { useLocalCourseSettingsQuery } from "@/features/local/course/localCoursesHooks";
-import { baseCanvasUrl } from "@/features/canvas/services/canvasServiceUtils";
-import {
-  useDeleteAssignmentMutation,
-  useCreateAssignmentMutation,
-} from "@/features/local/assignments/assignmentHooks";
-import { LocalAssignment } from "@/features/local/assignments/models/localAssignment";
-import { useCalendarItemsContext } from "../../context/calendarItemsContext";
-
-function getDuplicateName(name: string, existingNames: string[]): string {
-  const match = name.match(/^(.*)\s+(\d+)$/);
-  const baseName = match ? match[1] : name;
-  const startNum = match ? parseInt(match[2]) + 1 : 2;
-  let num = startNum;
-  while (existingNames.includes(`${baseName} ${num}`)) {
-    num++;
-  }
-  return `${baseName} ${num}`;
-}
-
-function getPreviewContent(
-  type: "assignment" | "page" | "quiz",
-  item: IModuleItem
-): ReactNode {
-  if (type === "assignment" && "description" in item) {
-    const assignment = item as {
-      description: string;
-      githubClassroomAssignmentShareLink?: string;
-    };
-    return (
-      <MarkdownDisplay
-        markdown={assignment.description}
-        replaceText={[
-          {
-            source: "insert_github_classroom_url",
-            destination: assignment.githubClassroomAssignmentShareLink || "",
-          },
-        ]}
-      />
-    );
-  } else if (type === "page" && "text" in item) {
-    return <MarkdownDisplay markdown={item.text as string} />;
-  } else if (type === "quiz" && "questions" in item) {
-    const quiz = item as { questions: { text: string }[] };
-    return quiz.questions.map((q, i: number) => (
-      <div key={i} className="">
-        <MarkdownDisplay markdown={q.text as string} />
-      </div>
-    ));
-  }
-  return null;
-}
-
-export function ItemInDay({
-  type,
-  moduleName,
-  status,
-  item,
-  message,
-}: {
-  type: "assignment" | "page" | "quiz";
-  status: "localOnly" | "incomplete" | "published";
-  moduleName: string;
-  item: IModuleItem;
-  message: ReactNode;
-}) {
-  const { courseName } = useCourseContext();
-  const { setIsDragging } = useDragStyleContext();
-  const { visible, targetRef, showTooltip, hideTooltip } = useTooltip(500);
-
-  const [contextMenuPos, setContextMenuPos] = useState<{
-    x: number;
-    y: number;
-  } | null>(null);
-  const [confirmingDelete, setConfirmingDelete] = useState(false);
-
-  const { data: canvasAssignments } = useCanvasAssignmentsQuery();
-  const { data: settings } = useLocalCourseSettingsQuery();
-  const updateInCanvas = useUpdateAssignmentInCanvasMutation();
-  const deleteFromCanvas = useDeleteAssignmentFromCanvasMutation();
-  const deleteLocal = useDeleteAssignmentMutation();
-  const createAssignment = useCreateAssignmentMutation();
-  const calendarItems = useCalendarItemsContext();
-
-  const assignmentInCanvas =
-    type === "assignment"
-      ? canvasAssignments?.find((a) => a.name === item.name)
-      : undefined;
-
-  const handleContextMenu = (e: React.MouseEvent) => {
-    if (type !== "assignment") return;
-    e.preventDefault();
-    e.stopPropagation();
-    setContextMenuPos({ x: e.clientX, y: e.clientY });
-    setConfirmingDelete(false);
-  };
-
-  const closeContextMenu = useCallback(() => {
-    setContextMenuPos(null);
-    setConfirmingDelete(false);
-  }, []);
-
-  const handleDuplicate = useCallback(() => {
-    const assignment = item as LocalAssignment;
-    const existingNames = Object.values(calendarItems).flatMap((modules) =>
-      (modules[moduleName]?.assignments ?? []).map((a) => a.name)
-    );
-    const newName = getDuplicateName(item.name, existingNames);
-    createAssignment.mutate({
-      courseName,
-      moduleName,
-      assignmentName: newName,
-      assignment: { ...assignment, name: newName },
-    });
-    closeContextMenu();
-  }, [
-    item,
-    calendarItems,
-    moduleName,
-    createAssignment,
-    courseName,
-    closeContextMenu,
-  ]);
-
-  const contextMenuItems: ContextMenuItem[] = confirmingDelete
-    ? [
-        { label: "Delete from disk?", disabled: true },
-        {
-          label: "Yes, delete",
-          variant: "danger",
-          onClick: () => {
-            deleteLocal.mutate({ courseName, moduleName, assignmentName: item.name });
-            closeContextMenu();
-          },
-        },
-        { label: "Cancel", onClick: closeContextMenu },
-      ]
-    : [
-        ...(assignmentInCanvas
-          ? [
-              {
-                label: "View in Canvas",
-                href: `${baseCanvasUrl}/courses/${settings.canvasId}/assignments/${assignmentInCanvas.id}`,
-              },
-              {
-                label: "Update in Canvas",
-                onClick: () => {
-                  updateInCanvas.mutate({
-                    canvasAssignmentId: assignmentInCanvas.id,
-                    assignment: item as LocalAssignment,
-                  });
-                  closeContextMenu();
-                },
-                disabled: updateInCanvas.isPending,
-              },
-              {
-                label: "Delete from Canvas",
-                variant: "danger" as const,
-                onClick: () => {
-                  deleteFromCanvas.mutate({
-                    canvasAssignmentId: assignmentInCanvas.id,
-                    assignmentName: item.name,
-                  });
-                  closeContextMenu();
-                },
-                disabled: deleteFromCanvas.isPending,
-              },
-            ]
-          : [
-              {
-                label: "Delete from Disk",
-                variant: "danger" as const,
-                onClick: () => setConfirmingDelete(true),
-              },
-            ]),
-        { label: "Duplicate", onClick: handleDuplicate },
-      ];
-
-  return (
-    <div className={" relative group "}>
-      <Link
-        href={getModuleItemUrl(courseName, moduleName, type, item.name)}
-        shallow={true}
-        className={
-          " border rounded-sm sm:px-1 sm:mx-1 break-words mb-1 truncate sm:text-wrap text-nowrap " +
-          " bg-slate-800 " +
-          " block " +
-          (status === "localOnly" && " text-slate-500 border-slate-600 ") +
-          (status === "incomplete" && " border-rose-900 ") +
-          (status === "published" && " border-green-800 ")
-        }
-        role="button"
-        draggable="true"
-        onDragStart={(e) => {
-          const draggableItem: DraggableItem = {
-            type,
-            item,
-            sourceModuleName: moduleName,
-          };
-          e.dataTransfer.setData(
-            "draggableItem",
-            JSON.stringify(draggableItem)
-          );
-          setIsDragging(true);
-        }}
-        onMouseEnter={showTooltip}
-        onMouseLeave={hideTooltip}
-        onContextMenu={handleContextMenu}
-        ref={targetRef}
-      >
-        {item.name}
-      </Link>
-      <ClientOnly>
-        {status === "published" ? (
-          getPreviewContent(type, item) && (
-            <Tooltip
-              message={
-                <div className="max-w-md">{getPreviewContent(type, item)}</div>
-              }
-              targetRef={targetRef}
-              visible={visible}
-            />
-          )
-        ) : (
-          <Tooltip message={message} targetRef={targetRef} visible={visible} />
-        )}
-        {contextMenuPos && type === "assignment" && (
-          <ContextMenu
-            x={contextMenuPos.x}
-            y={contextMenuPos.y}
-            items={contextMenuItems}
-            onClose={closeContextMenu}
-          />
-        )}
-      </ClientOnly>
-    </div>
-  );
-}

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

@@ -0,0 +1,213 @@
+"use client";
+import { useEffect, FC, useState } from "react";
+import { IModuleItem } from "@/features/local/modules/IModuleItem";
+import { LocalAssignment } from "@/features/local/assignments/models/localAssignment";
+import { useCalendarItemsContext } from "../../../context/calendarItemsContext";
+import {
+  useCreateAssignmentMutation,
+  useDeleteAssignmentMutation,
+} from "@/features/local/assignments/assignmentHooks";
+import {
+  useCanvasAssignmentsQuery,
+  useUpdateAssignmentInCanvasMutation,
+  useDeleteAssignmentFromCanvasMutation,
+  useAddAssignmentToCanvasMutation,
+} from "@/features/canvas/hooks/canvasAssignmentHooks";
+import { useLocalCourseSettingsQuery } from "@/features/local/course/localCoursesHooks";
+import { baseCanvasUrl } from "@/features/canvas/services/canvasServiceUtils";
+import { useCourseContext } from "../../../context/courseContext";
+import Modal, { ModalControl } from "@/components/Modal";
+
+function getDuplicateName(name: string, existingNames: string[]): string {
+  const match = name.match(/^(.*)\s+(\d+)$/);
+  const baseName = match ? match[1] : name;
+  const startNum = match ? parseInt(match[2]) + 1 : 2;
+  let num = startNum;
+  while (existingNames.includes(`${baseName} ${num}`)) {
+    num++;
+  }
+  return `${baseName} ${num}`;
+}
+
+export const AssignmentDayItemContextMenu: FC<{
+  modalControl: ModalControl;
+  item: IModuleItem;
+  moduleName: string;
+}> = ({ modalControl, item, moduleName }) => {
+  const { courseName } = useCourseContext();
+  const calendarItems = useCalendarItemsContext();
+  const createAssignmentMutation = useCreateAssignmentMutation();
+  const deleteLocalMutation = useDeleteAssignmentMutation();
+  const updateInCanvasMutation = useUpdateAssignmentInCanvasMutation();
+  const deleteFromCanvasMutation = useDeleteAssignmentFromCanvasMutation();
+  const addToCanvasMutation = useAddAssignmentToCanvasMutation();
+  const { data: canvasAssignments } = useCanvasAssignmentsQuery();
+  const { data: settings } = useLocalCourseSettingsQuery();
+
+  const [confirmingDelete, setConfirmingDelete] = useState(false);
+
+  const assignmentInCanvas = canvasAssignments?.find(
+    (a) => a.name === item.name,
+  );
+
+  const canvasUrl = assignmentInCanvas
+    ? `${baseCanvasUrl}/courses/${settings.canvasId}/assignments/${assignmentInCanvas.id}`
+    : undefined;
+
+  useEffect(() => {
+    const handleEscape = (e: KeyboardEvent) => {
+      if (e.key === "Escape") {
+        setConfirmingDelete(false);
+        modalControl.closeModal();
+      }
+    };
+    document.addEventListener("keydown", handleEscape);
+    return () => {
+      document.removeEventListener("keydown", handleEscape);
+    };
+  }, [modalControl]);
+
+  const handleClose = () => {
+    setConfirmingDelete(false);
+    modalControl.closeModal();
+  };
+
+  const handleDuplicate = () => {
+    const assignment = item as LocalAssignment;
+    const existingNames = Object.values(calendarItems).flatMap((modules) =>
+      (modules[moduleName]?.assignments ?? []).map((a) => a.name),
+    );
+    const newName = getDuplicateName(item.name, existingNames);
+    createAssignmentMutation.mutate({
+      courseName,
+      moduleName,
+      assignmentName: newName,
+      assignment: { ...assignment, name: newName },
+    });
+    handleClose();
+  };
+
+  const handleDelete = () => {
+    deleteLocalMutation.mutate({ courseName, moduleName, assignmentName: item.name });
+    handleClose();
+  };
+
+  const handleUpdateCanvas = () => {
+    if (assignmentInCanvas) {
+      updateInCanvasMutation.mutate({
+        canvasAssignmentId: assignmentInCanvas.id,
+        assignment: item as LocalAssignment,
+      });
+      handleClose();
+    }
+  };
+
+  const handleDeleteFromCanvas = () => {
+    if (assignmentInCanvas) {
+      deleteFromCanvasMutation.mutate({
+        canvasAssignmentId: assignmentInCanvas.id,
+        assignmentName: item.name,
+      });
+      handleClose();
+    }
+  };
+
+  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 border border-rose-900/40 rounded";
+  return (
+    <Modal modalControl={modalControl} backgroundCoverColor="bg-black/30">
+      {() => (
+        <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={handleClose}
+                  className={`unstyled ${baseButtonClasses} ${normalButtonClass}`}
+                >
+                  Cancel
+                </button>
+                <button
+                  onClick={handleDelete}
+                  className={`unstyled ${baseButtonClasses} ${dangerClasses}`}
+                >
+                  Yes, delete
+                </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>
+  );
+};

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

@@ -0,0 +1,37 @@
+"use client";
+import MarkdownDisplay from "@/components/MarkdownDisplay";
+import { IModuleItem } from "@/features/local/modules/IModuleItem";
+import { FC } from "react";
+
+export const GetPreviewContent: FC<{
+  type: "assignment" | "page" | "quiz";
+  item: IModuleItem;
+}> = ({ type, item }) => {
+  if (type === "assignment" && "description" in item) {
+    const assignment = item as {
+      description: string;
+      githubClassroomAssignmentShareLink?: string;
+    };
+    return (
+      <MarkdownDisplay
+        markdown={assignment.description}
+        replaceText={[
+          {
+            source: "insert_github_classroom_url",
+            destination: assignment.githubClassroomAssignmentShareLink || "",
+          },
+        ]}
+      />
+    );
+  } else if (type === "page" && "text" in item) {
+    return <MarkdownDisplay markdown={item.text as string} />;
+  } else if (type === "quiz" && "questions" in item) {
+    const quiz = item as { questions: { text: string }[] };
+    return quiz.questions.map((q, i: number) => (
+      <div key={i} className="">
+        <MarkdownDisplay markdown={q.text as string} />
+      </div>
+    ));
+  }
+  return null;
+};

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

@@ -0,0 +1,93 @@
+"use client";
+import { IModuleItem } from "@/features/local/modules/IModuleItem";
+import { getModuleItemUrl } from "@/services/urlUtils";
+import Link from "next/link";
+import { FC, ReactNode } from "react";
+import { useCourseContext } from "../../../context/courseContext";
+import { useTooltip } from "@/components/useTooltip";
+import { DraggableItem } from "../../../context/drag/draggingContext";
+import ClientOnly from "@/components/ClientOnly";
+import { useDragStyleContext } from "../../../context/drag/dragStyleContext";
+import { Tooltip } from "../../../../../../components/Tooltip";
+import { AssignmentDayItemContextMenu } from "./DayItemContextMenu";
+import { GetPreviewContent } from "./GetPreviewContent";
+import { useModal } from "@/components/Modal";
+
+export const ItemInDay: FC<{
+  type: "assignment" | "page" | "quiz";
+  status: "localOnly" | "incomplete" | "published";
+  moduleName: string;
+  item: IModuleItem;
+  message: ReactNode;
+}> = ({ type, moduleName, status, item, message }) => {
+  const { courseName } = useCourseContext();
+  const { setIsDragging } = useDragStyleContext();
+  const { visible, targetRef, showTooltip, hideTooltip } = useTooltip(500);
+  const modalControl = useModal();
+
+  const handleContextMenu = (e: React.MouseEvent) => {
+    if (type !== "assignment") return;
+    e.preventDefault();
+    e.stopPropagation();
+    modalControl.openModal({ x: e.clientX, y: e.clientY });
+  };
+
+  return (
+    <div className={" relative group "}>
+      <Link
+        href={getModuleItemUrl(courseName, moduleName, type, item.name)}
+        shallow={true}
+        className={
+          " border rounded-sm sm:px-1 sm:mx-1 break-words mb-1 truncate sm:text-wrap text-nowrap " +
+          " bg-slate-800 " +
+          " block " +
+          (status === "localOnly" && " text-slate-500 border-slate-600 ") +
+          (status === "incomplete" && " border-rose-900 ") +
+          (status === "published" && " border-green-800 ")
+        }
+        role="button"
+        draggable="true"
+        onDragStart={(e) => {
+          const draggableItem: DraggableItem = {
+            type,
+            item,
+            sourceModuleName: moduleName,
+          };
+          e.dataTransfer.setData(
+            "draggableItem",
+            JSON.stringify(draggableItem),
+          );
+          setIsDragging(true);
+        }}
+        onMouseEnter={showTooltip}
+        onMouseLeave={hideTooltip}
+        onContextMenu={handleContextMenu}
+        ref={targetRef}
+      >
+        {item.name}
+      </Link>
+      <ClientOnly>
+        {status === "published" ? (
+          <Tooltip
+            message={
+              <div className="max-w-md">
+                <GetPreviewContent type={type} item={item} />
+              </div>
+            }
+            targetRef={targetRef}
+            visible={visible}
+          />
+        ) : (
+          <Tooltip message={message} targetRef={targetRef} visible={visible} />
+        )}
+        {type === "assignment" && (
+          <AssignmentDayItemContextMenu
+            modalControl={modalControl}
+            item={item}
+            moduleName={moduleName}
+          />
+        )}
+      </ClientOnly>
+    </div>
+  );
+};

src/app/course/[courseName]/modules/[moduleName]/quiz/[quizName]/EditQuiz.tsx

@@ -116,7 +116,7 @@ export default function EditQuiz({
   const updateQuizMutation = useUpdateQuizMutation();
   const { data: globalSettings } = useGlobalSettingsQuery();
   const feedbackDelimiters = getFeedbackDelimitersFromSettings(
-    (globalSettings ?? ({} as GlobalSettings)) as GlobalSettings
+    (globalSettings ?? ({} as GlobalSettings)) as GlobalSettings,
   );
 
   const { clientIsAuthoritative, text, textUpdate, monacoKey } =
@@ -141,14 +141,14 @@ export default function EditQuiz({
           quizMarkdownUtils.toMarkdown(quiz, feedbackDelimiters) !==
           quizMarkdownUtils.toMarkdown(
             quizMarkdownUtils.parseMarkdown(text, name, feedbackDelimiters),
-            feedbackDelimiters
+            feedbackDelimiters,
           )
         ) {
           if (clientIsAuthoritative) {
             const updatedQuiz = quizMarkdownUtils.parseMarkdown(
               text,
               quizName,
-              feedbackDelimiters
+              feedbackDelimiters,
             );
             await updateQuizMutation.mutateAsync({
               quiz: updatedQuiz,
@@ -160,7 +160,7 @@ export default function EditQuiz({
             });
           } else {
             console.log(
-              "client not authoritative, updating client with server quiz"
+              "client not authoritative, updating client with server quiz",
             );
             textUpdate(quizMarkdownUtils.toMarkdown(quiz), true);
           }
@@ -178,6 +178,7 @@ export default function EditQuiz({
   }, [
     clientIsAuthoritative,
     courseName,
+    feedbackDelimiters,
     isFetching,
     moduleName,
     quiz,

src/components/ContextMenu.tsx

@@ -1,78 +0,0 @@
-"use client";
-import { useEffect, useRef } from "react";
-
-export interface ContextMenuItem {
-  label: string;
-  onClick?: () => void;
-  href?: string;
-  variant?: "default" | "danger";
-  disabled?: boolean;
-}
-
-export function ContextMenu({
-  x,
-  y,
-  items,
-  onClose,
-}: {
-  x: number;
-  y: number;
-  items: ContextMenuItem[];
-  onClose: () => void;
-}) {
-  const ref = useRef<HTMLDivElement>(null);
-
-  useEffect(() => {
-    const handleClickOutside = (e: MouseEvent) => {
-      if (ref.current && !ref.current.contains(e.target as Node)) {
-        onClose();
-      }
-    };
-    const handleEscape = (e: KeyboardEvent) => {
-      if (e.key === "Escape") onClose();
-    };
-    document.addEventListener("mousedown", handleClickOutside);
-    document.addEventListener("keydown", handleEscape);
-    return () => {
-      document.removeEventListener("mousedown", handleClickOutside);
-      document.removeEventListener("keydown", handleEscape);
-    };
-  }, [onClose]);
-
-  return (
-    <div
-      ref={ref}
-      className="fixed z-50 bg-slate-800 border border-slate-600 rounded shadow-xl overflow-hidden min-w-44"
-      style={{ left: x, top: y }}
-    >
-      {items.map((item, i) =>
-        item.href ? (
-          <a
-            key={i}
-            href={item.href}
-            target="_blank"
-            rel="noreferrer"
-            className="block px-4 py-2 text-sm hover:bg-slate-700 cursor-pointer whitespace-nowrap"
-            onClick={onClose}
-          >
-            {item.label}
-          </a>
-        ) : (
-          <button
-            key={i}
-            onClick={item.onClick}
-            disabled={item.disabled}
-            className={
-              "w-full text-left px-4 py-2 text-sm hover:bg-slate-700 disabled:opacity-50 whitespace-nowrap " +
-              (item.variant === "danger"
-                ? "text-red-400 hover:text-red-300"
-                : "")
-            }
-          >
-            {item.label}
-          </button>
-        )
-      )}
-    </div>
-  );
-}

src/components/Modal.tsx

@@ -3,23 +3,35 @@ import React, { ReactNode, useCallback, useMemo, useState } from "react";
 
 export interface ModalControl {
   isOpen: boolean;
-  openModal: () => void;
+  openModal: (position?: { x: number; y: number }) => void;
   closeModal: () => void;
+  position?: { x: number; y: number };
 }
 
 export function useModal() {
   const [isOpen, setIsOpen] = useState(false);
+  const [position, setPosition] = useState<
+    { x: number; y: number } | undefined
+  >(undefined);
 
-  const openModal = useCallback(() => setIsOpen(true), []);
-  const closeModal = useCallback(() => setIsOpen(false), []);
+  const openModal = useCallback((pos?: { x: number; y: number }) => {
+    setPosition(pos);
+    setIsOpen(true);
+  }, []);
+
+  const closeModal = useCallback(() => {
+    setIsOpen(false);
+    setPosition(undefined);
+  }, []);
 
   return useMemo(
     () => ({
       isOpen,
       openModal,
       closeModal,
+      position,
     }),
-    [closeModal, isOpen, openModal]
+    [closeModal, isOpen, openModal, position],
   );
 }
 
@@ -30,6 +42,7 @@ export default function Modal({
   modalWidth = "w-1/3",
   modalControl,
   buttonComponent,
+  backgroundCoverColor = "bg-black/80",
 }: {
   children: (props: { closeModal: () => void }) => ReactNode;
   buttonText?: string;
@@ -37,13 +50,17 @@ export default function Modal({
   modalWidth?: string;
   modalControl: ModalControl;
   buttonComponent?: (props: { openModal: () => void }) => ReactNode;
+  backgroundCoverColor?: string;
 }) {
   return (
     <>
-      {buttonComponent ? (
-        buttonComponent({ openModal: modalControl.openModal })
-      ) : (
-        <button onClick={modalControl.openModal} className={buttonClass}>
+      {buttonComponent
+        ? buttonComponent({ openModal: () => modalControl.openModal() })
+        : buttonText && (
+            <button
+              onClick={() => modalControl.openModal()}
+              className={buttonClass}
+            >
               {buttonText}
             </button>
           )}
@@ -51,7 +68,7 @@ export default function Modal({
       <div
         className={
           modalControl.isOpen
-            ? "transition-all duration-400 fixed inset-0 flex items-center justify-center h-screen bg-black/80 z-50 w-screen"
+            ? `transition-all duration-400 fixed inset-0 ${modalControl.position ? "" : "flex items-center justify-center"} h-screen ${backgroundCoverColor} z-50 w-screen`
             : "hidden h-0 w-0 p-1 -z-50"
         }
         onClick={modalControl.closeModal}
@@ -60,11 +77,15 @@ export default function Modal({
           onClick={(e) => {
             e.stopPropagation();
           }}
-          className={
-            ` bg-slate-800 p-6 rounded-lg shadow-lg ` +
-            modalWidth +
-            ` transition-all duration-400 ` +
-            ` ${modalControl.isOpen ? "opacity-100" : "opacity-0"}`
+          className={`bg-slate-800 ${modalControl.position ? "" : "p-6"} rounded-lg shadow-lg ${modalControl.position ? "" : modalWidth} transition-all duration-400 ${modalControl.isOpen ? "opacity-100" : "opacity-0"}`}
+          style={
+            modalControl.position
+              ? {
+                  position: "fixed",
+                  left: modalControl.position.x,
+                  top: modalControl.position.y,
+                }
+              : undefined
           }
         >
           {modalControl.isOpen &&