feat: move help icon from bottom to header area for better discoverability

- Moved help icon from bottom of sidebar to header area next to user profile
- Improved UX by placing help in more visible and logical location
- Follows common UI patterns where help/support is in header area
- Increases discoverability for new users
This commit is contained in:
Stijnus
2025-09-05 01:48:46 +02:00
parent 23c0a8aaae
commit e3169c358e

View File

@@ -340,6 +340,7 @@ export const Menu = () => {
<div className="h-12 flex items-center justify-between px-4 border-b border-gray-100 dark:border-gray-800/50 bg-gray-50/50 dark:bg-gray-900/50 rounded-tr-2xl"> <div className="h-12 flex items-center justify-between px-4 border-b border-gray-100 dark:border-gray-800/50 bg-gray-50/50 dark:bg-gray-900/50 rounded-tr-2xl">
<div className="text-gray-900 dark:text-white font-medium"></div> <div className="text-gray-900 dark:text-white font-medium"></div>
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<HelpButton onClick={() => window.open('https://stackblitz-labs.github.io/bolt.diy/', '_blank')} />
<span className="font-medium text-sm text-gray-900 dark:text-white truncate"> <span className="font-medium text-sm text-gray-900 dark:text-white truncate">
{profile?.username || 'Guest User'} {profile?.username || 'Guest User'}
</span> </span>
@@ -527,7 +528,6 @@ export const Menu = () => {
<div className="flex items-center justify-between border-t border-gray-200 dark:border-gray-800 px-4 py-3"> <div className="flex items-center justify-between border-t border-gray-200 dark:border-gray-800 px-4 py-3">
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<SettingsButton onClick={handleSettingsClick} /> <SettingsButton onClick={handleSettingsClick} />
<HelpButton onClick={() => window.open('https://stackblitz-labs.github.io/bolt.diy/', '_blank')} />
</div> </div>
<ThemeSwitch /> <ThemeSwitch />
</div> </div>