feat: add scroll progress indicator to navigation header

Author: attarchi

src/app/layout.tsx

@@ -2,6 +2,7 @@ import type { Metadata } from "next";
 import { JetBrains_Mono, Inter } from "next/font/google";
 import "./globals.css";
 import { ThemeProvider } from '../lib/theme/ThemeContext'
+import { ProgressBar } from '@/components/ui/ProgressBar';
 
 const jetbrainsMono = JetBrains_Mono({
   variable: "--font-jetbrains-mono",
@@ -29,6 +30,7 @@ export default function RootLayout({
         className={`${jetbrainsMono.variable} ${inter.variable} antialiased`}
         suppressHydrationWarning={true}
       >
+        <ProgressBar />
         <ThemeProvider>
           {children}
         </ThemeProvider>

src/components/ui/ProgressBar.tsx

@@ -0,0 +1,69 @@
+"use client";
+
+import React, { useEffect, useState } from 'react';
+import { useScrollProgress } from '@/lib/hooks/useScrollProgress';
+
+// GitHub accent colors
+const ACCENT_LIGHT = '#0969da';
+const ACCENT_DARK = '#58a6ff';
+
+function useIsMobile() {
+  const [isMobile, setIsMobile] = useState(false);
+  useEffect(() => {
+    function handleResize() {
+      setIsMobile(window.innerWidth < 768);
+    }
+    handleResize();
+    window.addEventListener('resize', handleResize);
+    return () => window.removeEventListener('resize', handleResize);
+  }, []);
+  return isMobile;
+}
+
+function useThemeAccent() {
+  // Use matchMedia to detect dark mode
+  const [isDark, setIsDark] = useState(false);
+  useEffect(() => {
+    const mql = window.matchMedia('(prefers-color-scheme: dark)');
+    setIsDark(mql.matches);
+    const listener = (e: MediaQueryListEvent) => setIsDark(e.matches);
+    mql.addEventListener('change', listener);
+    return () => mql.removeEventListener('change', listener);
+  }, []);
+  return isDark ? ACCENT_DARK : ACCENT_LIGHT;
+}
+
+export const ProgressBar: React.FC = () => {
+  const { progress } = useScrollProgress();
+  const isMobile = useIsMobile();
+  const accent = useThemeAccent();
+
+  if (isMobile) return null;
+
+  return (
+    <div
+      data-testid="progress-bar"
+      style={{
+        position: 'fixed',
+        top: 0,
+        left: 0,
+        width: '100%',
+        height: '2px',
+        background: 'transparent',
+        zIndex: 50,
+        pointerEvents: 'none',
+      }}
+    >
+      <div
+        data-testid="progress-bar-fill"
+        style={{
+          width: `${Math.round(progress * 100)}%`,
+          height: '100%',
+          background: accent,
+          transition: 'width 0.2s cubic-bezier(0.4,0,0.2,1)',
+          borderRadius: '1px',
+        }}
+      />
+    </div>
+  );
+}; 

src/components/ui/__tests__/ProgressBar.test.tsx

@@ -0,0 +1,95 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { ProgressBar } from '../ProgressBar';
+
+// Mock useScrollProgress
+jest.mock('@/lib/hooks/useScrollProgress', () => ({
+  useScrollProgress: jest.fn(),
+}));
+const { useScrollProgress } = require('@/lib/hooks/useScrollProgress');
+
+// Helper to set window width
+function setWindowWidth(width: number) {
+  Object.defineProperty(window, 'innerWidth', { writable: true, configurable: true, value: width });
+  window.dispatchEvent(new Event('resize'));
+}
+
+describe('ProgressBar', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+    setWindowWidth(1024); // Desktop by default
+  });
+
+  it('renders at the top of the viewport with correct styles', () => {
+    useScrollProgress.mockReturnValue({ progress: 0.5, isScrolling: true });
+    render(<ProgressBar />);
+    const bar = screen.getByTestId('progress-bar');
+    expect(bar).toBeInTheDocument();
+    expect(bar).toHaveStyle({
+      position: 'fixed',
+      top: '0px',
+      left: '0px',
+      width: '100%',
+      height: '2px',
+      'z-index': '50',
+      'background': 'transparent',
+    });
+  });
+
+  it('shows correct progress width', () => {
+    useScrollProgress.mockReturnValue({ progress: 0.3, isScrolling: true });
+    render(<ProgressBar />);
+    const fill = screen.getByTestId('progress-bar-fill');
+    expect(fill).toHaveStyle('width: 30%');
+  });
+
+  it('uses GitHub accent color for fill (light mode)', () => {
+    useScrollProgress.mockReturnValue({ progress: 0.7, isScrolling: true });
+    render(<ProgressBar />);
+    const fill = screen.getByTestId('progress-bar-fill');
+    expect(fill).toHaveStyle('background: #0969da');
+  });
+
+  it('uses GitHub accent color for fill (dark mode)', () => {
+    // Simulate dark mode
+    window.matchMedia = jest.fn().mockImplementation(query => ({
+      matches: query.includes('dark'),
+      addEventListener: jest.fn(),
+      removeEventListener: jest.fn(),
+    }));
+    useScrollProgress.mockReturnValue({ progress: 0.7, isScrolling: true });
+    render(<ProgressBar />);
+    const fill = screen.getByTestId('progress-bar-fill');
+    expect(fill).toHaveStyle('background: #58a6ff');
+  });
+
+  it('has smooth width transition', () => {
+    useScrollProgress.mockReturnValue({ progress: 0.4, isScrolling: true });
+    render(<ProgressBar />);
+    const fill = screen.getByTestId('progress-bar-fill');
+    expect(fill).toHaveStyle('transition: width 0.2s cubic-bezier(0.4,0,0.2,1)');
+  });
+
+  it('hides on mobile devices (<768px)', () => {
+    setWindowWidth(500);
+    useScrollProgress.mockReturnValue({ progress: 0.5, isScrolling: true });
+    render(<ProgressBar />);
+    const bar = screen.queryByTestId('progress-bar');
+    expect(bar).not.toBeInTheDocument();
+  });
+
+  it('renders 0% progress correctly', () => {
+    useScrollProgress.mockReturnValue({ progress: 0, isScrolling: true });
+    render(<ProgressBar />);
+    const fill = screen.getByTestId('progress-bar-fill');
+    expect(fill).toHaveStyle('width: 0%');
+  });
+
+  it('renders 100% progress correctly', () => {
+    useScrollProgress.mockReturnValue({ progress: 1, isScrolling: true });
+    render(<ProgressBar />);
+    const fill = screen.getByTestId('progress-bar-fill');
+    expect(fill).toHaveStyle('width: 100%');
+  });
+});