Enhance dialog components by adding smooth scroll to top functionality upon opening; update ConfirmDialog, ClearSubmissionsDialog, and DuplicateChainDialog for improved user experience. Remove unused ConfirmDialog from ChainsListPage and TasksListPage, streamlining code.

src/pages/tasks/TasksListPage.tsx

@@ -17,7 +17,6 @@ import { URLs } from '../../__data__/urls'
 import { LoadingSpinner } from '../../components/LoadingSpinner'
 import { ErrorAlert } from '../../components/ErrorAlert'
 import { EmptyState } from '../../components/EmptyState'
-import { ConfirmDialog } from '../../components/ConfirmDialog'
 import type { ChallengeTask } from '../../types/challenge'
 import { toaster } from '../../components/ui/toaster'
 
@@ -25,22 +24,24 @@ export const TasksListPage: React.FC = () => {
   const navigate = useNavigate()
   const { t } = useTranslation()
   const { data: tasks, isLoading, error, refetch } = useGetTasksQuery()
-  const [deleteTask, { isLoading: isDeleting }] = useDeleteTaskMutation()
+  const [deleteTask] = useDeleteTaskMutation()
 
   const [searchQuery, setSearchQuery] = useState('')
-  const [taskToDelete, setTaskToDelete] = useState<ChallengeTask | null>(null)
 
-  const handleDeleteTask = async () => {
-    if (!taskToDelete) return
+  const handleDeleteTask = async (task: ChallengeTask) => {
+    const confirmed = window.confirm(
+      t('challenge.admin.tasks.delete.confirm.message', { title: task.title })
+    )
+
+    if (!confirmed) return
 
     try {
-      await deleteTask(taskToDelete.id).unwrap()
+      await deleteTask(task.id).unwrap()
       toaster.create({
         title: t('challenge.admin.common.success'),
         description: t('challenge.admin.tasks.deleted'),
         type: 'success',
       })
-      setTaskToDelete(null)
     } catch (_err) {
       toaster.create({
         title: t('challenge.admin.common.error'),
@@ -152,7 +153,7 @@ export const TasksListPage: React.FC = () => {
                         size="sm"
                         variant="ghost"
                         colorPalette="red"
-                        onClick={() => setTaskToDelete(task)}
+                        onClick={() => handleDeleteTask(task)}
                       >
                         {t('challenge.admin.tasks.list.button.delete')}
                       </Button>
@@ -164,16 +165,6 @@ export const TasksListPage: React.FC = () => {
           </Table.Root>
         </Box>
       )}
-
-      <ConfirmDialog
-        isOpen={!!taskToDelete}
-        onClose={() => setTaskToDelete(null)}
-        onConfirm={handleDeleteTask}
-        title={t('challenge.admin.tasks.delete.confirm.title')}
-        message={t('challenge.admin.tasks.delete.confirm.message', { title: taskToDelete?.title })}
-        confirmLabel={t('challenge.admin.tasks.delete.confirm.button')}
-        isLoading={isDeleting}
-      />
     </Box>
   )
 }