Added indication in the desktop UI for back-end connectivity (#711)

* Changed the styling of the link that takes a user to the settings page into a button
* added an indicator that shows if a user is connected to the server or not
* made a class name more descriptive and also made the text in first run message more intuitive
* changed the command to install dependencies in the README.md
* changed the class name of the first run message text to be more descriptive
* added icons in the desktop UI that shows if a file is synced successfully or not
* made the link class name in the homepage more descriptive
* fixed the hover issue on status box in the chat header pane
* fixed hovering issue on status box on macOS

src/interface/desktop/utils.js

@@ -59,6 +59,17 @@ async function populateHeaderPane() {
             <img class="khoj-logo" src="./assets/icons/khoj-logo-sideways-500.png" alt="Khoj"></img>
         </a>
         <nav class="khoj-nav">
+        ${
+            userInfo && userInfo.email
+              ? `<div class="khoj-status-box">
+              <span class="khoj-status-connected"></span>
+               <span class="khoj-status-text">Connected to server</span>
+               </div>`
+              : `<div class="khoj-status-box">
+              <span class="khoj-status-not-connected"></span>
+               <span class="khoj-status-text">Not connected to server</span>
+               </div>`
+          }
             <a id="chat-nav" class="khoj-nav" href="./chat.html">
               <img class="nav-icon" src="./assets/icons/chat.svg" alt="Chat">
               <span class="khoj-nav-item-text">Chat</span>