# Component Migration List

This document outlines all components that need to be migrated from the original repo to the new monorepo, following our React Component Organization Conventions.

## Original Repository Path

All original components are located at:
```
/Users/ianlylesblx/IDEA_CORE/laconic/repos/snowballtools-base/packages/frontend/src/components
```

## Migration Guidelines

1. **Styling Approach**:
   - Replace all CSS imports (e.g., `'react-dropdown/style.css'`) with Tailwind classes
   - Convert inline styles to Tailwind classes where possible
   - Use existing UI components from `components/ui` directory instead of external libraries

2. **Dependencies**:
   - Do not add new libraries to the project
   - Replace external component libraries with our own UI components
   - If a component depends on an external library, check if we have an equivalent in our UI library

3. **Pattern Matching**:
   - Follow existing patterns in our codebase for styling, state management, etc.
   - Use React hooks consistent with what's used in the rest of the application

4. **No Commits**:
   - All changes should be reviewed before being committed

## Feature-Based Organization

Components will be organized into the following feature groups:

## 1. Core Components

### Generic Components
| Component | Current Path | Migration Status | Notes |
|-----------|-------------|-----------------|-------|
| Dropdown | `/components/Dropdown.tsx` | ✅ Completed | Simple dropdown component |
| FormatMilliSecond | `/components/FormatMilliSecond.tsx` | ✅ Completed | Utility component for time formatting |
| Logo | `/components/Logo.tsx` | ✅ Completed | Brand element |
| SearchBar | `/components/SearchBar.tsx` | ✅ Completed | Generic search component |
| Stepper | `/components/Stepper.tsx` | ✅ Completed | Progress indicator |
| StopWatch | `/components/StopWatch.tsx` | ✅ Completed | Time tracking component |
| VerticalStepper | `/components/VerticalStepper.tsx` | ✅ Completed | Vertical orientation of stepper |

## 2. Layout Feature

### Navigation Components
| Component | Current Path | Migration Status | Notes |
|-----------|-------------|-----------------|-------|
| GitHubSessionButton | `/components/layout/navigation/components/GitHubSessionButton.tsx` | ✅ Completed | GitHub session management |
| LaconicIcon | `/components/layout/navigation/components/LaconicIcon.tsx` | ✅ Completed | Brand icon |
| NavigationActions | `/components/layout/navigation/components/NavigationActions.tsx` | ✅ Completed | Navigation action buttons |
| WalletSessionId | `/components/layout/navigation/components/WalletSessionId.tsx` | ✅ Completed | Implemented in both layout/navigation and foundation/wallet-session-id |

### Screen Header Components
| Component | Current Path | Migration Status | Notes |
|-----------|-------------|-----------------|-------|
| ActionButton | `/components/layout/screen-header/ActionButton.tsx` | ❌ Not Planned | Header action button - Skipping per instructions |
| Header | `/components/layout/screen-header/Header.tsx` | ❌ Not Planned | Page header component - Skipping per instructions |

### Screen Wrapper Components
| Component | Current Path | Migration Status | Notes |
|-----------|-------------|-----------------|-------|
| TabWrapper | `/components/layout/screen-wrapper/TabWrapper.tsx` | ❌ Not Planned | Tab content wrapper - Skipping per instructions |

### Search Components
| Component | Current Path | Migration Status | Notes |
|-----------|-------------|-----------------|-------|
| ProjectSearchBar | `/components/layout/search/ProjectSearchBar/ProjectSearchBar.tsx` | ✅ Completed | Implemented in /components/foundation/project-search-bar with simplified functionality |
| ProjectSearchBarDialog | `/components/layout/search/ProjectSearchBar/ProjectSearchBarDialog.tsx` | ❌ Not Planned | Search dialog - Skipping per instructions |
| ProjectSearchBarEmpty | `/components/layout/search/ProjectSearchBar/ProjectSearchBarEmpty.tsx` | ❌ Not Planned | Empty state - Skipping per instructions |
| ProjectSearchBarItem | `/components/layout/search/ProjectSearchBar/ProjectSearchBarItem.tsx` | ❌ Not Planned | Search result item - Skipping per instructions |

