feat: add help icon to sidebar linking to documentation

- Add HelpButton component with question mark icon
- Integrate help button into sidebar next to settings button
- Link opens documentation in new tab when clicked
- Maintain consistent styling with existing sidebar buttons
- Improve user accessibility to documentation resources
This commit is contained in:
Stijnus
2025-08-31 19:37:09 +02:00
parent ad4a31a406
commit 61e5cbd4e5
2 changed files with 22 additions and 2 deletions

View File

@@ -4,7 +4,7 @@ import { toast } from 'react-toastify';
import { Dialog, DialogButton, DialogDescription, DialogRoot, DialogTitle } from '~/components/ui/Dialog'; import { Dialog, DialogButton, DialogDescription, DialogRoot, DialogTitle } from '~/components/ui/Dialog';
import { ThemeSwitch } from '~/components/ui/ThemeSwitch'; import { ThemeSwitch } from '~/components/ui/ThemeSwitch';
import { ControlPanel } from '~/components/@settings/core/ControlPanel'; import { ControlPanel } from '~/components/@settings/core/ControlPanel';
import { SettingsButton } from '~/components/ui/SettingsButton'; import { SettingsButton, HelpButton } from '~/components/ui/SettingsButton';
import { Button } from '~/components/ui/Button'; import { Button } from '~/components/ui/Button';
import { db, deleteById, getAll, chatId, type ChatHistoryItem, useChatHistory } from '~/lib/persistence'; import { db, deleteById, getAll, chatId, type ChatHistoryItem, useChatHistory } from '~/lib/persistence';
import { cubicEasingFn } from '~/utils/easings'; import { cubicEasingFn } from '~/utils/easings';
@@ -525,7 +525,10 @@ export const Menu = () => {
</DialogRoot> </DialogRoot>
</div> </div>
<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-2">
<HelpButton onClick={() => window.open('https://stackblitz-labs.github.io/bolt.diy/', '_blank')} />
<SettingsButton onClick={handleSettingsClick} /> <SettingsButton onClick={handleSettingsClick} />
</div>
<ThemeSwitch /> <ThemeSwitch />
</div> </div>
</div> </div>

View File

@@ -16,3 +16,20 @@ export const SettingsButton = memo(({ onClick }: SettingsButtonProps) => {
/> />
); );
}); });
interface HelpButtonProps {
onClick: () => void;
}
export const HelpButton = memo(({ onClick }: HelpButtonProps) => {
return (
<IconButton
onClick={onClick}
icon="i-ph:question"
size="xl"
title="Help & Documentation"
data-testid="help-button"
className="text-[#666] hover:text-bolt-elements-textPrimary hover:bg-bolt-elements-item-backgroundActive/10 transition-colors"
/>
);
});