chore: help icon in the sidebar bottom

Author: tianzhou

frontend/src/components/Sidebar/Sidebar.tsx

@@ -1,6 +1,8 @@
 import { Link, useLocation } from 'react-router-dom';
 import Logo from './Logo';
 import SourceList from './SourceList';
+import HelpIcon from '../icons/HelpIcon';
+import HomeIcon from '../icons/HomeIcon';
 import { cn } from '../../lib/utils';
 import type { DataSource } from '../../types/datasource';
 
@@ -9,14 +11,6 @@ interface SidebarProps {
   isLoading: boolean;
 }
 
-function HomeIcon() {
-  return (
-    <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
-    </svg>
-  );
-}
-
 export default function Sidebar({ sources, isLoading }: SidebarProps) {
   const location = useLocation();
   const isHomeActive = location.pathname === '/';
@@ -38,6 +32,17 @@ export default function Sidebar({ sources, isLoading }: SidebarProps) {
         </Link>
         <SourceList sources={sources} isLoading={isLoading} />
       </nav>
+      <div className="border-t border-border px-4 py-2">
+        <a
+          href="https://dbhub.ai"
+          target="_blank"
+          rel="noopener noreferrer"
+          className="flex items-center gap-3 px-2 py-1 text-sm text-muted-foreground transition-colors hover:text-foreground cursor-pointer"
+        >
+          <HelpIcon />
+          <span>Help</span>
+        </a>
+      </div>
     </aside>
   );
 }

frontend/src/components/icons/HelpIcon.tsx

@@ -0,0 +1,11 @@
+interface HelpIconProps {
+  className?: string;
+}
+
+export default function HelpIcon({ className = 'w-5 h-5' }: HelpIconProps) {
+  return (
+    <svg className={className} fill="none" viewBox="0 0 24 24" stroke="currentColor">
+      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+    </svg>
+  );
+}

frontend/src/components/icons/HomeIcon.tsx

@@ -0,0 +1,11 @@
+interface HomeIconProps {
+  className?: string;
+}
+
+export default function HomeIcon({ className = 'w-5 h-5' }: HomeIconProps) {
+  return (
+    <svg className={className} fill="none" viewBox="0 0 24 24" stroke="currentColor">
+      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
+    </svg>
+  );
+}