improving navigation

run.sh

@@ -9,6 +9,15 @@ docker run -it --rm \
   -p 3000:3000 \
   -w /app \
   -v .:/app \
+  -v ~/projects/faculty/4850_AdvancedFE/2024-fall-alex/modules:/app/storage/advanced_frontend_old \
+  -v ~/projects/faculty/1810/2025-spring-alex/in-person:/app/storage/intro_to_web_old \
+  -v ~/projects/faculty/1400/2025_spring_alex/modules:/app/storage/1400 \
+  -v ~/projects/faculty/1405/2025_spring_alex:/app/storage/1405 \
+  -v ~/projects/faculty/3840_Telemetry/2025_spring_alex/modules:/app/storage/telemetry \
+  -v ~/projects/faculty/4620_Distributed/2025Spring/modules:/app/storage/distributed \
+  -v ~/projects/faculty/1430/2024-fall-alex/modules:/app/storage/ux_old \
+  -v ~/projects/faculty/1420/2024-fall/Modules:/app/storage/1420_old \
+  -v ~/projects/faculty/1425/2024-fall/Modules:/app/storage/1425_old \
   -v ~/projects/faculty/4850_AdvancedFE/2025-fall-alex/modules:/app/storage/advanced_frontend \
   -v ~/projects/faculty/1810/2025-fall-alex/modules:/app/storage/intro_to_web \
   -v ~/projects/faculty/1430/2025-fall-alex/modules:/app/storage/ux \
@@ -26,14 +35,5 @@ docker run -it --rm \
       pnpm install && pnpm dev
     "
 
-  # -v ~/projects/faculty/4850_AdvancedFE/2024-fall-alex/modules:/app/storage/advanced_frontend_old \
-  # -v ~/projects/faculty/1810/2025-spring-alex/in-person:/app/storage/intro_to_web_old \
-  # -v ~/projects/faculty/1400/2025_spring_alex/modules:/app/storage/1400 \
-  # -v ~/projects/faculty/1405/2025_spring_alex:/app/storage/1405 \
-  # -v ~/projects/faculty/3840_Telemetry/2025_spring_alex/modules:/app/storage/telemetry \
-  # -v ~/projects/faculty/4620_Distributed/2025Spring/modules:/app/storage/distributed \
-  # -v ~/projects/faculty/1430/2024-fall-alex/modules:/app/storage/ux_old \
-  # -v ~/projects/faculty/1420/2024-fall/Modules:/app/storage/1420_old \
-  # -v ~/projects/faculty/1425/2024-fall/Modules:/app/storage/1425_old \
 
     # bash -c "npm i -g pnpm && pnpm i && pnpm run dev -- -H 0.0.0.0"

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-1">{moduleName}</div>
-                <div className="flex flex-row">
+                <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}
+      onDragOver={(e) => {
-      onDrop={onDrop}
+        e.preventDefault();
+        setIsDragOver(true);
+      }}
+      onDragLeave={() => setIsDragOver(false)}
+      onDrop={(e) => {
+        setIsDragOver(false);
+        onDrop();
+      }}
     >
       <span className="flex-1 cursor-move">{tab.label}</span>
       {updateTab.isPending && <Spinner />}