From fe2e68a4571c4e8c305f6f49d6fbfd11551c7127 Mon Sep 17 00:00:00 2001
From: Jan-Henrik Bruhn <jan-henrik.bruhn@offis.de>
Date: Fri, 12 Dec 2025 21:43:45 +0100
Subject: [PATCH] feature: Update WorkflowStepper to use Zustand stores
 directly
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Complete the component refactoring by updating WorkflowStepper to
consume stores directly instead of receiving props.

Changes:
- Updated WorkflowStepper to use useMachineStore and usePatternStore
- Removed 7 props that were being passed from App.tsx
- Added hasError import to WorkflowStepper
- Removed unused hasError import from App.tsx

Now all major components use Zustand stores directly:
- FileUpload: 0 props (was 14)
- ProgressMonitor: 0 props (was 9)
- PatternCanvas: 0 props (was 7)
- PatternSummaryCard: 0 props (was 5)
- WorkflowStepper: 0 props (was 7)

Total props eliminated: 42

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
---
 src/App.tsx                        | 12 ++-----
 src/components/WorkflowStepper.tsx | 55 ++++++++++++++++++------------
 2 files changed, 36 insertions(+), 31 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index be7e856..98ea17f 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -9,7 +9,7 @@ import { ProgressMonitor } from './components/ProgressMonitor';
 import { WorkflowStepper } from './components/WorkflowStepper';
 import { PatternSummaryCard } from './components/PatternSummaryCard';
 import { BluetoothDevicePicker } from './components/BluetoothDevicePicker';
-import { hasError, getErrorDetails } from './utils/errorCodeHelpers';
+import { getErrorDetails } from './utils/errorCodeHelpers';
 import { getStateVisualInfo } from './utils/machineStateHelpers';
 import { CheckCircleIcon, BoltIcon, PauseCircleIcon, ExclamationTriangleIcon, ArrowPathIcon, XMarkIcon, InformationCircleIcon } from '@heroicons/react/24/solid';
 import './App.css';
@@ -320,15 +320,7 @@ function App() {
 
           {/* Workflow Stepper - Flexible width column */}
           <div>
-            <WorkflowStepper
-              machineStatus={machineStatus}
-              isConnected={isConnected}
-              hasPattern={pesData !== null}
-              patternUploaded={patternUploaded}
-              hasError={hasError(machineError)}
-              errorMessage={machineErrorMessage || undefined}
-              errorCode={machineError}
-            />
+            <WorkflowStepper />
           </div>
         </div>
       </header>
diff --git a/src/components/WorkflowStepper.tsx b/src/components/WorkflowStepper.tsx
index f55df37..b171d4e 100644
--- a/src/components/WorkflowStepper.tsx
+++ b/src/components/WorkflowStepper.tsx
@@ -1,17 +1,10 @@
 import { useState, useRef, useEffect } from 'react';
+import { useShallow } from 'zustand/react/shallow';
+import { useMachineStore } from '../stores/useMachineStore';
+import { usePatternStore } from '../stores/usePatternStore';
 import { CheckCircleIcon, InformationCircleIcon, ExclamationTriangleIcon } from '@heroicons/react/24/solid';
 import { MachineStatus } from '../types/machine';
-import { getErrorDetails } from '../utils/errorCodeHelpers';
-
-interface WorkflowStepperProps {
-  machineStatus: MachineStatus;
-  isConnected: boolean;
-  hasPattern: boolean;
-  patternUploaded: boolean;
-  hasError?: boolean;
-  errorMessage?: string;
-  errorCode?: number;
-}
+import { getErrorDetails, hasError } from '../utils/errorCodeHelpers';
 
 interface Step {
   id: number;
@@ -256,15 +249,35 @@ function getCurrentStep(machineStatus: MachineStatus, isConnected: boolean, hasP
   }
 }
 
-export function WorkflowStepper({
-  machineStatus,
-  isConnected,
-  hasPattern,
-  patternUploaded,
-  hasError = false,
-  errorMessage,
-  errorCode
-}: WorkflowStepperProps) {
+export function WorkflowStepper() {
+  // Machine store
+  const {
+    machineStatus,
+    isConnected,
+    machineError,
+    error: errorMessage,
+  } = useMachineStore(
+    useShallow((state) => ({
+      machineStatus: state.machineStatus,
+      isConnected: state.isConnected,
+      machineError: state.machineError,
+      error: state.error,
+    }))
+  );
+
+  // Pattern store
+  const {
+    pesData,
+    patternUploaded,
+  } = usePatternStore(
+    useShallow((state) => ({
+      pesData: state.pesData,
+      patternUploaded: state.patternUploaded,
+    }))
+  );
+
+  const hasPattern = pesData !== null;
+  const hasErrorFlag = hasError(machineError);
   const currentStep = getCurrentStep(machineStatus, isConnected, hasPattern, patternUploaded);
   const [showPopover, setShowPopover] = useState(false);
   const [popoverStep, setPopoverStep] = useState<number | null>(null);
@@ -383,7 +396,7 @@ export function WorkflowStepper({
           aria-label="Step guidance"
         >
           {(() => {
-            const content = getGuideContent(popoverStep, machineStatus, hasError, errorCode, errorMessage);
+            const content = getGuideContent(popoverStep, machineStatus, hasErrorFlag, machineError, errorMessage || undefined);
             if (!content) return null;
 
             const colorClasses = {