My Home Assistant | Home Assistant | Page 1

rigid belfry May 15, 2025, 2:17 AM

#

Chat about https://my.home-assistant.io !

My Home Assistant

Link to specific pages in your Home Assistant instance.

lavish peak May 16, 2025, 1:49 AM

#

👋 so, for https://github.com/home-assistant/my.home-assistant.io/pull/541 do we want to create a new 'format:check' script and then have the ci step call that? Or maybe the ci step itself could just call prettier directly?

GitHub

Add 'format' script by harrisonhjones · Pull Request #541 · home-...

Pretty simple change. Added a basic format script to package.json and then ran it (without any other modifications) with yarn run format. If y'all are ok with this change I'd be hap...

rigid belfry May 16, 2025, 1:50 AM

#

let's include it in existing ci.yml

lavish peak May 16, 2025, 2:01 AM

#

Ok, so no new package.json script? I can do that

rigid belfry May 16, 2025, 2:08 AM

#

yeah I was btw thinking, should we include prettier in dev deps instead of just relying on npx

lavish peak May 16, 2025, 12:07 PM

#

I believe it's already there: https://github.com/home-assistant/my.home-assistant.io/blob/4d1e61ce14fd6580c3456f04d51de986d579319a/package.json#L29

GitHub

my.home-assistant.io/package.json at 4d1e61ce14fd6580c3456f04d51de9...

The portal to your home. Contribute to home-assistant/my.home-assistant.io development by creating an account on GitHub.

rigid belfry May 16, 2025, 12:59 PM

#

oh right. Well then we don't need to call npx right ? as that pulls it in

lavish peak May 16, 2025, 4:16 PM

#

I don't think so, I'll test and send out a PR

lavish peak May 17, 2025, 5:26 PM

#

npx is the recommended way to run it via https://prettier.io/docs/install

Install · Prettier

First, install Prettier locally:

#

@rigid belfry when you've got time, the CI PR: https://github.com/home-assistant/my.home-assistant.io/pull/551

GitHub

Add format:check script and use it in the CI by harrisonhjones · P...

As discussed on discord: #1372397454099611678 message
Changes:

Updated package.json:
To add a new format:check script that calls prettier...

rigid belfry May 17, 2025, 8:22 PM

#

left a comment, otherwise looks great

lavish peak May 17, 2025, 9:28 PM

#

Responded 🙂 thanks for the feedback

lavish peak May 17, 2025, 9:49 PM

#

Excited to work on the "choose from multiple instances" next

sinful lake May 19, 2025, 6:33 PM

#

I can help test this. I just setup a second instance over the weekend.

lavish peak May 19, 2025, 6:46 PM

#

Would folks be open to adding an (optional) name to their instances here? To be either rendered (as a list) as:

Name
URL

or the inverse:

URL
Name

(I prefer the first)

If no name then it just renders as:

URL

#

Or maybe, to keep it consistent:

URL
Name

#

The last one keeps things consistent between instances with names and those without

sinful lake May 19, 2025, 7:03 PM

#

Would be beneficial for users that have multiple instances that are using nabu casa cloud domains https://[random letters].ui.nabu.casa.

lavish peak May 19, 2025, 7:03 PM

#

yea, that was my thought

#

Or I have some instances that I access via TailScale, local, and remote depending on how i'm online at the moment

#

It would also be neat if instances allowed CORS calls from my.home-assistant.io so we could query the instance for info like version and stuff

rigid belfry May 19, 2025, 7:52 PM

#

We can’t have unauthenticated data accessible for My as that means accessible to the whole world. Also instances without https are blocked from being reached from website served with https

#

Name is possible but should not be mandatory for single url users

#

For most users, the url is just default and it all works

#

Multiple instances is ok but it should not get in the way of the common single url case

lavish peak May 19, 2025, 8:40 PM

#

I'm aligned with all of that. Will incorporate into my impl

lavish peak May 22, 2025, 1:56 AM

#

Ok, I made some time tonight to work on this. I'm starting with basic styling since that's the hard part (for me). I tried using a <md-list> and <md-list-item> but couldn't get it to look "good". Thoughts @rigid belfry et al:

rigid belfry May 22, 2025, 1:56 AM

#

you could have a pencil instead of chevron

lavish peak May 22, 2025, 1:57 AM

#

