Flush storage

src/components/ControlPanel.jsx

@@ -754,6 +754,18 @@ export default function ControlPanel({
             .catch((e) => Toast.error("Oops! Something went wrong."));
         },
       },
+      "Flush storage": {
+        function: async () => {
+          db.delete()
+            .then(() => {
+              Toast.success("Storage flushed");
+              window.location.reload(false);
+            })
+            .catch((error) => {
+              Toast.error("Oops! Something went wrong.");
+            });
+        },
+      },
       Import: {
         function: fileImport,
         shortcut: "Ctrl+I",
@@ -1665,7 +1677,7 @@ export default function ControlPanel({
   function getState() {
     switch (state) {
       case State.NONE:
-        return "No changes"
+        return "No changes";
       case State.LOADING:
         return "Loading . . .";
       case State.SAVED:

src/pages/LandingPage.jsx

@@ -3,21 +3,9 @@ import { Link } from "react-router-dom";
 import { IconCrossStroked } from "@douyinfe/semi-icons";
 import Navbar from "../components/Navbar";
 
-import { db } from "../data/db";
-
 export default function LandingPage() {
   const [showSurvey, setShowSurvey] = useState(true);
 
-  const clearDatabase = () => {
-    db.delete()
-      .then(() => {
-        console.log("Database cleared.");
-      })
-      .catch((error) => {
-        console.error("Failed to clear the database:", error);
-      });
-  };
-
   useEffect(() => {
     document.body.setAttribute("theme-mode", "light");
     document.title =
@@ -39,7 +27,6 @@ export default function LandingPage() {
         </div>
       )}
       <Navbar />
-      <button onClick={clearDatabase}>delete db</button>
     </div>
   );
 }