From d12428c267519a28881c4b6aaa1b500f5fc77371 Mon Sep 17 00:00:00 2001
From: Russell Ballestrini <russell.ballestrini@gmail.com>
Date: Thu, 10 Jul 2025 23:09:47 -0400
Subject: [PATCH] restructure settings panel with two columns and add model
 name field to API config

---
 src/uncloseai-embed-modal.js    | 42 +++++++++++++++++++++++++++++----
 src/uncloseai-modal-builtin.css | 14 +++++++++--
 src/uncloseai-modal-pico.css    | 11 ++++++++-
 3 files changed, 60 insertions(+), 7 deletions(-)

diff --git a/src/uncloseai-embed-modal.js b/src/uncloseai-embed-modal.js
index 5ed1df8..1ef7b77 100644
--- a/src/uncloseai-embed-modal.js
+++ b/src/uncloseai-embed-modal.js
@@ -490,12 +490,30 @@ async function openUncloseaiEmbeddedModalNew() {
 	apiKeyContainer.appendChild(apiKeyLabel);
 	apiKeyContainer.appendChild(apiKeyInput);
 
+	// Model Name input
+	const modelNameContainer = document.createElement("div");
+	modelNameContainer.className = "uncloseai-input-container";
+
+	const modelNameLabel = document.createElement("label");
+	modelNameLabel.textContent = "Model Name:";
+	modelNameLabel.className = "uncloseai-input-label";
+
+	const modelNameInput = document.createElement("input");
+	modelNameInput.type = "text";
+	modelNameInput.placeholder = "gpt-4";
+	modelNameInput.value = localStorage.getItem("customModelName") || "";
+	modelNameInput.className = "uncloseai-input";
+
+	modelNameContainer.appendChild(modelNameLabel);
+	modelNameContainer.appendChild(modelNameInput);
+
 	// API Config container for inputs
 	const apiConfigInputs = document.createElement("div");
 	apiConfigInputs.className = "uncloseai-api-inputs";
 	apiConfigInputs.style.display = customAPICheckbox.checked ? "block" : "none";
 	apiConfigInputs.appendChild(baseURLContainer);
 	apiConfigInputs.appendChild(apiKeyContainer);
+	apiConfigInputs.appendChild(modelNameContainer);
 
 	// Event handlers
 	customAPICheckbox.onchange = () => {
@@ -512,6 +530,10 @@ async function openUncloseaiEmbeddedModalNew() {
 		localStorage.setItem("customAPIKey", apiKeyInput.value);
 	};
 
+	modelNameInput.onchange = () => {
+		localStorage.setItem("customModelName", modelNameInput.value);
+	};
+
 	apiConfigSection.appendChild(apiConfigLabel);
 	apiConfigSection.appendChild(customAPIToggle);
 	apiConfigSection.appendChild(apiConfigInputs);
@@ -561,11 +583,23 @@ async function openUncloseaiEmbeddedModalNew() {
 	actionsSection.appendChild(actionsLabel);
 	actionsSection.appendChild(actionsGrid);
 
+	// Create left and right columns
+	const leftColumn = document.createElement("div");
+	leftColumn.className = "uncloseai-settings-column";
+	leftColumn.appendChild(modelSection);
+	leftColumn.appendChild(voiceSection);
+	leftColumn.appendChild(languageSection);
+
+	const rightColumn = document.createElement("div");
+	rightColumn.className = "uncloseai-settings-column";
+	rightColumn.appendChild(apiConfigSection);
+
+	// Quick actions span both columns
+	actionsSection.className = "uncloseai-section uncloseai-actions-full-width";
+
 	settingsPanel.appendChild(actionsSection);
-	settingsPanel.appendChild(modelSection);
-	settingsPanel.appendChild(voiceSection);
-	settingsPanel.appendChild(languageSection);
-	settingsPanel.appendChild(apiConfigSection);
+	settingsPanel.appendChild(leftColumn);
+	settingsPanel.appendChild(rightColumn);
 
 	// Load and save settings panel state
 	let settingsOpen = localStorage.getItem("hermesSettingsOpen") === "true";
diff --git a/src/uncloseai-modal-builtin.css b/src/uncloseai-modal-builtin.css
index 4dd4b3e..1ba03ea 100644
--- a/src/uncloseai-modal-builtin.css
+++ b/src/uncloseai-modal-builtin.css
@@ -109,11 +109,20 @@ dialog#uncloseai-embedded-modal[data-theme="light"] {
 
 .uncloseai-modal-settings.open {
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+  grid-template-columns: 1fr 1fr;
+  grid-template-rows: auto 1fr;
   gap: 20px;
   align-content: start;
 }
 
+.uncloseai-actions-full-width {
+  grid-column: 1 / -1;
+}
+
+.uncloseai-settings-column {
+  display: block;
+}
+
 /* Dark theme settings panel */
 dialog#uncloseai-embedded-modal[data-theme="dark"] .uncloseai-modal-settings {
   background: rgb(26, 26, 26);
@@ -991,7 +1000,8 @@ dialog#uncloseai-embedded-modal[data-theme="dark"] .uncloseai-chat-box {
 
 .uncloseai-modal-settings.open {
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+  grid-template-columns: 1fr 1fr;
+  grid-template-rows: auto 1fr;
   gap: 20px;
   align-content: start;
 }
diff --git a/src/uncloseai-modal-pico.css b/src/uncloseai-modal-pico.css
index c475cfd..bb9ab06 100644
--- a/src/uncloseai-modal-pico.css
+++ b/src/uncloseai-modal-pico.css
@@ -130,11 +130,20 @@ dialog#uncloseai-embedded-modal[data-theme="light"] {
 
 .uncloseai-modal-settings.open {
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+  grid-template-columns: 1fr 1fr;
+  grid-template-rows: auto 1fr;
   gap: 20px;
   align-content: start;
 }
 
+.uncloseai-actions-full-width {
+  grid-column: 1 / -1;
+}
+
+.uncloseai-settings-column {
+  display: block;
+}
+
 /* Dark theme settings panel */
 dialog#uncloseai-embedded-modal[data-theme="dark"] .uncloseai-modal-settings {
   background: rgb(26, 26, 26);