## 3. Project Management Feature

### Project Card Components
| Component | Current Path | Migration Status | Notes |
|-----------|-------------|-----------------|-------|
| ProjectCard | `/components/projects/ProjectCard/ProjectCard.tsx` | ❌ Not Planned | Project display card - Skipping per instructions |
| ProjectCardActions | `/components/projects/ProjectCard/ProjectCardActions.tsx` | ❌ Not Planned | Card actions - Skipping per instructions |
| ProjectDeploymentInfo | `/components/projects/ProjectCard/ProjectDeploymentInfo.tsx` | ❌ Not Planned | Deployment info display - Skipping per instructions |
| ProjectStatusDot | `/components/projects/ProjectCard/ProjectStatusDot.tsx` | ❌ Not Planned | Status indicator - Skipping per instructions |

### Project Search Components
| Component | Current Path | Migration Status | Notes |
|-----------|-------------|-----------------|-------|
| ProjectSearchBar | `/components/projects/ProjectSearchBar/ProjectSearchBar.tsx` | ❌ Not Planned | **DUPLICATE** - Skipping per instructions |

### Project Settings Components
| Component | Current Path | Migration Status | Notes |
|-----------|-------------|-------|-------|
| AddEnvironmentVariableRow | `/components/projects/project/settings/AddEnvironmentVariableRow.tsx` | ❌ Not Planned | Environment variable form - Skipping per instructions |
| AddMemberDialog | `/components/projects/project/settings/AddMemberDialog.tsx` | ❌ Not Planned | Add team member - Skipping per instructions |
| DeleteProjectDialog | `/components/projects/project/settings/DeleteProjectDialog.tsx` | ❌ Not Planned | Project deletion confirmation - Skipping per instructions |
| DisplayEnvironmentVariables | `/components/projects/project/settings/DisplayEnvironmentVariables.tsx` | ❌ Not Planned | Environment variable display - Skipping per instructions |
| DomainCard | `/components/projects/project/settings/DomainCard.tsx` | ❌ Not Planned | Domain display - Skipping per instructions |
| EditDomainDialog | `/components/projects/project/settings/EditDomainDialog.tsx` | ❌ Not Planned | Domain editing - Skipping per instructions |
| EditEnvironmentVariableRow | `/components/projects/project/settings/EditEnvironmentVariableRow.tsx` | ❌ Not Planned | Edit environment variable - Skipping per instructions |
| GitSelectionSection | `/components/projects/project/settings/GitSelectionSection.tsx` | ❌ Not Planned | Git repository selection - Skipping per instructions |
| MemberCard | `/components/projects/project/settings/MemberCard.tsx` | ❌ Not Planned | Team member display - Skipping per instructions |
| ProjectSettingContainer | `/components/projects/project/settings/ProjectSettingContainer.tsx` | ❌ Not Planned | Settings container - Skipping per instructions |
| ProjectSettingHeader | `/components/projects/project/settings/ProjectSettingHeader.tsx` | ❌ Not Planned | Settings header - Skipping per instructions |
| RepoConnectedSection | `/components/projects/project/settings/RepoConnectedSection.tsx` | ❌ Not Planned | Repository connection status - Skipping per instructions |
| SetupDomain | `/components/projects/project/settings/SetupDomain.tsx` | ❌ Not Planned | Domain setup flow - Skipping per instructions |
| WebhookCard | `/components/projects/project/settings/WebhookCard.tsx` | ❌ Not Planned | Webhook display - Skipping per instructions |

