UI/UX improvements

wwcompanion-extension/settings.css

@@ -73,6 +73,49 @@ body {
   box-shadow: var(--panel-shadow);
 }
 
+.panel-summary {
+  list-style: none;
+  cursor: pointer;
+  display: flex;
+  align-items: baseline;
+  justify-content: flex-start;
+  gap: 12px;
+}
+
+.panel-summary::-webkit-details-marker {
+  display: none;
+}
+
+.panel-caret {
+  display: inline-flex;
+  align-items: center;
+  width: 16px;
+  justify-content: center;
+  color: var(--muted);
+  font-weight: 700;
+  font-family: "Segoe UI Symbol", "Apple Symbols", system-ui, sans-serif;
+}
+
+.panel-caret .caret-open {
+  display: none;
+}
+
+.panel[open] .panel-caret .caret-open {
+  display: inline;
+}
+
+.panel[open] .panel-caret .caret-closed {
+  display: none;
+}
+
+.panel-body {
+  margin-top: 12px;
+}
+
+.panel[open] .panel-summary {
+  margin-bottom: 6px;
+}
+
 .row {
   display: flex;
   align-items: center;

wwcompanion-extension/settings.html

@@ -16,9 +16,17 @@
       <button id="saveBtn" class="accent">Save Settings</button>
     </div>
 
-    <section class="panel">
-      <div class="row">
+    <details class="panel">
+      <summary class="panel-summary">
+        <span class="panel-caret" aria-hidden="true">
+          <span class="caret-closed">▸</span>
+          <span class="caret-open">▾</span>
+        </span>
         <h2>API</h2>
+      </summary>
+      <div class="panel-body">
+        <div class="row">
+          <div></div>
           <button id="resetApiBtn" class="ghost" type="button">Reset to OpenAI</button>
         </div>
         <div class="field">
@@ -48,10 +56,18 @@
           <label for="model">Model name</label>
           <input id="model" type="text" placeholder="gpt-4o-mini" />
         </div>
-    </section>
+      </div>
+    </details>
 
-    <section class="panel">
+    <details class="panel">
+      <summary class="panel-summary">
+        <span class="panel-caret" aria-hidden="true">
+          <span class="caret-closed">▸</span>
+          <span class="caret-open">▾</span>
+        </span>
         <h2>Appearance</h2>
+      </summary>
+      <div class="panel-body">
         <div class="field">
           <label for="themeSelect">Theme</label>
           <select id="themeSelect">
@@ -60,28 +76,58 @@
             <option value="dark">Dark</option>
           </select>
         </div>
-    </section>
+      </div>
+    </details>
 
-    <section class="panel">
+    <details class="panel">
+      <summary class="panel-summary">
+        <span class="panel-caret" aria-hidden="true">
+          <span class="caret-closed">▸</span>
+          <span class="caret-open">▾</span>
+        </span>
         <h2>System Prompt</h2>
-      <textarea id="systemPrompt" rows="8" placeholder="Define tone and standards..."></textarea>
-    </section>
+      </summary>
+      <div class="panel-body">
+        <textarea
+          id="systemPrompt"
+          rows="8"
+          placeholder="Define tone and standards..."
+        ></textarea>
+      </div>
+    </details>
 
-    <section class="panel">
+    <details class="panel">
+      <summary class="panel-summary">
+        <span class="panel-caret" aria-hidden="true">
+          <span class="caret-closed">▸</span>
+          <span class="caret-open">▾</span>
+        </span>
         <h2>Resume</h2>
+      </summary>
+      <div class="panel-body">
         <textarea id="resume" rows="10" placeholder="Paste your resume text..."></textarea>
-    </section>
+      </div>
+    </details>
 
-    <section class="panel">
-      <div class="row">
+    <details class="panel">
+      <summary class="panel-summary">
+        <span class="panel-caret" aria-hidden="true">
+          <span class="caret-closed">▸</span>
+          <span class="caret-open">▾</span>
+        </span>
         <div class="row-title">
           <h2>Task Presets</h2>
           <span class="hint hint-accent">Top task is the default</span>
         </div>
+      </summary>
+      <div class="panel-body">
+        <div class="row">
+          <div></div>
           <button id="addTaskBtn" class="ghost" type="button">Add Task</button>
         </div>
         <div id="tasks" class="tasks"></div>
-    </section>
+      </div>
+    </details>
 
     <script src="settings.js"></script>
   </body>

wwcompanion-extension/settings.js

@@ -255,7 +255,13 @@ async function saveSettings() {
 
 saveBtn.addEventListener("click", () => void saveSettings());
 addTaskBtn.addEventListener("click", () => {
-  tasksContainer.appendChild(buildTaskCard({ id: newTaskId(), name: "", text: "" }));
+  const newCard = buildTaskCard({ id: newTaskId(), name: "", text: "" });
+  const first = tasksContainer.firstElementChild;
+  if (first) {
+    tasksContainer.insertBefore(newCard, first);
+  } else {
+    tasksContainer.appendChild(newCard);
+  }
   updateTaskControls();
 });