From dc014a08cee1b61f943e726c415b7503034f17bf Mon Sep 17 00:00:00 2001
From: Rishi Ghan <rishi.ghan@gmail.com>
Date: Thu, 27 Nov 2025 00:28:53 -0500
Subject: [PATCH] [chore] moving things around in prep for graphql

---
 .../ComicDetail/ActionMenu/Menu.tsx           |  10 +-
 .../components/ComicDetail/ComicDetail.tsx    | 106 +++++-----
 .../components/ComicDetail/RawFileDetails.tsx | 187 ++++++++++--------
 .../ComicDetail/Tabs/ArchiveOperations.tsx    |  43 ++--
 src/client/components/Dashboard/PullList.tsx  | 177 +++++++++--------
 .../components/Dashboard/RecentlyImported.tsx |  14 +-
 src/client/components/shared/Carda.tsx        |   6 +-
 7 files changed, 307 insertions(+), 236 deletions(-)

diff --git a/src/client/components/ComicDetail/ActionMenu/Menu.tsx b/src/client/components/ComicDetail/ActionMenu/Menu.tsx
index 8f5543a..266ac55 100644
--- a/src/client/components/ComicDetail/ActionMenu/Menu.tsx
+++ b/src/client/components/ComicDetail/ActionMenu/Menu.tsx
@@ -1,7 +1,7 @@
 import React, { ReactElement } from "react";
 import Select from "react-select";
 
