From d647feff4dba4a670e1f600b47b3af6e42b24ea1 Mon Sep 17 00:00:00 2001
From: Rishi Ghan <rishi.ghan@gmail.com>
Date: Tue, 26 Dec 2023 00:51:53 -0500
Subject: [PATCH] =?UTF-8?q?=F0=9F=AA=91=20Cleaned=20up=20the=20DC++=20sear?=
 =?UTF-8?q?ch=20results=20table?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ComicDetail/AcquisitionPanel.tsx          | 185 ++++++++++--------
 .../components/ComicDetail/DownloadsPanel.tsx |  10 +-
 2 files changed, 108 insertions(+), 87 deletions(-)

diff --git a/src/client/components/ComicDetail/AcquisitionPanel.tsx b/src/client/components/ComicDetail/AcquisitionPanel.tsx
index bc851cb..6174d7c 100644
--- a/src/client/components/ComicDetail/AcquisitionPanel.tsx
+++ b/src/client/components/ComicDetail/AcquisitionPanel.tsx
@@ -262,7 +262,7 @@ export const AcquisitionPanel = (
   );
   return (
     <>
-      <div className="comic-detail columns">
+      <div className="mt-5">
         {!isEmpty(airDCPPSocketInstance) ? (
           <Form
             onSubmit={getDCPPSearchResults}
@@ -270,44 +270,40 @@ export const AcquisitionPanel = (
               issueName,
             }}
             render={({ handleSubmit, form, submitting, pristine, values }) => (
-              <form
-                onSubmit={handleSubmit}
-                className="column is-three-quarters"
-              >
-                <div className="box search">
-                  <div className="columns">
-                    <Field name="issueName">
-                      {({ input, meta }) => {
-                        return (
-                          <div className="column is-two-thirds">
-                            <input
-                              {...input}
-                              className="input main-search-bar is-medium"
-                              placeholder="Type an issue/volume name"
-                            />
-                            <span className="help is-clearfix is-light is-info"></span>
+              <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>
-                        );
-                      }}
-                    </Field>
+                          <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="Type an issue/volume name"
+                          />
 
-                    <div className="column">
-                      <button
-                        type="submit"
-                        className={
-                          airDCPPSearchStatus
-                            ? "button is-loading is-warning"
-                            : "button is-success is-light"
-                        }
-                      >
-                        <span className="icon is-small">
-                          <img src="/src/client/assets/img/airdcpp_logo.svg" />
-                        </span>
-                        <span className="airdcpp-text">Search on AirDC++</span>
-                      </button>
-                    </div>
-                  </div>
-                </div>
+                          <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 DC++
+                              <div className="h-5 w-5 ml-2">
+                                <img
+                                  src="/src/client/assets/img/airdcpp_logo.svg"
+                                  className="h-5 w-5"
+                                />
+                              </div>
+                            </div>
+                          </button>
+                        </div>
+                      </div>
+                    );
+                  }}
+                </Field>
               </form>
             )}
           />
