feat: add confirmation prompt for session deletion

src/app/solves/page.tsx

@@ -16,6 +16,7 @@ import useSolvesPage from "@/hooks/useSolvesPage";
 import { InputText } from "@/components/input-text/index";
 import { useTimerStore } from "@/store/timerStore";
 import MoveModal from "@/components/solves/MoveModal";
+import ConfirmDelete from "@/components/solves/ConfirmDelete";
 
 export default function SolvesPage() {
   const {
@@ -28,6 +29,9 @@ export default function SolvesPage() {
     isOpenMoveModal,
     setIsOpenMoveModal,
     handleGetMoveData,
+    setIsOpenDeleteModal,
+    handleGetDeleteData,
+    isOpenDeleteModal,
   } = useSolvesPage();
   const { selectedCube } = useTimerStore();
   const { lang } = useSettingsModalStore();
@@ -61,7 +65,7 @@ export default function SolvesPage() {
                 }
               />
               <Button
-                onClick={() => handleTrashAll()}
+                onClick={() => setIsOpenDeleteModal(true)}
                 icon={
                   <div className="w-4 h-4">
                     <Trash />
@@ -89,6 +93,16 @@ export default function SolvesPage() {
           data={handleGetMoveData}
         />
       )}
+      {isOpenDeleteModal && (
+        <ConfirmDelete
+          onCancel={() => setIsOpenDeleteModal(false)}
+          onConfirm={() => {
+            setIsOpenDeleteModal(false);
+            handleTrashAll();
+          }}
+          data={handleGetDeleteData}
+        />
+      )}
     </>
   );
 }

src/components/solves/ConfirmDelete.tsx

