`;
// Tab switching
const tabs = this.shadowRoot.querySelectorAll('.tab');
const contents = this.shadowRoot.querySelectorAll('.tab-content');
tabs.forEach(tab => {
tab.addEventListener('click', () => {
tabs.forEach(t => t.classList.remove('active'));
contents.forEach(c => c.classList.remove('active'));
tab.classList.add('active');
const tabId = tab.getAttribute('data-tab');
this.shadowRoot.getElementById(`${tabId}-content`).classList.add('active');
feather.replace();
});
});
// Proxy toggle
const proxyToggle = this.shadowRoot.getElementById('proxy-toggle');
const proxySettings = this.shadowRoot.getElementById('proxy-settings');
proxyToggle.addEventListener('change', () => {
proxySettings.classList.toggle('hidden', !proxyToggle.checked);
});
// URL navigation
const urlInput = this.shadowRoot.getElementById('url-input');
const goButton = this.shadowRoot.getElementById('go-button');
const handleNavigation = () => {
const url = urlInput.value.trim();
const useProxy = proxyToggle.checked;
if (url) {
this.dispatchEvent(new CustomEvent('navigate', {
detail: { url, useProxy },
bubbles: true,
composed: true
}));
}
};
goButton.addEventListener('click', handleNavigation);
urlInput.addEventListener('keypress', (e) => {
if (e.key === 'Enter') handleNavigation();
});
feather.replace();
}
}
customElements.define('custom-tabs', CustomTabs);