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:
@@ -4,7 +4,7 @@ import { toast } from 'react-toastify';
|
||||
import { Dialog, DialogButton, DialogDescription, DialogRoot, DialogTitle } from '~/components/ui/Dialog';
|
||||
import { ThemeSwitch } from '~/components/ui/ThemeSwitch';
|
||||
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 { db, deleteById, getAll, chatId, type ChatHistoryItem, useChatHistory } from '~/lib/persistence';
|
||||
import { cubicEasingFn } from '~/utils/easings';
|
||||
@@ -525,7 +525,10 @@ export const Menu = () => {
|
||||
</DialogRoot>
|
||||
</div>
|
||||
<div className="flex items-center justify-between border-t border-gray-200 dark:border-gray-800 px-4 py-3">
|
||||
<SettingsButton onClick={handleSettingsClick} />
|
||||
<div className="flex items-center gap-2">
|
||||
<HelpButton onClick={() => window.open('https://stackblitz-labs.github.io/bolt.diy/', '_blank')} />
|
||||
<SettingsButton onClick={handleSettingsClick} />
|
||||
</div>
|
||||
<ThemeSwitch />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -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"
|
||||
/>
|
||||
);
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user