@@ -0,0 +1,90 @@
+import { Categories } from "@/interfaces/Categories";
+import formatTime from "@/lib/formatTime";
+import { useSettingsModalStore } from "@/store/SettingsModalStore";
+import translation from "@/translations/global.json";
+
+export interface ConfirmDeleteData {
+  category: Categories;
+  bestTime: number;
+  average: number;
+  count: number;
+}
+
+export default function ConfirmDelete({
+  onConfirm,
+  onCancel,
+  data,
+}: {
+  onConfirm: () => void;
+  onCancel: () => void;
+  data: () => ConfirmDeleteData | null;
+}) {
+  const { lang } = useSettingsModalStore();
+  const getData = data();
+  if (getData === null) return null;
+
+  return (
+    <>
+      <div className="fixed top-0 left-0 z-50 flex items-center justify-center w-full h-screen text-black bg-opacity-75 bg-neutral-900">
+        <div className="flex flex-col w-full h-auto gap-3 p-3 m-8 bg-white rounded-lg shadow-lg sm:w-96">
+          <div className="text-lg font-medium text-center">
+            {translation.solves["eliminate-session"][lang]}
+          </div>
+
+          <div className="flex justify-center gap-2 ">
+            <div className="flex flex-col text-end">
+              <div className="text-black">
+                {translation.cubes.table["category"][lang]}:
+              </div>
+              <div className="text-black">
+                {translation.settings["best-time"][lang]}:
+              </div>
+              <div className="text-black">
+                {translation.timer["mean"][lang]}:
+              </div>
+              <div className="text-black">
+                {translation.timer["counter"][lang]}:
+              </div>
+            </div>
+
+            <div className="flex flex-col text-start">
+              <div className="w-full overflow-hidden text-black">
+                {getData.category}
+              </div>
+              <div className="w-auto overflow-hidden text-black">
+                {formatTime(getData.bestTime)}
+              </div>
+              <div className="w-auto overflow-hidden text-black">
+                {formatTime(getData.average)}
+              </div>
+              <div className="w-auto overflow-hidden text-black">
+                {getData.count}
+              </div>
+            </div>
+          </div>
+
+          <div className="w-11/12 mx-auto text-xs text-center">
+            {translation.solves["delete-session-legend"][lang]}
+          </div>
+
+          <div className="flex justify-center w-full h-10 gap-3">
+            <button
+              onClick={onCancel}
+              className="px-5 py-2 text-sm font-medium text-center transition duration-300 rounded-lg text-neutral-800 bg-neutral-200 hover:bg-neutral-300"
+            >
+              {translation.inputs["cancel"][lang]}
+            </button>
+
+            <button
+              onClick={onConfirm}
+              className="px-5 py-2 text-sm font-medium text-center text-white transition duration-200 border rounded-md bg-red-500 border-red-500 hover:border-red-600 hover:bg-red-600"
+              autoFocus={true}
+            >
+              {translation.inputs["delete"][lang]}
+            </button>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}

src/hooks/useSolvesPage.ts

@@ -8,13 +8,15 @@ import { useTimerStore } from "@/store/timerStore";
 import { useEffect, useRef, useState } from "react";
 import { useTimerStatistics } from "./useTimerStatistics";
 import { MoveData } from "@/components/solves/MoveModal";
+import { ConfirmDeleteData } from "@/components/solves/ConfirmDelete";
 
 export default function useSolvesPage() {
   const [currentTab, setCurrentTab] = useState<SolveTab>("Session");
   const { selectedCube, setCubes, setSelectedCube, cubes } = useTimerStore();
   const [displaySolves, setDisplaySolves] = useState<Solve[] | null>(null);
   const [isOpenMoveModal, setIsOpenMoveModal] = useState(false);
-  const { session } = useTimerStatistics();
+  const [isOpenDeleteModal, setIsOpenDeleteModal] = useState(false);
+  const { session, cubeSession } = useTimerStatistics();
   const searchBox = useRef<any>(null);
 
   const handleTabClick = (clickedTab: SolveTab) => {
@@ -31,6 +33,16 @@ export default function useSolvesPage() {
     };
   };
 
+  const handleGetDeleteData = (): ConfirmDeleteData | null => {
+    if (!selectedCube) return null;
+    return {
+      category: selectedCube.category,
+      bestTime: cubeSession.best,
+      average: cubeSession.mean,
+      count: cubeSession.count,
+    };
+  };
+
   const handleMoveAll = () => {
     if (selectedCube) {
       const updateCubes = updateSessions(selectedCube);
@@ -113,5 +125,8 @@ export default function useSolvesPage() {
     isOpenMoveModal,
     setIsOpenMoveModal,
     handleGetMoveData,
+    handleGetDeleteData,
+    setIsOpenDeleteModal,
+    isOpenDeleteModal,
   };
 }

src/translations/global.json

@@ -1571,6 +1571,40 @@
       "et": "Lõpeta seanss"
     },
 
+    "eliminate-session": {
+      "en": "Eliminate session",
+      "es": "Eliminar sesión",
+      "fr": "Éliminer la session",
+      "de": "Sitzung beenden",
+      "ja": "セッションを終了する",
+      "zh": "结束会话",
+      "ru": "Завершить сеанс",
+      "hi": "सत्र समाप्त करें",
+      "pt": "Eliminar sessão",
+      "it": "Elimina sessione",
+      "ko": "세션 종료",
+      "nl": "Sessie beëindigen",
+      "sv": "Avsluta session",
+      "tr": "Oturumu sonlandır",
+      "pl": "Zakończ sesję",
+      "vi": "Chấm dứt phiên",
+      "th": "สิ้นสุดเซสชัน",
+      "el": "Εξάλειψη συνεδρίας",
+      "fi": "Päättää istunto",
+      "uk": "Завершити сеанс",
+      "cs": "Ukončit relaci",
+      "ro": "Eliminați sesiunea",
+      "no": "Avslutt økt",
+      "da": "Afslut session",
+      "ms": "Hapuskan sesi",
+      "hu": "Munkamenet megszüntetése",
+      "id": "Hapus sesi",
+      "bn": "সেশন মুছুন",
+      "sk": "Ukončiť reláciu",
+      "fil": "Tanggalin ang sesyon",
+      "et": "Lõpeta seanss"
+    },
+
     "archive-sessions-legend": {
       "en": "This action will archive all ongoing sessions from the same category.",
       "es": "Esta acción archivará todas las sesiones en curso de la misma categoría.",
@@ -1604,6 +1638,39 @@
       "fil": "Ang aksyong ito ay mag-a-archive ng lahat ng ongoing na sesyon mula sa parehong kategorya.",
       "et": "See tegevus salvestab kõik käimasolevad seansid samast kategooriast."
     },
+    "delete-session-legend": {
+      "en": "This action will delete only your current solves with the selected cube.",
+      "es": "Esta acción eliminará solo tus resoluciones actuales con el cubo seleccionado.",
+      "fr": "Cette action supprimera uniquement vos résolutions en cours avec le cube sélectionné.",
+      "de": "Diese Aktion löscht nur Ihre aktuellen Lösungen mit dem ausgewählten Würfel.",
+      "ja": "このアクションは、選択したキューブの現在の解答のみを削除します。",
+      "zh": "此操作仅会删除您当前选择的魔方的解决方案。",
+      "ru": "Это действие удалит только ваши текущие решения с выбранным кубом.",
+      "hi": "यह क्रिया केवल आपकी चयनित क्यूब के साथ आपकी वर्तमान हल को हटा देगी।",
+      "pt": "Esta ação excluirá apenas as resoluções atuais com o cubo selecionado.",
+      "it": "Questa azione eliminerà solo le tue soluzioni attuali con il cubo selezionato.",
+      "ko": "이 작업은 선택한 큐브의 현재 해결책만 삭제합니다.",
+      "nl": "Deze actie zal alleen uw huidige oplossingen met de geselecteerde kubus verwijderen.",
+      "sv": "Denna åtgärd kommer endast att radera dina nuvarande lösningar med den valda kuben.",
+      "tr": "Bu eylem yalnızca seçilen küp ile olan mevcut çözümlerinizi silecektir.",
+      "pl": "To działanie usunie tylko twoje bieżące rozwiązania z wybraną kostką.",
+      "vi": "Hành động này chỉ sẽ xóa bỏ giải pháp hiện tại của bạn với ký hiệu được chọn.",
+      "th": "การดำเนินการนี้จะลบเฉพาะการแก้ปัญหาปัจจุบันของคุณกับลูกบี้ที่เลือก",
+      "el": "Αυτή η ενέργεια θα διαγράψει μόνο τις τρέχουσες επιλυμένες καταστάσεις σας με το επιλεγμένο κύβο.",
+      "fi": "Tämä toiminto poistaa vain nykyiset ratkaisusi valitulla kuutiolla.",
+      "uk": "Ця дія видалить лише ваші поточні рішення з вибраним кубом.",
+      "cs": "Tato akce smaže pouze vaše aktuální řešení s vybraným kostkou.",
+      "ro": "Această acțiune va șterge doar soluțiile curente cu cubul selectat.",
+      "no": "Denne handlingen vil bare slette dine nåværende løsninger med den valgte kuben.",
+      "da": "Denne handling vil kun slette dine nuværende løsninger med den valgte terning.",
+      "ms": "Tindakan ini hanya akan memadam penyelesaian semasa anda dengan kubus yang dipilih.",
+      "hu": "Ez a művelet csak a kiválasztott kockával végzett aktuális feloldásokat fogja törölni.",
+      "id": "Tindakan ini hanya akan menghapus penyelesaian saat ini Anda dengan kubus yang dipilih.",
+      "bn": "এই অ্যাকশনটি শুধুমাত্র আপনার নির্বাচিত কিউব দিয়ে আপনার বর্তমান সমাধানগুলি মুছবে।",
+      "sk": "Táto akcia vymaže iba vaše aktuálne riešenia s vybraným kockou.",
+      "fil": "Ang aksyon na ito ay maglilinis lamang ng iyong kasalukuyang mga solusyon sa piniling cube.",
+      "et": "See tegevus kustutab ainult teie praegused lahendused valitud kuubiga."
+    },
 
     "archive": {
       "en": "Archive",