I was imaginging the pencil to be a bulk edit and the cheron was pulled from a screenshot you posted in https://github.com/home-assistant/my.home-assistant.io/pull/294/files

GitHub

Allow defining multiple instances by ludeeus · Pull Request #294 ...

#

but yea, we could do an in-place edit

#

either works for me. It complicates the "how do I add a new one" story a bit tho

#

I can also just remove the chevron entirely

rigid belfry May 22, 2025, 2:03 AM

#

Pencil -> use JavaScript prompt 😄

#

hm guess that won't show option to delete

#

I think that the problem with bulk update is it becomes so busy. as we also have delete option

lavish peak May 22, 2025, 2:04 AM

#

Yea. I think we should have two screens:

List of clickable links with a single "edit" button
Edit screen with all links modifyable and a single "save" button and N "trash" button

#

But, yea, it gets busy

rigid belfry May 22, 2025, 2:05 AM

#

This is the current UI

lavish peak May 22, 2025, 2:06 AM

#

yea, you could argue the pencil is on both the "HOME ASSISTANT INSTANCE" line and the actual URL line

rigid belfry May 22, 2025, 2:06 AM

#

Yeah

#

So what if we just copy paste that whole row multiple times ?

#

and you can even make that text your name label later

lavish peak May 22, 2025, 2:06 AM

#

we could but then where do we put the "new" instance button?

#

I'm happy to mock up several options

#

if we can settle on a few

rigid belfry May 22, 2025, 2:07 AM

#

Text link at the bottom "Add instance" ? (not capitalized)

#

From voice assistant page in HA

lavish peak May 22, 2025, 2:08 AM

#

give me a sec

#

#

or we could add a "+" next to "HOME ASSISTANT INSTANCES"

#

let me mock that rq

#

#

Something like that? I can't seem to get the <md-button> to style right

#

With the "+" added

rigid belfry May 22, 2025, 2:24 AM

#

#

What about this ?

lavish peak May 22, 2025, 2:24 AM

#

Do you want "HOME ASSISTANT INSTANCE" to be duplicated?

rigid belfry May 22, 2025, 2:25 AM

#

Yeah, it makes it clear that each one is an instance, and we can allow renaming that later too

lavish peak May 22, 2025, 2:25 AM

#

Yea, I can do that, I think 🙂

#

But not tonight! Will work on it when I can. Thanks for the mockup

rigid belfry May 22, 2025, 2:26 AM

#

<my-instance-info> would just need to be wrapped by another component I think

#

that does the multiple instance + add button

#

and then if you have more than 1 URL, editing should also show a trash icon I think. ?

lavish peak May 22, 2025, 2:26 AM

#

yea, unfortunately, I am hitting a decent learning curve with this FE framework. I'm just so used to react.

#

yes, I think editing should show the trash icon

rigid belfry May 22, 2025, 2:27 AM

#

haha well you're lucky as the My website is a work of art 😄

#

Bram and I were focusing on making the most performant website

lavish peak May 22, 2025, 2:27 AM

#

it's certainly... functional

rigid belfry May 22, 2025, 2:27 AM

#

So it's 95% static

lavish peak May 22, 2025, 2:27 AM

#

🙂

rigid belfry May 22, 2025, 2:27 AM

#

with only small web components sprinkled in

lavish peak May 22, 2025, 2:27 AM

#

yea, I get that. Just not used to it. I'm figuring my way around it tho

#

Related to performance: if you import the google font library you get icons "for free". You can even specify which icons to cut down on bundle size

#

Thoughts on that over storing the svgs?

#

I guess we already haev the trash icon so no reason to complicate things

#

maybe nvm then

rigid belfry May 22, 2025, 2:29 AM

#

font is way big

#

as it contains all the icons

#

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>delete-outline</title><path d="M6,19A2,2 0 0,0 8,21H16A2,2 0 0,0 18,19V7H6V19M8,9H16V19H8V9M15.5,4L14.5,3H9.5L8.5,4H5V6H19V4H15.5Z" /></svg>

#

that's the trash icon 😄 that is tiny to include in your code

lavish peak May 22, 2025, 2:33 AM

#

For sure. Will keep that in

lavish peak May 24, 2025, 12:23 AM

#

ok, here's where I am at, matches your mockup fairly closely. 🙂

lavish peak May 24, 2025, 1:57 AM

#