### Project Overview Components
| Component | Current Path | Migration Status | Notes |
|-----------|-------------|-------|-------|
| Activity | `/components/projects/project/overview/Activity/Activity.tsx` | ❌ Not Planned | Activity feed - Skipping per instructions |
| ActivityCard | `/components/projects/project/overview/Activity/ActivityCard.tsx` | ❌ Not Planned | Activity item - Skipping per instructions |
| AuctionCard | `/components/projects/project/overview/Activity/AuctionCard.tsx` | ✅ Completed | Auction display - Used in Overview page |
| OverviewInfo | `/components/projects/project/overview/OverviewInfo.tsx` | ✅ Completed | Overview information - Used in Overview page |

### Deployment Components
| Component | Current Path | Migration Status | Notes |
|-----------|-------------|-------|-------|
| DeploymentDetailsCard | `/components/projects/project/deployments/DeploymentDetailsCard.tsx` | ✅ Completed | Deployment details - Used in Deployments page |
| DeploymentDialogBodyCard | `/components/projects/project/deployments/DeploymentDialogBodyCard.tsx` | ❌ Not Planned | Deployment dialog - Skipping per instructions |
| DeploymentMenu | `/components/projects/project/deployments/DeploymentMenu.tsx` | ❌ Not Planned | Deployment actions menu - Skipping per instructions |
| FilterForm | `/components/projects/project/deployments/FilterForm.tsx` | ✅ Completed | Deployment filtering - Used in Deployments page |

### Dialog Components
| Component | Current Path | Migration Status | Notes |
|-----------|-------------|-------|-------|
| CancelDeploymentDialog | `/components/projects/Dialog/CancelDeploymentDialog.tsx` | ❌ Not Planned | Cancel deployment - Skipping per instructions |
| ChangeStateToProductionDialog | `/components/projects/Dialog/ChangeStateToProductionDialog.tsx` | ❌ Not Planned | Change deployment state - Skipping per instructions |
| DeleteDeploymentDialog | `/components/projects/Dialog/DeleteDeploymentDialog.tsx` | ❌ Not Planned | Delete deployment - Skipping per instructions |
| DeleteDomainDialog | `/components/projects/Dialog/DeleteDomainDialog.tsx` | ❌ Not Planned | Delete domain - Skipping per instructions |
| DeleteVariableDialog | `/components/projects/Dialog/DeleteVariableDialog.tsx` | ❌ Not Planned | Delete variable - Skipping per instructions |
| DeleteWebhookDialog | `/components/projects/Dialog/DeleteWebhookDialog.tsx` | ❌ Not Planned | Delete webhook - Skipping per instructions |
| DisconnectRepositoryDialog | `/components/projects/Dialog/DisconnectRepositoryDialog.tsx` | ❌ Not Planned | Disconnect repository - Skipping per instructions |
| RemoveMemberDialog | `/components/projects/Dialog/RemoveMemberDialog.tsx` | ❌ Not Planned | Remove team member - Skipping per instructions |
| TransferProjectDialog | `/components/projects/Dialog/TransferProjectDialog.tsx` | ❌ Not Planned | Transfer project ownership - Skipping per instructions |

### Project Creation Components
| Component | Current Path | Migration Status | Notes |
|-----------|-------------|-------|-------|
| ApproveTransactionModal | `/components/projects/create/ApproveTransactionModal.tsx` | ❌ Not Planned | Transaction approval - Skipping per instructions |
| CheckBalanceIframe | `/components/projects/create/CheckBalanceIframe.tsx` | ❌ Not Planned | Balance check - Skipping per instructions |
| Configure | `/components/projects/create/Configure.tsx` | ❌ Not Planned | Project configuration - Skipping per instructions |
| ConnectAccount | `/components/projects/create/ConnectAccount.tsx` | ❌ Not Planned | Account connection - Skipping per instructions |
| ConnectAccountTabPanel | `/components/projects/create/ConnectAccountTabPanel.tsx` | ❌ Not Planned | Connection tab panel - Skipping per instructions |
| Deploy | `/components/projects/create/Deploy.tsx` | ❌ Not Planned | Project deployment - Skipping per instructions |
| DeployStep | `/components/projects/create/DeployStep.tsx` | ❌ Not Planned | Deployment step - Skipping per instructions |
| MockConnectGitCard | `/components/projects/create/MockConnectGitCard.tsx` | ❌ Not Planned | Git connection mockup - Skipping per instructions |
| ProjectRepoCard | `/components/projects/create/ProjectRepoCard/ProjectRepoCard.tsx` | ❌ Not Planned | Repository card - Skipping per instructions |
| RepositoryList | `/components/projects/create/RepositoryList/RepositoryList.tsx` | ❌ Not Planned | Repository selection - Skipping per instructions |
| TemplateCard | `/components/projects/create/TemplateCard/TemplateCard.tsx` | ❌ Not Planned | Template selection card - Skipping per instructions |

