Developer
ae420708f2
- 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
57 lines
2.4 KiB
Markdown
57 lines
2.4 KiB
Markdown
# 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
|