@@ -380,26 +376,34 @@ export const AcquisitionPanel = (
       {/* AirDC++ results */}
       <div className="columns">
         {!isNil(airDCPPSearchResults) && !isEmpty(airDCPPSearchResults) ? (
-          <div className="column">
-            <table className="table">
+          <div className="overflow-x-auto w-fit mt-4 rounded-lg border border-gray-200">
+            <table className="min-w-full divide-y-2 divide-gray-200 dark:divide-gray-200 text-md">
               <thead>
                 <tr>
-                  <th>Name</th>
-                  <th>Type</th>
-                  <th>Slots</th>
-                  <th>Actions</th>
+                  <th className="whitespace-nowrap px-2 py-2 font-medium text-gray-900 dark:text-slate-200">
+                    Name
+                  </th>
+                  <th className="whitespace-nowrap py-2 font-medium text-gray-900 dark:text-slate-200">
+                    Type
+                  </th>
+                  <th className="whitespace-nowrap py-2 font-medium text-gray-900 dark:text-slate-200">
+                    Slots
+                  </th>
+                  <th className="whitespace-nowrap py-2 font-medium text-gray-900 dark:text-slate-200">
+                    Actions
+                  </th>
                 </tr>
               </thead>
-              <tbody>
+              <tbody className="divide-y divide-slate-500">
                 {map(airDCPPSearchResults, ({ result }, idx) => {
                   return (
                     <tr
                       key={idx}
                       className={
-                        !isNil(result.dupe) ? "dupe-search-result" : ""
+                        !isNil(result.dupe) ? "bg-purple-50" : "w-fit text-sm"
                       }
                     >
-                      <td>
+                      <td className="whitespace-nowrap px-3 py-3 text-gray-700 dark:text-slate-300">
                         <p className="mb-2">
                           {result.type.id === "directory" ? (
                             <i className="fas fa-folder"></i>
@@ -409,16 +413,31 @@ export const AcquisitionPanel = (
 
                         <dl>
                           <dd>
-                            <div className="tags">
+                            <div className="inline-flex flex-row gap-2">
                               {!isNil(result.dupe) ? (
                                 <span className="tag is-warning">Dupe</span>
                               ) : null}
-                              <span className="tag is-light is-info">
-                                {result.users.user.nicks}
+
+                              {/* Nicks */}
+                              <span className="inline-flex items-center bg-slate-50 text-slate-800 text-xs font-medium px-2 rounded-md dark:text-slate-900 dark:bg-slate-400">
+                                <span className="pr-1 pt-1">
+                                  <i className="icon-[solar--user-rounded-bold-duotone] w-5 h-5"></i>
+                                </span>
+
+                                <span className="text-md text-slate-500 dark:text-slate-900">
+                                  {result.users.user.nicks}
+                                </span>
                               </span>
+                              {/* Flags */}
                               {result.users.user.flags.map((flag, idx) => (
-                                <span className="tag is-light" key={idx}>
-                                  {flag}
+                                <span className="inline-flex items-center bg-slate-50 text-slate-800 text-xs font-medium px-2 rounded-md dark:text-slate-900 dark:bg-slate-400">
+                                  <span className="pr-1 pt-1">
+                                    <i className="icon-[solar--tag-horizontal-bold-duotone] w-5 h-5"></i>
+                                  </span>
+
+                                  <span className="text-md text-slate-500 dark:text-slate-900">
+                                    {flag}
+                                  </span>
                                 </span>
                               ))}
                             </div>
@@ -426,21 +445,28 @@ export const AcquisitionPanel = (
                         </dl>
                       </td>
                       <td>
-                        <span className="tag is-light is-info">
-                          {result.type.id === "directory"
-                            ? "directory"
-                            : result.type.str}
+                        {/* Extension */}
+                        <span className="inline-flex items-center bg-slate-50 text-slate-800 text-xs font-medium px-2 rounded-md dark:text-slate-900 dark:bg-slate-400">
+                          <span className="pr-1 pt-1">
+                            <i className="icon-[solar--zip-file-bold-duotone] w-5 h-5"></i>
+                          </span>
+
+                          <span className="text-md text-slate-500 dark:text-slate-900">
+                            {result.type.str}
+                          </span>
                         </span>
                       </td>
-                      <td>
-                        <div className="tags has-addons">
-                          <span className="tag is-success">
-                            {result.slots.free} free
+                      <td className="px-2">
+                        {/* Slots */}
+                        <span className="inline-flex items-center bg-slate-50 text-slate-800 text-xs font-medium px-2 rounded-md dark:text-slate-900 dark:bg-slate-400">
+                          <span className="pr-1 pt-1">
+                            <i className="icon-[solar--settings-minimalistic-bold-duotone] w-5 h-5"></i>
                           </span>
-                          <span className="tag is-light">
-                            {result.slots.total}
+
+                          <span className="text-md text-slate-500 dark:text-slate-900">
+                            {result.slots.total} slots; {result.slots.free} free
                           </span>
-                        </div>
+                        </span>
                       </td>
                       <td>
                         <button
@@ -470,25 +496,28 @@ export const AcquisitionPanel = (
             </table>
           </div>
         ) : (
-          <div className="column is-three-fifths">
-            <article className="message is-info">
-              <div className="message-body is-size-6 is-family-secondary">
-                <p>
-                  The default search term is an auto-detected title; you may
-                  need to change it to get better matches if the auto-detected
-                  one doesn't work.
-                </p>
+          <div className="">
+            <article
+              role="alert"
+              className="mt-4 rounded-lg text-sm 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>
+                The default search term is an auto-detected title; you may need
+                to change it to get better matches if the auto-detected one
+                doesn't work.
               </div>
             </article>
 
-            <article className="message is-warning">
-              <div className="message-body is-size-6 is-family-secondary">
-                <p className="content">
-                  Searching via <strong>AirDC++</strong> is still in
-                  <strong>alpha</strong>. Some searches may take arbitrarily
-                  long, or may not work at all. Searches from <code>ADCS</code>
-                  hubs are more reliable than <code>NMDCS</code> ones.
-                </p>
+            <article
+              role="alert"
+              className="mt-4 rounded-lg text-sm 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>
+                Searching via <strong>AirDC++</strong> is still in{" "}
+                <strong>alpha</strong>. Some searches may take arbitrarily long,
+                or may not work at all. Searches from{" "}
+                <code className="font-hasklig">ADCS</code> hubs are more
+                reliable than <code className="font-hasklig">NMDCS</code> ones.
               </div>
             </article>
           </div>
diff --git a/src/client/components/ComicDetail/DownloadsPanel.tsx b/src/client/components/ComicDetail/DownloadsPanel.tsx
index a10bcda..0d71a9d 100644
--- a/src/client/components/ComicDetail/DownloadsPanel.tsx
+++ b/src/client/components/ComicDetail/DownloadsPanel.tsx
@@ -1,5 +1,4 @@
 import React, { useEffect, useContext, ReactElement, useState } from "react";
-import { getBundlesForComic } from "../../actions/airdcpp.actions";
 import { RootState } from "threetwo-ui-typings";
 import { isArray, isEmpty, isNil, isUndefined, map } from "lodash";
 import prettyBytes from "pretty-bytes";
@@ -19,13 +18,6 @@ interface IDownloadsPanelProps {
 export const DownloadsPanel = (
   props: IDownloadsPanelProps,
 ): ReactElement | null => {
-  //   const bundles = useSelector((state: RootState) => {
-  //     return state.airdcpp.bundles;
-  //   });
-  //
-  //   // AirDCPP Socket initialization
-  //   const userSettings = useSelector((state: RootState) => state.settings.data);
-  //   const airDCPPConfiguration = useContext(AirDCPPSocketContext);
   const { comicObjectId } = useParams<{ comicObjectId: string }>();
   const [bundles, setBundles] = useState([]);
   const { airDCPPSocketInstance } = useStore(
@@ -66,7 +58,7 @@ export const DownloadsPanel = (
     getBundles(comicObject).then((result) => {
       setBundles(result);
     });
-  }, [isSuccess]);
+  }, [comicObject]);
 
   const Bundles = (props) => {
     console.log("asdas", props);