From efa3ccbd264ca5b81bd52243cde932ffacf18ccf Mon Sep 17 00:00:00 2001
From: matt <matt@takoyaki.cool>
Date: Tue, 14 Oct 2025 12:14:51 -0700
Subject: [PATCH] feat: redesign settings as slide-in sidebar with collapsible
 sections
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Changed from full-screen overlay to 500px slide-in sidebar from right
- Added dark overlay backdrop that dims chat
- Organized character settings into collapsible sections:
  * Basic Information (name, avatar, system prompt, greeting)
  * Roleplay Details (personality, description, scenario, examples)
  * Advanced Settings (post-history, alternate greetings)
  * Metadata (tags, creator, version, notes)
- Smooth slide and collapse animations
- Click overlay to close sidebar
- Responsive: full width on mobile
- More compact button layouts

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 src/index.html | 341 ++++++++++++++++++++++++++++---------------------
 src/main.js    |  19 ++-
 src/styles.css | 113 ++++++++++++++--
 3 files changed, 312 insertions(+), 161 deletions(-)

diff --git a/src/index.html b/src/index.html
index 4ba3109..9e84f20 100644
--- a/src/index.html
+++ b/src/index.html
@@ -55,7 +55,10 @@
         </div>
       </main>
 
-      <div class="settings-panel" id="settings-panel" style="display: none;">
+      <!-- Settings overlay backdrop -->
+      <div class="settings-overlay" id="settings-overlay"></div>
+
+      <div class="settings-panel" id="settings-panel">
         <div class="settings-header">
           <h2>Settings</h2>
           <button id="close-settings-btn" class="icon-btn">
@@ -125,165 +128,217 @@
               <label for="character-settings-select">Select Character</label>
               <select id="character-settings-select"></select>
             </div>
-            <div class="form-group">
-              <label for="character-name">Character Name</label>
-              <input
-                type="text"
-                id="character-name"
-                placeholder="Assistant"
-                required
-              />
-            </div>
 
-            <div class="form-group">
-              <label for="character-avatar">Avatar (Optional)</label>
-              <div class="avatar-upload">
-                <div id="avatar-preview" class="avatar-preview">
-                  <div class="avatar-circle-large"></div>
+            <!-- Basic Info Section -->
+            <div class="settings-section" data-section="basic">
+              <div class="settings-section-header">
+                <div class="settings-section-title">
+                  <svg class="settings-section-icon" viewBox="0 0 16 16" fill="none">
+                    <path d="M4 6L8 10L12 6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+                  </svg>
+                  Basic Information
+                </div>
+              </div>
+              <div class="settings-section-content">
+                <div class="form-group">
+                  <label for="character-name">Character Name</label>
+                  <input
+                    type="text"
+                    id="character-name"
+                    placeholder="Assistant"
+                    required
+                  />
+                </div>
+
+                <div class="form-group">
+                  <label for="character-avatar">Avatar (Optional)</label>
+                  <div class="avatar-upload">
+                    <div id="avatar-preview" class="avatar-preview">
+                      <div class="avatar-circle-large"></div>
+                    </div>
+                    <input
+                      type="file"
+                      id="character-avatar"
+                      accept="image/png,image/jpeg,image/jpg,image/webp"
+                      style="display: none;"
+                    />
+                    <button type="button" id="upload-avatar-btn" class="btn-secondary">
+                      Choose Image
+                    </button>
+                    <button type="button" id="remove-avatar-btn" class="btn-secondary" style="display: none;">
+                      Remove
+                    </button>
+                  </div>
+                </div>
+
+                <div class="form-group">
+                  <label for="character-system-prompt">System Prompt</label>
+                  <textarea
+                    id="character-system-prompt"
+                    placeholder="You are a helpful AI assistant..."
+                    rows="6"
+                    required
+                  ></textarea>
+                </div>
+
+                <div class="form-group">
+                  <label for="character-greeting">Greeting (Optional)</label>
+                  <textarea
+                    id="character-greeting"
+                    placeholder="Hello! How can I help you today?"
+                    rows="2"
+                  ></textarea>
                 </div>
-                <input
-                  type="file"
-                  id="character-avatar"
-                  accept="image/png,image/jpeg,image/jpg,image/webp"
-                  style="display: none;"
-                />
-                <button type="button" id="upload-avatar-btn" class="btn-secondary">
-                  Choose Image
-                </button>
-                <button type="button" id="remove-avatar-btn" class="btn-secondary" style="display: none;">
-                  Remove
-                </button>
               </div>
             </div>
 