-export const Menu = (props): ReactElement => {
+export const Menu = (props: any): ReactElement => {
   const {
     filteredActionOptions,
     customStyles,
@@ -13,11 +13,11 @@ export const Menu = (props): ReactElement => {
     <Select
       components={{ Placeholder }}
       placeholder={
-        <span className="inline-flex flex-row items-center gap-2 pt-1">
-          <div className="w-6 h-6">
-            <i className="icon-[solar--cursor-bold-duotone] w-6 h-6"></i>
+        <span className="inline-flex flex-row items-center gap-1.5 pt-1">
+          <div className="w-4 h-4">
+            <i className="icon-[solar--cursor-bold-duotone] w-4 h-4"></i>
           </div>
-          <div>Select An Action</div>
+          <div className="text-sm">Select An Action</div>
         </span>
       }
       styles={customStyles}
diff --git a/src/client/components/ComicDetail/ComicDetail.tsx b/src/client/components/ComicDetail/ComicDetail.tsx
index af48dc2..16d14b0 100644
--- a/src/client/components/ComicDetail/ComicDetail.tsx
+++ b/src/client/components/ComicDetail/ComicDetail.tsx
@@ -18,7 +18,6 @@ import { VolumeInformation } from "./Tabs/VolumeInformation";
 
 import { isEmpty, isUndefined, isNil, filter } from "lodash";
 import { components } from "react-select";
-import { RootState } from "threetwo-ui-typings";
 
 import "react-sliding-pane/dist/react-sliding-pane.css";
 import "react-loader-spinner/dist/loader/css/react-spinner-loader.css";
@@ -37,20 +36,30 @@ import { refineQuery } from "filename-parser";
 interface ComicDetailProps {
   data: {
     _id: string;
-    rawFileDetails: {};
-    inferredMetadata: {
-      issue: {};
+    rawFileDetails?: any;
+    inferredMetadata?: {
+      issue?: {
+        year?: string;
+        name?: string;
+        number?: number;
+        subtitle?: string;
+      };
     };
     sourcedMetadata: {
-      comicvine: {};
-      locg: {};
-      comicInfo: {};
+      comicvine?: any;
+      locg?: any;
+      comicInfo?: any;
+    };
+    acquisition?: {
+      directconnect?: {
+        downloads?: any[];
+      };
+      torrent?: any[];
     };
-    acquisition: {};
     createdAt: string;
     updatedAt: string;
   };
-  userSettings: {};
+  userSettings?: any;
 }
 /**
  * Component for displaying the metadata for a comic in greater detail.
@@ -102,7 +111,7 @@ export const ComicDetail = (data: ComicDetailProps): ReactElement => {
   const StyledSlidingPanel = styled(SlidingPane)`
     background: #ccc;
   `;
-  const afterOpenModal = useCallback((things) => {
+  const afterOpenModal = useCallback((things: any) => {
     // references are now sync'd and can be accessed.
     // subtitle.style.color = "#f00";
     console.log("kolaveri", things);
@@ -113,9 +122,9 @@ export const ComicDetail = (data: ComicDetailProps): ReactElement => {
   }, []);
 
   // sliding panel init
-  const contentForSlidingPanel = {
+  const contentForSlidingPanel: Record<string, { content: (props?: any) => JSX.Element }> = {
     CVMatches: {
-      content: (props) => (
+      content: (props?: any) => (
         <>
           <div>
             <ComicVineSearchForm data={rawFileDetails} />
@@ -123,7 +132,7 @@ export const ComicDetail = (data: ComicDetailProps): ReactElement => {
 
           <div className="border-slate-500 border rounded-lg p-2 mt-3">
             <p className="">Searching for:</p>
-            {inferredMetadata.issue ? (
+            {inferredMetadata?.issue ? (
               <>
                 <span className="">{inferredMetadata.issue.name} </span>
                 <span className=""> # {inferredMetadata.issue.number} </span>
@@ -148,9 +157,9 @@ export const ComicDetail = (data: ComicDetailProps): ReactElement => {
   // Actions
 
   const fetchComicVineMatches = async (
-    searchPayload,
-    issueSearchQuery,
-    seriesSearchQuery,
+    searchPayload: any,
+    issueSearchQuery: any,
+    seriesSearchQuery: any,
   ) => {
     try {
       const response = await axios({
@@ -170,7 +179,7 @@ export const ComicDetail = (data: ComicDetailProps): ReactElement => {
           },
           rawFileDetails: searchPayload,
         },
-        transformResponse: (r) => {
+        transformResponse: (r: string) => {
           const matches = JSON.parse(r);
           return matches;
           // return sortBy(matches, (match) => -match.score);
@@ -180,9 +189,9 @@ export const ComicDetail = (data: ComicDetailProps): ReactElement => {
       if (!isNil(response.data.results) && response.data.results.length === 1) {
         matches = response.data.results;
       } else {
-        matches = response.data.map((match) => match);
+        matches = response.data.map((match: any) => match);
       }
-      const scoredMatches = matches.sort((a, b) => b.score - a.score);
+      const scoredMatches = matches.sort((a: any, b: any) => b.score - a.score);
       setComicVineMatches(scoredMatches);
     } catch (err) {
       console.log(err);
@@ -191,13 +200,13 @@ export const ComicDetail = (data: ComicDetailProps): ReactElement => {
 
   // Action event handlers
   const openDrawerWithCVMatches = () => {
-    let seriesSearchQuery: IComicVineSearchQuery = {} as IComicVineSearchQuery;
-    let issueSearchQuery: IComicVineSearchQuery = {} as IComicVineSearchQuery;
+    let seriesSearchQuery: any = {};
+    let issueSearchQuery: any = {};
 
     if (!isUndefined(rawFileDetails)) {
-      issueSearchQuery = refineQuery(rawFileDetails.name);
+      issueSearchQuery = refineQuery((rawFileDetails as any).name);
     } else if (!isEmpty(comicvine)) {
-      issueSearchQuery = refineQuery(comicvine.name);
+      issueSearchQuery = refineQuery((comicvine as any).name);
     }
     fetchComicVineMatches(rawFileDetails, issueSearchQuery, seriesSearchQuery);
     setSlidingPanelContentId("CVMatches");
@@ -211,30 +220,30 @@ export const ComicDetail = (data: ComicDetailProps): ReactElement => {
 
   //  Actions menu options and handler
   const CVMatchLabel = (
-    <span className="inline-flex flex-row items-center gap-2">
-      <div className="w-6 h-6">
-        <i className="icon-[solar--magic-stick-3-bold-duotone] w-6 h-6"></i>
+    <span className="inline-flex flex-row items-center gap-1.5">
+      <div className="w-4 h-4">
+        <i className="icon-[solar--magic-stick-3-bold-duotone] w-4 h-4"></i>
       </div>
-      <div>Match on ComicVine</div>
+      <div className="text-sm">Match on ComicVine</div>
     </span>
   );
   const editLabel = (
-    <span className="inline-flex flex-row items-center gap-2">
-      <div className="w-6 h-6">
-        <i className="icon-[solar--pen-2-bold-duotone] w-6 h-6"></i>
+    <span className="inline-flex flex-row items-center gap-1.5">
+      <div className="w-4 h-4">
+        <i className="icon-[solar--pen-2-bold-duotone] w-4 h-4"></i>
       </div>
-      <div>Edit Metadata</div>
+      <div className="text-sm">Edit Metadata</div>
     </span>
   );
   const deleteLabel = (
-    <span className="inline-flex flex-row items-center gap-2">
-      <div className="w-6 h-6">
-        <i className="icon-[solar--trash-bin-trash-bold-duotone] w-6 h-6"></i>
+    <span className="inline-flex flex-row items-center gap-1.5">
+      <div className="w-4 h-4">
+        <i className="icon-[solar--trash-bin-trash-bold-duotone] w-4 h-4"></i>
       </div>
-      <div>Delete Comic</div>
+      <div className="text-sm">Delete Comic</div>
     </span>
   );
-  const Placeholder = (props) => {
+  const Placeholder = (props: any) => {
     return <components.Placeholder {...props} />;
   };
   const actionOptions = [
@@ -249,7 +258,7 @@ export const ComicDetail = (data: ComicDetailProps): ReactElement => {
     }
     return item;
   });
-  const handleActionSelection = (action) => {
+  const handleActionSelection = (action: any) => {
     switch (action.value) {
       case "match-on-comic-vine":
         openDrawerWithCVMatches();
@@ -263,23 +272,23 @@ export const ComicDetail = (data: ComicDetailProps): ReactElement => {
     }
   };
   const customStyles = {
-    menu: (base) => ({
+    menu: (base: any) => ({
       ...base,
       backgroundColor: "rgb(156, 163, 175)",
     }),
-    placeholder: (base) => ({
+    placeholder: (base: any) => ({
       ...base,
       color: "black",
     }),
-    option: (base, { data, isDisabled, isFocused, isSelected }) => ({
+    option: (base: any, { data, isDisabled, isFocused, isSelected }: any) => ({
       ...base,
       backgroundColor: isFocused ? "gray" : "rgb(156, 163, 175)",
     }),
-    singleValue: (base) => ({
+    singleValue: (base: any) => ({
       ...base,
       paddingTop: "0.4rem",
     }),
-    control: (base) => ({
+    control: (base: any) => ({
       ...base,
       backgroundColor: "rgb(156, 163, 175)",
       color: "black",
@@ -289,7 +298,7 @@ export const ComicDetail = (data: ComicDetailProps): ReactElement => {
 
   // check for the availability of CV metadata
   const isComicBookMetadataAvailable =
-    !isUndefined(comicvine) && !isUndefined(comicvine.volumeInformation);
+    !isUndefined(comicvine) && !isUndefined((comicvine as any)?.volumeInformation);
 
   // check for the availability of rawFileDetails
   const areRawFileDetailsAvailable =
@@ -354,7 +363,7 @@ export const ComicDetail = (data: ComicDetailProps): ReactElement => {
           query={airDCPPQuery}
           comicObjectId={_id}
           comicObject={data.data}
-          userSettings={userSettings}
+          settings={userSettings}
           key={4}
         />
       ),
@@ -376,8 +385,8 @@ export const ComicDetail = (data: ComicDetailProps): ReactElement => {
       name: "Downloads",
       icon: (
         <>
-          {acquisition?.directconnect?.downloads?.length +
-            acquisition?.torrent.length}
+          {(acquisition?.directconnect?.downloads?.length || 0) +
+            (acquisition?.torrent?.length || 0)}
         </>
       ),
       content:
@@ -414,11 +423,12 @@ export const ComicDetail = (data: ComicDetailProps): ReactElement => {
                   imageUrl={url}
                   orientation={"cover-only"}
                   hasDetails={false}
+                  cardContainerStyle={{ maxWidth: "290px", width: "100%" }}
                 />
 
                 {/* raw file details */}
                 {!isUndefined(rawFileDetails) &&
-                  !isEmpty(rawFileDetails.cover) && (
+                  !isEmpty((rawFileDetails as any)?.cover) && (
                     <div className="grid">
                       <RawFileDetails
                         data={{
@@ -468,7 +478,7 @@ export const ComicDetail = (data: ComicDetailProps): ReactElement => {
 
             <TabControls
               filteredTabs={filteredTabs}
-              downloadCount={acquisition?.directconnect?.downloads?.length}
+              downloadCount={acquisition?.directconnect?.downloads?.length || 0}
             />
 
             <StyledSlidingPanel
diff --git a/src/client/components/ComicDetail/RawFileDetails.tsx b/src/client/components/ComicDetail/RawFileDetails.tsx
index 44acf6e..a4f8dd9 100644
--- a/src/client/components/ComicDetail/RawFileDetails.tsx
+++ b/src/client/components/ComicDetail/RawFileDetails.tsx
@@ -30,94 +30,125 @@ interface RawFileDetailsProps {
   children?: any;
 }
 
-export const RawFileDetails = (props: RawFileDetailsProps): ReactElement => {
+export const RawFileDetails = (props: RawFileDetailsProps): ReactElement | null => {
   const { rawFileDetails, inferredMetadata, created_at, updated_at } =
-    props.data;
+    props.data || {};
+  if (!rawFileDetails) return null;
+
   return (
     <>
       <div className="max-w-2xl ml-5">
-        <div className="px-4 sm:px-6">
+        {/* Title */}
+        <div className="px-4 sm:px-6 mb-6">
           <p className="text-gray-500 dark:text-gray-400">
-            <span className="text-xl">{rawFileDetails.name}</span>
+            <span className="text-xl font-semibold">{rawFileDetails?.name}</span>
           </p>
         </div>
-        <div className="px-4 py-5 sm:px-6">
-          <dl className="grid grid-cols-1 gap-x-4 gap-y-4 sm:grid-cols-2">
-            <div className="sm:col-span-1">
-              <dt className="text-sm font-medium text-gray-500 dark:text-gray-400">
-                Raw File Details
-              </dt>
-              <dd className="mt-1 text-sm text-gray-900 dark:text-gray-400">
-                {rawFileDetails.containedIn +
-                  "/" +
-                  rawFileDetails.name +
-                  rawFileDetails.extension}
-              </dd>
-            </div>
-            <div className="sm:col-span-1">
-              <dt className="text-sm font-medium text-gray-500 dark:text-gray-400">
-                Inferred Issue Metadata
-              </dt>
-              <dd className="mt-1 text-sm text-gray-900 dark:text-gray-400">
-                Series Name: {inferredMetadata.issue.name}
-                {!isEmpty(inferredMetadata.issue.number) ? (
-                  <span className="tag is-primary is-light">
-                    {inferredMetadata.issue.number}
-                  </span>
-                ) : null}
-              </dd>
-            </div>
-            <div className="sm:col-span-1">
-              <dt className="text-sm font-medium text-gray-500 dark:text-gray-400">
-                MIMEType
-              </dt>
-              <dd className="mt-1 text-sm text-gray-500 dark:text-slate-900">
-                {/* File 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="pt-1">
+
+        {/* File Binary Details Section */}
+        <div className="mb-8 px-4 pb-8 border-b border-gray-200 dark:border-gray-700">
+          <div className="mb-4">
+            <h3 className="text-sm font-medium text-gray-600 dark:text-gray-300 uppercase tracking-wide flex items-center gap-1">
+              <i className="icon-[solar--document-bold-duotone] w-5 h-5"></i>
+              File Binary Details
+            </h3>
+          </div>
+          <div className="pl-6">
+            <dl className="space-y-4">
+              <div>
+                <dt className="text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wide mb-1">
+                  File Path
+                </dt>
+                <dd className="text-sm text-gray-900 dark:text-gray-300 font-mono break-all">
+                  {rawFileDetails?.containedIn}/{rawFileDetails?.name}{rawFileDetails?.extension}
+                </dd>
+              </div>
+              
+              <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+                <div>
+                  <dt className="text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wide mb-1">
+                    MIME Type
+                  </dt>
+                  <dd className="text-sm text-gray-700 dark:text-gray-300 flex items-center gap-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">
-                    {rawFileDetails.mimeType}
-                  </span>
-                </span>
-              </dd>
-            </div>
-            <div className="sm:col-span-1">
-              <dt className="text-sm font-medium text-gray-500 dark:text-gray-400">
-                File Size
-              </dt>
-              <dd className="mt-1 text-sm text-gray-500 dark:text-slate-900">
-                {/* size */}
-                <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">
+                    {rawFileDetails?.mimeType}
+                  </dd>
+                </div>
+                
+                <div>
+                  <dt className="text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wide mb-1">
+                    File Size
+                  </dt>
+                  <dd className="text-sm text-gray-700 dark:text-gray-300 flex items-center gap-1">
                     <i className="icon-[solar--mirror-right-bold-duotone] w-5 h-5"></i>
-                  </span>
-
-                  <span className="text-md text-slate-500 dark:text-slate-900">
-                    {prettyBytes(rawFileDetails.fileSize)}
-                  </span>
-                </span>
-              </dd>
-            </div>
-            <div className="sm:col-span-2">
-              <dt className="text-sm font-medium text-gray-500 dark:text-gray-400">
-                Import Details
-              </dt>
-              <dd className="mt-1 text-sm text-gray-900 dark:text-gray-400">
-                {format(parseISO(created_at), "dd MMMM, yyyy")},{" "}
-                {format(parseISO(created_at), "h aaaa")}
-              </dd>
-            </div>
-            <div className="sm:col-span-2">
-              <dt className="text-sm font-medium text-gray-500 dark:text-gray-400">
-                Actions
-              </dt>
-              <dd className="mt-1 text-sm text-gray-900">{props.children}</dd>
-            </div>
-          </dl>
+                    {rawFileDetails?.fileSize ? prettyBytes(rawFileDetails.fileSize) : 'N/A'}
+                  </dd>
+                </div>
+              </div>
+            </dl>
+          </div>
         </div>
+
+        {/* Import Details Section */}
+        <div className="mb-8 px-4">
+          <div className="mb-4">
+            <h3 className="text-sm font-medium text-gray-600 dark:text-gray-300 uppercase tracking-wide flex items-center gap-1">
+              <i className="icon-[solar--import-bold-duotone] w-5 h-5"></i>
+              Import Details
+            </h3>
+          </div>
+          <div className="pl-6">
+            <dl className="space-y-4">
+              <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+                <div>
+                  <dt className="text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wide mb-1">
+                    Imported On
+                  </dt>
+                  <dd className="text-sm text-gray-700 dark:text-gray-300">
+                    {created_at ? format(parseISO(created_at), "dd MMMM, yyyy 'at' h:mm aaaa") : 'N/A'}
+                  </dd>
+                </div>
+                
+                <div>
+                  <dt className="text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wide mb-1">
+                    Last Updated
+                  </dt>
+                  <dd className="text-sm text-gray-700 dark:text-gray-300">
+                    {updated_at ? format(parseISO(updated_at), "dd MMMM, yyyy 'at' h:mm aaaa") : 'N/A'}
+                  </dd>
+                </div>
+              </div>
+
+              {inferredMetadata?.issue && (
+                <div>
+                  <dt className="text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wide mb-1">
+                    Inferred Metadata
+                  </dt>
+                  <dd className="text-sm text-gray-700 dark:text-gray-300">
+                    <span className="font-medium">{inferredMetadata.issue.name}</span>
+                    {!isEmpty(inferredMetadata.issue.number) && (
+                      <span className="ml-2 text-xs text-gray-500 dark:text-gray-400">
+                        #{inferredMetadata.issue.number}
+                      </span>
+                    )}
+                  </dd>
+                </div>
+              )}
+            </dl>
+          </div>
+        </div>
+
+        {/* Actions Section */}
+        {props.children && (
+          <div className="px-4">
+            <div className="mb-3">
+              <h4 className="text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wide">
+                Actions
+              </h4>
+            </div>
+            <div>{props.children}</div>
+          </div>
+        )}
       </div>
     </>
   );
diff --git a/src/client/components/ComicDetail/Tabs/ArchiveOperations.tsx b/src/client/components/ComicDetail/Tabs/ArchiveOperations.tsx
index d1edfc9..48b752c 100644
--- a/src/client/components/ComicDetail/Tabs/ArchiveOperations.tsx
+++ b/src/client/components/ComicDetail/Tabs/ArchiveOperations.tsx
@@ -14,12 +14,16 @@ import { useStore } from "../../../store";
 import { useShallow } from "zustand/react/shallow";
 import { escapePoundSymbol } from "../../../shared/utils/formatting.utils";
 
-export const ArchiveOperations = (props): ReactElement => {
+interface ArchiveOperationsProps {
+  data: any;
+}
+
+export const ArchiveOperations = (props: ArchiveOperationsProps): ReactElement => {
   const { data } = props;
 
-  const { socketIOInstance } = useStore(
+  const { getSocket } = useStore(
     useShallow((state) => ({
-      socketIOInstance: state.socketIOInstance,
+      getSocket: state.getSocket,
     })),
   );
   const queryClient = useQueryClient();
@@ -27,21 +31,32 @@ export const ArchiveOperations = (props): ReactElement => {
   const [visible, setVisible] = useState(false);
   const [slidingPanelContentId, setSlidingPanelContentId] = useState("");
   // current image
-  const [currentImage, setCurrentImage] = useState([]);
-  const [uncompressedArchive, setUncompressedArchive] = useState([]);
-  const [imageAnalysisResult, setImageAnalysisResult] = useState({});
+  const [currentImage, setCurrentImage] = useState<string>("");
+  const [uncompressedArchive, setUncompressedArchive] = useState<string[]>([]);
+  const [imageAnalysisResult, setImageAnalysisResult] = useState<any>({});
   const [shouldRefetchComicBookData, setShouldRefetchComicBookData] =
     useState(false);
-  const constructImagePaths = (data): Array<string> => {
+  const constructImagePaths = (data: string[]): Array<string> => {
     return data?.map((path: string) =>
       escapePoundSymbol(encodeURI(`${LIBRARY_SERVICE_HOST}/${path}`)),
     );
   };
 
   // Listen to the uncompression complete event and orchestrate the final payload
-  socketIOInstance.on("LS_UNCOMPRESSION_JOB_COMPLETE", (data) => {
-    setUncompressedArchive(constructImagePaths(data?.uncompressedArchive));
-  });
+  useEffect(() => {
+    const socket = getSocket("/");
+    
+    const handleUncompressionComplete = (data: any) => {
+      setUncompressedArchive(constructImagePaths(data?.uncompressedArchive));
+    };
+
+    socket.on("LS_UNCOMPRESSION_JOB_COMPLETE", handleUncompressionComplete);
+
+    // Cleanup listener on unmount
+    return () => {
+      socket.off("LS_UNCOMPRESSION_JOB_COMPLETE", handleUncompressionComplete);
+    };
+  }, [getSocket]);
 
   useEffect(() => {
     let isMounted = true;
@@ -58,7 +73,7 @@ export const ArchiveOperations = (props): ReactElement => {
             },
             transformResponse: async (responseData) => {
               const parsedData = JSON.parse(responseData);
-              const paths = parsedData.map((pathObject) => {
+              const paths = parsedData.map((pathObject: any) => {
                 return `${pathObject.containedIn}/${pathObject.name}${pathObject.extension}`;
               });
               const uncompressedArchive = constructImagePaths(paths);
@@ -131,7 +146,7 @@ export const ArchiveOperations = (props): ReactElement => {
   }
 
   // sliding panel init
-  const contentForSlidingPanel = {
+  const contentForSlidingPanel: Record<string, { content: () => JSX.Element }> = {
     imageAnalysis: {
       content: () => {
         return (
@@ -143,7 +158,7 @@ export const ArchiveOperations = (props): ReactElement => {
               </pre>
             ) : null}
             <pre className="font-hasklig mt-3 text-sm">
-              {JSON.stringify(imageAnalysisResult.analyzedData, null, 2)}
+              {JSON.stringify(imageAnalysisResult?.analyzedData, null, 2)}
             </pre>
           </div>
         );
@@ -152,7 +167,7 @@ export const ArchiveOperations = (props): ReactElement => {
   };
 
   // sliding panel handlers
-  const openImageAnalysisPanel = useCallback((imageFilePath) => {
+  const openImageAnalysisPanel = useCallback((imageFilePath: string) => {
     setSlidingPanelContentId("imageAnalysis");
     analyzeImage(imageFilePath);
     setCurrentImage(imageFilePath);
diff --git a/src/client/components/Dashboard/PullList.tsx b/src/client/components/Dashboard/PullList.tsx
index eb3ae00..bcf912e 100644
--- a/src/client/components/Dashboard/PullList.tsx
+++ b/src/client/components/Dashboard/PullList.tsx
@@ -1,4 +1,4 @@
-import React, { ReactElement, useState } from "react";
+import React, { ReactElement, useState, useEffect } from "react";
 import { map } from "lodash";
 import Card from "../shared/Carda";
 import Header from "../shared/Header";
@@ -34,24 +34,35 @@ export const PullList = (): ReactElement => {
     format(date, "yyyy/M/dd"),
   );
 
+  // Responsive slides per view
+  const [slidesPerView, setSlidesPerView] = useState(1);
+
+
+
   // keen slider
-  const [sliderRef, instanceRef] = useKeenSlider(
-    {
-      loop: true,
-      slides: {
-        origin: "auto",
-        number: 15,
-        perView: 5,
-        spacing: 15,
-      },
-      slideChanged() {
-        console.log("slide changed");
-      },
+  const [sliderRef, instanceRef] = useKeenSlider({
+    loop: true,
+    mode: "free-snap",
+    slides: {
+      perView: slidesPerView,
+      spacing: 15,
     },
-    [
-      // add plugins here
-    ],
-  );
+    slideChanged() {
+      console.log("slide changed");
+    },
+  });
+
+  // Update slider when slidesPerView changes
+  useEffect(() => {
+    if (instanceRef.current) {
+      instanceRef.current.update({
+        slides: {
+          perView: slidesPerView,
+          spacing: 15,
+        },
+      });
+    }
+  }, [slidesPerView, instanceRef]);
 
   const {
     data: pullList,
@@ -80,79 +91,81 @@ export const PullList = (): ReactElement => {
   return (
     <>
       <div className="content">
-        <Header
-          headerContent="Discover"
-          subHeaderContent={
-            <span className="text-md">
-              Pull List aggregated for the week from{" "}
-              <span className="underline">
-                <a href="https://leagueofcomicgeeks.com">
-                  League Of Comic Geeks
-                </a>
-                <i className="icon-[solar--arrow-right-up-outline] w-4 h-4" />
+        <div className="mx-auto">
+          <Header
+            headerContent="Discover"
+            subHeaderContent={
+              <span className="text-md">
+                Pull List aggregated for the week from{" "}
+                <span className="underline">
+                  <a href="https://leagueofcomicgeeks.com">
+                    League Of Comic Geeks
+                  </a>
+                  <i className="icon-[solar--arrow-right-up-outline] w-4 h-4" />
+                </span>
               </span>
-            </span>
-          }
-          iconClassNames="fa-solid fa-binoculars mr-2"
-          link="/pull-list/all/"
-        />
-        <div className="flex flex-row gap-5 mb-3">
-          {/* select week */}
-          <div className="flex flex-row gap-4 my-3">
-            <Form
-              onSubmit={() => {}}
-              render={({ handleSubmit }) => (
-                <form>
-                  <div className="flex flex-col gap-2">
-                    {/* week selection for pull list */}
-                    <DatePickerDialog
-                      inputValue={inputValue}
-                      setter={setInputValue}
-                    />
-                    {inputValue && (
-                      <div className="text-sm">
-                        Showing pull list for{" "}
-                        <span className="inline-flex mb-2 items-center bg-slate-50 text-slate-800 text-xs font-medium px-2.5 py-1 rounded-md dark:text-slate-900 dark:bg-slate-400">
-                          {inputValue}
-                        </span>
-                      </div>
-                    )}
-                  </div>
-                </form>
-              )}
-            />
+            }
+            iconClassNames="fa-solid fa-binoculars mr-2"
+            link="/pull-list/all/"
+          />
+          <div className="flex flex-row gap-5 mb-3">
+            {/* select week */}
+            <div className="flex flex-row gap-4 my-3">
+              <Form
+                onSubmit={() => {}}
+                render={({ handleSubmit }) => (
+                  <form>
+                    <div className="flex flex-col gap-2">
+                      {/* week selection for pull list */}
+                      <DatePickerDialog
+                        inputValue={inputValue}
+                        setter={setInputValue}
+                      />
+                      {inputValue && (
+                        <div className="text-sm">
+                          Showing pull list for{" "}
+                          <span className="inline-flex mb-2 items-center bg-slate-50 text-slate-800 text-xs font-medium px-2.5 py-1 rounded-md dark:text-slate-900 dark:bg-slate-400">
+                            {inputValue}
+                          </span>
+                        </div>
+                      )}
+                    </div>
+                  </form>
+                )}
+              />
+            </div>
           </div>
         </div>
       </div>
 
       {isSuccess && !isLoading && (
-        <div ref={sliderRef} className="keen-slider flex flex-row">
+        <div ref={sliderRef} className="keen-slider">
           {map(pullList?.data.result, (issue, idx) => {
-            return (
-              <div key={idx} className="keen-slider__slide">
-                <Card
-                  orientation={"vertical-2"}
-                  imageUrl={issue.coverImageUrl}
-                  hasDetails
-                  title={ellipsize(issue.issueName, 25)}
-                >
-                  <div className="px-1">
-                    <span className="inline-flex mb-2 items-center bg-slate-50 text-slate-800 text-xs font-medium px-2.5 py-1 rounded-md dark:text-slate-900 dark:bg-slate-400">
-                      {issue.publicationDate}
-                    </span>
-                    <div className="flex flex-row justify-end">
-                      <button
-                        className="flex space-x-1 mb-2 sm:mt-0 sm:flex-row sm:items-center rounded-lg border border-green-400 dark:border-green-200 bg-green-200 px-2 py-1 text-gray-500 hover:bg-transparent hover:text-green-600 focus:outline-none focus:ring active:text-indigo-500"
-                        onClick={() => addToLibrary("locg", issue)}
-                      >
-                        <i className="icon-[solar--add-square-bold-duotone] w-5 h-5 mr-2"></i>{" "}
-                        Want
-                      </button>
-                    </div>
+          return (
+            <div key={idx} className="keen-slider__slide">
+              <Card
+                orientation={"vertical-2"}
+                imageUrl={issue.coverImageUrl}
+                hasDetails
+                title={ellipsize(issue.issueName, 25)}
+              >
+                <div className="px-1">
+                  <span className="inline-flex mb-2 items-center bg-slate-50 text-slate-800 text-xs font-medium px-2.5 py-1 rounded-md dark:text-slate-900 dark:bg-slate-400">
+                    {issue.publicationDate}
+                  </span>
+                  <div className="flex flex-row justify-end">
+                    <button
+                      className="flex space-x-1 mb-2 sm:mt-0 sm:flex-row sm:items-center rounded-lg border border-green-400 dark:border-green-200 bg-green-200 px-2 py-1 text-gray-500 hover:bg-transparent hover:text-green-600 focus:outline-none focus:ring active:text-indigo-500"
+                      onClick={() => addToLibrary("locg", issue)}
+                    >
+                      <i className="icon-[solar--add-square-bold-duotone] w-5 h-5 mr-2"></i>{" "}
+                      Want
+                    </button>
                   </div>
-                </Card>
-              </div>
-            );
+                </div>
+              </Card>
+            </div>
+          );
           })}
         </div>
       )}
diff --git a/src/client/components/Dashboard/RecentlyImported.tsx b/src/client/components/Dashboard/RecentlyImported.tsx
index 47a4e79..9a4ec2c 100644
--- a/src/client/components/Dashboard/RecentlyImported.tsx
+++ b/src/client/components/Dashboard/RecentlyImported.tsx
@@ -21,12 +21,13 @@ export const RecentlyImported = (
   console.log(comics);
   return (
     <div>
-      <Header
-        headerContent="Recently Imported"
-        subHeaderContent="Recent Library activity such as imports, tagging, etc."
-        iconClassNames="fa-solid fa-binoculars mr-2"
-      />
-      <div className="grid grid-cols-5 gap-6 mt-3">
+      <div className="mx-auto" style={{ maxWidth: '1400px' }}>
+        <Header
+          headerContent="Recently Imported"
+          subHeaderContent="Recent Library activity such as imports, tagging, etc."
+          iconClassNames="fa-solid fa-binoculars mr-2"
+        />
+        <div className="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-5 xl:grid-cols-5 gap-6 mt-3">
         {comics?.comics.map(
           (
             {
@@ -125,6 +126,7 @@ export const RecentlyImported = (
             );
           },
         )}
+        </div>
       </div>
     </div>
   );
diff --git a/src/client/components/shared/Carda.tsx b/src/client/components/shared/Carda.tsx
index 79e65a0..7648100 100644
--- a/src/client/components/shared/Carda.tsx
+++ b/src/client/components/shared/Carda.tsx
@@ -11,8 +11,8 @@ interface ICardProps {
   borderColorClass?: string;
   backgroundColor?: string;
   onClick?: (event: React.MouseEvent<HTMLElement>) => void;
-  cardContainerStyle?: PropTypes.object;
-  imageStyle?: PropTypes.object;
+  cardContainerStyle?: any;
+  imageStyle?: any;
 }
 
 const renderCard = (props: ICardProps): ReactElement => {
@@ -156,7 +156,7 @@ const renderCard = (props: ICardProps): ReactElement => {
 
       return (
         <div
-          className={`rounded-lg overflow-hidden shadow-md bg-white dark:bg-slate-800 ${
+          className={`rounded-2xl overflow-hidden shadow-md bg-white dark:bg-slate-800 ${
             props.cardContainerStyle?.height ? "" : "aspect-[2/3]"
           }`}
           style={containerStyle}