From 4926cf2e90480a436b5916e30e3efa383d20310b Mon Sep 17 00:00:00 2001
From: Arnav Goel <arnavgoel2006@gmail.com>
Date: Thu, 16 Jul 2026 16:51:34 +0530
Subject: [PATCH] =?UTF-8?q?feat:=20add=20progress=20steps=20indicator=20(U?=
 =?UTF-8?q?pload=20=E2=86=92=20Configure=20=E2=86=92=20Export=20=E2=86=92?=
 =?UTF-8?q?=20Download)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Adds a 4-step workflow stepper at the top of the editor that maps to the
video editor status, with active/completed states, checkmarks for completed
steps, and ARIA labelling for accessibility (Fixes #98).

Co-Authored-By: Claude <noreply@anthropic.com>
---
 src/components/ProgressSteps.tsx | 88 ++++++++++++++++++++++++++++++++
 src/components/VideoEditor.tsx   |  6 +++
 2 files changed, 94 insertions(+)
 create mode 100644 src/components/ProgressSteps.tsx

diff --git a/src/components/ProgressSteps.tsx b/src/components/ProgressSteps.tsx
new file mode 100644
index 00000000..069cfb1c
--- /dev/null
+++ b/src/components/ProgressSteps.tsx
@@ -0,0 +1,88 @@
+"use client";
+
+import { Upload, SlidersHorizontal, Zap, Download, Check } from "lucide-react";
+import type { ExportStatus } from "@/lib/types";
+import { cn } from "@/lib/utils";
+
+interface ProgressStepsProps {
+  file: File | null;
+  status: ExportStatus;
+}
+
+const STEPS = [
+  { label: "Upload", icon: Upload },
+  { label: "Configure", icon: SlidersHorizontal },
+  { label: "Export", icon: Zap },
+  { label: "Download", icon: Download },
+] as const;
+
+type StepState = "completed" | "active" | "upcoming";
+
+export default function ProgressSteps({ file, status }: ProgressStepsProps) {
+  const currentStep = !file
+    ? 0
+    : status === "loading-engine" || status === "exporting"
+      ? 2
+      : status === "done"
+        ? 3
+        : 1;
+
+  return (
+    <nav aria-label="Workflow progress" className="w-full">
+      <ol className="flex items-start">
+        {STEPS.map((step, i) => {
+          const state: StepState =
+            i < currentStep ? "completed" : i === currentStep ? "active" : "upcoming";
+          const Icon = step.icon;
+          const isLast = i === STEPS.length - 1;
+
+          return (
+            <li
+              key={step.label}
+              className="flex items-start flex-1 last:flex-none"
+              aria-current={state === "active" ? "step" : undefined}
+            >
+              <div className="flex flex-col items-center gap-1.5 shrink-0">
+                <span
+                  className={cn(
+                    "flex items-center justify-center w-9 h-9 rounded-full border-2 transition-colors duration-200 motion-reduce:transition-none",
+                    state === "completed" && "bg-[var(--accent)] border-[var(--accent)] text-white",
+                    state === "active" && "border-[var(--accent)] text-[var(--accent)] bg-[var(--surface)]",
+                    state === "upcoming" && "border-[var(--border)] text-[var(--muted)] bg-[var(--surface)]"
+                  )}
+                >
+                  {state === "completed" ? (
+                    <Check size={16} aria-hidden="true" />
+                  ) : (
+                    <Icon size={16} aria-hidden="true" />
+                  )}
+                </span>
+                <span
+                  className={cn(
+                    "text-[11px] font-heading font-semibold uppercase tracking-widest whitespace-nowrap",
+                    state === "upcoming" ? "text-[var(--muted)]" : "text-[var(--text)]"
+                  )}
+                >
+                  {step.label}
+                </span>
+                <span className="sr-only">
+                  {state === "completed" ? "completed" : state === "active" ? "current step" : "upcoming"}
+                </span>
+              </div>
+
+              {!isLast && (
+                <span
+                  aria-hidden="true"
+                  className={cn(
+                    "flex-1 h-0.5 rounded-full mt-[18px] transition-colors duration-200 motion-reduce:transition-none",
+                    i < currentStep ? "bg-[var(--accent)]" : "bg-[var(--border)]"
+                  )}
+                />
+              )}
+            </li>
+          );
+        })}
+      </ol>
+    </nav>
+  );
+}
diff --git a/src/components/VideoEditor.tsx b/src/components/VideoEditor.tsx
index a12c1f41..5ca5dca1 100644
--- a/src/components/VideoEditor.tsx
+++ b/src/components/VideoEditor.tsx
@@ -25,6 +25,7 @@ import {
   SlidersHorizontal, Zap, AlertTriangle, Github, Copy
 } from "lucide-react";
 import OnboardingTour from "./OnboardingTour";
+import ProgressSteps from "./ProgressSteps";
 import { useKeyboardShortcuts } from "@/hooks/useKeyboardShortcuts";
 import { loadOverlayState, persistOverlayState } from "@/lib/editorPersistence";
 
@@ -407,6 +408,11 @@ return () => {
     No login. No ads. 100% private - your video never leaves your device.
   </div>
     </header>
+
+        <div className="mb-8 rounded-xl border border-[var(--border)] bg-[var(--surface)] p-5 animate-fade-in">
+          <ProgressSteps file={file} status={status} />
+        </div>
+
         <div className="grid grid-cols-1 lg:grid-cols-[1fr_340px] gap-5">
 
           <div className="space-y-4 min-w-0">