From 0e8b4ca114c4185b2955d94b23878a42d6ebfdb6 Mon Sep 17 00:00:00 2001
From: mpstaton <mpstaton@gmail.com>
Date: Sat, 19 Jul 2025 21:13:34 +0300
Subject: [PATCH] milestone(settings): settings panel is better than good
 enough

 On branch development
 Your branch is ahead of 'origin/development' by 1 commit.
   (use "git push" to publish your local commits)
 Changes to be committed:
	modified:   README.md
	modified:   main.ts
---
 README.md | 14 +++++++++++
 main.ts   | 75 +++++++++++++++++++++++++++++--------------------------
 2 files changed, 53 insertions(+), 36 deletions(-)

diff --git a/README.md b/README.md
index 7c2287d..9e6d477 100644
--- a/README.md
+++ b/README.md
@@ -10,6 +10,20 @@ # Perplexed: AI Content Generation for Perplexity and Perplexica for Obsidian
  
  As of now (July 2025), these are the only widely used AI Model APIs that seem to cite sources. 
 
+
+## Settings
+
+Perplexed Plugin Settings
+├── Perplexity (Remote Service) [PURPLE HEADER]
+│   ├── Endpoint
+│   ├── API Key
+│   └── Request Body Template [PERPLEXITY JSON]
+└── Perplexica (Self-Hosted) [PURPLE HEADER]
+    ├── Endpoint
+    ├── Fallback Container Path
+    ├── Default Model
+    └── Request Body Template [PERPLEXICA JSON]
+
 ## Getting Started
 
 ```
diff --git a/main.ts b/main.ts
index bad13ab..ab941e6 100644
--- a/main.ts
+++ b/main.ts
@@ -312,7 +312,8 @@ class PerplexedSettingTab extends PluginSettingTab {
         containerEl.createEl('h2', { text: 'Perplexed Plugin Settings' });
 
         // Perplexity Section
-        containerEl.createEl('h3', { text: 'Perplexity (Remote Service)' });
+        const perplexityHeader = containerEl.createEl('h3', { text: 'Perplexity (Remote Service)' });
+        perplexityHeader.style.color = 'var(--text-accent)';
         containerEl.createEl('p', {
             text: 'Configure settings for the hosted Perplexity AI service',
             cls: 'setting-item-description'
@@ -342,8 +343,43 @@ class PerplexedSettingTab extends PluginSettingTab {
                 })
             );
 
+        // Perplexity Request Template
+        const perplexityJsonSetting = new Setting(containerEl)
+            .setName('Request Body Template')
+            .setDesc('JSON template for Perplexity API requests');
+            
+        // Create a textarea element for Perplexity
+        const perplexityTextArea = document.createElement('textarea');
+        perplexityTextArea.rows = 10;
+        perplexityTextArea.cols = 50;
+        perplexityTextArea.style.width = '100%';
+        perplexityTextArea.style.minHeight = '300px';
+        perplexityTextArea.style.fontFamily = 'monospace';
+        perplexityTextArea.placeholder = 'Enter Perplexity JSON request template...';
+        
+        // Set initial value if it exists
+        if (this.plugin.settings.perplexityRequestTemplate) {
+            try {
+                const config = JSON.parse(this.plugin.settings.perplexityRequestTemplate);
+                perplexityTextArea.value = JSON.stringify(config, null, 2);
+            } catch (e) {
+                // If not valid JSON, use as is
+                perplexityTextArea.value = this.plugin.settings.perplexityRequestTemplate;
+            }
+        }
+        
+        // Add input event listener for Perplexity
+        perplexityTextArea.addEventListener('input', async () => {
+            this.plugin.settings.perplexityRequestTemplate = perplexityTextArea.value;
+            await this.plugin.saveSettings();
+        });
+        
+        // Add the textarea to the setting
+        perplexityJsonSetting.settingEl.appendChild(perplexityTextArea);
+
         // Perplexica Section
-        containerEl.createEl('h3', { text: 'Perplexica (Self-Hosted)' });
+        const perplexicaHeader = containerEl.createEl('h3', { text: 'Perplexica (Self-Hosted)' });
+        perplexicaHeader.style.color = 'var(--text-accent)';
         containerEl.createEl('p', {
             text: 'Configure settings for your local Perplexica installation',
             cls: 'setting-item-description'
@@ -385,40 +421,6 @@ class PerplexedSettingTab extends PluginSettingTab {
                 })
             );
 
-        // Perplexity Request Template
-        const perplexityJsonSetting = new Setting(containerEl)
-            .setName('Request Body Template')
-            .setDesc('JSON template for Perplexity API requests');
-            
-        // Create a textarea element for Perplexity
-        const perplexityTextArea = document.createElement('textarea');
-        perplexityTextArea.rows = 10;
-        perplexityTextArea.cols = 50;
-        perplexityTextArea.style.width = '100%';
-        perplexityTextArea.style.minHeight = '300px';
-        perplexityTextArea.style.fontFamily = 'monospace';
-        perplexityTextArea.placeholder = 'Enter Perplexity JSON request template...';
-        
-        // Set initial value if it exists
-        if (this.plugin.settings.perplexityRequestTemplate) {
-            try {
-                const config = JSON.parse(this.plugin.settings.perplexityRequestTemplate);
-                perplexityTextArea.value = JSON.stringify(config, null, 2);
-            } catch (e) {
-                // If not valid JSON, use as is
-                perplexityTextArea.value = this.plugin.settings.perplexityRequestTemplate;
-            }
-        }
-        
-        // Add input event listener for Perplexity
-        perplexityTextArea.addEventListener('input', async () => {
-            this.plugin.settings.perplexityRequestTemplate = perplexityTextArea.value;
-            await this.plugin.saveSettings();
-        });
-        
-        // Add the textarea to the setting
-        perplexityJsonSetting.settingEl.appendChild(perplexityTextArea);
-
         // Perplexica Request Template
         const perplexicaJsonSetting = new Setting(containerEl)
             .setName('Request Body Template')
@@ -452,5 +454,6 @@ class PerplexedSettingTab extends PluginSettingTab {
         
         // Add the textarea to the setting
         perplexicaJsonSetting.settingEl.appendChild(perplexicaTextArea);
+
     }
 }