## 4. Loading Components
| Component | Current Path | Migration Status | Notes |
|-----------|-------------|-------|-------|
| LoadingOverlay | `/components/loading/loading-overlay.tsx` | ❌ Not Planned | Loading state overlay - Skipping per instructions |

## 5. IFrame Components
| Component | Current Path | Migration Status | Notes |
|-----------|-------------|-------|-------|
| AutoSignInIFrameModal | `/components/shared/auth/AutoSignInIFrameModal.tsx` | ✅ Completed | Auto sign-in modal - Consolidated with duplicate |
| AutoSignInIFrameModal | `/components/wallet/AutoSignInIFrameModal.tsx` | ✅ Completed | Duplicate component consolidated with version from shared/auth |

## 6. Page Components (Used in Routes)

These components are used directly in routes and should be migrated as page components:

### Organization/Project Pages
| Component | Current Path | Migration Status | Route Path |
|-----------|-------------|-----------------|------------|
| ProjectsScreen | `/pages/org-slug/ProjectsScreen.tsx` | ❌ Not Planned | `/:orgSlug` - Skipping per instructions |
| Settings (Org) | `/pages/org-slug/Settings.tsx` | ❌ Not Planned | `/:orgSlug/settings` - Skipping per instructions |
| Id (Project) | `/pages/org-slug/projects/Id.tsx` | ❌ Not Planned | `/:orgSlug/projects/:id` - Skipping per instructions |

### Project Tab Pages
| Component | Current Path | Migration Status | Route Path |
|-----------|-------------|-----------------|------------|
| OverviewTabPanel | `/pages/org-slug/projects/id/Overview.tsx` | ✅ Completed | `/:orgSlug/projects/:id` (index) |
| DeploymentsTabPanel | `/pages/org-slug/projects/id/Deployments.tsx` | ✅ Completed | `/:orgSlug/projects/:id/deployments` |
| SettingsTabPanel | `/pages/org-slug/projects/id/Settings.tsx` | ❌ Not Started | `/:orgSlug/projects/:id/settings` |

### Project Settings Pages
| Component | Current Path | Route Path |
|-----------|-------------|------------|
| GeneralTabPanel | `/pages/org-slug/projects/id/settings/General.tsx` | `/:orgSlug/projects/:id/settings` (index) |
| Domains | `/pages/org-slug/projects/id/settings/Domains.tsx` | `/:orgSlug/projects/:id/settings/domains` |
| GitTabPanel | `/pages/org-slug/projects/id/settings/Git.tsx` | `/:orgSlug/projects/:id/settings/git` |
| EnvironmentVariablesTabPanel | `/pages/org-slug/projects/id/settings/EnvironmentVariables.tsx` | `/:orgSlug/projects/:id/settings/environment-variables` |
| CollaboratorsTabPanel | `/pages/org-slug/projects/id/settings/Collaborators.tsx` | `/:orgSlug/projects/:id/settings/collaborators` |
| AddDomain | `/pages/org-slug/projects/id/settings/domains/add/index.tsx` | `/:orgSlug/projects/:id/settings/domains/add` |
| Config (Domain) | `/pages/org-slug/projects/id/settings/domains/add/Config.tsx` | `/:orgSlug/projects/:id/settings/domains/add/config` |