-            <div class="form-group">
-              <label for="character-system-prompt">System Prompt</label>
-              <textarea
-                id="character-system-prompt"
-                placeholder="You are a helpful AI assistant..."
-                rows="6"
-                required
-              ></textarea>
+            <!-- Roleplay Details Section -->
+            <div class="settings-section collapsed" data-section="roleplay">
+              <div class="settings-section-header">
+                <div class="settings-section-title">
+                  <svg class="settings-section-icon" viewBox="0 0 16 16" fill="none">
+                    <path d="M4 6L8 10L12 6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+                  </svg>
+                  Roleplay Details
+                </div>
+              </div>
+              <div class="settings-section-content">
+                <div class="form-group">
+                  <label for="character-personality">Personality Tags</label>
+                  <input
+                    type="text"
+                    id="character-personality"
+                    placeholder="helpful, friendly, knowledgeable"
+                  />
+                </div>
+
+                <div class="form-group">
+                  <label for="character-description">Description</label>
+                  <textarea
+                    id="character-description"
+                    placeholder="Detailed character description, appearance, background..."
+                    rows="8"
+                  ></textarea>
+                </div>
+
+                <div class="form-group">
+                  <label for="character-scenario">Scenario</label>
+                  <textarea
+                    id="character-scenario"
+                    placeholder="The setting or situation where the character exists..."
+                    rows="4"
+                  ></textarea>
+                </div>
+
+                <div class="form-group">
+                  <label for="character-mes-example">Message Examples</label>
+                  <textarea
+                    id="character-mes-example"
+                    placeholder="Example dialogue from the character..."
+                    rows="4"
+                  ></textarea>
+                </div>
+              </div>
             </div>
 
-            <div class="form-group">
-              <label for="character-greeting">Greeting (Optional)</label>
-              <textarea
-                id="character-greeting"
-                placeholder="Hello! How can I help you today?"
-                rows="2"
-              ></textarea>
+            <!-- Advanced Settings Section -->
+            <div class="settings-section collapsed" data-section="advanced">
+              <div class="settings-section-header">
+                <div class="settings-section-title">
+                  <svg class="settings-section-icon" viewBox="0 0 16 16" fill="none">
+                    <path d="M4 6L8 10L12 6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+                  </svg>
+                  Advanced Settings
+                </div>
+              </div>
+              <div class="settings-section-content">
+                <div class="form-group">
+                  <label for="character-post-history">Post-History Instructions</label>
+                  <textarea
+                    id="character-post-history"
+                    placeholder="Instructions to apply after chat history..."
+                    rows="3"
+                  ></textarea>
+                </div>
+
+                <div class="form-group">
+                  <label for="character-alt-greetings">Alternate Greetings</label>
+                  <textarea
+                    id="character-alt-greetings"
+                    placeholder="One greeting per line..."
+                    rows="3"
+                  ></textarea>
+                </div>
+              </div>
             </div>
 
-            <div class="form-group">
-              <label for="character-personality">Personality Tags (Optional)</label>
-              <input
-                type="text"
-                id="character-personality"
-                placeholder="helpful, friendly, knowledgeable"
-              />
-            </div>
+            <!-- Metadata Section -->
+            <div class="settings-section collapsed" data-section="metadata">
+              <div class="settings-section-header">
+                <div class="settings-section-title">
+                  <svg class="settings-section-icon" viewBox="0 0 16 16" fill="none">
+                    <path d="M4 6L8 10L12 6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+                  </svg>
+                  Metadata
+                </div>
+              </div>
+              <div class="settings-section-content">
+                <div class="form-group">
+                  <label for="character-tags">Tags</label>
+                  <input
+                    type="text"
+                    id="character-tags"
+                    placeholder="fantasy, adventure, comedy"
+                  />
+                </div>
 
-            <div class="form-group">
-              <label for="character-description">Description (Optional)</label>
-              <textarea
-                id="character-description"
-                placeholder="Detailed character description, appearance, background..."
-                rows="10"
-              ></textarea>
-            </div>
+                <div class="form-group">
+                  <label for="character-creator">Creator</label>
+                  <input
+                    type="text"
+                    id="character-creator"
+                    placeholder="Card creator name"
+                  />
+                </div>
 
