From 4ff736734dc1ea35e5fa82487139ca5c4e90941e Mon Sep 17 00:00:00 2001
From: SkateSpots <skatespots>
Date: Fri, 30 Oct 2026 22:18:11 +0700
Subject: [PATCH] ui(cordn): show setup progress through the join request

---
 src/components/crew/CordnNativePanel.tsx | 31 ++++++++++++++++++------
 1 file changed, 23 insertions(+), 8 deletions(-)

diff --git a/src/components/crew/CordnNativePanel.tsx b/src/components/crew/CordnNativePanel.tsx
index a987ff4..0595282 100644
--- a/src/components/crew/CordnNativePanel.tsx
+++ b/src/components/crew/CordnNativePanel.tsx
@@ -875,14 +875,29 @@ export function CordnNativePanel({
             </p>
 
             <ol className="mx-auto max-w-sm space-y-2 text-left">
-              {steps.map((step, index) => (
-                <li key={step} className="flex items-start gap-2 text-xs text-gray-400">
-                  <span className="mt-0.5 flex h-4 w-4 shrink-0 items-center justify-center rounded-full bg-teal-500/15 text-[10px] font-bold text-teal-300">
-                    {index + 1}
-                  </span>
-                  <span>{step}</span>
-                </li>
-              ))}
+              {steps.map((step, index) => {
+                // Members see the setup move visibly: device key prepared →
+                // request sent → waiting for an admin. Founders start at step 1.
+                const stepDone = !canCreate && index === 0 && (awaiting || native.keyPackageReady);
+                const stepWaiting = !canCreate && index === 1 && awaiting;
+                return (
+                  <li
+                    key={step}
+                    className={cn(
+                      'flex items-start gap-2 text-xs',
+                      stepDone || stepWaiting ? 'text-teal-200' : 'text-gray-400',
+                    )}
+                  >
+                    <span className={cn(
+                      'mt-0.5 flex h-4 w-4 shrink-0 items-center justify-center rounded-full text-[10px] font-bold',
+                      stepDone ? 'bg-teal-500/20 text-teal-300' : 'bg-teal-500/15 text-teal-300',
+                    )}>
+                      {stepDone ? <Check className="h-2.5 w-2.5" /> : stepWaiting ? <Loader2 className="h-2.5 w-2.5 animate-spin" /> : index + 1}
+                    </span>
+                    <span>{step}</span>
+                  </li>
+                );
+              })}
             </ol>
 
             <p className="mx-auto max-w-sm text-[11px] text-gray-500">