hermes-config/skills/self-hosting/shop-pro-quote/references/settings-modal-architecture.md

Settings Modal Architecture

The settings.js initializeSettings() function expects a full tabbed settings modal with these element IDs:

Required elements

Modal shell

• settings-modal — main modal container
• settings-close-btn — close button

Tab navigation

• business-info-tab-btn, service-advisor-tab-btn, financial-tab-btn, messages-tab-btn, services-tab-btn
• Tab contents: business-info-tab, service-advisor-tab, financial-tab, messages-tab, services-tab

Save buttons

• business-info-save-btn, service-advisor-save-btn, financial-save-btn, messages-save-btn

Input fields (Business Info)

• settings-business-name, settings-business-address, settings-business-phone

Input fields (Service Advisor)

• settings-service-advisor, settings-advisor-phone

Input fields (Financial)

• tax-rate-input, settings-shop-charge, settings-shop-charge-explanation

Input fields (Messages)

• settings-header-message, settings-footer-message, settings-quote-footer-note
• settings-estimate-valid-days, settings-warranty-text, settings-terms-text
• settings-default-parts-delivery

Service management (in Services tab)

• service-search-input-settings — search within settings
• add-service-btn — opens add modal
• services-list — rendered list
• add-service-modal-settings, add-service-name, add-service-price, add-service-recommendation, add-service-explanation, ai-write-btn-add-service, add-service-save-btn, add-service-cancel-btn
• service-edit-modal-settings, service-edit-name-settings, service-edit-price-settings, service-edit-recommendation-settings, service-edit-explanation-settings, ai-write-btn-settings, service-edit-save-btn-settings, service-edit-cancel-btn-settings

Behavior

If ANY required element is missing, initializeSettings() returns early with a console error and settings-btn gets no click handler. This is why the gear icon does nothing on pages without the full modal.

Repair-orders.html fix

The repair-orders.html page had account-settings-modal (profile/preferences) and site-settings-modal (display/notifications/system) but lacked the full settings-modal. Solution: inserted the complete 5-tab modal + 2 sub-modals (add service, edit service) before the script tags. All element IDs must match exactly what settings.js expects.

Service list rendering pitfall

renderServicesList() in settings.js originally displayed only service.recommendation — it never rendered service.explanation. The data was saved to Firestore correctly but invisible in the list. Fix: add explanation display as italic text below the recommendation line.