Add settings button to TopBar and bundle KaTeX CSS for improved functionality

.gitignore

@@ -15,6 +15,12 @@ main.js
 # Exclude sourcemaps
 *.map
 
+# Font files generated by esbuild from bundled dependencies
+main.css
+*.woff
+*.woff2
+*.ttf
+
 # obsidian
 data.json
 

Components/TopBar.svelte

@@ -1,9 +1,33 @@
 <script lang="ts">
+  import { Resolve } from '../Services/DependencyService';
+  import { Services } from '../Services/Services';
+  import type AIAgentPlugin from '../main';
+  import { setIcon } from 'obsidian';
+
+  const plugin = Resolve<AIAgentPlugin>(Services.AIAgentPlugin);
+
+  function openSettings() {
+    // @ts-ignore - accessing internal API
+    plugin.app.setting.open();
+    // @ts-ignore - accessing internal API
+    plugin.app.setting.openTabById(plugin.manifest.id);
+  }
+
+  let settingsButton: HTMLButtonElement;
+
+  $: if (settingsButton) {
+    setIcon(settingsButton, 'settings');
+  }
 </script>
 
 <main class="top-bar">
   <div class="top-bar-content">
-    
+    <button
+      bind:this={settingsButton}
+      class="settings-button clickable-icon"
+      on:click={openSettings}
+      aria-label="Open plugin settings"
+    ></button>
   </div>
 </main>
 
@@ -21,7 +45,24 @@
   .top-bar-content {
     grid-row: 2;
     grid-column: 2;
+    display: grid;
+    grid-template-rows: auto;
+    grid-template-columns: var(--size-4-2) auto 1fr var(--size-4-2);
     background-color: var(--color-base-30);
     border-radius: var(--radius-m);
   }
+
+  .settings-button {
+    grid-row: 1;
+    grid-column: 2;
+    background: none;
+    border: none;
+    margin: var(--size-4-2) 0px var(--size-4-2) 0px;
+    padding: var(--size-4-1) var(--size-4-2) var(--size-4-1) var(--size-4-2);
+    color: var(--text-muted);
+  }
+
+  .settings-button:hover {
+    background-color: var(--color-base-35);
+  }
 </style>

esbuild.config.mjs

@@ -71,6 +71,12 @@ const buildOptions = {
 	treeShaking: true,
 	outfile: "main.js",
 	minify: prod,
+	loader: {
+		'.css': 'css',
+		'.ttf': 'file',
+		'.woff': 'file',
+		'.woff2': 'file',
+	},
 };
 
 if (prod) {

main.ts

@@ -23,12 +23,8 @@ export default class AIAgentPlugin extends Plugin {
 	settings: AIAgentSettings;
 
 	async onload() {
-		const link = document.createElement('link');
-		link.rel = 'stylesheet';
-		link.href = 'https://cdn.jsdelivr.net/npm/katex@0.16.22/dist/katex.min.css';
-		link.integrity = 'sha384-5TcZemv2l/9On385z///+d7MSYlvIEw9FuZTIdZ14vJLqWphw7e7ZPuOiCHJcFCP';
-		link.crossOrigin = 'anonymous';
-		document.head.appendChild(link);
+		// KaTeX CSS is bundled with the plugin to comply with CSP
+		require('katex/dist/katex.min.css');
 
 		await this.loadSettings();
 

package-lock.json

@@ -14,6 +14,7 @@
 				"core-js": "^3.45.1",
 				"express": "^5.1.0",
 				"highlight.js": "^11.11.1",
+				"katex": "^0.16.22",
 				"lowlight": "^3.3.0",
 				"rehype-highlight": "^7.0.2",
 				"rehype-katex": "^7.0.1",

package.json

@@ -33,6 +33,7 @@
 		"core-js": "^3.45.1",
 		"express": "^5.1.0",
 		"highlight.js": "^11.11.1",
+		"katex": "^0.16.22",
 		"lowlight": "^3.3.0",
 		"rehype-highlight": "^7.0.2",
 		"rehype-katex": "^7.0.1",