components/statusbar.js

class CustomStatusbar extends HTMLElement {
    static get observedAttributes() {
        return ['message'];
    }
    
    constructor() {
        super();
        this._message = 'Ready';
    }
    
    attributeChangedCallback(name, oldValue, newValue) {
        if (name === 'message') {
            this._message = newValue;
            this.render();
        }
    }
    
    connectedCallback() {
        this.render();
    }
    
    render() {
        this.attachShadow({ mode: 'open' });
        this.shadowRoot.innerHTML = `
            <style>
                .statusbar {
                    height: 24px;
                    background-color: var(--statusbar-bg, #1E293B);
                    color: var(--statusbar-text, #F8FAFC);
                    border-top: 1px solid var(--statusbar-border, #334155);
                    display: flex;
                    align-items: center;
                    padding: 0 16px;
                    font-size: 0.75rem;
                }
                
                .status-item {
                    margin-right: 16px;
                    display: flex;
                    align-items: center;
                    gap: 4px;
                }
                
                .status-icon {
                    width: 12px;
                    height: 12px;
                }
            </style>
            <div class="statusbar">
                <div class="status-item">
                    <i data-feather="info" class="status-icon"></i>
                    <span>${this._message}</span>
                </div>
                <div class="status-item ml-auto">
                    <i data-feather="git-branch" class="status-icon"></i>
                    <span>main</span>
                </div>
                <div class="status-item">
                    <i data-feather="cpu" class="status-icon"></i>
                    <span>0 errors</span>
                </div>
                <div class="status-item">
                    <i data-feather="clock" class="status-icon"></i>
                    <span>UTF-8</span>
                </div>
                <div class="status-item">
                    <i data-feather="corner-right-down" class="status-icon"></i>
                    <span>LF</span>
                </div>
            </div>
        `;
        feather.replace();
    }
}
customElements.define('custom-statusbar', CustomStatusbar);