From 61e5cbd4e539e552f3104af90bc30ad5ad46bd71 Mon Sep 17 00:00:00 2001
From: Stijnus <private.winters.bf3@gmail.com>
Date: Sun, 31 Aug 2025 19:37:09 +0200
Subject: [PATCH] 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
---
 app/components/sidebar/Menu.client.tsx |  7 +++++--
 app/components/ui/SettingsButton.tsx   | 17 +++++++++++++++++
 2 files changed, 22 insertions(+), 2 deletions(-)

diff --git a/app/components/sidebar/Menu.client.tsx b/app/components/sidebar/Menu.client.tsx
index f0e975e..2bbdcc8 100644
--- a/app/components/sidebar/Menu.client.tsx
+++ b/app/components/sidebar/Menu.client.tsx
@@ -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>
diff --git a/app/components/ui/SettingsButton.tsx b/app/components/ui/SettingsButton.tsx
index 0c2bde0..4438f87 100644
--- a/app/components/ui/SettingsButton.tsx
+++ b/app/components/ui/SettingsButton.tsx
@@ -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"
+    />
+  );
+});