Custom script to customize card-picker

Configuration
1

These changes are also quite annoying to me, That’s why I created a script. Where to avoid these unnecessary clicks, I can send it as soon as I get to my laptop.

2

That would be excellent. Thank you.

3

Here’s the script I promised… add module path to frontend extra urls

frontend:
  extra_module_url:
    - /local/change_create_card_dialog.js

It works by first switching the card picker to the ‘Card’ tab and collapsing all the panels.

CleanShot 2026-08-10 at 18.03.26

4

Brilliant! Is it possible that perhaps favorites would be expanded by default?
oh…and a small correction: you have “-” in path, but “_” in module name on github… (took me a while to figure out why it’s not working…)

5

Thank you for sharing that. Seems like a solid fix!

I must be doing something wrong, left a comment on your gist. Do you mind taking a look when you get a chance?

6

You need to save the file in the www folder…

7

Thank you for the kind hand holding. :laughing: It works great.

8

Yes, edit the toggleCardTab() function as follows:

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

and empty cache & hard reload.

9

Thanks !!! Now it’s perfect!

10

not trying to derail this thread even further… Only posting hoping some UIX ghost
will at anytime be able to do this natively

I just added

# https://gist.github.com/ngocjohn/bcd2a0b836f1d1c1a46a4f336390437c
- url: /local/resources/custom-create-card-dialog/custom-create-card-dialog.js?v=1
  type: module

to my resources.yaml, and it works fine.
no need to restart with that, opposed to the frontend method
(btw I have the manual card set as favorite, and it still opens with the manual card all the way down. suppose opening favorites by default would indeed be best, and not opening manual at the bottom?)

Scherm­afbeelding 2026-08-12 om 11.32.59
Scherm­afbeelding 2026-08-12 om 11.32.592052×1202 124 KB

11

Have you updated the script, as mentioned above? :grimacing:

CleanShot 2026-08-12 at 12.37.10

12

not yet.
I want that dynamic, following a boolean

btw I updated and added some consoling :wink:

const name = "Custom card-picker options";
const version = "1.0.1";
const description = "Fold away card options in card picker";
const repo = "https://gist.github.com/ngocjohn/bcd2a0b836f1d1c1a46a4f336390437c";
const badgeStyle =
  "color:white;background:linear-gradient(90deg,#41BDF5,#2C6ECB);padding:2px 8px;font-weight:bold;";

console.groupCollapsed(
  `%c🏠🎨 ${name} %c✨${version}`,
  badgeStyle,
  badgeStyle
);
console.log("💬", description);
console.log("📄 Readme:", repo);
console.groupEnd();

Scherm­afbeelding 2026-08-12 om 13.38.55
Scherm­afbeelding 2026-08-12 om 13.38.552208×158 69.9 KB

it now opens the favorites alright, but the bottom manual card is still there

Scherm­afbeelding 2026-08-12 om 13.41.36
Scherm­afbeelding 2026-08-12 om 13.41.362036×1606 223 KB

let me ask a mod to move this to a new thread from #526, it’s really polluting here

13

Because manual isn’t in the expansion panel…

14

Yeah, I did t even check to code yet, blindly c&pasted ..