-            <div class="form-group">
-              <label for="character-scenario">Scenario (Optional)</label>
-              <textarea
-                id="character-scenario"
-                placeholder="The setting or situation where the character exists..."
-                rows="4"
-              ></textarea>
-            </div>
+                <div class="form-group">
+                  <label for="character-version">Character Version</label>
+                  <input
+                    type="text"
+                    id="character-version"
+                    placeholder="1.0"
+                  />
+                </div>
 
-            <div class="form-group">
-              <label for="character-mes-example">Message Example (Optional)</label>
-              <textarea
-                id="character-mes-example"
-                placeholder="Example dialogue from the character..."
-                rows="4"
-              ></textarea>
-            </div>
-
-            <div class="form-group">
-              <label for="character-post-history">Post-History Instructions (Optional)</label>
-              <textarea
-                id="character-post-history"
-                placeholder="Instructions to apply after chat history..."
-                rows="3"
-              ></textarea>
-            </div>
-
-            <div class="form-group">
-              <label for="character-alt-greetings">Alternate Greetings (Optional)</label>
-              <textarea
-                id="character-alt-greetings"
-                placeholder="One greeting per line..."
-                rows="3"
-              ></textarea>
-            </div>
-
-            <div class="form-group">
-              <label for="character-tags">Tags (Optional)</label>
-              <input
-                type="text"
-                id="character-tags"
-                placeholder="fantasy, adventure, comedy"
-              />
-            </div>
-
-            <div class="form-group">
-              <label for="character-creator">Creator (Optional)</label>
-              <input
-                type="text"
-                id="character-creator"
-                placeholder="Card creator name"
-              />
-            </div>
-
-            <div class="form-group">
-              <label for="character-version">Character Version (Optional)</label>
-              <input
-                type="text"
-                id="character-version"
-                placeholder="1.0"
-              />
-            </div>
-
-            <div class="form-group">
-              <label for="character-creator-notes">Creator Notes (Optional)</label>
-              <textarea
-                id="character-creator-notes"
-                placeholder="Notes from the creator..."
-                rows="2"
-              ></textarea>
+                <div class="form-group">
+                  <label for="character-creator-notes">Creator Notes</label>
+                  <textarea
+                    id="character-creator-notes"
+                    placeholder="Notes from the creator..."
+                    rows="2"
+                  ></textarea>
+                </div>
+              </div>
             </div>
 
             <div id="character-message" class="validation-message"></div>
 
-            <button type="submit" id="save-character-btn" class="btn-primary">
-              Save Character
-            </button>
-            <button type="button" id="delete-character-btn" class="btn-danger">
-              Delete Character
-            </button>
+            <div style="display: flex; gap: 8px;">
+              <button type="submit" id="save-character-btn" class="btn-primary" style="flex: 1;">
+                Save Character
+              </button>
+              <button type="button" id="delete-character-btn" class="btn-danger">
+                Delete
+              </button>
+            </div>
 
-            <div class="form-group" style="margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--border-color);">
-              <label>Character Card Import/Export</label>
-              <div style="display: flex; gap: 0.5rem;">
-                <button type="button" id="import-character-btn" class="btn-secondary" style="flex: 1;">
-                  Import v2 Card
-                </button>
-                <button type="button" id="export-character-btn" class="btn-secondary" style="flex: 1;">
-                  Export v2 Card
-                </button>
-              </div>
+            <div style="display: flex; gap: 8px;">
+              <button type="button" id="import-character-btn" class="btn-secondary" style="flex: 1;">
+                Import v2 Card
+              </button>
+              <button type="button" id="export-character-btn" class="btn-secondary" style="flex: 1;">
+                Export v2 Card
+              </button>
             </div>
           </form>
         </div>
