feat: make scaffolding and preview collapsible
Make pedagogical scaffolding controls collapsible (power user feature): - Pedagogical Scaffolding section collapsed by default - Live Preview nested inside, also collapsed by default - Use Radix UI Collapsible for smooth accordion behavior Changes: - Add DisplayControlsPanel component with collapsible sections - Pedagogical Scaffolding header with "(Advanced)" label - Live Preview header with "(Optional)" label - Animated arrow indicators for expand/collapse state 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Thomas Hallock
parent
0b7382f1b6
commit
804fb1a2f6
|
|
@ -0,0 +1,307 @@
|
|||
'use client'
|
||||
|
||||
import { useState } from 'react'
|
||||
import * as Collapsible from '@radix-ui/react-collapsible'
|
||||
import { css } from '../../../../../../styled-system/css'
|
||||
import { stack } from '../../../../../../styled-system/patterns'
|
||||
import type { WorksheetFormState } from '../types'
|
||||
import type { DisplayRules } from '../displayRules'
|
||||
import { defaultAdditionConfig } from '@/app/create/worksheets/config-schemas'
|
||||
import { RuleThermometer } from './config-panel/RuleThermometer'
|
||||
import { DisplayOptionsPreview } from './DisplayOptionsPreview'
|
||||
|
||||
export interface DisplayControlsPanelProps {
|
||||
formState: WorksheetFormState
|
||||
onChange: (updates: Partial<WorksheetFormState>) => void
|
||||
isDark?: boolean
|
||||
}
|
||||
|
||||
export function DisplayControlsPanel({
|
||||
formState,
|
||||
onChange,
|
||||
isDark = false,
|
||||
}: DisplayControlsPanelProps) {
|
||||
const [isOpen, setIsOpen] = useState(false)
|
||||
const [isPreviewOpen, setIsPreviewOpen] = useState(false)
|
||||
|
||||
// Get current displayRules or use defaults
|
||||
const displayRules: DisplayRules = formState.displayRules ?? defaultAdditionConfig.displayRules
|
||||
|
||||
// Helper to update a single display rule
|
||||
const updateRule = (key: keyof DisplayRules, value: DisplayRules[keyof DisplayRules]) => {
|
||||
onChange({
|
||||
displayRules: {
|
||||
...displayRules,
|
||||
[key]: value,
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
return (
|
||||
<Collapsible.Root open={isOpen} onOpenChange={setIsOpen}>
|
||||
<div data-section="display-controls" className={stack({ gap: '3' })}>
|
||||
<Collapsible.Trigger asChild>
|
||||
<button
|
||||
type="button"
|
||||
className={css({
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
width: '100%',
|
||||
cursor: 'pointer',
|
||||
bg: 'transparent',
|
||||
border: 'none',
|
||||
_hover: {
|
||||
'& > div:first-child': {
|
||||
color: isDark ? 'gray.300' : 'gray.600',
|
||||
},
|
||||
},
|
||||
})}
|
||||
>
|
||||
<div
|
||||
className={css({
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: '2',
|
||||
})}
|
||||
>
|
||||
<div
|
||||
className={css({
|
||||
fontSize: 'xs',
|
||||
fontWeight: 'semibold',
|
||||
color: isDark ? 'gray.400' : 'gray.500',
|
||||
textTransform: 'uppercase',
|
||||
letterSpacing: 'wider',
|
||||
transition: 'color 0.2s',
|
||||
})}
|
||||
>
|
||||
Pedagogical Scaffolding
|
||||
</div>
|
||||
<div
|
||||
className={css({
|
||||
fontSize: '2xs',
|
||||
color: isDark ? 'gray.500' : 'gray.400',
|
||||
fontStyle: 'italic',
|
||||
})}
|
||||
>
|
||||
(Advanced)
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className={css({
|
||||
fontSize: 'sm',
|
||||
color: isDark ? 'gray.500' : 'gray.400',
|
||||
transition: 'transform 0.2s',
|
||||
transform: isOpen ? 'rotate(180deg)' : 'rotate(0deg)',
|
||||
})}
|
||||
>
|
||||
▼
|
||||
</div>
|
||||
</button>
|
||||
</Collapsible.Trigger>
|
||||
|
||||
<Collapsible.Content>
|
||||
<div className={stack({ gap: '3' })}>
|
||||
<div className={css({ display: 'flex', gap: '1.5', justifyContent: 'flex-end' })}>
|
||||
<button
|
||||
onClick={() =>
|
||||
onChange({
|
||||
displayRules: {
|
||||
...displayRules,
|
||||
carryBoxes: 'always',
|
||||
answerBoxes: 'always',
|
||||
placeValueColors: 'always',
|
||||
tenFrames: 'always',
|
||||
borrowNotation: 'always',
|
||||
borrowingHints: 'always',
|
||||
},
|
||||
})
|
||||
}
|
||||
className={css({
|
||||
px: '2',
|
||||
py: '0.5',
|
||||
fontSize: '2xs',
|
||||
color: isDark ? 'brand.300' : 'brand.600',
|
||||
border: '1px solid',
|
||||
borderColor: isDark ? 'brand.500' : 'brand.300',
|
||||
bg: isDark ? 'gray.700' : 'white',
|
||||
rounded: 'md',
|
||||
cursor: 'pointer',
|
||||
_hover: { bg: isDark ? 'gray.600' : 'brand.50' },
|
||||
})}
|
||||
>
|
||||
All Always
|
||||
</button>
|
||||
<button
|
||||
onClick={() =>
|
||||
onChange({
|
||||
displayRules: {
|
||||
...displayRules,
|
||||
carryBoxes: 'never',
|
||||
answerBoxes: 'never',
|
||||
placeValueColors: 'never',
|
||||
tenFrames: 'never',
|
||||
borrowNotation: 'never',
|
||||
borrowingHints: 'never',
|
||||
},
|
||||
})
|
||||
}
|
||||
className={css({
|
||||
px: '2',
|
||||
py: '0.5',
|
||||
fontSize: '2xs',
|
||||
color: isDark ? 'gray.300' : 'gray.600',
|
||||
border: '1px solid',
|
||||
borderColor: isDark ? 'gray.500' : 'gray.300',
|
||||
bg: isDark ? 'gray.700' : 'white',
|
||||
rounded: 'md',
|
||||
cursor: 'pointer',
|
||||
_hover: { bg: isDark ? 'gray.600' : 'gray.50' },
|
||||
})}
|
||||
>
|
||||
Minimal
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Pedagogical scaffolding thermometers */}
|
||||
<div className={stack({ gap: '3' })}>
|
||||
<RuleThermometer
|
||||
label="Answer Boxes"
|
||||
description="Guide students to write organized, aligned answers"
|
||||
value={displayRules.answerBoxes}
|
||||
onChange={(value) => updateRule('answerBoxes', value)}
|
||||
isDark={isDark}
|
||||
/>
|
||||
|
||||
<RuleThermometer
|
||||
label="Place Value Colors"
|
||||
description="Reinforce place value understanding visually"
|
||||
value={displayRules.placeValueColors}
|
||||
onChange={(value) => updateRule('placeValueColors', value)}
|
||||
isDark={isDark}
|
||||
/>
|
||||
|
||||
<RuleThermometer
|
||||
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'
|
||||
}
|
||||
value={displayRules.carryBoxes}
|
||||
onChange={(value) => updateRule('carryBoxes', value)}
|
||||
isDark={isDark}
|
||||
/>
|
||||
|
||||
{(formState.operator === 'subtraction' || formState.operator === 'mixed') && (
|
||||
<RuleThermometer
|
||||
label="Borrowed 10s Box"
|
||||
description="Box for adding 10 to borrowing digit"
|
||||
value={displayRules.borrowNotation}
|
||||
onChange={(value) => updateRule('borrowNotation', value)}
|
||||
isDark={isDark}
|
||||
/>
|
||||
)}
|
||||
|
||||
{(formState.operator === 'subtraction' || formState.operator === 'mixed') && (
|
||||
<RuleThermometer
|
||||
label="Borrowing Hints"
|
||||
description="Show arrows and calculations guiding the borrowing process"
|
||||
value={displayRules.borrowingHints}
|
||||
onChange={(value) => updateRule('borrowingHints', value)}
|
||||
isDark={isDark}
|
||||
/>
|
||||
)}
|
||||
|
||||
<RuleThermometer
|
||||
label="Ten-Frames"
|
||||
description="Visualize regrouping with concrete counting tools"
|
||||
value={displayRules.tenFrames}
|
||||
onChange={(value) => updateRule('tenFrames', value)}
|
||||
isDark={isDark}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Live Preview - Collapsible */}
|
||||
<Collapsible.Root open={isPreviewOpen} onOpenChange={setIsPreviewOpen}>
|
||||
<Collapsible.Trigger asChild>
|
||||
<button
|
||||
type="button"
|
||||
className={css({
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
width: '100%',
|
||||
cursor: 'pointer',
|
||||
bg: 'transparent',
|
||||
border: 'none',
|
||||
mt: '2',
|
||||
_hover: {
|
||||
'& > div:first-child': {
|
||||
color: isDark ? 'gray.300' : 'gray.600',
|
||||
},
|
||||
},
|
||||
})}
|
||||
>
|
||||
<div
|
||||
className={css({
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: '2',
|
||||
})}
|
||||
>
|
||||
<div
|
||||
className={css({
|
||||
fontSize: 'xs',
|
||||
fontWeight: 'semibold',
|
||||
color: isDark ? 'gray.400' : 'gray.500',
|
||||
textTransform: 'uppercase',
|
||||
letterSpacing: 'wider',
|
||||
transition: 'color 0.2s',
|
||||
})}
|
||||
>
|
||||
Live Preview
|
||||
</div>
|
||||
<div
|
||||
className={css({
|
||||
fontSize: '2xs',
|
||||
color: isDark ? 'gray.500' : 'gray.400',
|
||||
fontStyle: 'italic',
|
||||
})}
|
||||
>
|
||||
(Optional)
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className={css({
|
||||
fontSize: 'sm',
|
||||
color: isDark ? 'gray.500' : 'gray.400',
|
||||
transition: 'transform 0.2s',
|
||||
transform: isPreviewOpen ? 'rotate(180deg)' : 'rotate(0deg)',
|
||||
})}
|
||||
>
|
||||
▼
|
||||
</div>
|
||||
</button>
|
||||
</Collapsible.Trigger>
|
||||
|
||||
<Collapsible.Content>
|
||||
<div className={css({ mt: '2' })}>
|
||||
<DisplayOptionsPreview formState={formState} />
|
||||
</div>
|
||||
</Collapsible.Content>
|
||||
</Collapsible.Root>
|
||||
</div>
|
||||
</Collapsible.Content>
|
||||
</div>
|
||||
</Collapsible.Root>
|
||||
)
|
||||
}
|
||||
Loading…
Reference in New Issue