🌊 qBittorrent Settings Scaffold (#90)

* 🌊 qBittorrent settings scaffold

* 🔧 Added scaffold for the qBittorrent connection form

* 🔧 Some refactoring

* 🔧 Cleaned up folder structure

* 🔧 Fixed broken paths

* 🔧 Cleaned up Search and Import component hierarchy

* 🔧 More path fixes

* 🔧 Tooling changes

* 📝 Qbittorrent form scaffold

* ⬆️ Bumped @dnd-kit deps

* 🧑🏼‍🔧 Fixed the hostname regex

* 🏗️ Adding fields to the settings form

* 🔧 Formatting and more layout changes

* 🔧 Added Prowlarr settings items in JSON

* 📝 Purified Card Component

* 📝 Abstracted connection form into a component

* 🏗️ Reorganized tabs

* Migrating from Redux to RTK-query

* ⬇️ Fetched qBittorrent settings

* 🏗️ Trying out react-query

* 🧩 Added react-query query to qBittorrentSettings page

* 📝 qbittorrent form RU actions first draft

* 🏗️ Added loading state check

* 🏗 Added error check state

* 🏗️ Refactored AirDCPP context using react-query

* 🏗️ Refactoring AirDCPP Settings Form with react-query

* 🔧 Removed context

* 🔧 Removing context from AirDCPP settings page

* 🔧 Fixed early init error on the store

* 🐛 Debugging AirDCPP Settings Form page

* 🧸 Zustand-ified AirDCPP Form

* ❌ AirDCPP code cleaned up from App.tsx

* ➕ Re-added yarn.lock

src/client/components/Settings/SystemSettings/SystemSettingsForm.tsx

@@ -0,0 +1,67 @@
+import React, { ReactElement, useCallback } from "react";
+import { flushDb } from "../../../actions/settings.actions";
+import { useDispatch, useSelector } from "react-redux";
+
+export const SystemSettingsForm = (): ReactElement => {
+  const dispatch = useDispatch();
+  const isSettingsCallInProgress = useSelector(
+    (state: RootState) => state.settings.inProgress,
+  );
+  const flushDatabase = useCallback(() => {
+    dispatch(flushDb());
+  }, []);
+
+  return (
+    <div className="is-clearfix">
+      <div className="mt-4">
+        <h3 className="title">Flush DB and Temporary Folders</h3>
+        <h6 className="subtitle has-text-grey-light">
+          If you are encountering issues, start over using this functionality.
+        </h6>
+        <article className="message is-danger">
+          <div className="message-body is-size-6 is-family-secondary">
+            Flushing and resetting will clear out:
+            <p>
+              <small>(This action is irreversible)</small>
+            </p>
+            <ol>
+              <li>The mongo collection that holds library metadata</li>
+
+              <li>
+                Your <code>USERDATA_DIRECTORY</code> which includes
+                <code>covers</code>, <code>temporary</code> and
+                <code>expanded</code> subfolders.
+              </li>
+              <li>
+                Your <code>Elasticsearch indices</code>
+              </li>
+            </ol>
+          </div>
+        </article>
+
+        <article className="message is-info">
+          <div className="message-body is-size-6 is-family-secondary">
+            Your comic book files are not touched, and your settings will remain
+            intact.
+          </div>
+        </article>
+
+        <button
+          className={
+            isSettingsCallInProgress
+              ? "button is-danger is-loading"
+              : "button is-danger"
+          }
+          onClick={flushDatabase}
+        >
+          <span className="icon">
+            <i className="fas fa-eraser"></i>
+          </span>
+          <span>Flush DB & Temporary Folders</span>
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export default SystemSettingsForm;