Skip to content

Commit e7343d2

Browse files
coder-ralphcoder-ralph
committed
feat(header): simplify help actions and update help modal content
1 parent f1b7602 commit e7343d2

2 files changed

Lines changed: 109 additions & 70 deletions

File tree

‎src/components/layout/header.tsx‎

Lines changed: 43 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,38 @@
1+
'use client';
2+
3+
import { useState } from 'react';
14
import Link from 'next/link';
25
import { FolderTree, Github } from 'lucide-react';
36
import ThemeToggle from '@/components/theme-toggle';
47
import UserMenu from '@/components/auth/user-menu';
58
import RepoHelp from '@/components/repo-help';
69

10+
function IconWithTooltip({
11+
children,
12+
label
13+
}: {
14+
children: React.ReactNode;
15+
label: string;
16+
}) {
17+
const [show, setShow] = useState(false);
18+
19+
return (
20+
<div
21+
className="relative inline-flex"
22+
onMouseEnter={() => setShow(true)}
23+
onMouseLeave={() => setShow(false)}
24+
>
25+
{children}
26+
{show && (
27+
<div className="absolute top-full left-1/2 -translate-x-1/2 mt-2 px-2 py-1 text-xs font-medium text-white dark:text-gray-100 bg-gray-900 dark:bg-gray-700 rounded-md shadow-lg whitespace-nowrap z-50 animate-in fade-in zoom-in-95 duration-200">
28+
{label}
29+
<div className="absolute bottom-full left-1/2 -translate-x-1/2 -mb-px w-0 h-0 border-l-4 border-r-4 border-b-4 border-l-transparent border-r-transparent border-b-gray-900 dark:border-b-gray-700" />
30+
</div>
31+
)}
32+
</div>
33+
);
34+
}
35+
736
const Header = () => {
837
return (
938
<header className="w-full bg-white/80 dark:bg-gray-900/80 backdrop-blur-md border-b border-gray-200/60 dark:border-gray-800/60 sticky top-0 z-40">
@@ -21,18 +50,21 @@ const Header = () => {
2150
{/* Right nav */}
2251
<div className="flex items-center gap-1">
2352
<RepoHelp />
24-
<ThemeToggle />
53+
<IconWithTooltip label="Source Code">
54+
<a
55+
href="https://github.com/coder-ralph/RepoTree"
56+
target="_blank"
57+
rel="noopener noreferrer"
58+
aria-label="View source code"
59+
className="p-2 rounded-lg text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
60+
>
61+
<Github size={17} />
62+
</a>
63+
</IconWithTooltip>
64+
<IconWithTooltip label="Toggle Theme">
65+
<ThemeToggle />
66+
</IconWithTooltip>
2567
<UserMenu />
26-
<div className="w-px h-4 bg-gray-200 dark:bg-gray-700 mx-1" />
27-
<a
28-
href="https://github.com/coder-ralph/RepoTree"
29-
target="_blank"
30-
rel="noopener noreferrer"
31-
aria-label="View on GitHub"
32-
className="p-2 rounded-lg text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
33-
>
34-
<Github size={17} />
35-
</a>
3668
</div>
3769
</div>
3870
</header>

‎src/components/repo-help.tsx‎

Lines changed: 66 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -8,81 +8,88 @@ import {
88
DialogTitle,
99
DialogTrigger,
1010
} from '@/components/ui/dialog';
11-
import { HelpCircle, ExternalLink } from 'lucide-react';
11+
import { HelpCircle, Lock, Unlock, AlertCircle, Gauge } from 'lucide-react';
1212

1313
export default function RepoHelp() {
1414
const [open, setOpen] = useState(false);
15+
const [showTooltip, setShowTooltip] = useState(false);
16+
17+
const handleOpenChange = (isOpen: boolean) => {
18+
setOpen(isOpen);
19+
if (isOpen) {
20+
setShowTooltip(false);
21+
}
22+
};
1523

1624
return (
17-
<Dialog open={open} onOpenChange={setOpen}>
25+
<Dialog open={open} onOpenChange={handleOpenChange}>
1826
<DialogTrigger asChild>
19-
<button
20-
className="flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium rounded-lg bg-gray-900 dark:bg-gray-700 text-white hover:bg-gray-700 dark:hover:bg-gray-600 transition-colors"
21-
aria-label="Help"
27+
<div
28+
className="relative"
29+
onMouseEnter={() => setShowTooltip(true)}
30+
onMouseLeave={() => setShowTooltip(false)}
2231
>
23-
<HelpCircle size={13} />
24-
Help
25-
</button>
32+
<button
33+
className="p-2 rounded-lg text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
34+
aria-label="Help"
35+
>
36+
<HelpCircle size={17} />
37+
</button>
38+
{showTooltip && !open && (
39+
<div className="absolute top-full left-1/2 -translate-x-1/2 mt-2 px-2 py-1 text-xs font-medium text-white dark:text-gray-100 bg-gray-900 dark:bg-gray-700 rounded-md shadow-lg whitespace-nowrap z-50 animate-in fade-in zoom-in-95 duration-200">
40+
Help
41+
<div className="absolute bottom-full left-1/2 -translate-x-1/2 -mb-px w-0 h-0 border-l-4 border-r-4 border-b-4 border-l-transparent border-r-transparent border-b-gray-900 dark:border-b-gray-700" />
42+
</div>
43+
)}
44+
</div>
2645
</DialogTrigger>
2746
<DialogContent className="sm:max-w-lg max-h-[85vh] overflow-y-auto">
2847
<DialogHeader>
2948
<DialogTitle className="text-base">How to use RepoTree</DialogTitle>
3049
</DialogHeader>
31-
<div className="space-y-5 py-2 text-sm">
32-
<section>
33-
<h3 className="font-medium mb-1.5 text-gray-900 dark:text-white">Public repositories</h3>
34-
<p className="text-gray-500 dark:text-gray-400 leading-relaxed">
35-
Paste any public GitHub or GitLab repository URL and click Generate.
36-
No sign-in required. Public repositories are subject to API rate limits
37-
(60 requests/hour for GitHub, variable for GitLab).
38-
</p>
39-
</section>
50+
<div className="space-y-4 py-2 text-sm">
51+
<p className="text-gray-500 dark:text-gray-400 leading-relaxed">
52+
Paste a GitHub or GitLab repository URL and click Generate.
53+
</p>
4054

41-
<section>
42-
<h3 className="font-medium mb-1.5 text-gray-900 dark:text-white">Private repositories</h3>
43-
<p className="text-gray-500 dark:text-gray-400 leading-relaxed">
44-
Sign in with your GitHub or GitLab account using OAuth. Once signed in,
45-
you can access any private repository you have permission to view.
46-
Your access token is stored securely in an encrypted session cookie —
47-
never in localStorage or exposed to client-side code.
48-
</p>
49-
</section>
50-
51-
<section>
52-
<h3 className="font-medium mb-1.5 text-gray-900 dark:text-white">Rate limits</h3>
53-
<p className="text-gray-500 dark:text-gray-400 leading-relaxed">
54-
Signing in with OAuth increases GitHub API rate limits from 60 to 5,000
55-
requests per hour. GitLab rate limits vary by server configuration.
56-
</p>
57-
</section>
55+
<div className="bg-gray-50 dark:bg-gray-800/50 rounded-lg p-4 space-y-3 border border-gray-100 dark:border-gray-700">
56+
<h3 className="font-medium text-gray-900 dark:text-white flex items-center gap-2">
57+
<span className="text-blue-600">Access</span>
58+
</h3>
59+
<ul className="space-y-2 text-gray-600 dark:text-gray-300">
60+
<li className="flex items-start gap-2">
61+
<Unlock size={14} className="text-green-600 mt-0.5 shrink-0" />
62+
<span><strong className="text-gray-700 dark:text-gray-200">Public repos:</strong> no sign-in required (limited to 60 req/hr on GitHub)</span>
63+
</li>
64+
<li className="flex items-start gap-2">
65+
<Lock size={14} className="text-blue-600 mt-0.5 shrink-0" />
66+
<span><strong className="text-gray-700 dark:text-gray-200">Private repos:</strong> sign in with OAuth</span>
67+
</li>
68+
</ul>
69+
</div>
5870

59-
<section>
60-
<h3 className="font-medium mb-1.5 text-gray-900 dark:text-white">Troubleshooting</h3>
61-
<ul className="text-gray-500 dark:text-gray-400 space-y-1.5 leading-relaxed">
62-
<li><strong className="text-gray-700 dark:text-gray-300">Not found:</strong> Check the URL and ensure you have access to the repository.</li>
63-
<li><strong className="text-gray-700 dark:text-gray-300">Rate limit exceeded:</strong> Sign in to get higher limits.</li>
64-
<li><strong className="text-gray-700 dark:text-gray-300">Large repo warning:</strong> You can proceed, but rendering may be slower.</li>
65-
<li><strong className="text-gray-700 dark:text-gray-300">Auth error:</strong> Sign out and sign in again.</li>
71+
<div className="bg-gray-50 dark:bg-gray-800/50 rounded-lg p-4 space-y-2 border border-gray-100 dark:border-gray-700">
72+
<h3 className="font-medium text-gray-900 dark:text-white flex items-center gap-2">
73+
<Gauge size={14} className="text-blue-600" />
74+
<span>Rate limits</span>
75+
</h3>
76+
<ul className="space-y-1 text-gray-600 dark:text-gray-300">
77+
<li><strong className="text-gray-700 dark:text-gray-200">GitHub:</strong> 60 → 5,000 req/hr when signed in</li>
78+
<li><strong className="text-gray-700 dark:text-gray-200">GitLab:</strong> varies by server</li>
6679
</ul>
67-
</section>
80+
</div>
6881

69-
<div className="pt-2 border-t border-gray-100 dark:border-gray-800 flex gap-4">
70-
<a
71-
href="https://docs.github.com/en/rest/using-the-rest-api/rate-limits-for-the-rest-api"
72-
target="_blank"
73-
rel="noopener noreferrer"
74-
className="text-xs text-blue-600 hover:underline inline-flex items-center gap-1"
75-
>
76-
GitHub rate limits <ExternalLink size={11} />
77-
</a>
78-
<a
79-
href="https://docs.gitlab.com/security/rate_limits/"
80-
target="_blank"
81-
rel="noopener noreferrer"
82-
className="text-xs text-blue-600 hover:underline inline-flex items-center gap-1"
83-
>
84-
GitLab rate limits <ExternalLink size={11} />
85-
</a>
82+
<div className="bg-gray-50 dark:bg-gray-800/50 rounded-lg p-4 space-y-2 border border-gray-100 dark:border-gray-700">
83+
<h3 className="font-medium text-gray-900 dark:text-white flex items-center gap-2">
84+
<AlertCircle size={14} className="text-amber-600" />
85+
<span>Troubleshooting</span>
86+
</h3>
87+
<ul className="space-y-1.5 text-gray-600 dark:text-gray-300">
88+
<li><strong className="text-gray-700 dark:text-gray-200">Not found:</strong> check URL or permissions</li>
89+
<li><strong className="text-gray-700 dark:text-gray-200">Rate limit exceeded:</strong> sign in</li>
90+
<li><strong className="text-gray-700 dark:text-gray-200">Large repo:</strong> slower rendering</li>
91+
<li><strong className="text-gray-700 dark:text-gray-200">Auth error:</strong> sign out and sign in again</li>
92+
</ul>
8693
</div>
8794
</div>
8895
</DialogContent>

0 commit comments

Comments
 (0)