Skip to content

Instantly share code, notes, and snippets.

@ngocjohn
Created August 10, 2026 16:00
Show Gist options
  • Select an option

  • Save ngocjohn/bcd2a0b836f1d1c1a46a4f336390437c to your computer and use it in GitHub Desktop.

Select an option

Save ngocjohn/bcd2a0b836f1d1c1a46a4f336390437c to your computer and use it in GitHub Desktop.
const getHa = () => document.querySelector('home-assistant');
const waitForDialogCreateCard = (ha, timeoutMs = 2000) =>
new Promise((resolve) => {
const find = () => ha?.renderRoot?.querySelector('hui-dialog-create-card');
const existing = find();
if (existing) return resolve(existing);
const done = (dcc) => {
observer.disconnect();
clearTimeout(timer);
resolve(dcc);
};
const observer = new MutationObserver(() => {
const dcc = find();
if (dcc) done(dcc);
});
observer.observe(ha.renderRoot, { childList: true, subtree: true });
const timer = setTimeout(() => done(null), timeoutMs);
});
const toggleExpandedPanels = (dcc, timeoutMs = 2000) =>
new Promise((resolve) => {
const find = () =>
dcc?.renderRoot
?.querySelector('hui-card-picker')
?.shadowRoot.querySelectorAll('ha-expansion-panel');
const existing = find();
if (existing) return resolve(existing);
const done = (panels) => {
observer.disconnect();
clearTimeout(timer);
resolve(panels);
};
const observer = new MutationObserver(() => {
const panels = find();
if (panels) done(panels);
});
observer.observe(dcc.renderRoot, { childList: true, subtree: true });
const timer = setTimeout(() => done(null), timeoutMs);
});
async function toggleCardTab() {
const ha = getHa();
const dcc = await waitForDialogCreateCard(ha);
if (dcc && dcc._currTab !== 'card') {
dcc._currTab = 'card';
}
setTimeout(async () => {
if (dcc && dcc._currTab === 'card') {
const panels = await toggleExpandedPanels(dcc);
console.log(panels);
if (panels) {
Array.from(panels).forEach((p) => p.removeAttribute('expanded'));
}
}
}, 0);
}
function initCardTab() {
console.info('%cInit Change Create Card Dialog', 'color: lightgreen; font-style: italic');
window.addEventListener('show-dialog', (event) => {
if (event.detail?.dialogTag !== 'hui-dialog-create-card') return;
toggleCardTab();
});
}
initCardTab();
@ngocjohn

Copy link
Copy Markdown
Author

keep favorite cards panel expanded

async function toggleCardTab() {
  const ha = getHa();
  const dcc = await waitForDialogCreateCard(ha);
  if (dcc && dcc._currTab !== 'card') {
    dcc._currTab = 'card';
  }
  setTimeout(async () => {
    if (dcc && dcc._currTab === 'card') {
      const huiCardPicker = dcc?.renderRoot?.querySelector('hui-card-picker');
      const panels = await toggleExpandedPanels(dcc);
      // console.log(huiCardPicker, panels);
      if (huiCardPicker && panels) {
        const hasFavorites = huiCardPicker?._favorites?.length > 0;
        // If there are favorites, skip the first panel (favorites) and remove the expanded attribute from the rest
        if (hasFavorites) {
          Array.from(panels).forEach((p, index) => {
            if (index > 0) p.removeAttribute('expanded');
          });
        } else {
          // If there are no favorites, remove the expanded attribute from all panels
          Array.from(panels).forEach((p) => p.removeAttribute('expanded'));
        }
      }
    }
  }, 0);
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment