diff --git a/app/page.test.tsx b/app/page.test.tsx
index f7091dae..e2aabe4f 100644
--- a/app/page.test.tsx
+++ b/app/page.test.tsx
@@ -120,6 +120,23 @@ describe('LandingPage', () => {
expect(input.value).toBe('octocat');
});
+
+ it('disables the Watch Dashboard link when username is empty', () => {
+ render();
+ const input = screen.getByPlaceholderText('Enter GitHub Username') as HTMLInputElement;
+ const dashboardLink = screen.getByRole('link', { name: 'Watch Dashboard' });
+
+ expect(dashboardLink.getAttribute('aria-disabled')).toBe('true');
+ expect(dashboardLink.getAttribute('tabindex')).toBe('-1');
+ expect(dashboardLink.getAttribute('href')).toBe('#');
+
+ fireEvent.change(input, { target: { value: 'octocat' } });
+
+ expect(dashboardLink.getAttribute('aria-disabled')).toBeNull();
+ expect(dashboardLink.getAttribute('tabindex')).toBeNull();
+ expect(dashboardLink.getAttribute('href')).toBe('/dashboard/octocat');
+ });
+
it('renders an empty state before a username is entered', () => {
render();
diff --git a/app/page.tsx b/app/page.tsx
index 79e5f375..101f902a 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -261,8 +261,14 @@ export default function LandingPage() {
{
if (!hasUsername) {
e.preventDefault();
@@ -274,7 +280,7 @@ export default function LandingPage() {
className={`relative flex min-w-[160px] items-center justify-center gap-2 overflow-hidden rounded-xl border px-6 py-3.5 text-sm font-semibold transition-all duration-200 active:scale-[0.98] ${
hasUsername
? 'border-black/10 bg-gray-100 text-black hover:bg-gray-200 dark:border-[rgba(255,255,255,0.15)] dark:bg-white/[0.04] dark:text-white dark:hover:bg-white/10'
- : 'border-black/10 bg-gray-100 text-gray-500 dark:border-[rgba(255,255,255,0.08)] dark:bg-white/[0.02] dark:text-white/35'
+ : 'pointer-events-none cursor-not-allowed border-black/10 bg-gray-100 text-gray-500 dark:border-[rgba(255,255,255,0.08)] dark:bg-white/[0.02] dark:text-white/35'
}`}
>
Watch Dashboard