Add simple white progress bar at top of screen (#11)

* Initial plan

* Add progress bar indicator around screen edges

Co-authored-by: dnafication <6381587+dnafication@users.noreply.github.com>

* Refactor progress bar code based on review feedback

Co-authored-by: dnafication <6381587+dnafication@users.noreply.github.com>

* Add YouTube-style progress bar around screen edges

Co-authored-by: dnafication <6381587+dnafication@users.noreply.github.com>

* Simplify progress bar to single white bar at top

Co-authored-by: dnafication <6381587+dnafication@users.noreply.github.com>

* Show progress bar when timer is paused

Co-authored-by: dnafication <6381587+dnafication@users.noreply.github.com>

* Use named export for ProgressBar component

Co-authored-by: dnafication <6381587+dnafication@users.noreply.github.com>

---------

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: dnafication <6381587+dnafication@users.noreply.github.com>

Author: Copilot

components/progress-bar.tsx

@@ -0,0 +1,20 @@
+interface ProgressBarProps {
+  elapsedTime: number
+  totalTime: number
+}
+
+export const ProgressBar = ({ elapsedTime, totalTime }: ProgressBarProps) => {
+  const progress = totalTime > 0 ? (elapsedTime / totalTime) * 100 : 0
+  const clampedProgress = Math.min(progress, 100)
+
+  return (
+    <div className="fixed top-0 left-0 right-0 pointer-events-none z-50">
+      <div className="h-[5px] bg-white bg-opacity-20 w-full">
+        <div
+          className="h-full bg-white transition-all duration-300"
+          style={{ width: `${clampedProgress}%` }}
+        />
+      </div>
+    </div>
+  )
+}

components/talk-timer.tsx

@@ -3,6 +3,7 @@
 import { useCallback, useEffect, useState } from 'react'
 
 import Footer from './footer'
+import { ProgressBar } from './progress-bar'
 import TimerDisplay from './timer-display'
 
 export function TalkTimer() {
@@ -122,6 +123,9 @@ export function TalkTimer() {
         active={active}
         bgColor={getBackgroundColor()}
       />
+      {elapsedTime > 0 && (
+        <ProgressBar elapsedTime={elapsedTime} totalTime={redThreshold} />
+      )}
       <Footer
         active={active}
         isRunning={isRunning}