templates/views/settings.html

<div class="settings-wrap">
    <div class="settings-tabs" role="tablist">
        <div class="settings-tab active" role="tab" onclick="switchPanel('panel-profile',this)"><i class="fa-solid fa-user"></i> Profile</div>
        <div class="settings-tab" role="tab" onclick="switchPanel('panel-appearance',this)"><i class="fa-solid fa-palette"></i> Theme</div>
        <div class="settings-tab" role="tab" onclick="switchPanel('panel-editor',this)"><i class="fa-solid fa-keyboard"></i> Editor</div>
        <div class="settings-tab" role="tab" onclick="switchPanel('panel-terminal',this)"><i class="fa-solid fa-terminal"></i> Terminal</div>
        <div class="settings-tab" role="tab" onclick="switchPanel('panel-ai',this)"><i class="fa-solid fa-brain"></i> AI</div>
        <div class="settings-tab" role="tab" onclick="switchPanel('panel-sync',this)"><i class="fa-solid fa-cloud"></i> Sync</div>
    </div>

    <div id="panel-profile" class="settings-panel active">
        <h2 class="settings-heading">Profile</h2>
        <div class="profile-row">
            <div class="profile-avatar" id="profile-avatar" aria-hidden="true">U</div>
            <div style="flex:1">
                <div class="field-group" style="margin-bottom:0">
                    <label for="setting-username">Username</label>
                    <input type="text" id="setting-username" class="field-input" readonly style="opacity:0.6">
                </div>
            </div>
        </div>
        <button class="ed-btn primary" onclick="showToast('Coming in v2!','info')">Update Profile</button>
    </div>

    <div id="panel-appearance" class="settings-panel">
        <h2 class="settings-heading">Appearance</h2>
        <div class="field-group">
            <label for="setting-theme-mode">Theme</label>
            <select id="setting-theme-mode" class="field-select" onchange="previewSettings()">
                <option value="dark">Dark (OLED)</option>
                <option value="light">Light</option>
            </select>
        </div>
        <div class="field-group">
            <label>Accent Color</label>
            <div class="swatch-row">
                <button class="swatch active" style="background:#ffc107" onclick="setAccent('#ffc107',this)" aria-label="Amber"></button>
                <button class="swatch" style="background:#22c55e" onclick="setAccent('#22c55e',this)" aria-label="Green"></button>
                <button class="swatch" style="background:#3b82f6" onclick="setAccent('#3b82f6',this)" aria-label="Blue"></button>
                <button class="swatch" style="background:#b388ff" onclick="setAccent('#b388ff',this)" aria-label="Purple"></button>
                <input type="color" id="custom-accent" value="#ffc107" onchange="setAccent(this.value,null)" aria-label="Custom color" style="width:32px;height:32px;border:none;background:none;cursor:pointer">
            </div>
        </div>
        <div class="field-group">
            <label for="setting-bg-url">Background URL</label>
            <input type="text" id="setting-bg-url" class="field-input" placeholder="https://..." oninput="previewSettings()">
            <p class="field-hint">Leave empty for default</p>
        </div>
    </div>

    <div id="panel-editor" class="settings-panel">
        <h2 class="settings-heading">Editor</h2>
        <div class="field-group">
            <label for="setting-editor-font-size">Font Size</label>
            <select id="setting-editor-font-size" class="field-select" onchange="previewSettings()">
                <option value="12px">12px</option>
                <option value="14px" selected>14px</option>
                <option value="16px">16px</option>
                <option value="18px">18px</option>
            </select>
        </div>
        <div class="field-group">
            <label for="setting-editor-font">Font Family</label>
            <select id="setting-editor-font" class="field-select" onchange="previewSettings()">
                <option value="'JetBrains Mono',monospace" selected>JetBrains Mono</option>
                <option value="'Fira Code',monospace">Fira Code</option>
                <option value="Consolas,monospace">Consolas</option>
            </select>
        </div>
        <div class="field-group">
            <label for="setting-editor-minimap">Print Margin</label>
            <select id="setting-editor-minimap" class="field-select" onchange="previewSettings()">
                <option value="false">Hidden</option>
                <option value="true">Visible</option>
            </select>
        </div>
    </div>

    <div id="panel-terminal" class="settings-panel">
        <h2 class="settings-heading">Terminal</h2>
        <div class="field-group">
            <label for="setting-terminal-font-size">Font Size</label>
            <select id="setting-terminal-font-size" class="field-select" onchange="previewSettings()">
                <option value="13px">13px</option>
                <option value="14px" selected>14px</option>
                <option value="16px">16px</option>
                <option value="18px">18px</option>
            </select>
        </div>
    </div>

    <div id="panel-ai" class="settings-panel">
        <h2 class="settings-heading">AI Settings</h2>
        <div class="field-group">
            <label for="setting-openrouter-key">OpenRouter API Key</label>
            <input type="password" id="setting-openrouter-key" class="field-input" placeholder="sk-or-v1-xxx">
        </div>
        <div class="field-group">
            <label for="setting-nvidia-key">NVIDIA NIM Key</label>
            <input type="password" id="setting-nvidia-key" class="field-input" placeholder="nvapi-xxx">
            <p class="field-hint">Leave blank for default env keys</p>
        </div>
        <div class="field-group">
            <label for="setting-ai-model">Model</label>
            <select id="setting-ai-model" class="field-select" onchange="updateAIModelBadge()">
                <optgroup label="OpenRouter">
                    <option value="openrouter/auto" selected>Auto (Default)</option>
                    <option value="deepseek/deepseek-chat">DeepSeek V3 Chat</option>
                    <option value="deepseek/deepseek-coder">DeepSeek V3 Coder</option>
                </optgroup>
                <optgroup label="NVIDIA">
                    <option value="meta/llama3-8b-instruct">Llama3 8B</option>
                    <option value="meta/llama3-70b-instruct">Llama3 70B</option>
                </optgroup>
            </select>
        </div>
        <div class="field-group">
            <label for="setting-ai-prompt">System Prompt</label>
            <textarea id="setting-ai-prompt" class="field-input field-textarea" placeholder="You are a helpful coding assistant..."></textarea>
        </div>
    </div>

    <div id="panel-sync" class="settings-panel">
        <h2 class="settings-heading">Data & Sync</h2>
        <div style="background:var(--accent-dim);border:1px solid rgba(255,193,7,0.2);padding:var(--sp-4);border-radius:var(--r-sm);margin-bottom:var(--sp-5)">
            <p style="color:var(--accent);font-weight:600;margin-bottom:var(--sp-1)"><i class="fa-solid fa-triangle-exclamation"></i> Hugging Face Storage</p>
            <p style="font-size:13px;color:var(--text-2)">Data may be lost on restart. Sync regularly to prevent loss.</p>
        </div>
        <button class="ed-btn success" id="hf-sync-btn" onclick="syncHuggingFace()" style="margin-bottom:var(--sp-3)">
            <i class="fa-solid fa-rotate"></i> Sync to HF Bucket
        </button>
        <div id="sync-status" style="font-size:12px;color:var(--text-3)"></div>
        <div style="margin-top:var(--sp-6);padding-top:var(--sp-4);border-top:1px solid var(--divider)">
            <h3 style="font-size:14px;font-weight:600;margin-bottom:var(--sp-3)">Import / Export</h3>
            <div style="display:flex;gap:var(--sp-3);flex-wrap:wrap">
                <button class="ed-btn" onclick="downloadWorkspace()"><i class="fa-solid fa-download"></i> Download .zip</button>
                <button class="ed-btn" onclick="toggleGithubModal()"><i class="fa-brands fa-github"></i> Import GitHub</button>
            </div>
            <div id="github-import-modal" style="display:none;margin-top:var(--sp-4);padding:var(--sp-4);border:1px solid var(--border);border-radius:var(--r-sm);background:rgba(255,255,255,0.02)">
                <div class="field-group">
                    <label for="github-repo-url">Repo URL <span style="color:var(--error)">*</span></label>
                    <input type="text" id="github-repo-url" class="field-input" placeholder="https://github.com/user/repo">
                </div>
                <div class="field-group">
                    <label for="github-pat-token">PAT Token (optional)</label>
                    <input type="password" id="github-pat-token" class="field-input" placeholder="ghp_xxx">
                </div>
                <div style="display:flex;gap:var(--sp-2);justify-content:flex-end">
                    <button class="ed-btn" onclick="toggleGithubModal()">Cancel</button>
                    <button class="ed-btn primary" onclick="importGithubRepo()">Import</button>
                </div>
            </div>
        </div>
    </div>

    <div class="settings-actions">
        <button class="ed-btn primary" id="save-settings-btn" onclick="saveSettings()">Save Settings</button>
        <button class="ed-btn" onclick="loadSettings()">Reset</button>
    </div>
</div>