mirror of
https://github.com/siteboon/claudecodeui.git
synced 2026-03-11 17:07:40 +00:00
Refactor/shared and tasks components (#473)
* refactor: remove unused TasksSettings component
* refactor: migrate TodoList component to a new file with improved structure and normalization logic
* refactor: Move Tooltip and DarkModeToggle to shared/ui
* refactor: Move Tooltip and DarkModeToggle to shared/view/ui
* refactor: move GeminiLogo to llm-logo-provider and update imports
* refactor: remove unused GeminiStatus component
* refactor: move components in src/components/ui to src/shared/view/ui
* refactor: move ErrorBoundary component to main-content/view and update imports
* refactor: move VersionUpgradeModal to its own module
* refactor(wizard): rebuild project creation flow as modular TypeScript components
Replace the monolithic `ProjectCreationWizard.jsx` with a feature-based TS
implementation under `src/components/project-creation-wizard`, while preserving
existing behavior and improving readability, maintainability, and state isolation.
Why:
- The previous wizard mixed API logic, flow state, folder browsing, and UI in one file.
- Refactoring and testing were difficult due to tightly coupled concerns.
- We needed stronger type safety and localized component state.
What changed:
- Deleted:
- `src/components/ProjectCreationWizard.jsx`
- Added new modular structure:
- `src/components/project-creation-wizard/index.ts`
- `src/components/project-creation-wizard/ProjectCreationWizard.tsx`
- `src/components/project-creation-wizard/types.ts`
- `src/components/project-creation-wizard/data/workspaceApi.ts`
- `src/components/project-creation-wizard/hooks/useGithubTokens.ts`
- `src/components/project-creation-wizard/utils/pathUtils.ts`
- `src/components/project-creation-wizard/components/*`
- `WizardProgress`, `WizardFooter`, `ErrorBanner`
- `StepTypeSelection`, `StepConfiguration`, `StepReview`
- `WorkspacePathField`, `GithubAuthenticationCard`, `FolderBrowserModal`
- Updated import usage:
- `src/components/sidebar/view/subcomponents/SidebarModals.tsx`
now imports from `../../../project-creation-wizard`.
Implementation details:
- Migrated wizard logic to TypeScript using `type` aliases only.
- Kept component prop types colocated in each component file.
- Split responsibilities by feature:
- container/orchestration in `ProjectCreationWizard.tsx`
- API/SSE and request parsing in `data/workspaceApi.ts`
- GitHub token loading/caching behavior in `useGithubTokens`
- path/URL helpers in `utils/pathUtils.ts`
- Localized UI-only state to child components:
- folder browser modal state (current path, hidden folders, create-folder input)
- path suggestion dropdown state with debounced lookup
- Preserved existing UX flows:
- step navigation and validation
- existing/new workspace modes
- optional GitHub clone + auth modes
- clone progress via SSE
- folder browsing + folder creation
- Added focused comments for non-obvious logic (debounce, SSE auth constraint, path edge cases).
* refactor(quick-settings): migrate panel to typed feature-based modules
Refactor QuickSettingsPanel from a single JSX component into a modular TypeScript feature structure while preserving behavior and translations.
Highlights:
- Replace legacy src/components/QuickSettingsPanel.jsx with a typed entrypoint (src/components/QuickSettingsPanel.tsx).
- Introduce src/components/quick-settings-panel/ with clear separation of concerns:
- view/: panel shell, header, handle, section wrappers, toggle rows, and content sections.
- hooks/: drag interactions and whisper mode persistence.
- constants.ts and types.ts for shared config and strict local typing.
- Move drag logic into useQuickSettingsDrag with explicit touch/mouse handling, drag threshold detection, click suppression after drag, position clamping, and localStorage persistence.
- Keep user-visible behavior intact:
- same open/close panel interactions.
- same mobile/desktop drag behavior and persisted handle position.
- same quick preference toggles and wiring to useUiPreferences.
- same hidden whisper section behavior and localStorage/event updates.
- Improve readability and maintainability by extracting repetitive setting rows and section scaffolding into reusable components.
- Add focused comments around non-obvious behavior (drag click suppression, touch scroll lock, hidden whisper section intent).
- Keep files small and reviewable (all new/changed files are under 300 lines).
Validation:
- npm run typecheck
- npm run build
* refactor(quick-settings-panel): restructure QuickSettingsPanel import and create index file
* refactor(shared): move shared ui components to share/view/ui without subfolders
* refactor(LanguageSelector): move LanguageSelector to shared UI components
* refactor(prd-editor): modularize PRD editor with typed feature modules
Break the legacy PRDEditor.jsx monolith into a feature-based TypeScript architecture under src/components/prd-editor while keeping behavior parity and readability.
Key changes:
- Replace PRDEditor.jsx with a typed orchestrator component and a compatibility export bridge at src/components/PRDEditor.tsx.
- Split responsibilities into dedicated hooks: document loading/init, existing PRD registry fetching, save workflow with overwrite detection, and keyboard shortcuts.
- Split UI into focused view components: header, editor/preview body, footer stats, loading state, generate-tasks modal, and overwrite-confirm modal.
- Move filename concerns into utility helpers (sanitize, extension handling, default naming) and centralize template/constants.
- Keep component-local state close to the UI that owns it (workspace controls/modal toggles), while shared workflow state remains in the feature container.
- Reuse the existing MarkdownPreview component for safer markdown rendering instead of ad-hoc HTML conversion.
- Update TaskMasterPanel integration to consume typed PRDEditor directly (remove any-cast) and pass isExisting metadata for correct overwrite behavior.
- Keep all new/changed files below 300 lines and add targeted comments where behavior needs clarification.
Validation:
- npm run typecheck
- npm run build
* refactor(TaskMasterPanel): update PRDEditor import path to match new structure
* refactor(TaskMaster): Remove unused TaskMasterSetupWizard and TaskMasterStatus components
* refactor(TaskDetail): remove unused TaskIndicator import
* refactor(task-master): migrate tasks to a typed feature module
- introduce a new feature-oriented TaskMaster domain under src/components/task-master
- add typed TaskMaster context/provider with explicit project, task, MCP, and loading state handling
- split task UI into focused components (panel, board, toolbar, content, card, detail modal, setup/help modals, banner)
- move task board filtering/sorting/kanban derivation into dedicated hooks and utilities
- relocate CreateTaskModal into the feature module and keep task views modular/readable
- remove legacy monolithic TaskList/TaskDetail/TaskCard files and route main task panel to the new feature panel
- replace contexts/TaskMasterContext.jsx with a typed contexts/TaskMasterContext.ts re-export to the feature context
- update MainContent project sync logic to compare by project name to avoid state churn
- validation: npm run typecheck, npm run build
* refactor(MobileNav): remove unused React import and TaskMasterContext
* refactor(auth): migrate login and setup flows to typed feature module
- Introduce a new feature-based auth module under src/components/auth with clear separation of concerns:\n - context/AuthContext.tsx for session lifecycle, onboarding status checks, token persistence, and auth actions\n - view/* components for loading, route guarding, form layout, input fields, and error display\n - shared auth constants, utility helpers, and type aliases (no interfaces)\n- Convert login and setup UIs to TypeScript and keep form state local to each component for readability and component-level ownership\n- Add explicit API payload typing and safe JSON parsing helpers to improve resilience when backend responses are malformed or incomplete\n- Centralize error fallback handling for auth requests to reduce repeated logic
- Replace legacy auth entrypoints with the new feature module in app wiring:\n - App now imports AuthProvider and ProtectedRoute from src/components/auth\n - WebSocketContext, TaskMasterContext, and Onboarding now consume useAuth from the new typed auth context\n- Remove duplicated legacy auth screens (LoginForm.jsx, SetupForm.jsx, ProtectedRoute.jsx)\n- Keep backward compatibility by turning src/contexts/AuthContext.jsx into a thin re-export of the new provider/hook
Result: auth code now follows a feature/domain structure, is fully typed, easier to navigate, and cleaner to extend without touching unrelated UI areas.
* refactor(AppContent): update MobileNav import path and add MobileNav component
* refactor(DiffViewer): rename different diff viewers and place them in different components
* refactor(components): reorganize onboarding/provider auth/sidebar indicator into domain features
- 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
* refactor(MainContent): remove TaskMasterPanel import and relocate to task-master component
* fix: update import paths for Input component in FileTree and FileTreeNode
* refactor(FileTree): make file tree context menu a typescript component and move it inside the file tree view
* refactor(FileTree): remove unused ScrollArea import
* feat: setup eslint with typescript and react rules, add unused imports plugin
* fix: remove unused imports, functions, and types after discovering using `npm run lint`
* feat: setup eslint-plugin-react, react-refresh, import-x, and tailwindcss plugins with recommended rules and configurations
* chore: reformat files after running `npm run lint:fix`
* chore: add omments about eslint config plugin uses
* feat: add husky and lint-staged for pre-commit linting
* feat: setup commitlint with conventional config
* fix: i18n translations
---------
Co-authored-by: Haileyesus <something@gmail.com>
Co-authored-by: viper151 <simosmik@gmail.com>
This commit is contained in:
Haileyesus
@@ -66,14 +66,14 @@ export default function GitPanel({ selectedProject, isMobile = false, onFileOpen
|
||||
|
||||
if (!selectedProject) {
|
||||
return (
|
||||
<div className="h-full flex items-center justify-center text-muted-foreground">
|
||||
<div className="flex h-full items-center justify-center text-muted-foreground">
|
||||
<p>Select a project to view source control</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="h-full flex flex-col bg-background">
|
||||
<div className="flex h-full flex-col bg-background">
|
||||
<GitPanelHeader
|
||||
isMobile={isMobile}
|
||||
currentBranch={currentBranch}
|
||||
|
||||
@@ -113,9 +113,9 @@ export default function GitPanelHeader({
|
||||
<div className="relative" ref={dropdownRef}>
|
||||
<button
|
||||
onClick={() => setShowBranchDropdown((previous) => !previous)}
|
||||
className={`flex items-center hover:bg-accent rounded-lg transition-colors ${isMobile ? 'space-x-1 px-2 py-1' : 'space-x-2 px-3 py-1.5'}`}
|
||||
className={`flex items-center rounded-lg transition-colors hover:bg-accent ${isMobile ? 'space-x-1 px-2 py-1' : 'space-x-2 px-3 py-1.5'}`}
|
||||
>
|
||||
<GitBranch className={`text-muted-foreground ${isMobile ? 'w-3 h-3' : 'w-4 h-4'}`} />
|
||||
<GitBranch className={`text-muted-foreground ${isMobile ? 'h-3 w-3' : 'h-4 w-4'}`} />
|
||||
<span className="flex items-center gap-1">
|
||||
<span className={`font-medium ${isMobile ? 'text-xs' : 'text-sm'}`}>{currentBranch}</span>
|
||||
{remoteStatus?.hasRemote && (
|
||||
@@ -146,22 +146,22 @@ export default function GitPanelHeader({
|
||||
</span>
|
||||
)}
|
||||
</span>
|
||||
<ChevronDown className={`w-3 h-3 text-muted-foreground transition-transform ${showBranchDropdown ? 'rotate-180' : ''}`} />
|
||||
<ChevronDown className={`h-3 w-3 text-muted-foreground transition-transform ${showBranchDropdown ? 'rotate-180' : ''}`} />
|
||||
</button>
|
||||
|
||||
{showBranchDropdown && (
|
||||
<div className="absolute top-full left-0 mt-1 w-64 bg-card rounded-xl shadow-lg border border-border z-50 overflow-hidden">
|
||||
<div className="py-1 max-h-64 overflow-y-auto">
|
||||
<div className="absolute left-0 top-full z-50 mt-1 w-64 overflow-hidden rounded-xl border border-border bg-card shadow-lg">
|
||||
<div className="max-h-64 overflow-y-auto py-1">
|
||||
{branches.map((branch) => (
|
||||
<button
|
||||
key={branch}
|
||||
onClick={() => void handleSwitchBranch(branch)}
|
||||
className={`w-full text-left px-4 py-2 text-sm hover:bg-accent transition-colors ${
|
||||
className={`w-full px-4 py-2 text-left text-sm transition-colors hover:bg-accent ${
|
||||
branch === currentBranch ? 'bg-accent/50 text-foreground' : 'text-muted-foreground'
|
||||
}`}
|
||||
>
|
||||
<span className="flex items-center space-x-2">
|
||||
{branch === currentBranch && <Check className="w-3 h-3 text-primary" />}
|
||||
{branch === currentBranch && <Check className="h-3 w-3 text-primary" />}
|
||||
<span className={branch === currentBranch ? 'font-medium' : ''}>{branch}</span>
|
||||
</span>
|
||||
</button>
|
||||
@@ -173,9 +173,9 @@ export default function GitPanelHeader({
|
||||
setShowNewBranchModal(true);
|
||||
setShowBranchDropdown(false);
|
||||
}}
|
||||
className="w-full text-left px-4 py-2 text-sm hover:bg-accent transition-colors flex items-center space-x-2"
|
||||
className="flex w-full items-center space-x-2 px-4 py-2 text-left text-sm transition-colors hover:bg-accent"
|
||||
>
|
||||
<Plus className="w-3 h-3" />
|
||||
<Plus className="h-3 w-3" />
|
||||
<span>Create new branch</span>
|
||||
</button>
|
||||
</div>
|
||||
@@ -190,10 +190,10 @@ export default function GitPanelHeader({
|
||||
<button
|
||||
onClick={requestPublishConfirmation}
|
||||
disabled={isPublishing}
|
||||
className="px-2.5 py-1 text-sm bg-purple-600 text-white rounded-lg hover:bg-purple-700 disabled:opacity-50 flex items-center gap-1 transition-colors"
|
||||
className="flex items-center gap-1 rounded-lg bg-purple-600 px-2.5 py-1 text-sm text-white transition-colors hover:bg-purple-700 disabled:opacity-50"
|
||||
title={`Publish branch "${currentBranch}" to ${remoteName}`}
|
||||
>
|
||||
<Upload className={`w-3 h-3 ${isPublishing ? 'animate-pulse' : ''}`} />
|
||||
<Upload className={`h-3 w-3 ${isPublishing ? 'animate-pulse' : ''}`} />
|
||||
<span>{isPublishing ? 'Publishing...' : 'Publish'}</span>
|
||||
</button>
|
||||
)}
|
||||
@@ -204,10 +204,10 @@ export default function GitPanelHeader({
|
||||
<button
|
||||
onClick={requestPullConfirmation}
|
||||
disabled={isPulling}
|
||||
className="px-2.5 py-1 text-sm bg-green-600 text-white rounded-lg hover:bg-green-700 disabled:opacity-50 flex items-center gap-1 transition-colors"
|
||||
className="flex items-center gap-1 rounded-lg bg-green-600 px-2.5 py-1 text-sm text-white transition-colors hover:bg-green-700 disabled:opacity-50"
|
||||
title={`Pull ${behindCount} commit${behindCount !== 1 ? 's' : ''} from ${remoteName}`}
|
||||
>
|
||||
<Download className={`w-3 h-3 ${isPulling ? 'animate-pulse' : ''}`} />
|
||||
<Download className={`h-3 w-3 ${isPulling ? 'animate-pulse' : ''}`} />
|
||||
<span>{isPulling ? 'Pulling...' : `Pull ${behindCount}`}</span>
|
||||
</button>
|
||||
)}
|
||||
@@ -216,10 +216,10 @@ export default function GitPanelHeader({
|
||||
<button
|
||||
onClick={requestPushConfirmation}
|
||||
disabled={isPushing}
|
||||
className="px-2.5 py-1 text-sm bg-orange-600 text-white rounded-lg hover:bg-orange-700 disabled:opacity-50 flex items-center gap-1 transition-colors"
|
||||
className="flex items-center gap-1 rounded-lg bg-orange-600 px-2.5 py-1 text-sm text-white transition-colors hover:bg-orange-700 disabled:opacity-50"
|
||||
title={`Push ${aheadCount} commit${aheadCount !== 1 ? 's' : ''} to ${remoteName}`}
|
||||
>
|
||||
<Upload className={`w-3 h-3 ${isPushing ? 'animate-pulse' : ''}`} />
|
||||
<Upload className={`h-3 w-3 ${isPushing ? 'animate-pulse' : ''}`} />
|
||||
<span>{isPushing ? 'Pushing...' : `Push ${aheadCount}`}</span>
|
||||
</button>
|
||||
)}
|
||||
@@ -228,10 +228,10 @@ export default function GitPanelHeader({
|
||||
<button
|
||||
onClick={() => void handleFetch()}
|
||||
disabled={isFetching}
|
||||
className="px-2.5 py-1 text-sm bg-primary text-primary-foreground rounded-lg hover:bg-primary/90 disabled:opacity-50 flex items-center gap-1 transition-colors"
|
||||
className="flex items-center gap-1 rounded-lg bg-primary px-2.5 py-1 text-sm text-primary-foreground transition-colors hover:bg-primary/90 disabled:opacity-50"
|
||||
title={`Fetch from ${remoteName}`}
|
||||
>
|
||||
<RefreshCw className={`w-3 h-3 ${isFetching ? 'animate-spin' : ''}`} />
|
||||
<RefreshCw className={`h-3 w-3 ${isFetching ? 'animate-spin' : ''}`} />
|
||||
<span>{isFetching ? 'Fetching...' : 'Fetch'}</span>
|
||||
</button>
|
||||
)}
|
||||
@@ -243,10 +243,10 @@ export default function GitPanelHeader({
|
||||
<button
|
||||
onClick={onRefresh}
|
||||
disabled={isLoading}
|
||||
className={`hover:bg-accent rounded-lg transition-colors ${isMobile ? 'p-1' : 'p-1.5'}`}
|
||||
className={`rounded-lg transition-colors hover:bg-accent ${isMobile ? 'p-1' : 'p-1.5'}`}
|
||||
title="Refresh git status"
|
||||
>
|
||||
<RefreshCw className={`text-muted-foreground ${isLoading ? 'animate-spin' : ''} ${isMobile ? 'w-3 h-3' : 'w-4 h-4'}`} />
|
||||
<RefreshCw className={`text-muted-foreground ${isLoading ? 'animate-spin' : ''} ${isMobile ? 'h-3 w-3' : 'h-4 w-4'}`} />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -7,18 +7,18 @@ type GitRepositoryErrorStateProps = {
|
||||
|
||||
export default function GitRepositoryErrorState({ error, details }: GitRepositoryErrorStateProps) {
|
||||
return (
|
||||
<div className="flex-1 flex flex-col items-center justify-center text-muted-foreground px-6 py-12">
|
||||
<div className="w-16 h-16 rounded-2xl bg-muted/50 flex items-center justify-center mb-6">
|
||||
<GitBranch className="w-8 h-8 opacity-40" />
|
||||
<div className="flex flex-1 flex-col items-center justify-center px-6 py-12 text-muted-foreground">
|
||||
<div className="mb-6 flex h-16 w-16 items-center justify-center rounded-2xl bg-muted/50">
|
||||
<GitBranch className="h-8 w-8 opacity-40" />
|
||||
</div>
|
||||
<h3 className="text-lg font-medium mb-3 text-center text-foreground">{error}</h3>
|
||||
<h3 className="mb-3 text-center text-lg font-medium text-foreground">{error}</h3>
|
||||
{details && (
|
||||
<p className="text-sm text-center leading-relaxed mb-6 max-w-md">{details}</p>
|
||||
<p className="mb-6 max-w-md text-center text-sm leading-relaxed">{details}</p>
|
||||
)}
|
||||
<div className="p-4 bg-primary/5 rounded-xl border border-primary/10 max-w-md">
|
||||
<p className="text-sm text-primary text-center">
|
||||
<div className="max-w-md rounded-xl border border-primary/10 bg-primary/5 p-4">
|
||||
<p className="text-center text-sm text-primary">
|
||||
<strong>Tip:</strong> Run{' '}
|
||||
<code className="bg-primary/10 px-2 py-1 rounded-md font-mono text-xs">git init</code>{' '}
|
||||
<code className="rounded-md bg-primary/10 px-2 py-1 font-mono text-xs">git init</code>{' '}
|
||||
in your project directory to initialize git source control.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
@@ -11,19 +11,19 @@ export default function GitViewTabs({ activeView, isHidden, onChange }: GitViewT
|
||||
return (
|
||||
<div
|
||||
className={`flex border-b border-border/60 transition-all duration-300 ease-in-out ${
|
||||
isHidden ? 'max-h-0 opacity-0 -translate-y-2 overflow-hidden' : 'max-h-16 opacity-100 translate-y-0'
|
||||
isHidden ? 'max-h-0 -translate-y-2 overflow-hidden opacity-0' : 'max-h-16 translate-y-0 opacity-100'
|
||||
}`}
|
||||
>
|
||||
<button
|
||||
onClick={() => onChange('changes')}
|
||||
className={`flex-1 px-4 py-2 text-sm font-medium transition-colors ${
|
||||
activeView === 'changes'
|
||||
? 'text-primary border-b-2 border-primary'
|
||||
? 'border-b-2 border-primary text-primary'
|
||||
: 'text-muted-foreground hover:text-foreground'
|
||||
}`}
|
||||
>
|
||||
<span className="flex items-center justify-center gap-2">
|
||||
<FileText className="w-4 h-4" />
|
||||
<FileText className="h-4 w-4" />
|
||||
<span>Changes</span>
|
||||
</span>
|
||||
</button>
|
||||
@@ -31,12 +31,12 @@ export default function GitViewTabs({ activeView, isHidden, onChange }: GitViewT
|
||||
onClick={() => onChange('history')}
|
||||
className={`flex-1 px-4 py-2 text-sm font-medium transition-colors ${
|
||||
activeView === 'history'
|
||||
? 'text-primary border-b-2 border-primary'
|
||||
? 'border-b-2 border-primary text-primary'
|
||||
: 'text-muted-foreground hover:text-foreground'
|
||||
}`}
|
||||
>
|
||||
<span className="flex items-center justify-center gap-2">
|
||||
<History className="w-4 h-4" />
|
||||
<History className="h-4 w-4" />
|
||||
<span>History</span>
|
||||
</span>
|
||||
</button>
|
||||
|
||||
@@ -153,39 +153,39 @@ export default function ChangesView({
|
||||
|
||||
<div className={`flex-1 overflow-y-auto ${isMobile ? 'pb-mobile-nav' : ''}`}>
|
||||
{isLoading ? (
|
||||
<div className="flex items-center justify-center h-32">
|
||||
<RefreshCw className="w-5 h-5 animate-spin text-muted-foreground" />
|
||||
<div className="flex h-32 items-center justify-center">
|
||||
<RefreshCw className="h-5 w-5 animate-spin text-muted-foreground" />
|
||||
</div>
|
||||
) : gitStatus?.hasCommits === false ? (
|
||||
<div className="flex flex-col items-center justify-center p-8 text-center">
|
||||
<div className="w-14 h-14 rounded-2xl bg-muted/50 flex items-center justify-center mb-4">
|
||||
<GitBranch className="w-7 h-7 text-muted-foreground/50" />
|
||||
<div className="mb-4 flex h-14 w-14 items-center justify-center rounded-2xl bg-muted/50">
|
||||
<GitBranch className="h-7 w-7 text-muted-foreground/50" />
|
||||
</div>
|
||||
<h3 className="text-lg font-medium mb-2 text-foreground">No commits yet</h3>
|
||||
<p className="text-sm text-muted-foreground mb-6 max-w-md">
|
||||
<h3 className="mb-2 text-lg font-medium text-foreground">No commits yet</h3>
|
||||
<p className="mb-6 max-w-md text-sm text-muted-foreground">
|
||||
This repository doesn't have any commits yet. Create your first commit to start tracking changes.
|
||||
</p>
|
||||
<button
|
||||
onClick={() => void onCreateInitialCommit()}
|
||||
disabled={isCreatingInitialCommit}
|
||||
className="px-4 py-2 bg-primary text-primary-foreground rounded-lg hover:bg-primary/90 disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-2 transition-colors"
|
||||
className="flex items-center gap-2 rounded-lg bg-primary px-4 py-2 text-primary-foreground transition-colors hover:bg-primary/90 disabled:cursor-not-allowed disabled:opacity-50"
|
||||
>
|
||||
{isCreatingInitialCommit ? (
|
||||
<>
|
||||
<RefreshCw className="w-4 h-4 animate-spin" />
|
||||
<RefreshCw className="h-4 w-4 animate-spin" />
|
||||
<span>Creating Initial Commit...</span>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<GitCommit className="w-4 h-4" />
|
||||
<GitCommit className="h-4 w-4" />
|
||||
<span>Create Initial Commit</span>
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
) : !gitStatus || !hasChangedFiles(gitStatus) ? (
|
||||
<div className="flex flex-col items-center justify-center h-32 text-muted-foreground">
|
||||
<GitCommit className="w-10 h-10 mb-2 opacity-40" />
|
||||
<div className="flex h-32 flex-col items-center justify-center text-muted-foreground">
|
||||
<GitCommit className="mb-2 h-10 w-10 opacity-40" />
|
||||
<p className="text-sm">No changes detected</p>
|
||||
</div>
|
||||
) : (
|
||||
|
||||
@@ -77,30 +77,30 @@ export default function CommitComposer({
|
||||
return (
|
||||
<div
|
||||
className={`transition-all duration-300 ease-in-out ${
|
||||
isHidden ? 'max-h-0 opacity-0 -translate-y-2 overflow-hidden' : 'max-h-96 opacity-100 translate-y-0'
|
||||
isHidden ? 'max-h-0 -translate-y-2 overflow-hidden opacity-0' : 'max-h-96 translate-y-0 opacity-100'
|
||||
}`}
|
||||
>
|
||||
{isMobile && isCollapsed ? (
|
||||
<div className="px-4 py-2 border-b border-border/60">
|
||||
<div className="border-b border-border/60 px-4 py-2">
|
||||
<button
|
||||
onClick={() => setIsCollapsed(false)}
|
||||
className="w-full flex items-center justify-center gap-2 px-3 py-2 text-sm bg-primary text-primary-foreground rounded-lg hover:bg-primary/90 transition-colors"
|
||||
className="flex w-full items-center justify-center gap-2 rounded-lg bg-primary px-3 py-2 text-sm text-primary-foreground transition-colors hover:bg-primary/90"
|
||||
>
|
||||
<GitCommit className="w-4 h-4" />
|
||||
<GitCommit className="h-4 w-4" />
|
||||
<span>Commit {selectedFileCount} file{selectedFileCount !== 1 ? 's' : ''}</span>
|
||||
<ChevronDown className="w-3 h-3" />
|
||||
<ChevronDown className="h-3 w-3" />
|
||||
</button>
|
||||
</div>
|
||||
) : (
|
||||
<div className="px-4 py-3 border-b border-border/60">
|
||||
<div className="border-b border-border/60 px-4 py-3">
|
||||
{isMobile && (
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<div className="mb-2 flex items-center justify-between">
|
||||
<span className="text-sm font-medium text-foreground">Commit Changes</span>
|
||||
<button
|
||||
onClick={() => setIsCollapsed(true)}
|
||||
className="p-1 hover:bg-accent rounded-lg transition-colors"
|
||||
className="rounded-lg p-1 transition-colors hover:bg-accent"
|
||||
>
|
||||
<ChevronDown className="w-4 h-4 rotate-180" />
|
||||
<ChevronDown className="h-4 w-4 rotate-180" />
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
@@ -110,7 +110,7 @@ export default function CommitComposer({
|
||||
value={commitMessage}
|
||||
onChange={(event) => setCommitMessage(event.target.value)}
|
||||
placeholder="Message (Ctrl+Enter to commit)"
|
||||
className="w-full px-3 py-2 text-sm border border-border rounded-xl bg-background text-foreground placeholder:text-muted-foreground resize-none pr-20 focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary/30"
|
||||
className="w-full resize-none rounded-xl border border-border bg-background px-3 py-2 pr-20 text-sm text-foreground placeholder:text-muted-foreground focus:border-primary/30 focus:outline-none focus:ring-2 focus:ring-primary/20"
|
||||
rows={3}
|
||||
onKeyDown={(event) => {
|
||||
if (event.key === 'Enter' && (event.ctrlKey || event.metaKey)) {
|
||||
@@ -123,13 +123,13 @@ export default function CommitComposer({
|
||||
<button
|
||||
onClick={() => void handleGenerateMessage()}
|
||||
disabled={selectedFileCount === 0 || isGeneratingMessage}
|
||||
className="p-1.5 text-muted-foreground hover:text-foreground disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
|
||||
className="p-1.5 text-muted-foreground transition-colors hover:text-foreground disabled:cursor-not-allowed disabled:opacity-50"
|
||||
title="Generate commit message"
|
||||
>
|
||||
{isGeneratingMessage ? (
|
||||
<RefreshCw className="w-4 h-4 animate-spin" />
|
||||
<RefreshCw className="h-4 w-4 animate-spin" />
|
||||
) : (
|
||||
<Sparkles className="w-4 h-4" />
|
||||
<Sparkles className="h-4 w-4" />
|
||||
)}
|
||||
</button>
|
||||
<div style={{ display: 'none' }}>
|
||||
@@ -142,16 +142,16 @@ export default function CommitComposer({
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between mt-2">
|
||||
<div className="mt-2 flex items-center justify-between">
|
||||
<span className="text-sm text-muted-foreground">
|
||||
{selectedFileCount} file{selectedFileCount !== 1 ? 's' : ''} selected
|
||||
</span>
|
||||
<button
|
||||
onClick={requestCommitConfirmation}
|
||||
disabled={!commitMessage.trim() || selectedFileCount === 0 || isCommitting}
|
||||
className="px-3 py-1.5 text-sm bg-primary text-primary-foreground rounded-lg hover:bg-primary/90 disabled:opacity-50 disabled:cursor-not-allowed flex items-center space-x-1 transition-colors"
|
||||
className="flex items-center space-x-1 rounded-lg bg-primary px-3 py-1.5 text-sm text-primary-foreground transition-colors hover:bg-primary/90 disabled:cursor-not-allowed disabled:opacity-50"
|
||||
>
|
||||
<Check className="w-3 h-3" />
|
||||
<Check className="h-3 w-3" />
|
||||
<span>{isCommitting ? 'Committing...' : 'Commit'}</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@@ -1,16 +1,7 @@
|
||||
import { ChevronRight, Trash2 } from 'lucide-react';
|
||||
import DiffViewer from '../../../DiffViewer.jsx';
|
||||
import type { FileStatusCode } from '../../types/types';
|
||||
import { getStatusBadgeClass, getStatusLabel } from '../../utils/gitPanelUtils';
|
||||
|
||||
type DiffViewerProps = {
|
||||
diff: string;
|
||||
fileName: string;
|
||||
isMobile: boolean;
|
||||
wrapText: boolean;
|
||||
};
|
||||
|
||||
const DiffViewerComponent = DiffViewer as unknown as (props: DiffViewerProps) => JSX.Element;
|
||||
import GitDiffViewer from '../shared/GitDiffViewer';
|
||||
|
||||
type FileChangeItemProps = {
|
||||
filePath: string;
|
||||
@@ -46,25 +37,25 @@ export default function FileChangeItem({
|
||||
|
||||
return (
|
||||
<div className="border-b border-border last:border-0">
|
||||
<div className={`flex items-center hover:bg-accent/50 transition-colors ${isMobile ? 'px-2 py-1.5' : 'px-3 py-2'}`}>
|
||||
<div className={`flex items-center transition-colors hover:bg-accent/50 ${isMobile ? 'px-2 py-1.5' : 'px-3 py-2'}`}>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={isSelected}
|
||||
onChange={() => onToggleSelected(filePath)}
|
||||
onClick={(event) => event.stopPropagation()}
|
||||
className={`rounded border-border text-primary focus:ring-primary/40 bg-background checked:bg-primary ${isMobile ? 'mr-1.5' : 'mr-2'}`}
|
||||
className={`rounded border-border bg-background text-primary checked:bg-primary focus:ring-primary/40 ${isMobile ? 'mr-1.5' : 'mr-2'}`}
|
||||
/>
|
||||
|
||||
<div className="flex items-center flex-1 min-w-0">
|
||||
<div className="flex min-w-0 flex-1 items-center">
|
||||
<button
|
||||
onClick={(event) => {
|
||||
event.stopPropagation();
|
||||
onToggleExpanded(filePath);
|
||||
}}
|
||||
className={`p-0.5 hover:bg-accent rounded cursor-pointer ${isMobile ? 'mr-1' : 'mr-2'}`}
|
||||
className={`cursor-pointer rounded p-0.5 hover:bg-accent ${isMobile ? 'mr-1' : 'mr-2'}`}
|
||||
title={isExpanded ? 'Collapse diff' : 'Expand diff'}
|
||||
>
|
||||
<ChevronRight className={`w-3 h-3 transition-transform duration-200 ease-in-out ${isExpanded ? 'rotate-90' : 'rotate-0'}`} />
|
||||
<ChevronRight className={`h-3 w-3 transition-transform duration-200 ease-in-out ${isExpanded ? 'rotate-90' : 'rotate-0'}`} />
|
||||
</button>
|
||||
|
||||
<span
|
||||
@@ -85,16 +76,16 @@ export default function FileChangeItem({
|
||||
event.stopPropagation();
|
||||
onRequestFileAction(filePath, status);
|
||||
}}
|
||||
className={`${isMobile ? 'px-2 py-1 text-xs' : 'p-1'} hover:bg-destructive/10 rounded text-destructive font-medium flex items-center gap-1`}
|
||||
className={`${isMobile ? 'px-2 py-1 text-xs' : 'p-1'} flex items-center gap-1 rounded font-medium text-destructive hover:bg-destructive/10`}
|
||||
title={status === 'U' ? 'Delete untracked file' : 'Discard changes'}
|
||||
>
|
||||
<Trash2 className="w-3 h-3" />
|
||||
<Trash2 className="h-3 w-3" />
|
||||
{isMobile && <span>{status === 'U' ? 'Delete' : 'Discard'}</span>}
|
||||
</button>
|
||||
)}
|
||||
|
||||
<span
|
||||
className={`inline-flex items-center justify-center w-5 h-5 rounded text-[10px] font-bold border ${badgeClass}`}
|
||||
className={`inline-flex h-5 w-5 items-center justify-center rounded border text-[10px] font-bold ${badgeClass}`}
|
||||
title={statusLabel}
|
||||
>
|
||||
{status}
|
||||
@@ -104,13 +95,12 @@ export default function FileChangeItem({
|
||||
</div>
|
||||
|
||||
<div
|
||||
className={`bg-muted/50 transition-all duration-400 ease-in-out overflow-hidden ${
|
||||
isExpanded && diff ? 'max-h-[600px] opacity-100 translate-y-0' : 'max-h-0 opacity-0 -translate-y-1'
|
||||
}`}
|
||||
className={`duration-400 overflow-hidden bg-muted/50 transition-all ease-in-out ${isExpanded && diff ? 'max-h-[600px] translate-y-0 opacity-100' : 'max-h-0 -translate-y-1 opacity-0'
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-center justify-between p-2 border-b border-border">
|
||||
<div className="flex items-center justify-between border-b border-border p-2">
|
||||
<span className="flex items-center gap-2">
|
||||
<span className={`inline-flex items-center justify-center w-5 h-5 rounded text-[10px] font-bold border ${badgeClass}`}>
|
||||
<span className={`inline-flex h-5 w-5 items-center justify-center rounded border text-[10px] font-bold ${badgeClass}`}>
|
||||
{status}
|
||||
</span>
|
||||
<span className="text-sm font-medium text-foreground">{statusLabel}</span>
|
||||
@@ -121,7 +111,7 @@ export default function FileChangeItem({
|
||||
event.stopPropagation();
|
||||
onToggleWrapText();
|
||||
}}
|
||||
className="text-sm text-muted-foreground hover:text-foreground transition-colors"
|
||||
className="text-sm text-muted-foreground transition-colors hover:text-foreground"
|
||||
title={wrapText ? 'Switch to horizontal scroll' : 'Switch to text wrap'}
|
||||
>
|
||||
{wrapText ? 'Scroll' : 'Wrap'}
|
||||
@@ -130,7 +120,7 @@ export default function FileChangeItem({
|
||||
</div>
|
||||
|
||||
<div className="max-h-96 overflow-y-auto">
|
||||
{diff && <DiffViewerComponent diff={diff} fileName={filePath} isMobile={isMobile} wrapText={wrapText} />}
|
||||
{diff && <GitDiffViewer diff={diff} isMobile={isMobile} wrapText={wrapText} />}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -17,9 +17,9 @@ export default function FileSelectionControls({
|
||||
}: FileSelectionControlsProps) {
|
||||
return (
|
||||
<div
|
||||
className={`border-b border-border/60 flex items-center justify-between transition-all duration-300 ease-in-out ${
|
||||
className={`flex items-center justify-between border-b border-border/60 transition-all duration-300 ease-in-out ${
|
||||
isMobile ? 'px-3 py-1.5' : 'px-4 py-2'
|
||||
} ${isHidden ? 'max-h-0 opacity-0 -translate-y-2 overflow-hidden' : 'max-h-16 opacity-100 translate-y-0'}`}
|
||||
} ${isHidden ? 'max-h-0 -translate-y-2 overflow-hidden opacity-0' : 'max-h-16 translate-y-0 opacity-100'}`}
|
||||
>
|
||||
<span className="text-sm text-muted-foreground">
|
||||
{selectedCount} of {totalCount} {isMobile ? '' : 'files'} selected
|
||||
@@ -27,14 +27,14 @@ export default function FileSelectionControls({
|
||||
<span className={`flex ${isMobile ? 'gap-1' : 'gap-2'}`}>
|
||||
<button
|
||||
onClick={onSelectAll}
|
||||
className="text-sm text-primary hover:text-primary/80 transition-colors"
|
||||
className="text-sm text-primary transition-colors hover:text-primary/80"
|
||||
>
|
||||
{isMobile ? 'All' : 'Select All'}
|
||||
</button>
|
||||
<span className="text-border">|</span>
|
||||
<button
|
||||
onClick={onDeselectAll}
|
||||
className="text-sm text-primary hover:text-primary/80 transition-colors"
|
||||
className="text-sm text-primary transition-colors hover:text-primary/80"
|
||||
>
|
||||
{isMobile ? 'None' : 'Deselect All'}
|
||||
</button>
|
||||
|
||||
@@ -24,24 +24,24 @@ export default function FileStatusLegend({ isMobile }: FileStatusLegendProps) {
|
||||
<div className="border-b border-border/60">
|
||||
<button
|
||||
onClick={() => setIsOpen((previous) => !previous)}
|
||||
className="w-full px-4 py-2 bg-muted/30 hover:bg-muted/50 text-sm text-muted-foreground flex items-center justify-center gap-1 transition-colors"
|
||||
className="flex w-full items-center justify-center gap-1 bg-muted/30 px-4 py-2 text-sm text-muted-foreground transition-colors hover:bg-muted/50"
|
||||
>
|
||||
<Info className="w-3 h-3" />
|
||||
<Info className="h-3 w-3" />
|
||||
<span>File Status Guide</span>
|
||||
{isOpen ? <ChevronDown className="w-3 h-3" /> : <ChevronRight className="w-3 h-3" />}
|
||||
{isOpen ? <ChevronDown className="h-3 w-3" /> : <ChevronRight className="h-3 w-3" />}
|
||||
</button>
|
||||
|
||||
{isOpen && (
|
||||
<div className="px-4 py-3 bg-muted/30 text-sm">
|
||||
<div className="bg-muted/30 px-4 py-3 text-sm">
|
||||
<div className="flex justify-center gap-6">
|
||||
{LEGEND_ITEMS.map((item) => (
|
||||
<span key={item.status} className="flex items-center gap-2">
|
||||
<span
|
||||
className={`inline-flex items-center justify-center w-5 h-5 rounded border font-bold text-[10px] ${getStatusBadgeClass(item.status)}`}
|
||||
className={`inline-flex h-5 w-5 items-center justify-center rounded border text-[10px] font-bold ${getStatusBadgeClass(item.status)}`}
|
||||
>
|
||||
{item.status}
|
||||
</span>
|
||||
<span className="text-muted-foreground italic">{item.label}</span>
|
||||
<span className="italic text-muted-foreground">{item.label}</span>
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
|
||||
@@ -1,15 +1,7 @@
|
||||
import { ChevronDown, ChevronRight } from 'lucide-react';
|
||||
import DiffViewer from '../../../DiffViewer.jsx';
|
||||
import type { GitCommitSummary } from '../../types/types';
|
||||
import GitDiffViewer from '../shared/GitDiffViewer';
|
||||
|
||||
type DiffViewerProps = {
|
||||
diff: string;
|
||||
fileName: string;
|
||||
isMobile: boolean;
|
||||
wrapText: boolean;
|
||||
};
|
||||
|
||||
const DiffViewerComponent = DiffViewer as unknown as (props: DiffViewerProps) => JSX.Element;
|
||||
|
||||
type CommitHistoryItemProps = {
|
||||
commit: GitCommitSummary;
|
||||
@@ -33,23 +25,23 @@ export default function CommitHistoryItem({
|
||||
<button
|
||||
type="button"
|
||||
aria-expanded={isExpanded}
|
||||
className="w-full flex items-start p-3 hover:bg-accent/50 cursor-pointer transition-colors text-left bg-transparent border-0"
|
||||
className="flex w-full cursor-pointer items-start border-0 bg-transparent p-3 text-left transition-colors hover:bg-accent/50"
|
||||
onClick={onToggle}
|
||||
>
|
||||
<span className="mr-2 mt-1 p-0.5 hover:bg-accent rounded">
|
||||
{isExpanded ? <ChevronDown className="w-3 h-3" /> : <ChevronRight className="w-3 h-3" />}
|
||||
<span className="mr-2 mt-1 rounded p-0.5 hover:bg-accent">
|
||||
{isExpanded ? <ChevronDown className="h-3 w-3" /> : <ChevronRight className="h-3 w-3" />}
|
||||
</span>
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="min-w-0 flex-1">
|
||||
<div className="flex items-start justify-between gap-2">
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="text-sm font-medium text-foreground truncate">{commit.message}</p>
|
||||
<p className="text-sm text-muted-foreground mt-1">
|
||||
<div className="min-w-0 flex-1">
|
||||
<p className="truncate text-sm font-medium text-foreground">{commit.message}</p>
|
||||
<p className="mt-1 text-sm text-muted-foreground">
|
||||
{commit.author}
|
||||
{' \u2022 '}
|
||||
{commit.date}
|
||||
</p>
|
||||
</div>
|
||||
<span className="text-sm font-mono text-muted-foreground/60 flex-shrink-0">
|
||||
<span className="flex-shrink-0 font-mono text-sm text-muted-foreground/60">
|
||||
{commit.hash.substring(0, 7)}
|
||||
</span>
|
||||
</div>
|
||||
@@ -59,10 +51,10 @@ export default function CommitHistoryItem({
|
||||
{isExpanded && diff && (
|
||||
<div className="bg-muted/50">
|
||||
<div className="max-h-96 overflow-y-auto p-2">
|
||||
<div className="text-sm font-mono text-muted-foreground mb-2">
|
||||
<div className="mb-2 font-mono text-sm text-muted-foreground">
|
||||
{commit.stats}
|
||||
</div>
|
||||
<DiffViewerComponent diff={diff} fileName="commit" isMobile={isMobile} wrapText={wrapText} />
|
||||
<GitDiffViewer diff={diff} isMobile={isMobile} wrapText={wrapText} />
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
@@ -49,12 +49,12 @@ export default function HistoryView({
|
||||
return (
|
||||
<div className={`flex-1 overflow-y-auto ${isMobile ? 'pb-mobile-nav' : ''}`}>
|
||||
{isLoading ? (
|
||||
<div className="flex items-center justify-center h-32">
|
||||
<RefreshCw className="w-5 h-5 animate-spin text-muted-foreground" />
|
||||
<div className="flex h-32 items-center justify-center">
|
||||
<RefreshCw className="h-5 w-5 animate-spin text-muted-foreground" />
|
||||
</div>
|
||||
) : recentCommits.length === 0 ? (
|
||||
<div className="flex flex-col items-center justify-center h-32 text-muted-foreground">
|
||||
<History className="w-10 h-10 mb-2 opacity-40" />
|
||||
<div className="flex h-32 flex-col items-center justify-center text-muted-foreground">
|
||||
<History className="mb-2 h-10 w-10 opacity-40" />
|
||||
<p className="text-sm">No commits found</p>
|
||||
</div>
|
||||
) : (
|
||||
|
||||
@@ -16,18 +16,18 @@ type ConfirmActionModalProps = {
|
||||
|
||||
function renderConfirmActionIcon(actionType: ConfirmationRequest['type']) {
|
||||
if (actionType === 'discard' || actionType === 'delete') {
|
||||
return <Trash2 className="w-4 h-4" />;
|
||||
return <Trash2 className="h-4 w-4" />;
|
||||
}
|
||||
|
||||
if (actionType === 'commit') {
|
||||
return <Check className="w-4 h-4" />;
|
||||
return <Check className="h-4 w-4" />;
|
||||
}
|
||||
|
||||
if (actionType === 'pull') {
|
||||
return <Download className="w-4 h-4" />;
|
||||
return <Download className="h-4 w-4" />;
|
||||
}
|
||||
|
||||
return <Upload className="w-4 h-4" />;
|
||||
return <Upload className="h-4 w-4" />;
|
||||
}
|
||||
|
||||
export default function ConfirmActionModal({ action, onCancel, onConfirm }: ConfirmActionModalProps) {
|
||||
@@ -58,14 +58,14 @@ export default function ConfirmActionModal({ action, onCancel, onConfirm }: Conf
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center p-4">
|
||||
<div className="fixed inset-0 bg-black/60 backdrop-blur-sm" onClick={onCancel} />
|
||||
<div
|
||||
className="relative bg-card border border-border rounded-xl shadow-2xl max-w-md w-full overflow-hidden"
|
||||
className="relative w-full max-w-md overflow-hidden rounded-xl border border-border bg-card shadow-2xl"
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
aria-labelledby={titleId}
|
||||
>
|
||||
<div className="p-6">
|
||||
<div className="flex items-center mb-4">
|
||||
<div className={`p-2 rounded-full mr-3 ${CONFIRMATION_ICON_CONTAINER_CLASSES[action.type]}`}>
|
||||
<div className="mb-4 flex items-center">
|
||||
<div className={`mr-3 rounded-full p-2 ${CONFIRMATION_ICON_CONTAINER_CLASSES[action.type]}`}>
|
||||
{renderConfirmActionIcon(action.type)}
|
||||
</div>
|
||||
<h3 id={titleId} className="text-lg font-semibold text-foreground">
|
||||
@@ -73,18 +73,18 @@ export default function ConfirmActionModal({ action, onCancel, onConfirm }: Conf
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
<p className="text-sm text-muted-foreground mb-6">{action.message}</p>
|
||||
<p className="mb-6 text-sm text-muted-foreground">{action.message}</p>
|
||||
|
||||
<div className="flex justify-end space-x-3">
|
||||
<button
|
||||
onClick={onCancel}
|
||||
className="px-4 py-2 text-sm text-muted-foreground hover:text-foreground hover:bg-accent rounded-lg transition-colors"
|
||||
className="rounded-lg px-4 py-2 text-sm text-muted-foreground transition-colors hover:bg-accent hover:text-foreground"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
onClick={onConfirm}
|
||||
className={`px-4 py-2 text-sm text-white rounded-lg transition-colors flex items-center space-x-2 ${CONFIRMATION_BUTTON_CLASSES[action.type]}`}
|
||||
className={`flex items-center space-x-2 rounded-lg px-4 py-2 text-sm text-white transition-colors ${CONFIRMATION_BUTTON_CLASSES[action.type]}`}
|
||||
>
|
||||
{renderConfirmActionIcon(action.type)}
|
||||
<span>{CONFIRMATION_ACTION_LABELS[action.type]}</span>
|
||||
|
||||
@@ -51,16 +51,16 @@ export default function NewBranchModal({
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center p-4">
|
||||
<div className="fixed inset-0 bg-black/60 backdrop-blur-sm" onClick={onClose} />
|
||||
<div
|
||||
className="relative bg-card border border-border rounded-xl shadow-2xl max-w-md w-full overflow-hidden"
|
||||
className="relative w-full max-w-md overflow-hidden rounded-xl border border-border bg-card shadow-2xl"
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
aria-labelledby="new-branch-title"
|
||||
>
|
||||
<div className="p-6">
|
||||
<h3 className="text-lg font-semibold text-foreground mb-4">Create New Branch</h3>
|
||||
<h3 className="mb-4 text-lg font-semibold text-foreground">Create New Branch</h3>
|
||||
|
||||
<div className="mb-4">
|
||||
<label htmlFor="git-new-branch-name" className="block text-sm font-medium text-foreground/80 mb-2">
|
||||
<label htmlFor="git-new-branch-name" className="mb-2 block text-sm font-medium text-foreground/80">
|
||||
Branch Name
|
||||
</label>
|
||||
<input
|
||||
@@ -83,35 +83,35 @@ export default function NewBranchModal({
|
||||
}
|
||||
}}
|
||||
placeholder="feature/new-feature"
|
||||
className="w-full px-3 py-2 border border-border rounded-xl bg-background text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary/30"
|
||||
className="w-full rounded-xl border border-border bg-background px-3 py-2 text-foreground placeholder:text-muted-foreground focus:border-primary/30 focus:outline-none focus:ring-2 focus:ring-primary/20"
|
||||
autoFocus
|
||||
/>
|
||||
</div>
|
||||
|
||||
<p className="text-sm text-muted-foreground mb-4">
|
||||
<p className="mb-4 text-sm text-muted-foreground">
|
||||
This will create a new branch from the current branch ({currentBranch})
|
||||
</p>
|
||||
|
||||
<div className="flex justify-end space-x-3">
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="px-4 py-2 text-sm text-muted-foreground hover:text-foreground hover:bg-accent rounded-lg transition-colors"
|
||||
className="rounded-lg px-4 py-2 text-sm text-muted-foreground transition-colors hover:bg-accent hover:text-foreground"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
onClick={() => void handleCreateBranch()}
|
||||
disabled={!newBranchName.trim() || isCreatingBranch}
|
||||
className="px-4 py-2 text-sm bg-primary text-primary-foreground rounded-lg hover:bg-primary/90 disabled:opacity-50 disabled:cursor-not-allowed flex items-center space-x-2 transition-colors"
|
||||
className="flex items-center space-x-2 rounded-lg bg-primary px-4 py-2 text-sm text-primary-foreground transition-colors hover:bg-primary/90 disabled:cursor-not-allowed disabled:opacity-50"
|
||||
>
|
||||
{isCreatingBranch ? (
|
||||
<>
|
||||
<RefreshCw className="w-3 h-3 animate-spin" />
|
||||
<RefreshCw className="h-3 w-3 animate-spin" />
|
||||
<span>Creating...</span>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Plus className="w-3 h-3" />
|
||||
<Plus className="h-3 w-3" />
|
||||
<span>Create Branch</span>
|
||||
</>
|
||||
)}
|
||||
|
||||
41
src/components/git-panel/view/shared/GitDiffViewer.tsx
Normal file
41
src/components/git-panel/view/shared/GitDiffViewer.tsx
Normal file
@@ -0,0 +1,41 @@
|
||||
type GitDiffViewerProps = {
|
||||
diff: string | null;
|
||||
isMobile: boolean;
|
||||
wrapText: boolean;
|
||||
};
|
||||
|
||||
export default function GitDiffViewer({ diff, isMobile, wrapText }: GitDiffViewerProps) {
|
||||
if (!diff) {
|
||||
return (
|
||||
<div className="p-4 text-center text-sm text-muted-foreground">
|
||||
No diff available
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const renderDiffLine = (line: string, index: number) => {
|
||||
const isAddition = line.startsWith('+') && !line.startsWith('+++');
|
||||
const isDeletion = line.startsWith('-') && !line.startsWith('---');
|
||||
const isHeader = line.startsWith('@@');
|
||||
|
||||
return (
|
||||
<div
|
||||
key={index}
|
||||
className={`px-3 py-0.5 font-mono text-xs ${isMobile && wrapText ? 'whitespace-pre-wrap break-all' : 'overflow-x-auto whitespace-pre'
|
||||
} ${isAddition ? 'bg-green-50 text-green-700 dark:bg-green-950/50 dark:text-green-300' :
|
||||
isDeletion ? 'bg-red-50 text-red-700 dark:bg-red-950/50 dark:text-red-300' :
|
||||
isHeader ? 'bg-primary/5 text-primary' :
|
||||
'text-muted-foreground/70'
|
||||
}`}
|
||||
>
|
||||
{line}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="diff-viewer">
|
||||
{diff.split('\n').map((line, index) => renderDiffLine(line, index))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user