ThreeTwo favicon (#54)

* 🔧 Fixed empty library state with explanation

* ⚡️ Added a status indicator for the AirDC++ socket connection

* 🖼️ Fixed the ThreeTwo favico

src/client/components/Navbar.tsx

@@ -1,15 +1,17 @@
-import React from "react";
+import React, { useContext } from "react";
 import { SearchBar } from "./GlobalSearchBar/SearchBar";
 import { DownloadProgressTick } from "./ComicDetail/DownloadProgressTick";
 import { Link } from "react-router-dom";
 import { useSelector } from "react-redux";
-import { isUndefined } from "lodash";
+import { isUndefined, isEmpty } from "lodash";
+import { AirDCPPSocketContext } from "../context/AirDCPPSocket";
 
 const Navbar: React.FunctionComponent = (props) => {
   const downloadProgressTick = useSelector(
     (state: RootState) => state.airdcpp.downloadProgressData,
   );
-
+  const airDCPPConfiguration = useContext(AirDCPPSocketContext);
+console.log(airDCPPConfiguration)
   return (
     <nav className="navbar is-fixed-top">
       <div className="navbar-brand">
@@ -80,15 +82,20 @@ const Navbar: React.FunctionComponent = (props) => {
               <div className="navbar-dropdown download-progress-meter">
                 <a className="navbar-item">
                   <DownloadProgressTick data={downloadProgressTick} />
-                </a>
-              </div>
+                </a>              </div>
             ) : null}
           </div>
           {/* AirDC++ socket connection status */}
           <div className="navbar-item has-dropdown is-hoverable">
-            <a className="navbar-link is-arrowless">
-              <i className="fa-solid fa-bolt"></i>
-            </a>
+            <a className="navbar-link is-arrowless has-text-success">
+              {!isEmpty(airDCPPConfiguration.airDCPPState.socketConnectionInformation) ? (
+                <i className="fa-solid fa-bolt"></i>) : null}
+            </a>    
+            <div className="navbar-dropdown download-progress-meter">
+              <a className="navbar-item">
+                <pre>{JSON.stringify(airDCPPConfiguration.airDCPPState.socketConnectionInformation, null, 2)}</pre>
+              </a>
+            </div>      
           </div>
           
           

src/client/context/AirDCPPSocket.tsx

@@ -55,11 +55,13 @@ const AirDCPPSocketContextProvider = ({ children }) => {
       protocol: `${host.protocol}`,
       hostname: `${host.hostname}:${host.port}`,
     });
-    const socketConnectionInformation = await initializedAirDCPPSocket.connect(
+
+    let socketConnectionInformation = await initializedAirDCPPSocket.connect(
       `${host.username}`,
       `${host.password}`,
       true,
     );
+
     persistSettings({
       ...airDCPPState,
       airDCPPState: {