change_create_card_dialog.js

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 Thank you for sharing this. I seem to be missing a step.

I created local within my /config dir, and added the file change_create_card_dialog.js which contains the JS above. Then I added the URL to my configuration.yaml.

I restarted and hard refreshed the browser. Is there anything else needed?

EDIT - Thanks for the help ngocjohn - I moved the file from local to www and all works great.

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);
}