From 391db804993303e02fffe7bd2067f3ea6d883b42 Mon Sep 17 00:00:00 2001
From: Debanjum Singh Solanky <debanjum@gmail.com>
Date: Thu, 9 Nov 2023 00:57:05 -0800
Subject: [PATCH] Improve subscribed user profile pictures and nav pane
 selection

- Add yellow halo around subscribed user profile
- Fix highlighting current page in header nav pane
---
 src/khoj/interface/web/assets/khoj.css  |  7 ++++++-
 src/khoj/interface/web/base_config.html |  6 ++++++
 src/khoj/interface/web/chat.html        |  7 ++++++-
 src/khoj/interface/web/search.html      |  6 ++++++
 src/khoj/interface/web/utils.html       | 12 ++++++++----
 src/khoj/routers/web_client.py          |  7 +++++++
 6 files changed, 39 insertions(+), 6 deletions(-)

diff --git a/src/khoj/interface/web/assets/khoj.css b/src/khoj/interface/web/assets/khoj.css
index 4739cb3c..a29c02a6 100644
--- a/src/khoj/interface/web/assets/khoj.css
+++ b/src/khoj/interface/web/assets/khoj.css
@@ -147,7 +147,7 @@ img.khoj-logo {
 }
 .circle {
     border-radius: 50%;
-    border: 3px solid var(--primary-hover);
+    border: 3px dotted var(--main-text-color);
     width: 40px;
     height: 40px;
     padding: 3px;
@@ -164,6 +164,11 @@ img.khoj-logo {
     align-items: center;
     font-size: 20px;
     box-sizing: unset;
+    width: 40px;
+    height: 40px;
+}
+.subscribed {
+    border: 3px solid var(--primary-hover);
 }
 
 @media screen and (max-width: 700px) {
diff --git a/src/khoj/interface/web/base_config.html b/src/khoj/interface/web/base_config.html
index 8114e7f3..bf64164c 100644
--- a/src/khoj/interface/web/base_config.html
+++ b/src/khoj/interface/web/base_config.html
@@ -24,6 +24,12 @@
             {% endblock %}
         </div>
     </body>
+    <script>
+        document.getElementById("settings-nav").classList.add("khoj-nav-selected");
+        {% if is_active %}
+        document.getElementById("profile-picture").classList.add("subscribed");
+        {% endif %}
+    </script>
     <style>
         html, body {
             width: 100%;
diff --git a/src/khoj/interface/web/chat.html b/src/khoj/interface/web/chat.html
index 9712580d..b86adc3d 100644
--- a/src/khoj/interface/web/chat.html
+++ b/src/khoj/interface/web/chat.html
@@ -374,7 +374,12 @@
             <textarea id="chat-input" class="option" oninput="onChatInput()" onkeydown=incrementalChat(event) autofocus="autofocus" placeholder="Type / to see a list of commands, or just type your questions and hit enter."></textarea>
         </div>
     </body>
-
+    <script>
+        document.getElementById("chat-nav").classList.add("khoj-nav-selected");
+        {% if is_active %}
+        document.getElementById("profile-picture").classList.add("subscribed");
+        {% endif %}
+    </script>
     <style>
         html, body {
             height: 100%;
diff --git a/src/khoj/interface/web/search.html b/src/khoj/interface/web/search.html
index 8f98d0f3..7c6fd62b 100644
--- a/src/khoj/interface/web/search.html
+++ b/src/khoj/interface/web/search.html
@@ -285,6 +285,12 @@
         <!-- Section to Render Results -->
         <div id="results"></div>
     </body>
+    <script>
+        document.getElementById("search-nav").classList.add("khoj-nav-selected");
+        {% if is_active %}
+        document.getElementById("profile-picture").classList.add("subscribed");
+        {% endif %}
+    </script>
 
     <style>
         @media only screen and (max-width: 700px) {
diff --git a/src/khoj/interface/web/utils.html b/src/khoj/interface/web/utils.html
index 1d21397d..acb42fee 100644
--- a/src/khoj/interface/web/utils.html
+++ b/src/khoj/interface/web/utils.html
@@ -4,18 +4,22 @@
             <img class="khoj-logo" src="/static/assets/icons/khoj-logo-sideways-500.png" alt="Khoj"></img>
         </a>
         <nav class="khoj-nav">
-            <a class="khoj-nav" href="/chat">💬 Chat</a>
-            <a class="khoj-nav" href="/search">🔎 Search</a>
+            <a id="chat-nav" class="khoj-nav" href="/chat">💬 Chat</a>
+            <a id="search-nav" class="khoj-nav" href="/search">🔎 Search</a>
             <!-- Dropdown Menu -->
             <div id="khoj-nav-menu-container" class="khoj-nav dropdown">
                 {% if user_photo and user_photo != "None" %}
-                    <img class="circle" src="{{ user_photo }}" alt="{{ username[0].upper() }}" onclick="toggleMenu()" referrerpolicy="no-referrer">
+                    {% if is_active %}
+                    <img id="profile-picture" class="circle subscribed" src="{{ user_photo }}" alt="{{ username[0].upper() }}" onclick="toggleMenu()" referrerpolicy="no-referrer">
+                    {% else %}
+                    <img id="profile-picture" class="circle" src="{{ user_photo }}" alt="{{ username[0].upper() }}" onclick="toggleMenu()" referrerpolicy="no-referrer">
+                    {% endif %}
                 {% else %}
                     <div class="circle user-initial" alt="{{ username[0].upper() }}" onclick="toggleMenu()">{{ username[0].upper() }}</div>
                 {% endif %}
                 <div id="khoj-nav-menu" class="khoj-nav-dropdown-content">
                     <div class="khoj-nav-username"> {{ username }} </div>
-                    <a class="khoj-nav khoj-nav-selected" href="/config">⚙️ Settings</a>
+                    <a id="settings-nav" class="khoj-nav" href="/config">⚙️ Settings</a>
                     <a class="khoj-nav" href="/auth/logout">🔑 Logout</a>
                 </div>
             </div>
diff --git a/src/khoj/routers/web_client.py b/src/khoj/routers/web_client.py
index 229cee64..45232a48 100644
--- a/src/khoj/routers/web_client.py
+++ b/src/khoj/routers/web_client.py
@@ -69,6 +69,8 @@ def index_post(request: Request):
 def search_page(request: Request):
     user = request.user.object
     user_picture = request.session.get("user", {}).get("picture")
+    user_subscription = adapters.get_user_subscription(user.email)
+    user_subscription_state = get_user_subscription_state(user_subscription)
 
     return templates.TemplateResponse(
         "search.html",
@@ -76,6 +78,7 @@ def search_page(request: Request):
             "request": request,
             "username": user.username,
             "user_photo": user_picture,
+            "is_active": user_subscription_state == "subscribed" or user_subscription_state == "unsubscribed",
         },
     )
 
@@ -85,6 +88,8 @@ def search_page(request: Request):
 def chat_page(request: Request):
     user = request.user.object
     user_picture = request.session.get("user", {}).get("picture")
+    user_subscription = adapters.get_user_subscription(user.email)
+    user_subscription_state = get_user_subscription_state(user_subscription)
 
     return templates.TemplateResponse(
         "chat.html",
@@ -92,6 +97,7 @@ def chat_page(request: Request):
             "request": request,
             "username": user.username,
             "user_photo": user_picture,
+            "is_active": user_subscription_state == "subscribed" or user_subscription_state == "unsubscribed",
         },
     )
 
@@ -154,6 +160,7 @@ def config_page(request: Request):
             "subscription_state": user_subscription_state,
             "subscription_renewal_date": subscription_renewal_date,
             "khoj_cloud_subscription_url": os.getenv("KHOJ_CLOUD_SUBSCRIPTION_URL"),
+            "is_active": user_subscription_state == "subscribed" or user_subscription_state == "unsubscribed",
         },
     )