# Phase 7: Polish & Cleanup
**Estimated Time:** 1 hour
**Complexity:** Low
**Prerequisites:** Phase 6 complete (sheet selector working)
## Overview
Final polish, remove legacy files, ensure all functionality works correctly, and prepare the component for TASK-004 (migration status badges). This phase ensures the migration is complete and production-ready.
---
## Goals
- ✅ Polish UI/UX (spacing, hover states, focus states)
- ✅ Remove legacy files
- ✅ Clean up code (remove TODOs, add missing JSDoc)
- ✅ Verify all functionality works
- ✅ Prepare extension points for TASK-004
- ✅ Update documentation
- ✅ Final testing pass
---
## Step 1: UI Polish
### 1.1 Review All Styles
Check and fix any styling inconsistencies:
```scss
// Verify all spacing is consistent
.TreeItem {
padding: 6px 10px; // Should match across all items
}
// Verify hover states work
.TreeItem:hover {
background-color: var(--theme-color-bg-3);
}
// Verify selection states are clear
.TreeItem.Selected {
background-color: var(--theme-color-primary-transparent);
color: var(--theme-color-primary);
}
// Verify focus states for accessibility
.RenameInput:focus {
border-color: var(--theme-color-primary);
box-shadow: 0 0 0 2px var(--theme-color-primary-transparent);
}
```
### 1.2 Test Color Tokens
Verify all colors use design tokens (no hardcoded hex values):
```bash
# Search for hardcoded colors
grep -r "#[0-9a-fA-F]\{3,6\}" packages/noodl-editor/src/editor/src/views/panels/ComponentsPanel/
```
If any found, replace with appropriate tokens from `--theme-color-*`.
### 1.3 Test Dark Theme (if applicable)
If OpenNoodl supports theme switching, test the panel in dark theme to ensure all colors are legible.
---
## Step 2: Code Cleanup
### 2.1 Remove TODO Comments
Search for and resolve all TODO comments:
```bash
grep -rn "TODO" packages/noodl-editor/src/editor/src/views/panels/ComponentsPanel/
```
Either implement the TODOs or remove them if they're no longer relevant.
### 2.2 Remove TSFixme Types
Ensure no TSFixme types were added:
```bash
grep -rn "TSFixme" packages/noodl-editor/src/editor/src/views/panels/ComponentsPanel/
```
Replace any with proper types.
### 2.3 Add JSDoc Comments
Ensure all exported functions and components have JSDoc:
````typescript
/**
* ComponentsPanel
*
* Modern React implementation of the components sidebar panel.
* Displays project component hierarchy with folders, allows drag-drop reorganization,
* and provides context menus for component/folder operations.
*
* @example
* ```tsx
*
* ```
*/
export function ComponentsPanel(props: ComponentsPanelProps) {
// ...
}
````
### 2.4 Clean Up Imports
Remove unused imports and organize them:
```typescript
// External packages (alphabetical)
import PopupLayer from '@noodl-views/popuplayer';
import classNames from 'classnames';
import React, { useCallback, useEffect, useState } from 'react';
import { ProjectModel } from '@noodl-models/projectmodel';
import { UndoQueue } from '@noodl-models/undo-queue-model';
// Internal packages (alphabetical by alias)
import { IconName } from '@noodl-core-ui/components/common/Icon';
// Relative imports
import { ComponentTree } from './components/ComponentTree';
import css from './ComponentsPanel.module.scss';
import { useComponentsPanel } from './hooks/useComponentsPanel';
import { ComponentsPanelProps } from './types';
```
---
## Step 3: Remove Legacy Files
### 3.1 Verify All Functionality Works
Before removing legacy files, thoroughly test the new implementation:
- [ ] All features from old panel work in new panel
- [ ] No regressions identified
- [ ] All tests pass
### 3.2 Update Imports
Find all files that import the old ComponentsPanel:
```bash
grep -r "from.*componentspanel/ComponentsPanel" packages/noodl-editor/src/
```
Update to import from new location:
```typescript
// Old
// New
import { ComponentsPanel } from './views/panels/ComponentsPanel';
import { ComponentsPanelView } from './views/panels/componentspanel/ComponentsPanel';
```
### 3.3 Delete Legacy Files
Once all imports are updated and verified:
```bash
# Delete old implementation (DO NOT run this until 100% sure)
# rm packages/noodl-editor/src/editor/src/views/panels/componentspanel/ComponentsPanel.ts
# rm packages/noodl-editor/src/editor/src/templates/componentspanel.html
```
**IMPORTANT:** Keep `ComponentsPanelFolder.ts` and `ComponentTemplates.ts` as they're reused.
---
## Step 4: Prepare for TASK-004
### 4.1 Add Migration Status Type
In `types.ts`, add placeholder for migration status:
```typescript
/**
* Migration status for components (for TASK-004)
*/
export type MigrationStatus = 'needs-review' | 'ai-migrated' | 'auto' | 'manually-fixed' | null;
export interface ComponentItemData {
type: 'component';
component: ComponentModel;
folder: ComponentsPanelFolder;
name: string;
fullName: string;
isSelected: boolean;
isRoot: boolean;
isPage: boolean;
isCloudFunction: boolean;
isVisual: boolean;
canBecomeRoot: boolean;
hasWarnings: boolean;
// Migration status (for TASK-004)
migrationStatus?: MigrationStatus;
}
```
### 4.2 Add Badge Placeholder in ComponentItem
```typescript
export function ComponentItem({ component, level, isSelected, onClick }: ComponentItemProps) {
// ... existing code ...
return (