Create Nav bar for Obsidian pane. Use abstract View class for reuse

- Jump to chat, show similar actions from nav menu of Khoj side pane
  - Add chat, search icons from web, desktop app
  - Use lucide icon for find similar (for now)
  - Match proportions of find similar icon to khoj other icons via css, js

- Use KhojPaneView abstract class to allow reuse of common functionality like
  - Creating the nav bar header in side pane views
  - Loading geo-location data for chat context
  This should make creating new views easier

src/interface/obsidian/src/utils.ts

@@ -1,4 +1,4 @@
-import { FileSystemAdapter, Notice, Vault, Modal, TFile, request } from 'obsidian';
+import { FileSystemAdapter, Notice, Vault, Modal, TFile, request, setIcon } from 'obsidian';
 import { KhojSetting, UserInfo } from 'src/settings'
 
 export function getVaultAbsolutePath(vault: Vault): string {
@@ -214,3 +214,93 @@ export function getBackendStatusMessage(
     else
         return `✅ Signed in to Khoj as ${userEmail}`;
 }
+
+export async function populateHeaderPane(headerEl: Element, setting: KhojSetting): Promise<void> {
+    let userInfo: UserInfo | null = null;
+    try {
+        const { userInfo: extractedUserInfo } = await canConnectToBackend(setting.khojUrl, setting.khojApiKey, false);
+        userInfo = extractedUserInfo;
+    } catch (error) {
+        console.error("❗️Could not connect to Khoj");
+    }
+
+    // Add Khoj title to header element
+    const titleEl = headerEl.createDiv();
+    titleEl.className = 'khoj-logo';
+    titleEl.textContent = "KHOJ"
+
+    // Populate the header element with the navigation pane
+    // Create the nav element
+    const nav = headerEl.createEl('nav');
+    nav.className = 'khoj-nav';
+
+    // Create the chat link
+    const chatLink = nav.createEl('a');
+    chatLink.id = 'chat-nav';
+    chatLink.className = 'khoj-nav chat-nav';
+
+    // Create the chat icon
+    const chatIcon = chatLink.createEl('span');
+    chatIcon.className = 'khoj-nav-icon khoj-nav-icon-chat';
+    setIcon(chatIcon, 'khoj-chat');
+
+    // Create the chat text
+    const chatText = chatLink.createEl('span');
+    chatText.className = 'khoj-nav-item-text';
+    chatText.textContent = 'Chat';
+
+    // Append the chat icon and text to the chat link
+    chatLink.appendChild(chatIcon);
+    chatLink.appendChild(chatText);
+
+    // Create the search link
+    const searchLink = nav.createEl('a');
+    searchLink.id = 'search-nav';
+    searchLink.className = 'khoj-nav search-nav';
+
+    // Create the search icon
+    const searchIcon = searchLink.createEl('span');
+    searchIcon.className = 'khoj-nav-icon khoj-nav-icon-search';
+
+    // Create the search text
+    const searchText = searchLink.createEl('span');
+    searchText.className = 'khoj-nav-item-text';
+    searchText.textContent = 'Search';
+
+    // Append the search icon and text to the search link
+    searchLink.appendChild(searchIcon);
+    searchLink.appendChild(searchText);
+
+    // Create the search link
+    const similarLink = nav.createEl('a');
+    similarLink.id = 'similar-nav';
+    similarLink.className = 'khoj-nav similar-nav';
+
+    // Create the search icon
+    const similarIcon = searchLink.createEl('span');
+    similarIcon.id = 'similar-nav-icon';
+    similarIcon.className = 'khoj-nav-icon khoj-nav-icon-similar';
+    setIcon(similarIcon, 'webhook');
+
+    // Create the search text
+    const similarText = searchLink.createEl('span');
+    similarText.className = 'khoj-nav-item-text';
+    similarText.textContent = 'Similar';
+
+    // Append the search icon and text to the search link
+    similarLink.appendChild(similarIcon);
+    similarLink.appendChild(similarText);
+
+    // Append the nav items to the nav element
+    nav.appendChild(chatLink);
+    nav.appendChild(searchLink);
+    nav.appendChild(similarLink);
+
+    // Append the title, nav items to the header element
+    headerEl.appendChild(titleEl);
+    headerEl.appendChild(nav);
+}
+
+export enum KhojView {
+    CHAT = "khoj-chat-view",
+}