@rigid belfry et al: need your input here. here's what I've come up with for when you click the "edit" pencil. I tried using the trash icon but it made the button very large compared to the same button. If we wanted to keep the trash icon I think we'll want to come up with an alternate icon for the "save" button and use two icons instead of one text and one icon. Thoughts?

#

Alternately we could put the trash icon next to the pencil but I think that might lead people to accidently deleting their instances

#

In other apps I'd use a modal for Editting but idk how we'd do that here w/o a ton of work

#

Ok, it looks like <md-dialog> does exist but I cannot figure out how you open/close it via JS 😦

#

Ok, super rough, but here's an alternate CX:

#

Let me know which (if any) you want to go with

rigid belfry May 24, 2025, 5:29 AM

#

Dialog is good don’t forget mobile 😄

lavish peak May 25, 2025, 6:03 PM

#

@rigid belfry et al: my WIP is in a place/state for a review: https://github.com/home-assistant/my.home-assistant.io/pull/554 and https://deploy-preview-554--my-home-assistant.netlify.app/

GitHub

WIP - Select from multiple instances by harrisonhjones · Pull Requ...

This is a work in progress. I have not:

Updated the redirect.ts file to it actually works
Fixed the CSS so links look light blue as expected
Moved CSS from inline style= to a central location
Revi...

My Home Assistant

Link to a specific pages in your Home Assistant instances.

lavish peak May 28, 2025, 12:43 AM

#

Alright, I've moved on to the redirect page. How do we want to handle this page?

#

Do we want to replace the "Your Instance URL" with a dropdown? Or render something entirely else?

#

Like this?

#

Maybe only render the dropdown if you have multiple instances? That would be fairly easy to do

rigid belfry May 28, 2025, 2:20 AM

#

definitely only do something else if we have multiple instances

#

one option could be to use this navigation style for each instance

lavish peak May 28, 2025, 10:31 AM

#

I thought about something like that - you mentioned it in the original pr - but I think it's too large of a departure from what we have now. I think we could move in that direction ultimately but I don't want to mix it up with this (already large) pr. I recommend the following:

Use a drop-down
Save the last selected drop-down index value to local storage so it's automatically selected next time

This would largely be a drop in replacement for what we have now on that page

rigid belfry May 28, 2025, 10:51 AM

#

Ok sounds good

lavish peak May 29, 2025, 12:11 AM

#

Just when I think I understand what's going on w/r/t lit

#

I look at my-redirect.ts

lavish peak May 29, 2025, 12:29 AM

#

Ok, we need to decide what we want to do w/r/t the "edit" icon next to the dropdown. Does it still make sense to allow the user to edit their instances while still preserving the redirect? If so, what happens after they edit their isntance? Do we show them some kind of "back to redirect" UX?

lavish peak May 29, 2025, 12:49 AM

#

@rigid belfry are y'all ok with me re-writing my-redirect.ts to be more consistent with the other lit-based pages and less about using direct JS manipulation (eg, "document.assign")?

#

Now that I've looked at the code base a bit closer I think the original navigation style is more possible but if we want to go that route we need to figure out how we want to do it.

#

If we did go that style where do we put the edit icon?

rigid belfry May 29, 2025, 1:10 AM

#

so my-redirect.ts is optimized to load as fast as possible

#

what you're proposing would make it more slower right ?

#

heh, that code is a piece of art 😄

#

if you want to change most of the other code, you're going to end up with a bunch of testing, as that's the OAuth2 flow too

#

You just want to change https://github.com/home-assistant/my.home-assistant.io/blob/main/src/entrypoints/my-redirect.ts#L112-L121 right

#

if it's 1 instance, just keep current code. If 2+, set changeInstanceEl to be a dropdown. Maybe global variable to track "instanceIndex" that is passed ot getInstanceUrl(instanceIndex). When dropdown changed, set instanceIndex and call getInstanceUrl

#

there is a lot of edge cases being handled in that code, you really don't want to change the rendering there

#

things like mobile app taking over, back button behavior in different browsers, etc

#

one of the things that happened is that if you hit "edit" on your instance on a redirect, you go to the edit page, hit save and you are redirected to your redirect page

#

but using the back button, so the page needs to rerender (detected with event.persisted)

lavish peak May 29, 2025, 1:17 AM

#

yea, as I contuined to read that file my eyes grew wider

#

I think we should re-consider the navigation style. Let me mock something up

rigid belfry May 29, 2025, 1:20 AM

#

which navigation style

