🏗️ Cleaned the table further

src/client/components/Library/Library.tsx

@@ -7,6 +7,7 @@ import T2Table from "../shared/T2Table";
 import ellipsize from "ellipsize";
 import { useQuery, keepPreviousData } from "@tanstack/react-query";
 import axios from "axios";
+import { format, fromUnixTime, parseISO } from "date-fns";
 
 /**
  * Component that tabulates the contents of the user's ThreeTwo Library.
@@ -53,7 +54,7 @@ export const Library = (): ReactElement => {
 
   const ComicInfoXML = (value) => {
     return value.data ? (
-      <dl className="flex flex-col text-md p-3 mx-4 my-3 rounded-lg bg-yellow-500 w-max">
+      <dl className="flex flex-col text-md p-3 ml-4 my-3 rounded-lg dark:bg-yellow-500 bg-yellow-300 w-max">
         {/* Series Name */}
         <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">
@@ -113,9 +114,7 @@ export const Library = (): ReactElement => {
             cell: (info) =>
               !isEmpty(info.getValue()) ? (
                 <ComicInfoXML data={info.getValue()} />
-              ) : (
+              ) : null,
-                <div className="text-sm mx-4 my-3">No comicinfo.xml</div>
-              ),
           },
         ],
       },
@@ -123,24 +122,41 @@ export const Library = (): ReactElement => {
         header: "Additional Metadata",
         columns: [
           {
-            header: "Publisher",
+            header: "Date of Import",
-            accessorKey: "_source.sourcedMetadata.comicvine.volumeInformation",
+            accessorKey: "_source.createdAt",
             cell: (info) => {
               return !isNil(info.getValue()) ? (
-                <h6>{info.getValue().publisher.name}</h6>
+                <div className="text-xs w-max ml-3 my-3 text-slate-400">
+                  <p>{format(parseISO(info.getValue()), "dd MMMM, yyyy")} </p>
+                  {format(parseISO(info.getValue()), "h aaaa")}
+                </div>
               ) : null;
             },
           },
           {
-            header: "Something",
+            header: "Downloads",
-            accessorKey: "_source.acquisition.source.wanted",
+            accessorKey: "_source.acquisition",
-            cell: (info) => {
+            cell: (info) => (
-              !isUndefined(info.getValue()) ? (
+              <div className="flex flex-col gap-2 ml-3 my-3">
-                <WantedStatus value={info.getValue().toString()} />
+                <span className="inline-flex items-center w-fit bg-slate-50 text-slate-800 text-xs px-2 rounded-md dark:text-slate-900 dark:bg-slate-400">
-              ) : (
+                  <span className="pr-1 pt-1">
-                "Nothing"
+                    <i className="icon-[solar--folder-path-connect-bold-duotone] w-5 h-5"></i>
-              );
+                  </span>
-            },
+                  <span className="text-md text-slate-900 dark:text-slate-900">
+                    DC++: {info.getValue().directconnect.downloads.length}
+                  </span>
+                </span>
+
+                <span className="inline-flex w-fit items-center bg-slate-50 text-slate-800 text-xs px-2 rounded-md dark:text-slate-900 dark:bg-slate-400">
+                  <span className="pr-1 pt-1">
+                    <i className="icon-[solar--magnet-bold-duotone] w-5 h-5"></i>
+                  </span>
+                  <span className="text-md text-slate-900 dark:text-slate-900">
+                    Torrent: {info.getValue().torrent.downloads.length}
+                  </span>
+                </span>
+              </div>
+            ),
           },
         ],
       },

src/client/components/Library/SearchBar.tsx

