style: move GitHubHelp button to header

coder-ralph · coder-ralph · commit 0cf621631d04 · 2025-07-20T23:01:44.000+08:00
diff --git a/src/app/generator/repo-tree-generator.tsx b/src/app/generator/repo-tree-generator.tsx
@@ -5,7 +5,6 @@ import type React from "react"
 import { useCallback, useEffect, useMemo, useRef, useState } from "react"
 
 import AIFeedback from "@/components/ai-feedback"
-import GitHubHelp from "@/components/github-help"
 import InteractiveTreeView from "@/components/interactive-tree-view"
 import PrivateReposDialog from "@/components/private-repos-dialog"
 import { RepoGraphs } from "@/components/repo-graphs"
@@ -315,7 +314,6 @@ export default function RepoProjectStructure() {
               {repoType === "github" && (
                 <div className="flex items-center gap-2">
                   <PrivateReposDialog />
-                  <GitHubHelp />
                   {hasPrivateToken && (
                     <div className="flex items-center gap-1 text-xs text-green-600 bg-green-50 dark:bg-green-900/20 px-2 py-1 rounded">
                       <Unlock className="h-3 w-3" />
diff --git a/src/components/github-help.tsx b/src/components/github-help.tsx
@@ -11,8 +11,13 @@ export default function GitHubHelp() {
   return (
     <Dialog open={isOpen} onOpenChange={setIsOpen}>
       <DialogTrigger asChild>
-        <Button variant="outline" size="sm" className="flex items-center gap-2 bg-transparent">
-          <HelpCircle className="h-4 w-4" />
+        <Button
+          variant="ghost"
+          size="sm"
+          className="flex items-center gap-2 px-3 py-2 rounded-full bg-blue-900 text-white hover:bg-blue-700 transition-colors duration-200 ease-in-out"
+          aria-label="Help"
+        >
+          <HelpCircle className="h-5 w-5" />
           Help
         </Button>
       </DialogTrigger>
diff --git a/src/components/layout/header.tsx b/src/components/layout/header.tsx
@@ -2,6 +2,7 @@ import Link from 'next/link';
 
 import { FolderTreeIcon, Github } from 'lucide-react';
 
+import GitHubHelp from "@/components/github-help"
 import ThemeToggle from '../theme-toggle';
 
 const Header = () => {
@@ -16,6 +17,7 @@ const Header = () => {
             </h1>
           </Link>
           <nav className="flex items-center space-x-4">
+            <GitHubHelp />
             <ThemeToggle />
             <a
               href="https://github.com/coder-ralph/RepoTree"
