Improve UI usability for new users

[gio-moros]

• Simplify navigation: reduce 10 tabs to 5 main + dropdown menu
• Add 'Getting Started' banner on dashboard for empty state
• Enhance empty states with clear CTAs and helpful tips
• Improve visual hierarchy with better spacing and gradients
• Add responsive navigation that hides labels on s
  This pull request introduces significant improvements to the navigation and onboarding experience of the application, as well as visual enhancements for empty states. The main changes include a new responsive navigation bar with a dropdown for less frequently used views, a "Getting Started" banner for new users on the dashboard, and improved styling and messaging for empty states such as the rig list.

Navigation Improvements:

• Refactored the main navigation in index.html to use a responsive design: primary views remain as tabs, while less-used views (like Crews, Formulas, PRs, Issues, Mail, and Health) are grouped under a "More" dropdown menu. This improves usability on smaller screens and declutters the main navigation. (index.html [1] css/layout.css [2]
• Updated navigation logic in js/app.js to support the new dropdown, including event handlers for opening/closing the dropdown and switching views when dropdown items are clicked. Active tab highlighting is now applied to both tabs and dropdown items. (js/app.js js/app.jsL217-L238)

Onboarding and Empty State Enhancements:

• Added a "Getting Started" banner to the dashboard that appears when there are no rigs, convoys, or work items. The banner provides step-by-step onboarding instructions and call-to-action buttons for adding a rig or viewing the setup guide. (js/components/dashboard.js [1] [2] css/components.css [3]
• Improved the empty state for the rig list with a more visually appealing design, clearer messaging, and a prominent button to add a new rig. (js/components/rig-list.js [1] css/components.css [2]

Styling and Responsiveness:

• Added new CSS classes and media queries for the navigation dropdown, getting started banner, and enhanced empty state visuals, ensuring a consistent and responsive user experience across devices. (css/layout.css [1] css/components.css [2] [3]

Minor Dashboard Cleanups:

• Removed redundant comments and slightly reorganized the dashboard layout code for clarity. (js/components/dashboard.js [1] [2] [3]

These changes collectively make the app easier to navigate, more welcoming for new users, and visually more polished, especially in scenarios where there is no data yet.maller screens

[web3dev1337]

Thanks for that @gio-moros , will have a look at this, sorry it took a bit!

[web3dev1337]

Merged follow-up fixes into this branch (pr/13-ui-usability) in commit ea93027.

What was fixed:

• fixed dashboard parse break by closing renderGettingStarted() in js/components/dashboard.js
• fixed modal wiring for dynamically rendered buttons by switching to delegated [data-modal-open] handling in js/components/modals.js
• improved dropdown navigation state in js/app.js so More is marked active when a dropdown view is selected
• added a mirrored unread badge on More in index.html + js/app.js so important mail signal is still visible

Validation:

• node --check js/components/dashboard.js
• node --check js/components/modals.js
• node --check js/app.js

I also re-ran visual captures before/after during verification.

Thanks for the original usability pass — this keeps your direction and removes the merge blockers.

[web3dev1337]

Merged @gio-moros ty!

[web3dev1337]

Let me know if all good @gio-moros

[web3dev1337]

Follow-up stabilization is now tracked in PR #17:
#17

This carries the post-PR13 fixes into master (UI/runtime fix + nav/modal behavior + e2e alignment) and includes the 0.9.5 version bump for release.

[web3dev1337]

Update: the stabilization follow-up has been merged to master via PR #17 and released.

• Merge commit on master: b375753
• Release: https://github.com/web3dev1337/gastown-gui/releases/tag/v0.9.5

Thanks again for the usability push — this ships it in a stable, tested state.