🧲 Added a form for torrent search

src/client/components/ComicDetail/AcquisitionPanel.tsx

@@ -278,9 +278,9 @@ export const AcquisitionPanel = (
             )}
           />
         ) : (
-          <div className="column is-three-fifths">
+          <div className="">
-            <article className="message is-info">
+            <article className="">
-              <div className="message-body is-size-6 is-family-secondary">
+              <div className="">
                 AirDC++ is not configured. Please configure it in{" "}
                 <code>Settings &gt; AirDC++ &gt; Connection</code>.
               </div>

src/client/components/ComicDetail/ComicDetail.tsx

@@ -12,6 +12,7 @@ import { Menu } from "./ActionMenu/Menu";
 import { ArchiveOperations } from "./Tabs/ArchiveOperations";
 import { ComicInfoXML } from "./Tabs/ComicInfoXML";
 import AcquisitionPanel from "./AcquisitionPanel";
+import TorrentSearchPanel from "./TorrentSearchPanel";
 import DownloadsPanel from "./DownloadsPanel";
 import { VolumeInformation } from "./Tabs/VolumeInformation";
 
@@ -350,7 +351,7 @@ export const ComicDetail = (data: ComicDetailProps): ReactElement => {
         </span>
       ),
       name: "Torrent Search",
-      content: <>Torrents</>,
+      content: <TorrentSearchPanel />,
       shouldShow: true,
     },
     {

src/client/components/ComicDetail/TorrentSearchPanel.tsx

@@ -0,0 +1,54 @@
+import React, { useCallback, ReactElement, useEffect, useState } from "react";
+
+import { useQuery, useQueryClient } from "@tanstack/react-query";
+import axios from "axios";
+import { Form, Field } from "react-final-form";
+
+export const TorrentSearchPanel = (props): ReactElement => {
+  return (
+    <>
+      <div className="mt-5">
+        <Form
+          onSubmit={() => {}}
+          initialValues={{}}
+          render={({ handleSubmit, form, submitting, pristine, values }) => (
+            <form onSubmit={handleSubmit}>
+              <Field name="issueName">
+                {({ input, meta }) => {
+                  return (
+                    <div className="max-w-fit">
+                      <div className="flex flex-row bg-slate-300 dark:bg-slate-400 rounded-l-lg">
+                        <div className="w-10 pl-2 pt-1 text-gray-400 dark:text-gray-200">
+                          <i className="icon-[solar--magnifer-bold-duotone] h-7 w-7" />
+                        </div>
+                        <input
+                          {...input}
+                          className="dark:bg-slate-400 bg-slate-300 py-2 px-2 rounded-l-md border-gray-300 h-10 min-w-full dark:text-slate-800 sm:text-md sm:leading-5 focus:outline-none focus:shadow-outline-blue focus:border-blue-300"
+                          placeholder="Enter a search term"
+                        />
+
+                        <button
+                          className="sm:mt-0 min-w-fit rounded-r-lg border border-green-400 dark:border-green-200 bg-green-200 px-3 py-1 text-gray-500 hover:bg-transparent hover:text-green-600 focus:outline-none focus:ring active:text-indigo-500"
+                          type="submit"
+                        >
+                          <div className="flex flex-row">
+                            Search Indexer
+                            <div className="h-5 w-5 ml-1">
+                              <i className="h-6 w-6 icon-[solar--magnet-bold-duotone]" />
+                            </div>
+                          </div>
+                        </button>
+                      </div>
+                    </div>
+                  );
+                }}
+              </Field>
+            </form>
+          )}
+        />
+      </div>
+    </>
+  );
+};
+
+export default TorrentSearchPanel;

src/client/components/Settings/ProwlarrSettings/ProwlarrSettingsForm.tsx

@@ -1,5 +1,6 @@
 import React from "react";
 import { useQuery } from "@tanstack/react-query";
+import { Form, Field } from "react-final-form";
 import { PROWLARR_SERVICE_BASE_URI } from "../../../constants/endpoints";
 import axios from "axios";
 
@@ -19,10 +20,41 @@ export const ProwlarrSettingsForm = (props) => {
     queryKey: ["prowlarrConnectionResult"],
   });
   console.log(data);
+  const submitHandler = () => {};
+  const initialData = {};
   return (
     <>
       Prowlarr Settings.
-      <form></form>
+      <Form
+        onSubmit={submitHandler}
+        initialValues={initialData}
+        render={({ handleSubmit }) => (
+          <form>
+            <article
+              role="alert"
+              className="mt-4 rounded-lg max-w-screen-md border-s-4 border-blue-500 bg-blue-50 p-4 dark:border-s-4 dark:border-blue-600 dark:bg-blue-300 dark:text-slate-600"
+            >
+              <div>
+                <p>Configure Prowlarr integration here.</p>
+                <p>
+                  Note that you need a Prowlarr instance hosted and running to
+                  configure the integration.
+                </p>
+                <p>
+                  See{" "}
+                  <a
+                    className="underline"
+                    href="http://airdcpp.net/docs/installation/installation.html"
+                  >
+                    here
+                  </a>{" "}
+                  for Prowlarr installation instructions for various platforms.
+                </p>
+              </div>
+            </article>
+          </form>
+        )}
+      />
     </>
   );
 };