[hackathon] ui upgrades and fixes

[alve-crabnebula]

This PR is inspired by the design crit I and @parker-crabnebula did today

Changes;

• Upgrades and tweaks visuals (Toolbars, header, footer, Sources tab, tabs)
• Merges re-used tailwind classes
• Moves the Connect button and disconnect to the bottom for space efficiency
• Added tab icons
• Moved loading spinner into a single component
• Fixed link dragging on labels when intending to click instead
• Renamed: Sources -> Project Directory
• Renamed: Tauri -> Tauri Config
• Gutters are now smaller
• Optimized background, 44% smaller image, no blur filter, loaded immediately from index
• Fixed text overflow issues in hierarchy
• Filetrees/Hiarchys now consistent

Suggestions (Diden't have time to fix):

• Deprecate the Loading spinner component and inline that as static css in the Index file, that way we can display a loading status before and during loading and bootstraping solid.... (No tailwind classes, as that depends on solid, maybe fix?)
• Centering file icons (slight offset on folder, and empty file)
• Change calls icon
• Text wrapping on code blocks, possibly make that a user preference to wrap lines
• Sort folder items first

[netlify[bot]]

✅ Deploy Preview for cn-devtools-app ready!

Name	Link
🔨 Latest commit	d2258d6032489c23c6ccb6fd340b33b2145f4b37
🔍 Latest deploy log	https://app.netlify.com/sites/cn-devtools-app/deploys/660bf83308975900084b53f5
😎 Deploy Preview	https://deploy-preview-256--cn-devtools-app.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[atila-crabnebula]

I have 3 little nitpicks on it I'd love your opinion on:

1. the place where "Connected" is at is a tough one, it gets often overlapped by browser inlay hints

Though it doesn't mess up usability, it is a bit distracting (imho) and doesn't really look great. Our UI is busy as it is, so I'm not sure I have a better solution. The green circle on the top right was very confusing with the Mac window buttons as well.

2. The icon on the right of Tauri Configs doesn't tell me much. As a matter of fact, it's a bit far and before the key, which suggests me it will do something, but it doesn't. I think this is a step back from the small ? that, to me, was successful in implying a tooltip would show up on hover, since that's a common pattern.

3. I remembered you suggested renaming Tauri Config tab to just Config. I really liked that idea, since we only work for Tauri right now (and anytime that tab is an option, it will be in the context of connected to an app. I think "Tauri Config" is redundant, specially with the icon. So I really liked the idea of naming it "Config" 😊

[parker-crabnebula]

@atila-crabnebula

1. I do see what you mean about inlay hints. This "Connected" status is just a reminder though - we show people a modal when they are disconnected and it's kind of "in your face". We made a proposal for making that a little softer, but the user flow is still that they will know when they are disconnected. And the inlay hints don't show up very often - just when a user is attempting something else.

2. I don't know anything about this change. Maybe @alve-crabnebula can chime in here.

3. When shortening some names and then also realizing that we may need a "Settings" page at some point, we thought it was important to add that context back in. Icons are helpful, but are not actually part of the title - someone may not recognize it or even see it clearly. In the future as we build support for other frameworks or app types, the tab content would be very different and the tab name can reflect it.

[alve-crabnebula]

The icon on the right of Tauri Configs doesn't tell me much. As a matter of fact, it's a bit far and before the key, which suggests me it will do something, but it doesn't. I think this is a step back from the small ? that, to me, was successful in implying a tooltip would show up on hover, since that's a common pattern.

So, I didn't get to fully complete the changes I wanted to do in the Tauri Configs tab, so a bit of a work in progress, I could do that as a separate PR