Remove duplicate section

Author: labkey-jeckels

.agents/review-checklists/react/code-quality.md

@@ -122,7 +122,7 @@ Maintainability
 
 ### Confidence Threshold
 
-Flag JSX return statements >50 lines or those with multiple conditional branches (3+ `{condition && <...>}` or ternary operators). Simple single-element returns or small layout wrappers are exempt.
+Flag JSX return statements >25 lines or those with multiple conditional branches (3+ `{condition && <...>}` or ternary operators). Simple single-element returns or small layout wrappers are exempt.
 
 ### Exceptions / False Positives
 
@@ -191,20 +191,30 @@ interface TabPanelProps {
     onChange: (tab: 'properties' | 'warnings') => void;
 }
 
-const TabPanel: FC<TabPanelProps> = ({ active, onChange }) => (
-    <div className="tabs" role="tablist">
-        {['properties', 'warnings'].map(tab => (
+const TabPanel: FC<TabPanelProps> = ({ active, onChange }) => {
+    const handlePropertiesClick = useCallback(() => onChange('properties'), [onChange]);
+    const handleWarningsClick = useCallback(() => onChange('warnings'), [onChange]);
+
+    return (
+        <div className="tabs" role="tablist">
             <button
-                key={tab}
                 role="tab"
-                aria-selected={active === tab}
-                onClick={() => onChange(tab as 'properties' | 'warnings')}
+                aria-selected={active === 'properties'}
+                onClick={handlePropertiesClick}
             >
-                {tab.charAt(0).toUpperCase() + tab.slice(1)}
+                Properties
             </button>
-        ))}
-    </div>
-);
+            <button
+                role="tab"
+                aria-selected={active === 'warnings'}
+                onClick={handleWarningsClick}
+            >
+                Warnings
+            </button>
+        </div>
+    );
+};
+TabPanel.displayName = 'TabPanel';
 
 const DesignerPanel: FC<Props> = ({ data, showWarnings }) => {
     const [rightTab, setRightTab] = useState<'properties' | 'warnings'>('properties');
@@ -217,14 +227,15 @@ const DesignerPanel: FC<Props> = ({ data, showWarnings }) => {
         </div>
     );
 };
+DesignerPanel.displayName = 'DesignerPanel';
 ```
 
 ### How to Detect
 
 1. **Multiple conditional branches:** Count `{condition && <...>}` and ternary operators. 3+ suggests extraction.
 2. **Repeated patterns:** Similar button/input groups with duplicated props (e.g., `role="tab"`, `aria-selected`, `onClick`) → extract into component.
 3. **Multiple state sections:** Component with separate state for tabs/panels (e.g., `const [tab, setTab]` and `const [panel, setPanel]`) often signals multiple concerns.
-4. **Line count + nesting:** Return >50 lines OR deeply nested (3+ levels) conditional JSX → consider extraction.
+4. **Line count + nesting:** Return >25 lines OR deeply nested (3+ levels) conditional JSX → consider extraction.
 
 ## React components and hooks should have unit tests
 
@@ -295,131 +306,6 @@ test('increments count when button clicked', async () => {
 2. If missing, flag if component has: hooks, event handlers, or conditional logic.
 3. If tests exist, verify they assert on behavior (not just render existence).
 
-## Large JSX/TSX blocks should be extracted into separate components
-
-**Urgency:** suggestion
-
-### Category
-
-Maintainability
-
-### Confidence Threshold
-
-Flag JSX return statements >25 lines or those with multiple conditional branches (3+ `{condition && <...>}` or ternary operators). Simple single-element returns or small layout wrappers are exempt.
-
-### Exceptions / False Positives
-
-- Do not flag simple, single-element returns or small layout wrappers.
-- Do not flag when extraction would require excessive prop-drilling that makes code less readable.
-
-### Description
-
-Large JSX blocks reduce readability, increase cognitive load, and make testing harder. Red flags: multiple conditional rendering branches, repeated patterns (like tab buttons with similar structure), deeply nested element hierarchies, and components managing multiple independent concerns.
-
-### Anti-patterns to Flag
-
-```tsx
-// ❌ Return block with multiple conditional branches and repeated patterns
-const DesignerPanel: FC<Props> = ({ data, showWarnings }) => {
-    const [rightTab, setRightTab] = useState<'properties' | 'warnings'>('properties');
-
-    return (
-        <div className="designer">
-            {showWarnings && (
-                <div className="tabs" role="tablist">
-                    <button
-                        role="tab"
-                        aria-selected={rightTab === 'properties'}
-                        onClick={() => setRightTab('properties')}
-                    >
-                        Properties
-                    </button>
-                    <button
-                        role="tab"
-                        aria-selected={rightTab === 'warnings'}
-                        onClick={() => setRightTab('warnings')}
-                    >
-                        Warnings
-                    </button>
-                </div>
-            )}
-            {(!showWarnings || rightTab === 'properties') && (
-                <div role="tabpanel">
-                    <PropertiesPanel data={data} />
-                </div>
-            )}
-            {showWarnings && rightTab === 'warnings' && (
-                <div role="tabpanel">
-                    <WarningsPanel data={data} />
-                </div>
-            )}
-        </div>
-    );
-};
-```
-
-**Red flags in this example:**
-- 3 separate conditional render blocks
-- Repeated tab button structure with duplicated accessibility attrs
-- Multiple independent concerns (tabs, properties, warnings)
-- Mixed conditional logic (both &&-chaining and ternaries)
-
-### Suggested Fix
-
-Extract the tab control into a reusable component:
-
-```tsx
-interface TabPanelProps {
-    active: 'properties' | 'warnings';
-    onChange: (tab: 'properties' | 'warnings') => void;
-}
-
-const TabPanel: FC<TabPanelProps> = ({ active, onChange }) => {
-    const handlePropertiesClick = useCallback(() => onChange('properties'), [onChange]);
-    const handleWarningsClick = useCallback(() => onChange('warnings'), [onChange]);
-
-    return (
-        <div className="tabs" role="tablist">
-            <button
-                role="tab"
-                aria-selected={active === 'properties'}
-                onClick={handlePropertiesClick}
-            >
-                Properties
-            </button>
-            <button
-                role="tab"
-                aria-selected={active === 'warnings'}
-                onClick={handleWarningsClick}
-            >
-                Warnings
-            </button>
-        </div>
-    );
-};
-TabPanel.displayName = 'TabPanel';
-
-const DesignerPanel: FC<Props> = ({ data, showWarnings }) => {
-    const [rightTab, setRightTab] = useState<'properties' | 'warnings'>('properties');
-
-    return (
-        <div className="designer">
-            {showWarnings && <TabPanel active={rightTab} onChange={setRightTab} />}
-            {(!showWarnings || rightTab === 'properties') && <PropertiesPanel data={data} />}
-            {showWarnings && rightTab === 'warnings' && <WarningsPanel data={data} />}
-        </div>
-    );
-};
-DesignerPanel.displayName = 'DesignerPanel';
-```
-
-### How to Detect
-
-1. **Multiple conditional branches:** Count `{condition && <...>}` and ternary operators. 3+ suggests extraction.
-2. **Repeated patterns:** Similar button/input groups with duplicated props (e.g., `role="tab"`, `aria-selected`, `onClick`) → extract into component.
-3. **Multiple state sections:** Component with separate state for tabs/panels (e.g., `const [tab, setTab]` and `const [panel, setPanel]`) often signals multiple concerns.
-4. **Line count + nesting:** Return >25 lines OR deeply nested (3+ levels) conditional JSX → consider extraction.
-
 ## Optional props that are always passed should be required
 
 **Urgency:** suggestion