From cbe29d5c54aa8dc58f6b82fcf0f8961f472e8132 Mon Sep 17 00:00:00 2001
From: Thomas Hallock <thomas@evolutioniq.com>
Date: Sat, 8 Nov 2025 10:21:12 -0600
Subject: [PATCH] refactor(worksheets): extract StudentNameInput component
 (Phase 2 - partial)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Extracted Student Name input field to separate component as part of Phase 2.

Changes:
- Created StudentNameInput.tsx component (32 lines)
- Updated ConfigPanel.tsx to use new component
- File size reduced: 2306 → 2286 lines (-20 lines)

Remaining Phase 2 work: Extract DigitRangeSection, OperatorSection, and ProgressiveDifficultyToggle components.

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

Co-Authored-By: Claude <noreply@anthropic.com>
---
 .../addition/components/ConfigPanel.tsx       | 24 ++------------
 .../config-panel/StudentNameInput.tsx         | 33 +++++++++++++++++++
 2 files changed, 35 insertions(+), 22 deletions(-)
 create mode 100644 apps/web/src/app/create/worksheets/addition/components/config-panel/StudentNameInput.tsx

diff --git a/apps/web/src/app/create/worksheets/addition/components/ConfigPanel.tsx b/apps/web/src/app/create/worksheets/addition/components/ConfigPanel.tsx
index 348fb395..716b0b0b 100644
--- a/apps/web/src/app/create/worksheets/addition/components/ConfigPanel.tsx
+++ b/apps/web/src/app/create/worksheets/addition/components/ConfigPanel.tsx
@@ -32,6 +32,7 @@ import type { DisplayRules } from '../displayRules'
 import { getScaffoldingSummary } from './config-panel/utils'
 import { SubOption } from './config-panel/SubOption'
 import { ToggleOption } from './config-panel/ToggleOption'
+import { StudentNameInput } from './config-panel/StudentNameInput'
 
 interface ConfigPanelProps {
   formState: WorksheetFormState
@@ -203,28 +204,7 @@ export function ConfigPanel({ formState, onChange }: ConfigPanelProps) {
   return (
     <div data-component="config-panel" className={stack({ gap: '3' })}>
       {/* Student Name */}
-      <input
-        type="text"
-        value={formState.name || ''}
-        onChange={(e) => onChange({ name: e.target.value })}
-        placeholder="Student Name"
-        className={css({
-          w: 'full',
-          px: '3',
-          py: '2',
-          border: '1px solid',
-          borderColor: 'gray.300',
-          rounded: 'lg',
-          fontSize: 'sm',
-          _focus: {
-            outline: 'none',
-            borderColor: 'brand.500',
-            ring: '2px',
-            ringColor: 'brand.200',
-          },
-          _placeholder: { color: 'gray.400' },
-        })}
-      />
+      <StudentNameInput value={formState.name} onChange={(name) => onChange({ name })} />
 
       {/* Digit Range Selector */}
       <div
diff --git a/apps/web/src/app/create/worksheets/addition/components/config-panel/StudentNameInput.tsx b/apps/web/src/app/create/worksheets/addition/components/config-panel/StudentNameInput.tsx
new file mode 100644
index 00000000..41835a2b
--- /dev/null
+++ b/apps/web/src/app/create/worksheets/addition/components/config-panel/StudentNameInput.tsx
@@ -0,0 +1,33 @@
+import { css } from '../../../../../../../styled-system/css'
+
+export interface StudentNameInputProps {
+  value: string | undefined
+  onChange: (value: string) => void
+}
+
+export function StudentNameInput({ value, onChange }: StudentNameInputProps) {
+  return (
+    <input
+      type="text"
+      value={value || ''}
+      onChange={(e) => onChange(e.target.value)}
+      placeholder="Student Name"
+      className={css({
+        w: 'full',
+        px: '3',
+        py: '2',
+        border: '1px solid',
+        borderColor: 'gray.300',
+        rounded: 'lg',
+        fontSize: 'sm',
+        _focus: {
+          outline: 'none',
+          borderColor: 'brand.500',
+          ring: '2px',
+          ringColor: 'brand.200',
+        },
+        _placeholder: { color: 'gray.400' },
+      })}
+    />
+  )
+}