@ytspar/devbar 1.0.0 → 1.1.0

package/dist/modules/rendering.js

@@ -7,8 +7,8 @@
 import { BUTTON_COLORS, CATEGORY_COLORS, CSS_COLORS, FONT_MONO, TAILWIND_BREAKPOINTS, } from '../constants.js';
 import { extractDocumentOutline, outlineToMarkdown } from '../outline.js';
 import { extractPageSchema, schemaToMarkdown } from '../schema.js';
-import { ACCENT_COLOR_PRESETS, DEFAULT_SETTINGS } from '../settings.js';
-import { createEmptyMessage, createInfoBox, createModalBox, createModalContent, createModalHeader, createModalOverlay, createStyledButton, createSvgIcon, getButtonStyles, } from '../ui/index.js';
+import { ACCENT_COLOR_PRESETS, DEFAULT_SETTINGS, resolveSaveLocation } from '../settings.js';
+import { createEmptyMessage, createInfoBox, createModalBox, createModalContent, createModalHeader, createModalOverlay, createCloseButton, createStyledButton, createSvgIcon, getButtonStyles, } from '../ui/index.js';
 import { getResponsiveMetricVisibility } from './performance.js';
 import { calculateCostEstimate, closeDesignReviewConfirm, copyPathToClipboard, handleDocumentOutline, handlePageSchema, handleSaveConsoleLogs, handleSaveOutline, handleSaveSchema, proceedWithDesignReview, showDesignReviewConfirmation, } from './screenshot.js';
 import { setThemeMode } from './theme.js';
@@ -25,6 +25,38 @@ function captureDotPosition(state, element) {
         bottom: window.innerHeight - (rect.top + rect.height / 2),
     };
 }
+/**
+ * Create the connection indicator (outer wrapper + inner colored dot).
+ * The caller is responsible for attaching tooltip and click handlers, since
+ * those differ between compact and expanded modes.
+ */
+function createConnectionIndicator(state) {
+    const connIndicator = document.createElement('span');
+    connIndicator.className = 'devbar-clickable';
+    Object.assign(connIndicator.style, {
+        width: '12px',
+        height: '12px',
+        borderRadius: '50%',
+        backgroundColor: 'transparent',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        cursor: 'pointer',
+        flexShrink: '0',
+    });
+    const connDot = document.createElement('span');
+    connDot.className = 'devbar-conn-dot';
+    Object.assign(connDot.style, {
+        width: '6px',
+        height: '6px',
+        borderRadius: '50%',
+        backgroundColor: state.sweetlinkConnected ? CSS_COLORS.primary : CSS_COLORS.textMuted,
+        boxShadow: state.sweetlinkConnected ? `0 0 6px ${CSS_COLORS.primary}` : 'none',
+        transition: 'all 300ms',
+    });
+    connIndicator.appendChild(connDot);
+    return connIndicator;
+}
 /**
  * Main render dispatch - creates container and delegates to appropriate renderer.
  */
@@ -66,24 +98,30 @@ function renderOverlays(state, consoleCaptureSingleton) {
         state.overlayElement.remove();
         state.overlayElement = null;
     }
-    // Render console popup if filter is active
+    // Safety: only one overlay at a time. First match wins; close the rest.
     if (state.consoleFilter) {
+        state.showOutlineModal = false;
+        state.showSchemaModal = false;
+        state.showDesignReviewConfirm = false;
+        state.showSettingsPopover = false;
         renderConsolePopup(state, consoleCaptureSingleton);
     }
