🏗️ Refactoring the Library page

src/client/components/shared/Navbar.tsx

@@ -13,12 +13,14 @@ const Navbar: React.FunctionComponent = (props) => {
     airDCPPDisconnectionInfo,
     airDCPPSessionInformation,
     airDCPPDownloadTick,
+    importJobQueue,
   } = useStore(
     useShallow((state) => ({
       airDCPPSocketConnected: state.airDCPPSocketConnected,
       airDCPPDisconnectionInfo: state.airDCPPDisconnectionInfo,
       airDCPPSessionInformation: state.airDCPPSessionInformation,
       airDCPPDownloadTick: state.airDCPPDownloadTick,
+      importJobQueue: state.importJobQueue,
     })),
   );
   //   const downloadProgressTick = useSelector(
@@ -35,24 +37,6 @@ const Navbar: React.FunctionComponent = (props) => {
   //     (state: RootState) => state.airdcpp.socketDisconnectionReason,
   //   );
 
-  // Import-related selector hooks
-  //   const successfulImportJobCount = useSelector(
-  //     (state: RootState) => state.fileOps.successfulJobCount,
-  //   );
-  //   const failedImportJobCount = useSelector(
-  //     (state: RootState) => state.fileOps.failedJobCount,
-  //   );
-  //
-  //   const lastQueueJob = useSelector(
-  //     (state: RootState) => state.fileOps.lastQueueJob,
-  //   );
-  //   const libraryQueueImportStatus = useSelector(
-  //     (state: RootState) => state.fileOps.LSQueueImportStatus,
-  //   );
-  //
-  //   const allImportJobResults = useSelector(
-  //     (state: RootState) => state.fileOps.importJobStatistics,
-  //   );
   return (
     <nav className="navbar is-fixed-top">
       <div className="navbar-brand">
@@ -128,6 +112,38 @@ const Navbar: React.FunctionComponent = (props) => {
             ) : null}
           </div>
 
+          {!isUndefined(importJobQueue.status) &&
+          location.hash !== "#/import" ? (
+            <div className="navbar-item has-dropdown is-hoverable">
+              <a className="navbar-link is-arrowless">
+                <i className="fa-solid fa-file-import has-text-warning-dark"></i>
+              </a>
+
+              <div className="navbar-dropdown is-right is-boxed">
+                <a className="navbar-item">
+                  <ul>
+                    {importJobQueue.successfulJobCount > 0 ? (
+                      <li className="mb-2">
+                        <span className="tag is-success mr-2">
+                          {importJobQueue.successfulJobCount}
+                        </span>
+                        imported.
+                      </li>
+                    ) : null}
+                    {importJobQueue.failedJobCount > 0 ? (
+                      <li>
+                        <span className="tag is-danger mr-2">
+                          {importJobQueue.failedJobCount}
+                        </span>
+                        failed to import.
+                      </li>
+                    ) : null}
+                  </ul>
+                </a>
+              </div>
+            </div>
+          ) : null}
+
           {/* AirDC++ socket connection status */}
           <div className="navbar-item has-dropdown is-hoverable">
             {airDCPPSocketConnected ? (