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/README.md

@@ -1,17 +1,25 @@
 # Run it locally
+
 ## Prerequisites
+
 Install the runtime dependencies. This command should install all dev dependencies.
+
 ```bash
-yarn add
+yarn install
 ```
 
 Run the application
+
 ```bash
 yarn start
 ```
+
 # Deploying the Electron App
+
 ## Prerequisites
+
 Install the ToDesktop CLI. Full documentation can be found here: https://www.npmjs.com/package/@todesktop/cli
+
 ```bash
 yarn global add @todesktop/cli
 ```

src/interface/desktop/assets/icons/file-not-synced.svg

@@ -0,0 +1,9 @@
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Transformed by: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="-2.4 -2.4 28.80 28.80" fill="none" xmlns="http://www.w3.org/2000/svg">
+
+<g id="SVGRepo_bgCarrier" stroke-width="0">
+
+<rect x="-2.4" y="-2.4" width="28.80" height="28.80" rx="14.4" fill="#ffad9f" strokewidth="0"/>
+
+</g>

src/interface/desktop/assets/icons/file-synced.svg

@@ -0,0 +1,9 @@
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Transformed by: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="-2.4 -2.4 28.80 28.80" fill="none" xmlns="http://www.w3.org/2000/svg" stroke="#16ba00">
+
+<g id="SVGRepo_bgCarrier" stroke-width="0">
+
+<rect x="-2.4" y="-2.4" width="28.80" height="28.80" rx="14.4" fill="#7aff00" strokewidth="0"/>
+
+</g>

src/interface/desktop/assets/khoj.css

@@ -89,8 +89,38 @@ nav.khoj-nav {
     grid-auto-flow: column;
     grid-gap: 32px;
     justify-self: right;
+    align-items: center;
+  }
+
+  .khoj-status-box {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 52px;
+    gap: 4px;
+    -webkit-app-region: no-drag;
 }
 
+  .khoj-status-box .khoj-status-connected {
+    height: 12px;
+    width: 12px;
+    border-radius: 50%;
+    background-color: rgb(90, 235, 90);
+  }
+  .khoj-status-box .khoj-status-not-connected {
+    height: 12px;
+    width: 12px;
+    border-radius: 50%;
+    background-color: rgb(235, 90, 90);
+  }
+
+  .khoj-status-box .khoj-status-text {
+    display: none;
+}
+.khoj-status-box:hover .khoj-status-text {
+    display: block;
+  }
+
 a.khoj-nav {
     display: flex;
     align-items: center;

src/interface/desktop/chat.html

@@ -888,10 +888,10 @@
         }
 
         function renderFirstRunSetupMessage() {
-            first_run_message = `Hi 👋🏾, to get started:
+            first_run_message = `<p class="first-run-message-heading">Hi 👋🏾, to get started:<p>
             <ol>
-                <li>Generate an API token in the <a class='inline-chat-link' href="#" onclick="window.navigateAPI.navigateToWebSettings()">Khoj Web settings</a></li>
+                <li class="first-run-message-text">Generate an API token <a class='first-run-message-link' href="#" onclick="window.navigateAPI.navigateToWebSettings()">Khoj Web settings</a></li>
-                <li>Paste it into the API Key field in the <a class='inline-chat-link' href="#" onclick="window.navigateAPI.navigateToSettings()">Khoj Desktop settings</a></li>
+                <li class="first-run-message-text">Paste it into the API Key field <a class='first-run-message-link' href="#" onclick="window.navigateAPI.navigateToSettings()">Khoj Desktop settings</a></li>
             </ol>`
             .trim()
             .replace(/(\r\n|\n|\r)/gm, "");
@@ -1715,10 +1715,53 @@
             box-shadow: 0 0 16px var(--primary);
         }
 
+        .first-run-message-heading {
+        font-size: 20px;
+        font-weight: 300;
+        line-height: 1.5em;
+        color: var(--main-text-color);
+        margin: 0;
+        padding: 10px;
+        }
+
+        .first-run-message-text {
+        font-size: 18px;
+        font-weight: 300;
+        line-height: 1.5em;
+        color: var(--main-text-color);
+        margin: 0;
+        padding-bottom: 25px;
+        }
+
         a.inline-chat-link {
-            color: #475569;
+        display: block;
+        text-align: center;
+        font-size: 14px;
+        color: #fff;
+        padding: 6px 15px;
+        border-radius: 999px;
         text-decoration: none;
-            border-bottom: 1px dotted #475569;
+        background-color: rgba(71, 85, 105, 0.6);
+        transition: background-color 0.3s ease-in-out;
+        }
+
+        a.inline-chat-link:hover {
+        background-color: #475569;
+        }
+        a.first-run-message-link {
+        display: block;
+        text-align: center;
+        font-size: 14px;
+        color: #fff;
+        padding: 6px 15px;
+        border-radius: 999px;
+        text-decoration: none;
+        background-color: rgba(71, 85, 105, 0.6);
+        transition: background-color 0.3s ease-in-out;
+        }
+
+        a.first-run-message-link:hover {
+        background-color: #475569;
         }
 
         a.reference-link {

src/interface/desktop/config.html

@@ -316,6 +316,14 @@
 
         div.remove-button-container {
             text-align: right;
+            display: flex;
+            margin-left: auto;
+            gap: 8px;
+        }
+
+        .file-synced-image{
+            width: 20px;
+            display: none;
         }
 
         button.remove-folder-button,

src/interface/desktop/renderer.js

@@ -69,12 +69,15 @@ function makeFileElement(file) {
     let buttonContainer = document.createElement("div");
     buttonContainer.classList.add("remove-button-container");
     let removeFileButton = document.createElement("button");
+    let fileSyncedImage = document.createElement("img")
+    fileSyncedImage.classList.add("file-synced-image");
     removeFileButton.classList.add("remove-file-button");
     removeFileButton.innerHTML = "🗑️";
     removeFileButton.addEventListener("click", () => {
         removeFile(file.path);
     });
     buttonContainer.appendChild(removeFileButton);
+    buttonContainer.insertAdjacentElement("afterbegin",fileSyncedImage);
     fileElement.appendChild(buttonContainer);
     return fileElement;
 }
@@ -150,6 +153,7 @@ async function handleFileOpen(type) {
 }
 
 window.updateStateAPI.onUpdateState((event, state) => {
+    const fileSyncedImage = document.querySelectorAll(".file-synced-image");
     console.log("state was updated", state);
     loadingBar.style.display = 'none';
     let syncStatusElement = document.getElementById("sync-status");
@@ -157,8 +161,19 @@ window.updateStateAPI.onUpdateState((event, state) => {
     nextSyncTime = new Date();
     nextSyncTime.setMinutes(Math.ceil((nextSyncTime.getMinutes() + 1) / 10) * 10);
     if (state.completed == false) {
+
+        fileSyncedImage.forEach((image)=> {
+            image.style.display = "block"
+            image.src = "./assets/icons/file-not-synced.svg"
+        })
         if (state.error) syncStatusElement.innerHTML = state.error;
         return;
+    } else {
+        fileSyncedImage.forEach((image)=> {
+            image.style.display = "block"
+            image.src = "./assets/icons/file-synced.svg"
+        })
+
     }
     const options = { hour: '2-digit', minute: '2-digit' };
     syncStatusElement.innerHTML = `⏱️ Synced at ${currentTime.toLocaleTimeString(undefined, options)}. Next sync at ${nextSyncTime.toLocaleTimeString(undefined, options)}.`;

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>