-    // Render outline modal
-    if (state.showOutlineModal) {
+    else if (state.showOutlineModal) {
+        state.showSchemaModal = false;
+        state.showDesignReviewConfirm = false;
+        state.showSettingsPopover = false;
         renderOutlineModal(state);
     }
-    // Render schema modal
-    if (state.showSchemaModal) {
+    else if (state.showSchemaModal) {
+        state.showDesignReviewConfirm = false;
+        state.showSettingsPopover = false;
         renderSchemaModal(state);
     }
-    // Render design review confirmation modal
-    if (state.showDesignReviewConfirm) {
+    else if (state.showDesignReviewConfirm) {
+        state.showSettingsPopover = false;
         renderDesignReviewConfirmModal(state);
     }
-    // Render settings popover
-    if (state.showSettingsPopover) {
+    else if (state.showSettingsPopover) {
         renderSettingsPopover(state);
     }
 }
@@ -107,6 +145,8 @@ function renderCollapsed(state) {
                 bottom: `${state.lastDotPosition.bottom - 13}px`,
                 left: `${state.lastDotPosition.left - 13}px`,
             };
+        // Clear after use so expand doesn't re-use stale values
+        state.lastDotPosition = null;
     }
     else {
         // Fallback preset positions for when no dot position was captured
@@ -244,17 +284,8 @@ function renderCompact(state) {
         fontSize: '0.6875rem',
     });
     // Connection indicator
-    const connIndicator = document.createElement('span');
-    connIndicator.className = 'devbar-clickable';
-    Object.assign(connIndicator.style, {
-        width: '12px',
-        height: '12px',
-        borderRadius: '50%',
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-        cursor: 'pointer',
-    });
+    const connIndicator = createConnectionIndicator(state);
+    const connDot = connIndicator.querySelector('.devbar-conn-dot');
     attachTextTooltip(state, connIndicator, () => state.sweetlinkConnected ? 'Sweetlink connected' : 'Sweetlink disconnected');
     connIndicator.onclick = (e) => {
         e.stopPropagation();
@@ -263,15 +294,6 @@ function renderCompact(state) {
         state.debug.state('Collapsed DevBar from compact mode');
         state.render();
     };
-    const connDot = document.createElement('span');
-    Object.assign(connDot.style, {
-        width: '6px',
-        height: '6px',
-        borderRadius: '50%',
-        backgroundColor: state.sweetlinkConnected ? CSS_COLORS.primary : CSS_COLORS.textMuted,
-        boxShadow: state.sweetlinkConnected ? `0 0 6px ${CSS_COLORS.primary}` : 'none',
-    });
-    connIndicator.appendChild(connDot);
     wrapper.appendChild(connIndicator);
     // Error badge
     if (errorCount > 0) {
@@ -422,19 +444,7 @@ function renderExpanded(state, customControls) {
         lineHeight: '1rem',
     });
     // Connection indicator (click to collapse)
-    const connIndicator = document.createElement('span');
-    connIndicator.className = 'devbar-clickable';
-    Object.assign(connIndicator.style, {
-        width: '12px',
-        height: '12px',
-        borderRadius: '50%',
-        backgroundColor: 'transparent',
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-        cursor: 'pointer',
-        flexShrink: '0',
-    });
+    const connIndicator = createConnectionIndicator(state);
     attachTextTooltip(state, connIndicator, () => state.sweetlinkConnected
         ? 'Sweetlink connected (click to minimize)'
         : 'Sweetlink disconnected (click to minimize)');
@@ -445,16 +455,6 @@ function renderExpanded(state, customControls) {
         state.debug.state('Collapsed DevBar (connection dot click)');
         state.render();
     };
-    const connDot = document.createElement('span');
-    Object.assign(connDot.style, {
-        width: '6px',
-        height: '6px',
-        borderRadius: '50%',
-        backgroundColor: state.sweetlinkConnected ? CSS_COLORS.primary : CSS_COLORS.textMuted,
-        boxShadow: state.sweetlinkConnected ? `0 0 6px ${CSS_COLORS.primary}` : 'none',
-        transition: 'all 300ms',
-    });
-    connIndicator.appendChild(connDot);
     // Status row wrapper - keeps connection dot, info, and badges together
     const statusRow = document.createElement('div');
     statusRow.className = 'devbar-status';
@@ -719,6 +719,7 @@ function createConsoleBadge(state, type, count, color) {
         state.consoleFilter = state.consoleFilter === type ? null : type;
         state.showOutlineModal = false;
         state.showSchemaModal = false;
+        state.showSettingsPopover = false;
         state.render();
     };
     return badge;
@@ -728,8 +729,9 @@ function createScreenshotButton(state, accentColor) {
     btn.type = 'button';
     const hasSuccessState = state.copiedToClipboard || state.copiedPath || state.lastScreenshot;
     const isDisabled = state.capturing;
-    // Grey out when not connected (save won't work, but clipboard still does)
-    const isGreyedOut = !state.sweetlinkConnected && !hasSuccessState;
+    const effectiveSave = resolveSaveLocation(state.options.saveLocation, state.sweetlinkConnected);
+    // Grey out only when effective save is 'local' but sweetlink not connected (explicit 'local' setting)
+    const isGreyedOut = effectiveSave === 'local' && !state.sweetlinkConnected && !hasSuccessState;
     // Attach HTML tooltip
     attachButtonTooltip(state, btn, accentColor, (tooltip, h) => {
         if (state.copiedToClipboard) {
@@ -742,51 +744,57 @@ function createScreenshotButton(state, accentColor) {
         }
         if (state.lastScreenshot) {
             const screenshotPath = state.lastScreenshot;
-            h.addSuccess('Screenshot saved!', screenshotPath);
-            const copyLink = document.createElement('div');
-            Object.assign(copyLink.style, {
-                color: accentColor,
-                cursor: 'pointer',
-                fontSize: '0.625rem',
-                marginTop: '6px',
-                opacity: '0.8',
-                transition: 'opacity 150ms',
-            });
-            copyLink.textContent = 'copy path';
-            copyLink.onmouseenter = () => {
-                copyLink.style.opacity = '1';
-            };
-            copyLink.onmouseleave = () => {
-                copyLink.style.opacity = '0.8';
-            };
-            copyLink.onclick = async (e) => {
-                e.stopPropagation();
-                try {
-                    await navigator.clipboard.writeText(screenshotPath);
-                    copyLink.textContent = '\u2713 copied!';
-                    copyLink.style.cursor = 'default';
-                    copyLink.onclick = null;
-                }
-                catch {
-                    copyLink.textContent = '\u00d7 failed to copy';
-                    copyLink.style.color = CSS_COLORS.error;
-                }
-            };
-            tooltip.appendChild(copyLink);
+            const isDownloaded = screenshotPath.endsWith('downloaded');
+            if (isDownloaded) {
+                h.addSuccess('Screenshot downloaded!');
+            }
+            else {
+                h.addSuccess('Screenshot saved!', screenshotPath);
+                const copyLink = document.createElement('div');
+                Object.assign(copyLink.style, {
+                    color: accentColor,
+                    cursor: 'pointer',
+                    fontSize: '0.625rem',
+                    marginTop: '6px',
+                    opacity: '0.8',
+                    transition: 'opacity 150ms',
+                });
+                copyLink.textContent = 'copy path';
+                copyLink.onmouseenter = () => {
+                    copyLink.style.opacity = '1';
+                };
+                copyLink.onmouseleave = () => {
+                    copyLink.style.opacity = '0.8';
+                };
+                copyLink.onclick = async (e) => {
+                    e.stopPropagation();
+                    try {
+                        await navigator.clipboard.writeText(screenshotPath);
+                        copyLink.textContent = '\u2713 copied!';
+                        copyLink.style.cursor = 'default';
+                        copyLink.onclick = null;
+                    }
+                    catch {
+                        copyLink.textContent = '\u00d7 failed to copy';
+                        copyLink.style.color = CSS_COLORS.error;
+                    }
+                };
+                tooltip.appendChild(copyLink);
+            }
             return;
         }
         h.addTitle('Screenshot');
-        if (!state.sweetlinkConnected) {
-            h.addSectionHeader('Actions');
+        h.addSectionHeader('Actions');
+        if (effectiveSave === 'local' && !state.sweetlinkConnected) {
             h.addShortcut('Shift+Click', 'Copy to clipboard');
-            h.addWarning('Sweetlink not connected. Save to file unavailable.');
+            h.addWarning('Sweetlink not connected. Switch save method to Auto or Download.');
         }
         else {
-            h.addSectionHeader('Actions');
-            h.addShortcut('Click', 'Save to file');
+            const saveLabel = effectiveSave === 'local' ? 'Save to file' : 'Download';
+            h.addShortcut('Click', saveLabel);
             h.addShortcut('Shift+Click', 'Copy to clipboard');
             h.addSectionHeader('Keyboard');
-            h.addShortcut('Cmd or Ctrl+Shift+S', 'Save');
+            h.addShortcut('Cmd or Ctrl+Shift+S', saveLabel);
             h.addShortcut('Cmd or Ctrl+Shift+C', 'Copy');
         }
     });
@@ -914,13 +922,14 @@ function createOutlineButton(state) {
     // Attach HTML tooltip
     attachButtonTooltip(state, btn, BUTTON_COLORS.outline, (_tooltip, h) => {
         if (state.lastOutline) {
-            h.addSuccess('Outline saved!', state.lastOutline);
+            const isDownloaded = state.lastOutline.endsWith('downloaded');
+            h.addSuccess(isDownloaded ? 'Outline downloaded!' : 'Outline saved!', isDownloaded ? undefined : state.lastOutline);
             return;
         }
         h.addTitle('Document Outline');
         h.addDescription('View page heading structure and save as markdown.');
-        if (!state.sweetlinkConnected) {
-            h.addWarning('Sweetlink not connected. Save to file unavailable.');
+        if (state.options.saveLocation === 'local' && !state.sweetlinkConnected) {
+            h.addWarning('Sweetlink not connected. Switch save method to Auto or Download.');
         }
     });
     Object.assign(btn.style, getButtonStyles(BUTTON_COLORS.outline, isActive, false));
@@ -941,13 +950,14 @@ function createSchemaButton(state) {
     // Attach HTML tooltip
     attachButtonTooltip(state, btn, BUTTON_COLORS.schema, (_tooltip, h) => {
         if (state.lastSchema) {
-            h.addSuccess('Schema saved!', state.lastSchema);
+            const isDownloaded = state.lastSchema.endsWith('downloaded');
+            h.addSuccess(isDownloaded ? 'Schema downloaded!' : 'Schema saved!', isDownloaded ? undefined : state.lastSchema);
             return;
         }
         h.addTitle('Page Schema');
         h.addDescription('View JSON-LD, Open Graph, and other structured data.');
-        if (!state.sweetlinkConnected) {
-            h.addWarning('Sweetlink not connected. Save to file unavailable.');
+        if (state.options.saveLocation === 'local' && !state.sweetlinkConnected) {
+            h.addWarning('Sweetlink not connected. Switch save method to Auto or Download.');
         }
     });
     Object.assign(btn.style, getButtonStyles(BUTTON_COLORS.schema, isActive, false));
@@ -1111,6 +1121,7 @@ function renderConsolePopup(state, consoleCaptureSingleton) {
         },
         onSave: () => handleSaveConsoleLogs(state, logs),
         sweetlinkConnected: state.sweetlinkConnected,
+        saveLocation: state.options.saveLocation,
         isSaving: state.savingConsoleLogs,
         savedPath: state.lastConsoleLogs,
     });
@@ -1176,6 +1187,7 @@ function renderOutlineModal(state) {
         },
         onSave: () => handleSaveOutline(state),
         sweetlinkConnected: state.sweetlinkConnected,
+        saveLocation: state.options.saveLocation,
         isSaving: state.savingOutline,
         savedPath: state.lastOutline,
     });
@@ -1261,6 +1273,7 @@ function renderSchemaModal(state) {
         },
         onSave: () => handleSaveSchema(state),
         sweetlinkConnected: state.sweetlinkConnected,
+        saveLocation: state.options.saveLocation,
         isSaving: state.savingSchema,
         savedPath: state.lastSchema,
     });
@@ -1457,15 +1470,7 @@ function renderDesignReviewConfirmModal(state) {
     Object.assign(title.style, { color, fontSize: '0.875rem', fontWeight: '600' });
     title.textContent = 'AI Design Review';
     header.appendChild(title);
-    const closeBtn = createStyledButton({
-        color: CSS_COLORS.textMuted,
-        text: '\u00D7',
-        padding: '0',
-        fontSize: '1.25rem',
-    });
-    closeBtn.style.border = 'none';
-    closeBtn.onclick = closeModal;
-    header.appendChild(closeBtn);
+    header.appendChild(createCloseButton(closeModal));
     modal.appendChild(header);
     // Content
     const content = document.createElement('div');
@@ -1494,13 +1499,7 @@ function renderDesignReviewConfirmModal(state) {
         padding: '14px 18px',
         borderTop: `1px solid ${CSS_COLORS.border}`,
     });
-    const cancelBtn = createStyledButton({
-        color: CSS_COLORS.textMuted,
-        text: 'Cancel',
-        padding: '8px 16px',
-    });
-    cancelBtn.onclick = closeModal;
-    footer.appendChild(cancelBtn);
+    footer.appendChild(createCloseButton(closeModal, 'Cancel'));
     if (state.apiKeyStatus?.configured) {
         const proceedBtn = createStyledButton({ color, text: 'Run Review', padding: '8px 16px' });
         proceedBtn.style.backgroundColor = `${color}20`;
@@ -1509,6 +1508,7 @@ function renderDesignReviewConfirmModal(state) {
     }
     modal.appendChild(footer);
     overlay.appendChild(modal);
+    state.overlayElement = overlay;
     document.body.appendChild(overlay);
 }
 function renderApiKeyNotConfiguredContent() {
@@ -1594,16 +1594,26 @@ function renderApiKeyConfiguredContent(state) {
 // ============================================================================
 function renderSettingsPopover(state) {
     const { position, accentColor } = state.options;
-    const color = CSS_COLORS.textSecondary;
     const popover = document.createElement('div');
     popover.setAttribute('data-devbar', 'true');
-    // Position based on devbar position
+    popover.setAttribute('data-devbar-overlay', 'true');
+    // Position: centered over the devbar on desktop, centered on screen on mobile
     const isTop = position.startsWith('top');
-    const isRight = position.includes('right');
+    const popoverWidth = 480;
+    const edgePad = 16;
+    let leftPx;
+    if (state.container && window.innerWidth > 640) {
+        const barRect = state.container.getBoundingClientRect();
+        const barCenter = barRect.left + barRect.width / 2;
+        leftPx = Math.max(edgePad, Math.min(barCenter - popoverWidth / 2, window.innerWidth - popoverWidth - edgePad));
+    }
+    else {
+        leftPx = Math.max(edgePad, (window.innerWidth - popoverWidth) / 2);
+    }
     Object.assign(popover.style, {
         position: 'fixed',
         [isTop ? 'top' : 'bottom']: '70px',
-        [isRight ? 'right' : 'left']: isRight ? '16px' : '80px',
+        left: `${leftPx}px`,
         zIndex: '10003',
         backgroundColor: 'var(--devbar-color-bg-elevated)',
         border: `1px solid ${accentColor}`,
@@ -1611,13 +1621,42 @@ function renderSettingsPopover(state) {
         boxShadow: `0 8px 32px rgba(0, 0, 0, 0.5), 0 0 0 1px ${accentColor}33`,
         backdropFilter: 'blur(8px)',
         WebkitBackdropFilter: 'blur(8px)',
-        minWidth: '240px',
-        maxWidth: '280px',
+        width: `${popoverWidth}px`,
+        maxWidth: 'calc(100vw - 32px)',
         maxHeight: 'calc(100vh - 100px)',
         overflowY: 'auto',
         fontFamily: FONT_MONO,
     });
-    // Header
+    popover.appendChild(createSettingsHeader(state));
+    // Two-column grid for settings sections (collapses to 1 column on mobile via CSS)
+    const grid = document.createElement('div');
+    grid.className = 'devbar-settings-grid';
+    Object.assign(grid.style, {
+        display: 'grid',
+        gridTemplateColumns: '1fr 1fr',
+    });
+    // Left column: Theme + Display
+    const color = CSS_COLORS.textSecondary;
+    const leftCol = document.createElement('div');
+    Object.assign(leftCol.style, { borderRight: `1px solid ${color}20` });
+    leftCol.appendChild(createThemeSection(state));
+    leftCol.appendChild(createDisplaySection(state));
+    grid.appendChild(leftCol);
+    // Right column: Features + Metrics
+    const rightCol = document.createElement('div');
+    rightCol.appendChild(createFeaturesSection(state));
+    rightCol.appendChild(createMetricsSection(state));
+    grid.appendChild(rightCol);
+    popover.appendChild(grid);
+    popover.appendChild(createResetSection(state));
+    state.overlayElement = popover;
+    document.body.appendChild(popover);
+}
+// ============================================================================
+// Settings Popover Section Builders
+// ============================================================================
+function createSettingsHeader(state) {
+    const { accentColor } = state.options;
     const header = document.createElement('div');
     Object.assign(header.style, {
         display: 'flex',
@@ -1634,20 +1673,15 @@ function renderSettingsPopover(state) {
     Object.assign(title.style, { color: accentColor, fontSize: '0.75rem', fontWeight: '600' });
     title.textContent = 'Settings';
     header.appendChild(title);
-    const closeBtn = createStyledButton({
-        color: CSS_COLORS.textMuted,
-        text: '\u00D7',
-        padding: '2px 6px',
-        fontSize: '0.875rem',
-    });
-    closeBtn.style.border = 'none';
-    closeBtn.onclick = () => {
+    header.appendChild(createCloseButton(() => {
         state.showSettingsPopover = false;
         state.render();
-    };
-    header.appendChild(closeBtn);
-    popover.appendChild(header);
-    // ========== THEME SECTION ==========
+    }));
+    return header;
+}
+function createThemeSection(state) {
+    const { accentColor } = state.options;
+    const color = CSS_COLORS.textSecondary;
     const themeSection = createSettingsSection('Theme');
     const themeOptions = document.createElement('div');
     Object.assign(themeOptions.style, { display: 'flex', gap: '6px' });
@@ -1673,8 +1707,11 @@ function renderSettingsPopover(state) {
         themeOptions.appendChild(btn);
     });
     themeSection.appendChild(themeOptions);
-    popover.appendChild(themeSection);
-    // ========== DISPLAY SECTION ==========
+    return themeSection;
+}
+function createDisplaySection(state) {
+    const { accentColor } = state.options;
+    const color = CSS_COLORS.textSecondary;
     const displaySection = createSettingsSection('Display');
     // Position mini-map selector
     const positionRow = document.createElement('div');
@@ -1697,6 +1734,7 @@ function renderSettingsPopover(state) {
         border: `1px solid ${color}30`,
         borderRadius: '4px',
     });
+    // Position indicator styles - rectangular bars representing DevBar
     const positionConfigs = [
         { value: 'top-left', style: { top: '6px', left: '6px' }, title: 'Top Left' },
         { value: 'top-right', style: { top: '6px', right: '6px' }, title: 'Top Right' },
@@ -1807,8 +1845,11 @@ function renderSettingsPopover(state) {
     });
     accentRow.appendChild(colorSwatches);
     displaySection.appendChild(accentRow);
-    popover.appendChild(displaySection);
-    // ========== FEATURES SECTION ==========
+    return displaySection;
+}
+function createFeaturesSection(state) {
+    const { accentColor } = state.options;
+    const color = CSS_COLORS.textSecondary;
     const featuresSection = createSettingsSection('Features');
     featuresSection.appendChild(createToggleRow('Screenshot Button', state.options.showScreenshot, accentColor, () => {
         state.options.showScreenshot = !state.options.showScreenshot;
@@ -1825,8 +1866,58 @@ function renderSettingsPopover(state) {
         state.settingsManager.saveSettings({ showTooltips: state.options.showTooltips });
         state.render();
     }));
-    popover.appendChild(featuresSection);
-    // ========== METRICS SECTION ==========
+    // Save location selector
+    const saveLocRow = document.createElement('div');
+    Object.assign(saveLocRow.style, { marginBottom: '6px' });
+    const saveLocLabel = document.createElement('div');
+    Object.assign(saveLocLabel.style, {
+        color: CSS_COLORS.text,
+        fontSize: '0.6875rem',
+        marginBottom: '6px',
+    });
+    saveLocLabel.textContent = 'Save Method';
+    saveLocRow.appendChild(saveLocLabel);
+    const saveLocOptions = document.createElement('div');
+    Object.assign(saveLocOptions.style, { display: 'flex', gap: '6px' });
+    const saveLocChoices = [
+        { value: 'auto', label: 'Auto' },
+        { value: 'download', label: 'Download' },
+        { value: 'local', label: 'Local' },
+    ];
+    saveLocChoices.forEach(({ value, label }) => {
+        const btn = document.createElement('button');
+        const isActive = state.options.saveLocation === value;
+        const isLocalDisabled = value === 'local' && !state.sweetlinkConnected;
+        Object.assign(btn.style, {
+            padding: '4px 10px',
+            backgroundColor: isActive ? `${accentColor}20` : 'transparent',
+            border: `1px solid ${isActive ? accentColor : `${color}40`}`,
+            borderRadius: '4px',
+            color: isActive ? accentColor : color,
+            fontSize: '0.625rem',
+            cursor: isLocalDisabled ? 'not-allowed' : 'pointer',
+            transition: 'all 150ms',
+            opacity: isLocalDisabled ? '0.5' : '1',
+        });
+        btn.textContent = label;
+        if (isLocalDisabled) {
+            btn.title = 'Sweetlink not connected';
+        }
+        btn.onclick = () => {
+            if (isLocalDisabled)
+                return;
+            state.options.saveLocation = value;
+            state.settingsManager.saveSettings({ saveLocation: value });
+            state.render();
+        };
+        saveLocOptions.appendChild(btn);
+    });
+    saveLocRow.appendChild(saveLocOptions);
+    featuresSection.appendChild(saveLocRow);
+    return featuresSection;
+}
+function createMetricsSection(state) {
+    const { accentColor } = state.options;
     const metricsSection = createSettingsSection('Metrics');
     const metricsToggles = [
         { key: 'breakpoint', label: 'Breakpoint' },
@@ -1853,8 +1944,10 @@ function renderSettingsPopover(state) {
             state.render();
         }));
     });
-    popover.appendChild(metricsSection);
-    // ========== RESET SECTION ==========
+    return metricsSection;
+}
+function createResetSection(state) {
+    const color = CSS_COLORS.textSecondary;
     const resetSection = document.createElement('div');
     Object.assign(resetSection.style, {
         padding: '10px 14px',
@@ -1876,9 +1969,7 @@ function renderSettingsPopover(state) {
         state.applySettings(defaults);
     };
     resetSection.appendChild(resetBtn);
-    popover.appendChild(resetSection);
-    state.overlayElement = popover;
-    document.body.appendChild(popover);
+    return resetSection;
 }
 // ============================================================================
 // Settings UI Helpers