diff --git a/src/main.js b/src/main.js
index 96c976a..3721951 100644
--- a/src/main.js
+++ b/src/main.js
@@ -821,14 +821,16 @@ function setStatus(text, type = 'default') {
 
 // Show/hide settings
 async function showSettings() {
-  settingsPanel.style.display = 'block';
-  chatView.style.display = 'none';
+  const overlay = document.getElementById('settings-overlay');
+  settingsPanel.classList.add('open');
+  overlay.classList.add('show');
   await loadCharacterSettings();
 }
 
 function hideSettings() {
-  settingsPanel.style.display = 'none';
-  chatView.style.display = 'flex';
+  const overlay = document.getElementById('settings-overlay');
+  settingsPanel.classList.remove('open');
+  overlay.classList.remove('show');
 }
 
 // Tab switching
@@ -1015,6 +1017,7 @@ function handleAvatarRemove() {
 function setupAppControls() {
   document.getElementById('settings-btn').addEventListener('click', showSettings);
   document.getElementById('close-settings-btn').addEventListener('click', hideSettings);
+  document.getElementById('settings-overlay').addEventListener('click', hideSettings);
   document.getElementById('clear-btn').addEventListener('click', clearHistory);
   characterSelect.addEventListener('change', handleCharacterSwitch);
   newCharacterBtn.addEventListener('click', handleNewCharacter);
@@ -1028,6 +1031,14 @@ function setupAppControls() {
   document.getElementById('remove-avatar-btn').addEventListener('click', handleAvatarRemove);
   document.getElementById('import-character-btn').addEventListener('click', handleImportCharacter);
   document.getElementById('export-character-btn').addEventListener('click', handleExportCharacter);
+
+  // Setup collapsible sections
+  document.querySelectorAll('.settings-section-header').forEach(header => {
+    header.addEventListener('click', () => {
+      const section = header.parentElement;
+      section.classList.toggle('collapsed');
+    });
+  });
 }
 
 // Keyboard shortcuts
diff --git a/src/styles.css b/src/styles.css
index 5cc08e9..29fc753 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -832,28 +832,56 @@ body {
   }
 }
 
-/* Settings Panel */
+/* Settings Panel - Slide-in Sidebar */
 .settings-panel {
-  position: absolute;
+  position: fixed;
+  top: 0;
+  right: -500px;
+  width: 500px;
+  height: 100vh;
+  background: var(--bg-primary);
+  border-left: 1px solid var(--border);
+  box-shadow: -4px 0 20px rgba(0, 0, 0, 0.3);
+  z-index: 1000;
+  overflow-y: auto;
+  padding: 20px;
+  transition: right 0.3s ease;
+}
+
+.settings-panel.open {
+  right: 0;
+}
+
+/* Settings overlay backdrop */
+.settings-overlay {
+  position: fixed;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
-  background: var(--bg-primary);
-  z-index: 1000;
-  overflow-y: auto;
-  padding: 60px 20px 20px;
+  background: rgba(0, 0, 0, 0.5);
+  z-index: 999;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.3s ease;
+}
+
+.settings-overlay.show {
+  opacity: 1;
+  pointer-events: auto;
 }
 
 .settings-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  margin-bottom: 20px;
+  margin-bottom: 24px;
+  padding-bottom: 16px;
+  border-bottom: 1px solid var(--border);
 }
 
 .settings-header h2 {
-  font-size: 20px;
+  font-size: 24px;
   font-weight: 600;
   color: var(--text-primary);
   margin: 0;
@@ -863,9 +891,6 @@ body {
   display: flex;
   gap: 8px;
   margin-bottom: 24px;
-  max-width: 400px;
-  margin-left: auto;
-  margin-right: auto;
 }
 
 .tab-btn {
@@ -902,13 +927,68 @@ body {
 }
 
 .settings-form {
-  max-width: 400px;
-  margin: 0 auto;
   display: flex;
   flex-direction: column;
   gap: 20px;
 }
 
+/* Collapsible sections */
+.settings-section {
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  overflow: hidden;
+  background: var(--bg-secondary);
+}
+
+.settings-section-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 12px 16px;
+  background: var(--bg-tertiary);
+  cursor: pointer;
+  user-select: none;
+  transition: background 0.2s ease;
+}
+
+.settings-section-header:hover {
+  background: var(--border);
+}
+
+.settings-section-title {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--text-primary);
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.settings-section-icon {
+  width: 16px;
+  height: 16px;
+  transition: transform 0.2s ease;
+}
+
+.settings-section.collapsed .settings-section-icon {
+  transform: rotate(-90deg);
+}
+
+.settings-section-content {
+  padding: 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  max-height: 2000px;
+  overflow: hidden;
+  transition: max-height 0.3s ease, padding 0.3s ease;
+}
+
+.settings-section.collapsed .settings-section-content {
+  max-height: 0;
+  padding: 0 16px;
+}
+
 .form-group {
   display: flex;
   flex-direction: column;
@@ -1095,6 +1175,11 @@ body {
   }
 
   .settings-panel {
-    padding: 60px 16px 16px;
+    width: 100%;
+    right: -100%;
+  }
+
+  .settings-panel.open {
+    right: 0;
   }
 }