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

@@ -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) {

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%;

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%;

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) {

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 id="chat-nav" class="khoj-nav" href="/chat">💬 Chat</a>
-            <a class="khoj-nav" href="/search">🔎 Search</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>

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",
         },
     )