📋 UI improvements in the Library section

src/client/assets/scss/App.scss

@@ -325,10 +325,10 @@ pre {
     width: 100%;
     thead {
       position: sticky;
-      top: 194px;
+      top: 146px;
       z-index: 1;
       background: #fffffc;
-      min-height: 120px;
+      min-height: 130px;
     }
     tr {
       td {

src/client/components/Dashboard/Dashboard.tsx

@@ -65,11 +65,22 @@ export const Dashboard = (): ReactElement => {
             {/* Pull List */}
             <PullList issues={recentComics} />
 
-            {/* stats */}
+            {/* Stats */}
-            <LibraryStatistics stats={libraryStatistics} />
+            {!isEmpty(libraryStatistics) && (
-            <WantedComicsList comics={wantedComics} />
+              <LibraryStatistics stats={libraryStatistics} />
-            <RecentlyImported comicBookCovers={recentComics} />
+            )}
-            <VolumeGroups volumeGroups={volumeGroups} />
+            {/* Wanted comics */}
+            {!isEmpty(wantedComics) && (
+              <WantedComicsList comics={wantedComics} />
+            )}
+            {/* Recent imports */}
+            {!isEmpty(recentComics) && (
+              <RecentlyImported comicBookCovers={recentComics} />
+            )}
+            {/* Volumes */}
+            {!isEmpty(volumeGroups) && (
+              <VolumeGroups volumeGroups={volumeGroups} />
+            )}
           </>
         ) : (
           <ZeroState

src/client/components/Dashboard/WantedComicsList.tsx

@@ -28,7 +28,7 @@ export const WantedComicsList = ({
             <span className="title is-4">Wanted Comics</span>
           </span>
           <span className="icon mt-1">
-          <i className="fa-regular fa-angle-right"></i>
+          <i className="fa-solid fa-circle-chevron-right"></i>
           </span>
         </span>
         <p className="subtitle is-7">

src/client/components/Library/ComicVineDetails.tsx

@@ -16,7 +16,7 @@ export const ComicVineDetails = (comicVineData): ReactElement => {
               <div className="columns mt-2">
                 <div className="column is-3">
                   <Card
-                    imageUrl={data.comicvine.image.thumb_url}
+                    imageUrl={data.comicvine.image.small_url}
                     orientation={"vertical"}
                     hasDetails={false}
                     // cardContainerStyle={{ maxWidth: 200 }}

src/client/components/Library/Library.tsx

@@ -81,7 +81,7 @@ export const Library = (data: IComicBookLibraryProps): ReactElement => {
           {
             Header: "File Details",
             id: "fileDetails",
-            minWidth: 450,
+            minWidth: 400,
             accessor: (row) =>
               !isEmpty(row._source.rawFileDetails)
                 ? {
@@ -104,7 +104,6 @@ export const Library = (data: IComicBookLibraryProps): ReactElement => {
           {
             Header: "ComicInfo.xml",
             accessor: "_source.sourcedMetadata.comicInfo",
-            minWidth: 300,
             align: "right",
             Cell: ({ value }) =>
               !isEmpty(value) ? (

src/client/components/Library/LibraryContainer.tsx

@@ -17,6 +17,7 @@ const LibraryContainer = () => {
             size: 25,
             from: 0,
           },
+          type: "all",
         },
       ),
     );

src/client/components/Library/SearchBar.tsx

@@ -21,6 +21,7 @@ export const SearchBar = (): ReactElement => {
             size: 25,
             from: 0,
           },
+          type: "volumeName",
         },
       ),
     );
@@ -32,27 +33,30 @@ export const SearchBar = (): ReactElement => {
         initialValues={{}}
         render={({ handleSubmit, form, submitting, pristine, values }) => (
           <form onSubmit={handleSubmit}>
-            <div className="column is-three-quarters search">
+            <div className="field is-grouped">
-              <label>Search</label>
+              <div className="control is-expanded search">
-              <Field name="search">
+                <Field name="search">
-                {({ input, meta }) => {
+                  {({ input, meta }) => {
-                  return (
+                    return (
-                    <input
+                      <input
-                      {...input}
+                        {...input}
-                      className="input main-search-bar is-medium"
+                        className="input main-search-bar is-medium"
-                      placeholder="Type an issue/volume name"
+                        placeholder="Type an issue/volume name"
-                    />
+                      />
-                  );
+                    );
-                }}
+                  }}
-              </Field>
+                </Field>
-              <button className="button" type="submit">
+              </div>
-                Search
+              <div className="control">
-              </button>
+                <button className="button is-medium" type="submit">
+                  Search
+                </button>
+              </div>
             </div>
           </form>
         )}
       />
-      <div className="column one-fifth">
+      {/* <div className="column one-fifth">
         <div className="field has-addons">
           <p className="control">
             <button className="button">
@@ -71,7 +75,7 @@ export const SearchBar = (): ReactElement => {
             </button>
           </p>
         </div>
-      </div>
+      </div> */}
     </div>
   );
 };

src/client/components/WantedComics/WantedComics.tsx

@@ -0,0 +1,25 @@
+import React, { ReactElement, useEffect } from "react";
+import { useDispatch } from "react-redux";
+import { searchIssue } from "../../actions/fileops.actions";
+
+export const WantedComics = (props): ReactElement => {
+  const dispatch = useDispatch();
+  useEffect(() => {
+    dispatch(
+      searchIssue(
+        {
+          query: {},
+        },
+        {
+          pagination: {
+            size: 25,
+            from: 0,
+          },
+        },
+      ),
+    );
+  }, []);
+  return <>Ads</>;
+};
+
+export default WantedComics;

src/client/components/shared/T2Table.tsx

@@ -36,7 +36,7 @@ export const T2Table = (tableOptions): ReactElement => {
       pageCount: totalPages,
     },
     usePagination,
-    useFlexLayout,
+    // useFlexLayout,
   );
   return (
     <>
@@ -45,7 +45,12 @@ export const T2Table = (tableOptions): ReactElement => {
           {headerGroups.map((headerGroup, idx) => (
             <tr key={idx} {...headerGroup.getHeaderGroupProps()}>
               {headerGroup.headers.map((column, idx) => (
-                <th key={idx} {...column.getHeaderProps()}>
+                <th
+                  key={idx}
+                  {...column.getHeaderProps({
+                    style: { minWidth: column.minWidth, width: column.width },
+                  })}
+                >
                   {column.render("Header")}
                 </th>
               ))}
@@ -66,7 +71,12 @@ export const T2Table = (tableOptions): ReactElement => {
                   return (
                     <td
                       key={idx}
-                      {...cell.getCellProps()}
+                      {...cell.getCellProps({
+                        style: {
+                          minWidth: cell.column.minWidth,
+                          width: cell.column.width,
+                        },
+                      })}
                       className="is-vcentered"
                     >
                       {cell.render("Cell")}