#

I like your dropdown idea, it's nice and simple

lavish peak May 29, 2025, 1:20 AM

#

the one you posted earlier

#

so do I but it complicate the in-line edit option

rigid belfry May 29, 2025, 1:20 AM

#

I don't think so

#

just create a select element, with an option element per instance

#

listen to change event on the select

#

and get the selectedIndex

lavish peak May 29, 2025, 1:21 AM

#

yep, yep, got that

#

but what happens when you click "edit"?

#

I guess I could add the edit dialog

rigid belfry May 29, 2025, 1:22 AM

#

I think that we should no longer autmatically just return back, because a user might want to add a 2nd instance etc

lavish peak May 29, 2025, 1:22 AM

#

If that's the case I'm onboard

rigid belfry May 29, 2025, 1:22 AM

#

so instead, we could maybe just add a "Return to redirect" bar ?

lavish peak May 29, 2025, 1:22 AM

#

I can work with that 🙂

rigid belfry May 29, 2025, 1:22 AM

#

something like that https://design.home-assistant.io/#components/ha-alert

lavish peak May 29, 2025, 1:22 AM

#

not tonight

rigid belfry May 29, 2025, 1:23 AM

#

How do you like Lit so far? 😄

lavish peak May 29, 2025, 1:23 AM

#

it's certainly interesting. I've grown not to hate it

#

I could still work 1000% faster in React but I see why y'all don't want to use it

rigid belfry May 29, 2025, 1:23 AM

#

only a release or 2 ago did we remove the last Polymer element from our frontend codebase

#

that was the first framework I used when I started the frontend

#

web components can live alongside each other, without having to rely on the exact same framework.

#

Which means we've been slowly adopting new elements in newer frameworks

#

and which has allowed us to keep moving as a frontend and not get into tech debt hell

#

yes, we can have 3 different web component frameworks loaded, but that's still smaller than 1 React + React-DOM

#

(And faster!)

lavish peak May 29, 2025, 1:25 AM

#

I personally love tech debt hell; pretty much born there, molded there

#

but yea, react ain't fast

rigid belfry May 29, 2025, 1:25 AM

#

haha

#

nothing wrong with cleaning up, but let's not pick tech choices so we have more things to clean up 🤣

lavish peak May 29, 2025, 1:26 AM

#

oh yea, I def don't want to push something y'all don't want

rigid belfry May 29, 2025, 1:26 AM

#

we had some Preact in there back in the days, but we ripped it out, it was too different

lavish peak May 29, 2025, 1:26 AM

#

I do wish my-rediect was more similar to the other entrypoints

#

but I get it

rigid belfry May 29, 2025, 1:26 AM

#

you ever read https://developers.home-assistant.io/blog/2019/05/22/internet-of-things-and-the-modern-web/ from 6 (!!) years ago ?

#

I also recently discussed our frontend in the Syntax podcast with Wes Bos https://syntax.fm/guest/paulus-schoutsen in case you want to understand some of my thinking more 🙂

lavish peak May 29, 2025, 1:28 AM

#

I have not but I'll put it on my reading list

#

To be clear: I'm serious when I say I've grown not to hate it. lit is growing on me. I just don't like that my-redirect is essentially not using lit while the others are. I get it; just makes making changes tough

#

So, when they click "edit" redirect to /index.html?redirect=foo and then show the "back to redirect" flash bar but also allow them to edit their instances?

rigid belfry May 29, 2025, 1:31 AM

#

yeah, but redirect=foo is not enough if there are also params

#

right, so you need the params too

lavish peak May 29, 2025, 1:32 AM

#

sure, foo was a placeholder 🙂 I'll scoop up the params as well

rigid belfry May 29, 2025, 1:32 AM

#

I think that's the best approach.

lavish peak May 29, 2025, 1:32 AM

#

I guess the same if you haven't configured any instances?

rigid belfry May 29, 2025, 1:32 AM

#

I think that if you save your first instance, let's still automatically redirect back? 😬

lavish peak May 29, 2025, 1:33 AM

#

Let me see how much work that is

#

But yea, perhaps the best UX

rigid belfry May 29, 2025, 1:33 AM

#

least amount of clicks for normal users

crimson birch Aug 13, 2025, 9:54 PM

#

Would it make sense to add a my link for the AI settings so we can potentially move it in the future without breaking all the existing links and docs?

#My Home Assistant