diff --git a/apps/web/src/app/create/page.tsx b/apps/web/src/app/create/page.tsx index 2bcb842b..45577018 100644 --- a/apps/web/src/app/create/page.tsx +++ b/apps/web/src/app/create/page.tsx @@ -88,9 +88,11 @@ export default function CreateHubPage() {
)} - {/* Display Options Card - Manual Mode Only */} + {/* Manual Mode Controls */} {formState.mode === 'manual' && ( - <> -
-
-
-
- Display Options -
-
- - -
-
- - {/* Two-column grid: toggle options on left, preview on right */} -
- {/* Toggle Options in 2-column grid */} -
- onChange({ showAnswerBoxes: checked })} - label="Answer Boxes" - description="Guide students to write organized, aligned answers" - /> - - onChange({ showPlaceValueColors: checked })} - label="Place Value Colors" - description="Reinforce place value understanding visually" - /> - - onChange({ showProblemNumbers: checked })} - label="Problem Numbers" - description="Help students track progress and reference problems" - /> - - onChange({ showCellBorder: checked })} - label="Cell Borders" - description="Organize problems visually for easier focus" - /> - - { - onChange({ showCarryBoxes: checked }) - }} - label={ - formState.operator === 'subtraction' - ? 'Borrow Boxes' - : formState.operator === 'mixed' - ? 'Carry/Borrow Boxes' - : 'Carry Boxes' - } - description={ - formState.operator === 'subtraction' - ? 'Help students track borrowing during subtraction' - : formState.operator === 'mixed' - ? 'Help students track regrouping (carrying in addition, borrowing in subtraction)' - : 'Help students track regrouping during addition' - } - /> - - {(formState.operator === 'subtraction' || formState.operator === 'mixed') && ( - onChange({ showBorrowNotation: checked })} - label="Borrowed 10s Box" - description="Box for adding 10 to borrowing digit" - /> - )} - - {(formState.operator === 'subtraction' || formState.operator === 'mixed') && ( - onChange({ showBorrowingHints: checked })} - label="Borrowing Hints" - description="Show arrows and calculations guiding the borrowing process" - /> - )} - - { - onChange({ showTenFrames: checked }) - }} - label="Ten-Frames" - description="Visualize regrouping with concrete counting tools" - > - onChange({ showTenFramesForAll: checked })} - label="Show for all problems (not just regrouping)" - parentEnabled={formState.showTenFrames ?? false} - /> - -
- - {/* Live Preview */} - -
-
-
- - {/* Regrouping Frequency Card - Manual Mode Only */} -
-
-
- Regrouping Frequency -
- - {/* Current values display */} -
-
- Both:{' '} - - {Math.round((formState.pAllStart || 0) * 100)}% - -
-
- Any:{' '} - - {Math.round((formState.pAnyStart || 0.25) * 100)}% - -
-
- - {/* Double-thumbed range slider */} - { - onChange({ - pAllStart: values[0] / 100, - pAnyStart: values[1] / 100, - }) - }} - min={0} - max={100} - step={5} - minStepsBetweenThumbs={0} - > - - - - - - - -
- Regrouping difficulty at worksheet start (Both = all columns regroup, Any = at least - one column regroups) -
-
-
- + )}
) diff --git a/apps/web/src/app/create/worksheets/addition/components/ConfigPanel.tsx.bak b/apps/web/src/app/create/worksheets/addition/components/ConfigPanel.tsx.bak index b4c1c6fa..6bf43d9d 100644 --- a/apps/web/src/app/create/worksheets/addition/components/ConfigPanel.tsx.bak +++ b/apps/web/src/app/create/worksheets/addition/components/ConfigPanel.tsx.bak @@ -1,19 +1,14 @@ 'use client' -import { useTranslations } from 'next-intl' -import { css } from '../../../../../../styled-system/css' import { stack } from '../../../../../../styled-system/patterns' import type { WorksheetFormState } from '../types' -import { DisplayOptionsPreview } from './DisplayOptionsPreview' import { ModeSelector } from './ModeSelector' -import { defaultAdditionConfig } from '../../config-schemas' -import { SubOption } from './config-panel/SubOption' -import { ToggleOption } from './config-panel/ToggleOption' import { StudentNameInput } from './config-panel/StudentNameInput' import { DigitRangeSection } from './config-panel/DigitRangeSection' import { OperatorSection } from './config-panel/OperatorSection' import { ProgressiveDifficultyToggle } from './config-panel/ProgressiveDifficultyToggle' import { SmartModeControls } from './config-panel/SmartModeControls' +import { ManualModeControls } from './config-panel/ManualModeControls' interface ConfigPanelProps { formState: WorksheetFormState @@ -22,14 +17,6 @@ interface ConfigPanelProps { export function ConfigPanel({ formState, onChange }: ConfigPanelProps) { const t = useTranslations('create.worksheets.addition') - const [showDebugPlot, setShowDebugPlot] = useState(false) - const [hoverPoint, setHoverPoint] = useState<{ x: number; y: number } | null>(null) - const [hoverPreview, setHoverPreview] = useState<{ - pAnyStart: number - pAllStart: number - displayRules: DisplayRules - matchedProfile: string | 'custom' - } | null>(null) // Helper to get default column count for a given problemsPerPage (user can override) const getDefaultColsForProblemsPerPage = ( @@ -208,336 +195,14 @@ export function ConfigPanel({ formState, onChange }: ConfigPanelProps) { onChange={(interpolate) => onChange({ interpolate })} /> - {/* Smart Mode Controls */} {(!formState.mode || formState.mode === 'smart') && ( )} - {/* Display Options Card - Manual Mode Only */} - {formState.mode === 'manual' && ( - <> -
-
-
-
- Display Options -
-
- - -
-
- {/* Two-column grid: toggle options on left, preview on right */} -
- {/* Toggle Options in 2-column grid */} -
- onChange({ showAnswerBoxes: checked })} - label="Answer Boxes" - description="Guide students to write organized, aligned answers" - /> - - onChange({ showPlaceValueColors: checked })} - label="Place Value Colors" - description="Reinforce place value understanding visually" - /> - - onChange({ showProblemNumbers: checked })} - label="Problem Numbers" - description="Help students track progress and reference problems" - /> - - onChange({ showCellBorder: checked })} - label="Cell Borders" - description="Organize problems visually for easier focus" - /> - - { - onChange({ showCarryBoxes: checked }) - }} - label={ - formState.operator === 'subtraction' - ? 'Borrow Boxes' - : formState.operator === 'mixed' - ? 'Carry/Borrow Boxes' - : 'Carry Boxes' - } - description={ - formState.operator === 'subtraction' - ? 'Help students track borrowing during subtraction' - : formState.operator === 'mixed' - ? 'Help students track regrouping (carrying in addition, borrowing in subtraction)' - : 'Help students track regrouping during addition' - } - /> - - {(formState.operator === 'subtraction' || formState.operator === 'mixed') && ( - onChange({ showBorrowNotation: checked })} - label="Borrowed 10s Box" - description="Box for adding 10 to borrowing digit" - /> - )} - - {(formState.operator === 'subtraction' || formState.operator === 'mixed') && ( - onChange({ showBorrowingHints: checked })} - label="Borrowing Hints" - description="Show arrows and calculations guiding the borrowing process" - /> - )} - - { - onChange({ showTenFrames: checked }) - }} - label="Ten-Frames" - description="Visualize regrouping with concrete counting tools" - > - onChange({ showTenFramesForAll: checked })} - label="Show for all problems (not just regrouping)" - parentEnabled={formState.showTenFrames ?? false} - /> - -
- - {/* Live Preview */} - -
-
-
- - {/* Regrouping Frequency Card - Manual Mode Only */} -
-
-
- Regrouping Frequency -
- - {/* Current values display */} -
-
- Both:{' '} - - {Math.round((formState.pAllStart || 0) * 100)}% - -
-
- Any:{' '} - - {Math.round((formState.pAnyStart || 0.25) * 100)}% - -
-
- - {/* Double-thumbed range slider */} - { - onChange({ - pAllStart: values[0] / 100, - pAnyStart: values[1] / 100, - }) - }} - min={0} - max={100} - step={5} - minStepsBetweenThumbs={0} - > - - - - - - - -
- Regrouping difficulty at worksheet start (Both = all columns regroup, Any = at least - one column regroups) -
-
-
- - )} + {/* Manual Mode Controls */} + {formState.mode === 'manual' && } ) } diff --git a/apps/web/src/app/create/worksheets/addition/components/config-panel/ManualModeControls.tsx b/apps/web/src/app/create/worksheets/addition/components/config-panel/ManualModeControls.tsx new file mode 100644 index 00000000..9fec3012 --- /dev/null +++ b/apps/web/src/app/create/worksheets/addition/components/config-panel/ManualModeControls.tsx @@ -0,0 +1,341 @@ +'use client' + +import { css } from '../../../../../../../styled-system/css' +import { stack } from '../../../../../../../styled-system/patterns' +import type { WorksheetFormState } from '../../types' +import { DisplayOptionsPreview } from '../DisplayOptionsPreview' +import { ToggleOption } from './ToggleOption' +import { SubOption } from './SubOption' + +export interface ManualModeControlsProps { + formState: WorksheetFormState + onChange: (updates: Partial) => void +} + +export function ManualModeControls({ formState, onChange }: ManualModeControlsProps) { + return ( + <> + <> +
+
+
+
+ Display Options +
+
+ + +
+
+ + {/* Two-column grid: toggle options on left, preview on right */} +
+ {/* Toggle Options in 2-column grid */} +
+ onChange({ showAnswerBoxes: checked })} + label="Answer Boxes" + description="Guide students to write organized, aligned answers" + /> + + onChange({ showPlaceValueColors: checked })} + label="Place Value Colors" + description="Reinforce place value understanding visually" + /> + + onChange({ showProblemNumbers: checked })} + label="Problem Numbers" + description="Help students track progress and reference problems" + /> + + onChange({ showCellBorder: checked })} + label="Cell Borders" + description="Organize problems visually for easier focus" + /> + + { + onChange({ showCarryBoxes: checked }) + }} + label={ + formState.operator === 'subtraction' + ? 'Borrow Boxes' + : formState.operator === 'mixed' + ? 'Carry/Borrow Boxes' + : 'Carry Boxes' + } + description={ + formState.operator === 'subtraction' + ? 'Help students track borrowing during subtraction' + : formState.operator === 'mixed' + ? 'Help students track regrouping (carrying in addition, borrowing in subtraction)' + : 'Help students track regrouping during addition' + } + /> + + {(formState.operator === 'subtraction' || formState.operator === 'mixed') && ( + onChange({ showBorrowNotation: checked })} + label="Borrowed 10s Box" + description="Box for adding 10 to borrowing digit" + /> + )} + + {(formState.operator === 'subtraction' || formState.operator === 'mixed') && ( + onChange({ showBorrowingHints: checked })} + label="Borrowing Hints" + description="Show arrows and calculations guiding the borrowing process" + /> + )} + + { + onChange({ showTenFrames: checked }) + }} + label="Ten-Frames" + description="Visualize regrouping with concrete counting tools" + > + onChange({ showTenFramesForAll: checked })} + label="Show for all problems (not just regrouping)" + parentEnabled={formState.showTenFrames ?? false} + /> + +
+ + {/* Live Preview */} + +
+
+
+ + {/* Regrouping Frequency Card - Manual Mode Only */} +
+
+
+ Regrouping Frequency +
+ + {/* Current values display */} +
+
+ Both:{' '} + + {Math.round((formState.pAllStart || 0) * 100)}% + +
+
+ Any:{' '} + + {Math.round((formState.pAnyStart || 0.25) * 100)}% + +
+
+ + {/* Double-thumbed range slider */} + { + onChange({ + pAllStart: values[0] / 100, + pAnyStart: values[1] / 100, + }) + }} + min={0} + max={100} + step={5} + minStepsBetweenThumbs={0} + > + + + + + + + +
+ Regrouping difficulty at worksheet start (Both = all columns regroup, Any = at least + one column regroups) +
+
+
+ + + ) +} diff --git a/apps/web/src/components/ThemeToggle.tsx b/apps/web/src/components/ThemeToggle.tsx index eb82a542..6fee5c61 100644 --- a/apps/web/src/components/ThemeToggle.tsx +++ b/apps/web/src/components/ThemeToggle.tsx @@ -6,15 +6,37 @@ import { css } from '../../styled-system/css' export function ThemeToggle() { const { theme, resolvedTheme, setTheme } = useTheme() - const toggleTheme = () => { - setTheme(resolvedTheme === 'dark' ? 'light' : 'dark') + const cycleTheme = () => { + // Cycle: light → dark → system → light + if (theme === 'light') { + setTheme('dark') + } else if (theme === 'dark') { + setTheme('system') + } else { + setTheme('light') + } + } + + const getThemeLabel = () => { + if (theme === 'system') { + return `Auto (${resolvedTheme === 'dark' ? 'Dark' : 'Light'})` + } + return theme === 'dark' ? 'Dark' : 'Light' + } + + const getThemeIcon = () => { + if (theme === 'system') { + return '🌗' // Half moon for system/auto + } + return resolvedTheme === 'dark' ? '🌙' : '☀️' } return ( ) }