homelab-optimized/hosts/physical/concord-nuc/homeassistant/www/assist-fix.js

// Assist textfield readability — v4 targets the new ha-input / wa-input
// (Web Awesome) component stack introduced in recent HA builds.
// Old MDC selectors (mwc-textfield, mdc-text-field__input) don't apply.
(function () {
  if (window.__assistFixLoaded) return;
  window.__assistFixLoaded = true;

  function v(name, fallback) {
    const x = getComputedStyle(document.documentElement)
      .getPropertyValue(name).trim();
    return x || fallback;
  }

  function stylePiece(el, spec) {
    if (!el) return;
    for (const [k, val] of Object.entries(spec)) {
      el.style.setProperty(k, val, 'important');
    }
  }

  function patchHaInput(haInput) {
    if (!haInput || haInput.__assistFixed) return;
    const sr = haInput.shadowRoot;
    if (!sr) return;
    haInput.__assistFixed = true;

    // Colors from active theme
    const fg = v('--primary-text-color', '#e7e9f4');
    const bg = v('--card-background-color', 'rgba(22, 24, 40, 0.92)');
    const muted = v('--secondary-text-color', '#9a9cb8');
    const border = v('--divider-color', 'rgba(255,255,255,0.20)');
    const accent = v('--primary-color', '#a78bfa');

    // Style at ha-input shadow level — exported parts from wa-input
    const style = document.createElement('style');
    style.textContent = `
      :host, ::slotted(*) { color: ${fg}; }
      wa-input {
        color: ${fg};
      }
      wa-input::part(base),
      wa-input::part(wa-base) {
        background-color: ${bg} !important;
        border-color: ${border} !important;
        color: ${fg} !important;
      }
      wa-input::part(input),
      wa-input::part(wa-input) {
        color: ${fg} !important;
        caret-color: ${fg} !important;
        background-color: transparent !important;
      }
      wa-input::part(label),
      wa-input::part(form-control-label) {
        color: ${muted} !important;
      }
      wa-input::part(hint) {
        color: ${muted} !important;
      }
    `;
    sr.appendChild(style);

    // Also walk into the wa-input and patch the inner <input> directly
    const waInput = sr.querySelector('wa-input');
    if (waInput && waInput.shadowRoot) {
      const waSr = waInput.shadowRoot;
      const innerStyle = document.createElement('style');
      innerStyle.textContent = `
        :host { color: ${fg}; }
        .text-field, div.text-field {
          background-color: ${bg} !important;
          border-color: ${border} !important;
        }
        input, input.control, input[part="input"] {
          color: ${fg} !important;
          caret-color: ${fg} !important;
          background-color: transparent !important;
        }
        input::placeholder { color: ${muted} !important; opacity: 0.7 !important; }
        label, .label, label[part~="label"] {
          color: ${muted} !important;
        }
      `;
      waSr.appendChild(innerStyle);

      // Belt-and-suspenders: inline styles on the input element itself
      const input = waSr.querySelector('input');
      if (input) {
        stylePiece(input, {
          'color': fg,
          'caret-color': fg,
          'background-color': 'transparent',
        });
      }
      const base = waSr.querySelector('[part="base"], div.text-field');
      if (base) {
        stylePiece(base, {
          'background-color': bg,
          'border-color': border,
          'color': fg,
        });
      }
      const label = waSr.querySelector('[part~="label"], .label');
      if (label) {
        stylePiece(label, { 'color': muted });
      }
    }
  }

  function walkForHaInput(root, depth = 0) {
    if (!root || depth > 10) return 0;
    let found = 0;
    try {
      root.querySelectorAll('ha-input').forEach(el => { patchHaInput(el); found++; });
      // Also catch any legacy ha-textfield / mwc-textfield
      root.querySelectorAll('ha-textfield, ha-textarea, mwc-textfield, mwc-textarea, input, textarea').forEach(el => {
        // best-effort inline fix for older stack
        if (!el.__assistFixedLegacy) {
          el.style.setProperty('color', v('--primary-text-color', '#e7e9f4'), 'important');
          el.__assistFixedLegacy = true;
        }
      });
      root.querySelectorAll('*').forEach(el => {
        if (el.shadowRoot) found += walkForHaInput(el.shadowRoot, depth + 1);
      });
    } catch (e) {}
    return found;
  }

  // Initial pass
  let n = walkForHaInput(document);
  console.log('[assist-fix] v4 initial ha-input elements styled:', n);

  // Observer
  const obs = new MutationObserver(() => walkForHaInput(document));
  obs.observe(document.body || document.documentElement, {
    childList: true, subtree: true,
  });

  // Dialog-open event + periodic sweep
  window.addEventListener('show-dialog', () => {
    setTimeout(() => {
      const nn = walkForHaInput(document);
      console.log('[assist-fix] v4 after show-dialog ha-input styled:', nn);
    }, 120);
  });

  let passes = 0;
  const iv = setInterval(() => {
    const nn = walkForHaInput(document);
    if (nn > n) { console.log('[assist-fix] v4 now styled:', nn); n = nn; }
    if (++passes > 240) clearInterval(iv);
  }, 500);

  console.log('[assist-fix] v4 loaded (targets ha-input / wa-input Web Awesome stack)');
})();