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 { 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>
|
||||||
|
|||||||
@@ -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