Set up project configuration and base UI components

Initializes the project with necessary configurations, including Replit settings and a .gitignore file. It also introduces foundational UI components for the application, such as buttons, dialogs, and layout elements, likely for the Pomodoro timer application.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 59a5ae27-3c71-459b-b42f-fe14121bf9c3
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/3007b6f6-d03b-45e1-9ed1-7ce8de18ea24/59a5ae27-3c71-459b-b42f-fe14121bf9c3/Uupe4F4

client/src/components/atoms/ProgressRing.tsx

@@ -0,0 +1,53 @@
+interface ProgressRingProps {
+  progress: number; // 0-1
+  size?: number;
+  strokeWidth?: number;
+  className?: string;
+}
+
+export function ProgressRing({ 
+  progress, 
+  size = 256, 
+  strokeWidth = 8,
+  className = ""
+}: ProgressRingProps) {
+  const radius = (size - strokeWidth) / 2;
+  const circumference = radius * 2 * Math.PI;
+  const strokeDasharray = circumference;
+  const strokeDashoffset = circumference * (1 - progress);
+
+  return (
+    <svg 
+      className={`transform -rotate-90 ${className}`} 
+      width={size} 
+      height={size} 
+      viewBox={`0 0 ${size} ${size}`}
+      data-testid="progress-ring"
+    >
+      {/* Background Circle */}
+      <circle
+        cx={size / 2}
+        cy={size / 2}
+        r={radius}
+        stroke="currentColor"
+        strokeWidth={strokeWidth}
+        fill="none"
+        className="text-muted opacity-20"
+      />
+      
+      {/* Progress Circle */}
+      <circle
+        cx={size / 2}
+        cy={size / 2}
+        r={radius}
+        stroke="currentColor"
+        strokeWidth={strokeWidth}
+        fill="none"
+        className="text-accent timer-ring"
+        strokeDasharray={strokeDasharray}
+        strokeDashoffset={strokeDashoffset}
+        strokeLinecap="round"
+      />
+    </svg>
+  );
+}