🌊 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/shared/Carda.tsx

@@ -0,0 +1,92 @@
+import React, { ReactElement } from "react";
+import PropTypes from "prop-types";
+import { isEmpty, isNil } from "lodash";
+
+interface ICardProps {
+  orientation: string;
+  imageUrl: string;
+  hasDetails: boolean;
+  title?: PropTypes.ReactElementLike | null;
+  children?: PropTypes.ReactNodeLike;
+  borderColorClass?: string;
+  backgroundColor?: string;
+  onClick?: (event: React.MouseEvent<HTMLElement>) => void;
+  cardContainerStyle?: PropTypes.object;
+  imageStyle?: PropTypes.object;
+}
+
+const renderCard = (props: ICardProps): ReactElement => {
+  switch (props.orientation) {
+    case "horizontal":
+      return (
+        <div className="card-container">
+          <div className="card generic-card">
+            <div className="is-horizontal">
+              <div className="card-image">
+                <img
+                  style={props.imageStyle}
+                  src={props.imageUrl}
+                  alt="Placeholder image"
+                  className="cropped-image"
+                />
+              </div>
+              {props.hasDetails && (
+                <div className="card-content">{props.children}</div>
+              )}
+            </div>
+          </div>
+        </div>
+      );
+    case "vertical":
+      return (
+        <div onClick={props.onClick}>
+          <div className="generic-card" style={props.cardContainerStyle}>
+            <div
+              className={
+                !isNil(props.borderColorClass)
+                  ? `${props.borderColorClass}`
+                  : ""
+              }
+            >
+              <div
+                className={
+                  props.hasDetails
+                    ? "partial-rounded-card-image"
+                    : "rounded-card-image"
+                }
+              >
+                <figure>
+                  <img
+                    src={props.imageUrl}
+                    style={props.imageStyle}
+                    alt="Placeholder image"
+                  />
+                </figure>
+              </div>
+              {props.hasDetails && (
+                <div
+                  className="card-content"
+                  style={{ backgroundColor: props.backgroundColor }}
+                >
+                  {!isNil(props.title) ? (
+                    <div className="card-title is-size-8 is-family-secondary">
+                      {props.title}
+                    </div>
+                  ) : null}
+                  {props.children}
+                </div>
+              )}
+            </div>
+          </div>
+        </div>
+      );
+    default:
+      return <></>;
+  }
+};
+
+export const Card = React.memo(
+  (props: ICardProps): ReactElement => renderCard(props),
+);
+
+export default Card;