### Project Creation Pages
| Component | Current Path | Route Path |
|-----------|-------------|------------|
| CreateProjectLayout | `/pages/org-slug/projects/create/CreateProjectLayout.tsx` | `/:orgSlug/projects/create` |
| NewProject | `/pages/org-slug/projects/create/NewProject.tsx` | `/:orgSlug/projects/create` (index) |
| CreateWithTemplate | `/pages/org-slug/projects/create/Template.tsx` | `/:orgSlug/projects/create/template` |
| Configure (Projects) | `/components/projects/create/Configure.tsx` | `/:orgSlug/projects/create/configure` |
| Deploy (Projects) | `/components/projects/create/Deploy.tsx` | `/:orgSlug/projects/create/deploy` |
| Id (Success) | `/pages/org-slug/projects/create/success/Id.tsx` | `/:orgSlug/projects/create/success/:id` |

### Template Pages
| Component | Current Path | Route Path |
|-----------|-------------|------------|
| CreateRepo | `/pages/org-slug/projects/create/template/index.tsx` | `/:orgSlug/projects/create/template` (index) |
| Configure (Template) | `/pages/org-slug/projects/create/template/Configure.tsx` | `/:orgSlug/projects/create/template/configure` |
| Deploy (Template) | `/pages/org-slug/projects/create/template/Deploy.tsx` | `/:orgSlug/projects/create/template/deploy` |

### Auth and Onboarding Pages
| Component | Current Path | Route Path |
|-----------|-------------|------------|
| Index | `/pages/index.tsx` | `/` |
| AuthPage | `/pages/AuthPage.tsx` | `/login` |
| BuyPrepaidService | `/pages/BuyPrepaidService.tsx` | `/buy-prepaid-service` |
| OnboardingPage | `/pages/OnboardingPage.tsx` | `/onboarding` |
| OnboardingDemoPage | `/pages/OnboardingDemoPage.tsx` | `/onboarding-demo` |

### Layouts
| Component | Current Path | Route Path |
|-----------|-------------|------------|
| RootLayout | `/layouts/RootLayout.tsx` | Root layout for all routes |
| DashboardLayout | `/layouts/DashboardLayout.tsx` | Layout for /:orgSlug routes |
| ProjectSearchLayout | `/layouts/ProjectSearch.tsx` | Layout for project search functionality |

## Notes and Observations

1. **Duplicated Components**:
   - `ProjectSearchBar`: Appears in both `/components/layout/search/ProjectSearchBar/` and `/components/projects/ProjectSearchBar/`

## Migration Progress Summary

### Completed Migrations
1. **Core Components**: 7/7 components (100% complete)
2. **Layout Feature - Navigation Components**: 4/4 components (100% complete)
3. **Project Tab Pages**: 2/3 components (67% complete)
   - Migrated: OverviewTabPanel, DeploymentsTabPanel
   - Pending: SettingsTabPanel
4. **Project Overview Components**: 2/4 components (50% complete)
   - Migrated: AuctionCard, OverviewInfo
   - Not Planned: Activity, ActivityCard
5. **Deployment Components**: 2/4 components (50% complete)
   - Migrated: DeploymentDetailsCard, FilterForm
   - Not Planned: DeploymentDialogBodyCard, DeploymentMenu
6. **IFrame Components**: 2/2 components (100% complete)

### Next Steps
1. Migrate the SettingsTabPanel and related settings pages
2. Migrate the Project Creation pages
3. Migrate the Template pages

### Migration Notes
- The migrated components have been adapted to work with Next.js App Router
- Many UI components and utilities were already available in the codebase
- Type definitions have been updated to ensure type safety
- Redundant files have been cleaned up