peisongxiao/wwcompanion
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 2 Wiki Activity

UI/UX improvements

Browse Source
This commit is contained in:
Peisong Xiao
2026-01-17 16:01:49 -05:00
parent 3dbdc79b54
commit 3eb9863c3e
3 changed files with 149 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
wwcompanion-extension/settings.css
View File

@@ -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;

152
wwcompanion-extension/settings.html
View File

@@ -16,72 +16,118 @@
<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>
<button id="resetApiBtn" class="ghost" type="button">Reset to OpenAI</button>
</div>
<div class="field">
<label for="apiKey">API Key</label>
<div class="inline">
<input id="apiKey" type="password" autocomplete="off" placeholder="sk-..." />
<button id="toggleKey" class="ghost" type="button">Show</button>
</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">
<label for="apiKey">API Key</label>
<div class="inline">
<input id="apiKey" type="password" autocomplete="off" placeholder="sk-..." />
<button id="toggleKey" class="ghost" type="button">Show</button>
</div>
</div>
<div class="field">
<label for="apiBaseUrl">API Base URL</label>
<input
id="apiBaseUrl"
type="text"
placeholder="https://api.openai.com/v1"
/>
</div>
<div class="field">
<label for="apiKeyHeader">API Key Header</label>
<input id="apiKeyHeader" type="text" placeholder="Authorization" />
</div>
<div class="field">
<label for="apiKeyPrefix">API Key Prefix</label>
<input id="apiKeyPrefix" type="text" placeholder="Bearer " />
</div>
<div class="field">
<label for="model">Model name</label>
<input id="model" type="text" placeholder="gpt-4o-mini" />
</div>
</div>
<div class="field">
<label for="apiBaseUrl">API Base URL</label>
<input
id="apiBaseUrl"
type="text"
placeholder="https://api.openai.com/v1"
/>
</div>
<div class="field">
<label for="apiKeyHeader">API Key Header</label>
<input id="apiKeyHeader" type="text" placeholder="Authorization" />
</div>
<div class="field">
<label for="apiKeyPrefix">API Key Prefix</label>
<input id="apiKeyPrefix" type="text" placeholder="Bearer " />
</div>
<div class="field">
<label for="model">Model name</label>
<input id="model" type="text" placeholder="gpt-4o-mini" />
</div>
</section>
</details>
<section class="panel">
<h2>Appearance</h2>
<div class="field">
<label for="themeSelect">Theme</label>
<select id="themeSelect">
<option value="system">System</option>
<option value="light">Light</option>
<option value="dark">Dark</option>
</select>
<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">
<option value="system">System</option>
<option value="light">Light</option>
<option value="dark">Dark</option>
</select>
</div>
</div>
</section>
</details>
<section class="panel">
<h2>System Prompt</h2>
<textarea id="systemPrompt" rows="8" placeholder="Define tone and standards..."></textarea>
</section>
<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>
</summary>
<div class="panel-body">
<textarea
id="systemPrompt"
rows="8"
placeholder="Define tone and standards..."
></textarea>
</div>
</details>
<section class="panel">
<h2>Resume</h2>
<textarea id="resume" rows="10" placeholder="Paste your resume text..."></textarea>
</section>
<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>
</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>
<button id="addTaskBtn" class="ghost" type="button">Add Task</button>
</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>
</div>
<div id="tasks" class="tasks"></div>
</section>
</details>
<script src="settings.js"></script>
</body>

8
wwcompanion-extension/settings.js
View File

@@ -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();
});