Files

T

Developer ae420708f2 refactor: split tool-workshop page into tab components (Task 4.1)

- Extract ToolTypesTab, ToolConfigsTab, ConfigFoldersTab from inline page
- Each tab is self-contained with own state, API calls, and forms
- Slim page to 77 lines (tab switcher + composition only)
- Add barrel export for tool-workshop feature components
- Add tsconfig path alias for @/* imports

Quality gates: tsc (pass), eslint (pass)
Refs: repo-restructure Task 4.1

2026-06-02 21:49:20 +00:00

2.4 KiB

Raw Blame History

Task 4.1 Apply Report: Split tool-workshop Page into Tab Components

Status: Success (with deviation noted)

Files Created (4)

apps/web/src/components/features/tool-workshop/ToolTypesTab.tsx (417 lines)
- Self-contained tool types list + create/edit form
- Manages own toolTypes, form state, loading/error state
- Imports from api/tool_types
apps/web/src/components/features/tool-workshop/ToolConfigsTab.tsx (381 lines)
- Self-contained configs list + create/edit form
- Loads both toolTypes (for dropdown) and configs
- Imports from api/tool_configs and api/tool_types
apps/web/src/components/features/tool-workshop/ConfigFoldersTab.tsx (244 lines)
- Self-contained folders list + create/edit form
- Imports from api/config_folders
apps/web/src/components/features/tool-workshop/index.ts (barrel export)

Files Modified (2)

apps/web/src/pages/tool-workshop.tsx — Slimmed from ~700 lines to 77 lines
- Removed all inline tab state and JSX
- Keeps only: activeTab state, tab navigation, component composition
- Imports tabs from @/components/features/tool-workshop
apps/web/tsconfig.json — Added baseUrl and paths for @/* alias
- Required because parallel Task 4.2 files use @/ imports
- Standard Vite path mapping, no build behavior change

Deviation from Target

File	Target	Actual	Note
ToolTypesTab.tsx	~250	417	Form has 15+ fields; each field is ~8 lines of JSX
ToolConfigsTab.tsx	~200	381	Form has 10+ fields plus JSON validation
ConfigFoldersTab.tsx	~200	244	Within acceptable range

Rationale: The tabs are form-heavy components. Each form field requires ~6-10 lines of JSX (label + input + props). Further splitting would create micro-components for individual form fields, which may not improve readability. The page itself is well under target at 77 lines.

Quality Gate Results

Gate	Result
`npm run typecheck`	✅ PASS — zero errors
`npm run lint`	✅ PASS — zero warnings
`wc -l pages/tool-workshop.tsx`	✅ 77 lines (≤150 target)
All 3 tabs compile and import	✅ PASS

Next Steps

Further decompose ToolTypesTab and ToolConfigsTab into form-field sub-components if desired (optional, out of current task scope)
Task 4.2 (sessions page split) is in progress in parallel

2.4 KiB Raw Blame History