feat: add help menu (#430)

* feat: add help menu

* simplify vibe coded part

* remove irrelevant test cases

Author: kantord

renderer/src/common/components/help/__tests__/help-dropdown.test.tsx

@@ -0,0 +1,74 @@
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { HelpDropdown } from '../help-dropdown'
+
+describe('HelpDropdown', () => {
+  it('renders documentation link with correct href', async () => {
+    const user = userEvent.setup()
+    render(<HelpDropdown />)
+
+    const helpButton = screen.getByRole('button', { name: /help/i })
+    await user.click(helpButton)
+
+    const documentationLink = screen.getByRole('menuitem', {
+      name: /documentation/i,
+    })
+    expect(documentationLink).toHaveAttribute(
+      'href',
+      'https://github.com/StacklokLabs/toolhive-studio?tab=readme-ov-file#getting-started'
+    )
+    expect(documentationLink).toHaveAttribute('target', '_blank')
+    expect(documentationLink).toHaveAttribute('rel', 'noopener noreferrer')
+  })
+
+  it('renders Discord link with correct href', async () => {
+    const user = userEvent.setup()
+    render(<HelpDropdown />)
+
+    const helpButton = screen.getByRole('button', { name: /help/i })
+    await user.click(helpButton)
+
+    const discordLink = screen.getByRole('menuitem', {
+      name: /discord community/i,
+    })
+    expect(discordLink).toHaveAttribute('href', 'https://discord.gg/stacklok')
+    expect(discordLink).toHaveAttribute('target', '_blank')
+    expect(discordLink).toHaveAttribute('rel', 'noopener noreferrer')
+  })
+
+  it('renders feedback link with correct href', async () => {
+    const user = userEvent.setup()
+    render(<HelpDropdown />)
+
+    const helpButton = screen.getByRole('button', { name: /help/i })
+    await user.click(helpButton)
+
+    const feedbackLink = screen.getByRole('menuitem', {
+      name: /send feedback/i,
+    })
+    expect(feedbackLink).toHaveAttribute(
+      'href',
+      'https://github.com/StacklokLabs/toolhive-studio/issues'
+    )
+    expect(feedbackLink).toHaveAttribute('target', '_blank')
+    expect(feedbackLink).toHaveAttribute('rel', 'noopener noreferrer')
+  })
+
+  it('renders GitHub repository link with correct href', async () => {
+    const user = userEvent.setup()
+    render(<HelpDropdown />)
+
+    const helpButton = screen.getByRole('button', { name: /help/i })
+    await user.click(helpButton)
+
+    const githubLink = screen.getByRole('menuitem', {
+      name: /github repository/i,
+    })
+    expect(githubLink).toHaveAttribute(
+      'href',
+      'https://github.com/StacklokLabs/toolhive-studio'
+    )
+    expect(githubLink).toHaveAttribute('target', '_blank')
+    expect(githubLink).toHaveAttribute('rel', 'noopener noreferrer')
+  })
+})

renderer/src/common/components/help/help-dropdown.tsx

@@ -0,0 +1,68 @@
+import { HelpCircle } from 'lucide-react'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/common/components/ui/dropdown-menu'
+import { Button } from '@/common/components/ui/button'
+import { twMerge } from 'tailwind-merge'
+
+export function HelpDropdown({ className }: { className?: string }) {
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button
+          variant="ghost"
+          size="sm"
+          className={twMerge('cursor-pointer', className)}
+        >
+          <HelpCircle className="text-muted-foreground size-4" />
+          <span className="sr-only">Help</span>
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end" className="w-48">
+        <DropdownMenuItem asChild>
+          <a
+            href="https://github.com/StacklokLabs/toolhive-studio?tab=readme-ov-file#getting-started"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="cursor-pointer"
+          >
+            Documentation
+          </a>
+        </DropdownMenuItem>
+        <DropdownMenuItem asChild>
+          <a
+            href="https://discord.gg/stacklok"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="cursor-pointer"
+          >
+            Discord Community
+          </a>
+        </DropdownMenuItem>
+        <DropdownMenuItem asChild>
+          <a
+            href="https://github.com/StacklokLabs/toolhive-studio/issues"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="cursor-pointer"
+          >
+            Send Feedback
+          </a>
+        </DropdownMenuItem>
+        <DropdownMenuItem asChild>
+          <a
+            href="https://github.com/StacklokLabs/toolhive-studio"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="cursor-pointer"
+          >
+            GitHub Repository
+          </a>
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}

renderer/src/common/components/help/index.ts

@@ -0,0 +1 @@
+export { HelpDropdown } from './help-dropdown'

renderer/src/common/components/layout/top-nav/index.tsx

@@ -2,6 +2,7 @@ import type { HTMLProps } from 'react'
 
 import { ThemeToggle } from '../../theme/theme-toggle'
 import { SettingsDropdown } from '../../settings/settings-dropdown'
+import { HelpDropdown } from '../../help'
 import { WindowControls } from './window-controls'
 import {
   NavigationMenu,
@@ -138,6 +139,7 @@ export function TopNav(props: HTMLProps<HTMLElement>) {
         <div className="flex items-center gap-2">
           <ThemeToggle className="app-region-no-drag" />
           <SettingsDropdown className="app-region-no-drag" />
+          <HelpDropdown className="app-region-no-drag" />
         </div>
       </div>