@@ -25,36 +25,42 @@ export const SearchBar = (): ReactElement => {
     // );
   }, []);
   return (
-    <div className="box">
+    <Form
-      <Form
+      onSubmit={handleSubmit}
-        onSubmit={handleSubmit}
+      initialValues={{}}
-        initialValues={{}}
+      render={({ handleSubmit, form, submitting, pristine, values }) => (
-        render={({ handleSubmit, form, submitting, pristine, values }) => (
+        <form onSubmit={handleSubmit}>
-          <form onSubmit={handleSubmit}>
+          <Field name="search">
-            <div className="field is-grouped">
+            {({ input, meta }) => {
-              <div className="control search is-expanded">
+              return (
-                <Field name="search">
+                <div className="flex flex-row w-full">
-                  {({ input, meta }) => {
+                  <div className="flex flex-row bg-slate-300 dark:bg-slate-500 rounded-l-lg p-2 min-w-full">
-                    return (
+                    <div className="w-10 text-gray-400">
-                      <input
+                      <i className="icon-[solar--magnifer-bold-duotone] h-7 w-7" />
-                        {...input}
+                    </div>
-                        className="input main-search-bar is-medium"
+
-                        placeholder="Type an issue/volume name"
+                    <input
-                      />
+                      {...input}
-                    );
+                      className="bg-slate-300 dark:bg-slate-500 outline-none text-lg text-gray-700 w-full"
-                  }}
+                      type="text"
-                </Field>
+                      id="search"
-              </div>
+                      placeholder="Type an issue/volume name"
-              <div className="control">
+                    />
-                <button className="button is-medium" type="submit">
+                  </div>
-                  Search
+
-                </button>
+                  <button
-              </div>
+                    className="sm:mt-0 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"
-            </div>
+                    type="submit"
-          </form>
+                  >
-        )}
+                    Search
-      />
+                  </button>
-    </div>
+                </div>
+              );
+            }}
+          </Field>
+        </form>
+      )}
+    />
   );
 };
 

src/client/components/shared/MetadataPanel.tsx

@@ -31,7 +31,7 @@ export const MetadataPanel = (props: IMetadatPanelProps): ReactElement => {
     {
       name: "rawFileDetails",
       content: () => (
-        <dl className="bg-[#647587] p-3 rounded-lg">
+        <dl className="dark:bg-[#647587] bg-slate-200 p-3 rounded-lg">
           <dt>
             <p className="text-lg">{issueName}</p>
           </dt>

src/client/components/shared/T2Table.tsx

@@ -73,43 +73,32 @@ export const T2Table = (tableOptions): ReactElement => {
     <>
       <div>
         {/* Search bar */}
-        <div className="column is-half">
+        <div className="flex flex-row gap-2 justify-between">
           <SearchBar />
-        </div>
+
-        {/* pagination controls */}
+          {/* pagination controls */}
-        <nav className="pagination columns">
+          <div>
-          Page {pageIndex} of {Math.ceil(totalPages / pageSize)}
+            Page {pageIndex} of {Math.ceil(totalPages / pageSize)}
-          <p>{totalPages} comics in all</p>
+            <p>{totalPages} comics in all</p>
-          {/* Prev/Next buttons */}
+            {/* Prev/Next buttons */}
-          <div className="inline-flex flex-row mt-4 mb-4">
+            <div className="inline-flex flex-row mt-4 mb-4">
-            <button
+              <button
-              onClick={() => goToPreviousPage()}
+                onClick={() => goToPreviousPage()}
-              disabled={pageIndex === 1}
+                disabled={pageIndex === 1}
-              className="bg-slate-500 rounded-l border-slate-600 border-r pt-2 px-2"
+                className="dark:bg-slate-500 bg-slate-400 rounded-l border-slate-600 border-r pt-2 px-2"
-            >
+              >
-              <i className="icon-[solar--arrow-left-linear] h-6 w-6"></i>
+                <i className="icon-[solar--arrow-left-linear] h-6 w-6"></i>
-            </button>
+              </button>
-            <button
+              <button
-              className="bg-slate-500 rounded-r pt-2 px-2"
+                className="dark:bg-slate-500 bg-slate-400 rounded-r pt-2 px-2"
-              onClick={() => goToNextPage()}
+                onClick={() => goToNextPage()}
-              disabled={pageIndex > Math.floor(totalPages / pageSize)}
+                disabled={pageIndex > Math.floor(totalPages / pageSize)}
-            >
+              >
-              <i className="icon-[solar--arrow-right-linear] h-6 w-6"></i>
+                <i className="icon-[solar--arrow-right-linear] h-6 w-6"></i>
-            </button>
+              </button>
+            </div>
           </div>
-          <button className="button">
+        </div>
-            <span className="icon is-small">
-              <i className="fa-solid fa-list"></i>
-            </span>
-          </button>
-          <button className="button">
-            <Link to="/library-grid">
-              <span className="icon is-small">
-                <i className="fa-solid fa-image"></i>
-              </span>
-            </Link>
-          </button>
-        </nav>
       </div>
       <table className="table-auto border-collapse overflow-auto">
         <thead className="sticky top-0 bg-slate-200 dark:bg-slate-500">