From 5ccd3e0f7bd6d8bdaa5eb8719d29d508298d7c44 Mon Sep 17 00:00:00 2001
From: Adrian Bonpin <adrianbonpin@gmail.com>
Date: Mon, 27 Apr 2026 07:19:29 +0800
Subject: [PATCH] feat: add required field indicators to submit wizard

---
 components/wizard/game-entry-wizard.tsx      | 4 ++++
 components/wizard/steps/hardware-step.tsx    | 9 ++++++---
 components/wizard/steps/performance-step.tsx | 1 +
 3 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/components/wizard/game-entry-wizard.tsx b/components/wizard/game-entry-wizard.tsx
index 4b49842..4db9d7d 100644
--- a/components/wizard/game-entry-wizard.tsx
+++ b/components/wizard/game-entry-wizard.tsx
@@ -173,6 +173,10 @@ export function GameEntryWizard({ gameId, gameVersionId }: GameEntryWizardProps)
         onStepClick={handleStepClick}
       />
 
+      <div className="flex items-center gap-1 text-xs text-text/40">
+        <span className="text-red-400">*</span> Required fields
+      </div>
+
       {/* Step Content */}
       <AnimatePresence mode="wait">
         <motion.div
diff --git a/components/wizard/steps/hardware-step.tsx b/components/wizard/steps/hardware-step.tsx
index 6850a32..a17b7bd 100644
--- a/components/wizard/steps/hardware-step.tsx
+++ b/components/wizard/steps/hardware-step.tsx
@@ -81,9 +81,12 @@ export function HardwareStep({ value, onChange }: HardwareStepProps) {
 
   return (
     <div className="space-y-4">
-      <p className="text-sm text-text/60">
-        Select the hardware device you used to test this game.
-      </p>
+      <div className="flex items-center gap-2">
+        <p className="text-sm text-text/60">
+          Select the hardware device you used to test this game.
+        </p>
+        <span className="text-red-400 text-xs">*</span>
+      </div>
 
       <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
         {devices.map((device) => {
diff --git a/components/wizard/steps/performance-step.tsx b/components/wizard/steps/performance-step.tsx
index 383fdb5..ef0e74b 100644
--- a/components/wizard/steps/performance-step.tsx
+++ b/components/wizard/steps/performance-step.tsx
@@ -52,6 +52,7 @@ export function PerformanceStep({ value, onChange }: PerformanceStepProps) {
               placeholder="e.g. 45"
               className="w-full px-4 py-3 rounded-lg border border-border bg-text/5 text-text text-sm placeholder:text-text/40 outline-none focus:border-primary focus:ring-2 focus:ring-primary/50 transition-colors"
             />
+            <p className="text-[10px] text-text/30">Required — average framerate during gameplay</p>
           </div>
 
           <div className="space-y-1.5">