Added a drag and drop feature to the tab edit mode - admin-level access.

Author: Jecomo-Alyssa-Lyn

apps/codebility/app/home/announcements/AnnouncementModal.tsx

@@ -321,6 +321,40 @@ export const AnnouncementModal: React.FC<AnnouncementModalProps> = ({
     }
   };
 
+  const [draggingId, setDraggingId] = useState<string | null>(null);
+  const [dragOverId, setDragOverId] = useState<string | null>(null);
+
+  const handleDragStart = (e: React.DragEvent, id: AnnouncementCategory) => {
+  setDraggingId(id);
+  e.dataTransfer.effectAllowed = "move";
+  };
+
+  const handleDragOver = (_e: React.DragEvent, id: AnnouncementCategory) => {
+    setDragOverId(id);
+  };
+
+  const handleDragEnd = () => {
+    setDraggingId(null);
+    setDragOverId(null);
+  };
+
+  const handleDrop = (_e: React.DragEvent, targetId: AnnouncementCategory) => {
+    if (!draggingId || draggingId === targetId) return;
+    setTabs((prev) => {
+      const updated = [...prev];
+      const fromIndex = updated.findIndex((t) => t.id === draggingId);
+      const toIndex = updated.findIndex((t) => t.id === targetId);
+      if (fromIndex === -1 || toIndex === -1) return updated;
+      const [moved] = updated.splice(fromIndex, 1);
+      if (moved) {
+        updated.splice(toIndex, 0, moved);
+      }
+      return updated;
+    });
+    setDraggingId(null);
+    setDragOverId(null);
+  };
+
   const handleTabClick = (category: AnnouncementCategory) => {
     setActiveTab(category);
     setEditingCategory(null);
@@ -441,6 +475,12 @@ export const AnnouncementModal: React.FC<AnnouncementModalProps> = ({
                       onClick={handleTabClick}
                       onEdit={(id, label) => setEditingCategory({ id, label })}
                       onDelete={(id) => setDeleteConfirm(id)}
+                      onDragStart={handleDragStart}
+                      onDragOver={handleDragOver}
+                      onDragEnd={handleDragEnd}
+                      onDrop={handleDrop}
+                      isDragging={draggingId === tab.id}
+                      isDragOver={dragOverId === tab.id}
                     />
                   )}
                 </div>

apps/codebility/app/home/announcements/AnnouncementTab.tsx

@@ -1,7 +1,6 @@
 "use client";
-
-import React from "react";
-import { Pencil, Trash2 } from "lucide-react";
+import React, { useRef } from "react";
+import { Pencil, Trash2, GripVertical } from "lucide-react";
 import { AnnouncementCategory } from "./types";
 
 interface AnnouncementTabProps {
@@ -12,6 +11,12 @@ interface AnnouncementTabProps {
   onClick: (id: AnnouncementCategory) => void;
   onEdit?: (id: AnnouncementCategory, label: string) => void;
   onDelete?: (id: AnnouncementCategory) => void;
+  onDragStart?: (e: React.DragEvent, id: AnnouncementCategory) => void;
+  onDragOver?: (e: React.DragEvent, id: AnnouncementCategory) => void;
+  onDragEnd?: () => void;
+  onDrop?: (e: React.DragEvent, id: AnnouncementCategory) => void;
+  isDragging?: boolean;
+  isDragOver?: boolean;
 }
 
 export const AnnouncementTab: React.FC<AnnouncementTabProps> = ({
@@ -22,21 +27,68 @@ export const AnnouncementTab: React.FC<AnnouncementTabProps> = ({
   onClick,
   onEdit,
   onDelete,
+  onDragStart,
+  onDragOver,
+  onDragEnd,
+  onDrop,
+  isDragging = false,
+  isDragOver = false,
 }) => {
+  // Ref-based gate: synchronous, no re-render delay
+  const gripPressed = useRef(false);
+
   return (
     <div
+      draggable={isAdmin}
+      onDragStart={(e) => {
+        if (!gripPressed.current) {
+          e.preventDefault();
+          return;
+        }
+        e.dataTransfer.setData("text/plain", id);
+        e.dataTransfer.effectAllowed = "move";
+        onDragStart?.(e, id);
+      }}
+      onDragOver={(e) => {
+        e.preventDefault();
+        e.dataTransfer.dropEffect = "move";
+        onDragOver?.(e, id);
+      }}
+      onDragEnd={() => {
+        gripPressed.current = false;
+        onDragEnd?.();
+      }}
+      onDrop={(e) => {
+        e.preventDefault();
+        onDrop?.(e, id);
+      }}
       className={`
         group relative flex items-center justify-between rounded-lg w-full
-        ${
-          isActive
-            ? "bg-blue-500/10 text-blue-500 dark:bg-blue-500/20"
-            : "text-gray-600 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-800/50"
+        transition-all duration-150 select-none
+        ${isActive
+          ? "bg-blue-500/10 text-blue-500 dark:bg-blue-500/20"
+          : "text-gray-600 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-800/50"
         }
+        ${isDragging ? "opacity-40 scale-[0.98]" : "opacity-100"}
+        ${isDragOver ? "border-t-2 border-blue-500" : "border-t-2 border-transparent"}
       `}
     >
+      {/* Grip handle — only shown to admins on hover */}
+      {isAdmin && (
+        <span
+          onMouseDown={() => { gripPressed.current = true; }}
+          onMouseUp={() => { gripPressed.current = false; }}
+          className="pl-2 shrink-0 opacity-0 group-hover:opacity-100 transition-opacity duration-150 cursor-grab active:cursor-grabbing text-gray-400 dark:text-gray-500"
+          title="Drag to reorder"
+        >
+          <GripVertical className="h-4 w-4 pointer-events-none" />
+        </span>
+      )}
+
       <button
+        draggable={false}
         onClick={() => onClick(id)}
-        className="flex-1 px-4 sm:px-6 py-3 sm:py-4 text-sm sm:text-base font-medium text-left truncate transition-all duration-200"
+        className="flex-1 px-3 sm:px-4 py-3 sm:py-4 text-sm sm:text-base font-medium text-left truncate"
         role="tab"
         aria-selected={isActive}
         aria-controls={`panel-${id}`}
@@ -45,8 +97,9 @@ export const AnnouncementTab: React.FC<AnnouncementTabProps> = ({
       </button>
 
       {isAdmin && (
-        <div className="flex items-center gap-0.5 pr-2 opacity-0 group-hover:opacity-100 transition-opacity">
+        <div className="flex items-center gap-0.5 pr-2 opacity-0 group-hover:opacity-100 transition-opacity duration-150">
           <button
+            draggable={false}
             onClick={(e) => {
               e.stopPropagation();
               onEdit?.(id, label);
@@ -57,6 +110,7 @@ export const AnnouncementTab: React.FC<AnnouncementTabProps> = ({
             <Pencil className="h-3.5 w-3.5" />
           </button>
           <button
+            draggable={false}
             onClick={(e) => {
               e.stopPropagation();
               onDelete?.(id);