improving navigation

src/app/course/[courseName]/modules/ExpandableModule.tsx

@@ -87,8 +87,8 @@ export default function ExpandableModule({
                 role="button"
                 onClick={() => setIsExpanded((e) => !e)}
               >
-                <div>{moduleName}</div>
-                <div className="flex flex-row">
+                <div className="flex-1">{moduleName}</div>
+                <div className=" flex flex-row justify-end">
                   <ClientOnly>
                     <ModuleCanvasStatus moduleName={moduleName} />
                   </ClientOnly>

src/app/course/[courseName]/modules/ModuleCanvasStatus.tsx

@@ -14,7 +14,7 @@ export function ModuleCanvasStatus({ moduleName }: { moduleName: string }) {
 
   return (
     <div className="text-slate-400 text-end">
-      {!canvasModule && <div>Not in Canvas</div>}
+      {!canvasModule && <div className="text-rose-400">Not in Canvas</div>}
       {!canvasModule && (
         <button
           disabled={addToCanvas.isPending}

src/app/course/[courseName]/settings/canvasNavigation.tsx/NavTabListItem.tsx

@@ -11,6 +11,7 @@ export const NavTabListItem: FC<{
   onDrop: () => void;
 }> = ({ tab, idx, onDragStart, onDragOver, onDrop }) => {
   const updateTab = useUpdateCanvasTabMutation();
+  const [isDragOver, setIsDragOver] = React.useState(false);
   const handleToggleVisibility = () => {
     updateTab.mutate({
       tabId: tab.id,
@@ -23,11 +24,18 @@ export const NavTabListItem: FC<{
       key={tab.id}
       className={`flex items-center justify-between mb-2 p-1 px-4 rounded bg-slate-800 ${
         tab.hidden ? "opacity-50" : ""
-      }`}
+      } ${isDragOver ? "border-t-4 border-blue-400" : ""}`}
       draggable
       onDragStart={onDragStart}
-      onDragOver={onDragOver}
-      onDrop={onDrop}
+      onDragOver={(e) => {
+        e.preventDefault();
+        setIsDragOver(true);
+      }}
+      onDragLeave={() => setIsDragOver(false)}
+      onDrop={(e) => {
+        setIsDragOver(false);
+        onDrop();
+      }}
     >
       <span className="flex-1 cursor-move">{tab.label}</span>
       {updateTab.isPending && <Spinner />}