alpinejs-devtools: UI to surface Alpine.js eval errors

I think in terms of the content hierarchy I prefer the footer. Also feels like there’s more space in that layout with less at the top.

@HugoDF As you said we can totally change it if we don’t vibe that layout in practise.

The 2nd one in is my favourite. The separator is nice, but I also like the last one with the different BG colour.

cool, I would say just to watch out for the testid’s otherwise tests will fail and also to hide tabs that don’t have any content for production builds (the same way we hid the settings modal #111)

@ryangjchandler Can do 👍🏼

Unless anyone else is up for it.

I’m gonna vote for the footer version.

Subheader version will give use the opportunity to bring in a search UI maybe?

I guess they’re very similar either way (plus I’m sure we can move it around if we decide on one and end up not liking it)

Ha! Not sure about that @ryangjchandler 😆

Big yes from me on the theming setup @KevinBatdorf 👍🏼 Would be a rad addition to the settings layer.

The only concern might be the settings getting lost on the footer but see what you think:

Here’s a few footer vibes…you get the idea:

😍 could try with the status bar (Alpine.js vX.X.X detected) between the header and the main panes?

I was happy to settle for text links in the header 😄

I like them all. Divider with different BG color looks nice.

Maybe put the settings icon all the way to the right so it stands out slightly more (does it, I’m not necessarily sure)?

We can always move it later too

I like it! And rip off anything 😃

Maybe we can add a theming setup to this project eventually as well.

Looking at both, right-aligned seems nicer. Maybe we could move those three icons to the right footer as well.

Not to put the cat amongst the pigeons 😉

Here’s my take:

• The right align feels right for the top nav items
• Might be worth separating the secondary nav items to give a bit of visual/UX hierarchy
• Not wanting to just go ahead and copy the VueJs guys, but an active tab being underlined in some way when it’s in a header I reckon feels a bit cleaner
• Also not wanting to completely rip off @KevinBatdorf 😉, but I really like the footer in his inline Alpine inspector tool*. Could be a better place to put version detection being mindful that the top bar is going to fill up pretty quick when using the panel in the sidebar view. Could also become a kind of live console e.g. seeing events come in if you’re not currently in the events panel 'Click event caught from blah component` etc.

* Don’t get me started on those sweeeet looking themes 👌🏼😍