mirror of
https://github.com/siteboon/claudecodeui.git
synced 2026-03-09 16:07:49 +00:00
b5f7d2eada
- Move onboarding out of root-level components into a dedicated feature module:
- add src/components/onboarding/view/Onboarding.tsx
- split onboarding UI into focused subcomponents:
- OnboardingStepProgress
- GitConfigurationStep
- AgentConnectionsStep
- AgentConnectionCard
- add onboarding-local types and utils for provider status and validation helpers
- Move multi-provider login modal into a dedicated provider-auth feature:
- add src/components/provider-auth/view/ProviderLoginModal.tsx
- add src/components/provider-auth/types.ts
- keep provider-specific command/title behavior and Gemini setup guidance
- preserve compatibility for both onboarding flow and settings login flow
- Move TaskIndicator into the sidebar domain:
- add src/components/sidebar/view/subcomponents/TaskIndicator.tsx
- update SidebarProjectItem to consume local sidebar TaskIndicator
- Update integration points to the new structure:
- ProtectedRoute now imports onboarding from onboarding feature
- Settings now imports ProviderLoginModal directly (remove legacy cast wrapper)
- git panel consumers now import shared GitDiffViewer by explicit name
- Rename git shared diff view to clearer domain naming:
- replace shared DiffViewer with shared GitDiffViewer
- update FileChangeItem and CommitHistoryItem imports accordingly
- Remove superseded root-level legacy components:
- delete src/components/LoginModal.jsx
- delete src/components/Onboarding.jsx
- delete src/components/TaskIndicator.jsx
- delete old src/components/git-panel/view/shared/DiffViewer.tsx
- Result:
- clearer feature boundaries (auth vs onboarding vs provider-auth vs sidebar)
- easier navigation and ownership by domain
- preserved runtime behavior with improved readability and modularity
54 lines
2.0 KiB
TypeScript
54 lines
2.0 KiB
TypeScript
import { Check, GitBranch, LogIn } from 'lucide-react';
|
|
|
|
type OnboardingStepProgressProps = {
|
|
currentStep: number;
|
|
};
|
|
|
|
const onboardingSteps = [
|
|
{ title: 'Git Configuration', icon: GitBranch, required: true },
|
|
{ title: 'Connect Agents', icon: LogIn, required: false },
|
|
];
|
|
|
|
export default function OnboardingStepProgress({ currentStep }: OnboardingStepProgressProps) {
|
|
return (
|
|
<div className="mb-8">
|
|
<div className="flex items-center justify-between">
|
|
{onboardingSteps.map((step, index) => {
|
|
const isCompleted = index < currentStep;
|
|
const isActive = index === currentStep;
|
|
const Icon = step.icon;
|
|
|
|
return (
|
|
<div key={step.title} className="contents">
|
|
<div className="flex flex-col items-center flex-1">
|
|
<div
|
|
className={`w-12 h-12 rounded-full flex items-center justify-center border-2 transition-colors duration-200 ${
|
|
isCompleted
|
|
? 'bg-green-500 border-green-500 text-white'
|
|
: isActive
|
|
? 'bg-blue-600 border-blue-600 text-white'
|
|
: 'bg-background border-border text-muted-foreground'
|
|
}`}
|
|
>
|
|
{isCompleted ? <Check className="w-6 h-6" /> : <Icon className="w-6 h-6" />}
|
|
</div>
|
|
|
|
<div className="mt-2 text-center">
|
|
<p className={`text-sm font-medium ${isActive ? 'text-foreground' : 'text-muted-foreground'}`}>
|
|
{step.title}
|
|
</p>
|
|
{step.required && <span className="text-xs text-red-500">Required</span>}
|
|
</div>
|
|
</div>
|
|
|
|
{index < onboardingSteps.length - 1 && (
|
|
<div className={`flex-1 h-0.5 mx-2 transition-colors duration-200 ${isCompleted ? 'bg-green-500' : 'bg-border'}`} />
|
|
)}
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|