mirror of
https://github.com/siteboon/claudecodeui.git
synced 2026-04-16 10:31:32 +00:00
Refactor Settings, FileTree, GitPanel, Shell, and CodeEditor components (#402)
This commit is contained in:
Haileyesus
97
src/components/git-panel/view/modals/ConfirmActionModal.tsx
Normal file
97
src/components/git-panel/view/modals/ConfirmActionModal.tsx
Normal file
@@ -0,0 +1,97 @@
|
||||
import { useEffect } from 'react';
|
||||
import { Check, Download, Trash2, Upload } from 'lucide-react';
|
||||
import {
|
||||
CONFIRMATION_ACTION_LABELS,
|
||||
CONFIRMATION_BUTTON_CLASSES,
|
||||
CONFIRMATION_ICON_CONTAINER_CLASSES,
|
||||
CONFIRMATION_TITLES,
|
||||
} from '../../constants/constants';
|
||||
import type { ConfirmationRequest } from '../../types/types';
|
||||
|
||||
type ConfirmActionModalProps = {
|
||||
action: ConfirmationRequest | null;
|
||||
onCancel: () => void;
|
||||
onConfirm: () => void;
|
||||
};
|
||||
|
||||
function renderConfirmActionIcon(actionType: ConfirmationRequest['type']) {
|
||||
if (actionType === 'discard' || actionType === 'delete') {
|
||||
return <Trash2 className="w-4 h-4" />;
|
||||
}
|
||||
|
||||
if (actionType === 'commit') {
|
||||
return <Check className="w-4 h-4" />;
|
||||
}
|
||||
|
||||
if (actionType === 'pull') {
|
||||
return <Download className="w-4 h-4" />;
|
||||
}
|
||||
|
||||
return <Upload className="w-4 h-4" />;
|
||||
}
|
||||
|
||||
export default function ConfirmActionModal({ action, onCancel, onConfirm }: ConfirmActionModalProps) {
|
||||
const titleId = action ? `confirmation-title-${action.type}` : undefined;
|
||||
|
||||
useEffect(() => {
|
||||
if (!action) {
|
||||
return;
|
||||
}
|
||||
|
||||
const handleKeyDown = (event: KeyboardEvent) => {
|
||||
if (event.key === 'Escape') {
|
||||
onCancel();
|
||||
}
|
||||
};
|
||||
|
||||
window.addEventListener('keydown', handleKeyDown);
|
||||
return () => {
|
||||
window.removeEventListener('keydown', handleKeyDown);
|
||||
};
|
||||
}, [action, onCancel]);
|
||||
|
||||
if (!action) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<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"
|
||||
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]}`}>
|
||||
{renderConfirmActionIcon(action.type)}
|
||||
</div>
|
||||
<h3 id={titleId} className="text-lg font-semibold text-foreground">
|
||||
{CONFIRMATION_TITLES[action.type]}
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
<p className="text-sm text-muted-foreground mb-6">{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"
|
||||
>
|
||||
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]}`}
|
||||
>
|
||||
{renderConfirmActionIcon(action.type)}
|
||||
<span>{CONFIRMATION_ACTION_LABELS[action.type]}</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
124
src/components/git-panel/view/modals/NewBranchModal.tsx
Normal file
124
src/components/git-panel/view/modals/NewBranchModal.tsx
Normal file
@@ -0,0 +1,124 @@
|
||||
import { Plus, RefreshCw } from 'lucide-react';
|
||||
import { useEffect, useState } from 'react';
|
||||
|
||||
type NewBranchModalProps = {
|
||||
isOpen: boolean;
|
||||
currentBranch: string;
|
||||
isCreatingBranch: boolean;
|
||||
onClose: () => void;
|
||||
onCreateBranch: (branchName: string) => Promise<boolean>;
|
||||
};
|
||||
|
||||
export default function NewBranchModal({
|
||||
isOpen,
|
||||
currentBranch,
|
||||
isCreatingBranch,
|
||||
onClose,
|
||||
onCreateBranch,
|
||||
}: NewBranchModalProps) {
|
||||
const [newBranchName, setNewBranchName] = useState('');
|
||||
|
||||
useEffect(() => {
|
||||
if (!isOpen) {
|
||||
setNewBranchName('');
|
||||
}
|
||||
}, [isOpen]);
|
||||
|
||||
const handleCreateBranch = async (): Promise<boolean> => {
|
||||
const branchName = newBranchName.trim();
|
||||
if (!branchName) {
|
||||
return false;
|
||||
}
|
||||
|
||||
try {
|
||||
const success = await onCreateBranch(branchName);
|
||||
if (success) {
|
||||
setNewBranchName('');
|
||||
onClose();
|
||||
}
|
||||
return success;
|
||||
} catch (error) {
|
||||
console.error('Failed to create branch:', error);
|
||||
return false;
|
||||
}
|
||||
};
|
||||
|
||||
if (!isOpen) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<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"
|
||||
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>
|
||||
|
||||
<div className="mb-4">
|
||||
<label htmlFor="git-new-branch-name" className="block text-sm font-medium text-foreground/80 mb-2">
|
||||
Branch Name
|
||||
</label>
|
||||
<input
|
||||
id="git-new-branch-name"
|
||||
type="text"
|
||||
value={newBranchName}
|
||||
onChange={(event) => setNewBranchName(event.target.value)}
|
||||
onKeyDown={(event) => {
|
||||
if (event.key === 'Enter' && !isCreatingBranch) {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
void handleCreateBranch();
|
||||
return;
|
||||
}
|
||||
|
||||
if (event.key === 'Escape' && !isCreatingBranch) {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
onClose();
|
||||
}
|
||||
}}
|
||||
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"
|
||||
autoFocus
|
||||
/>
|
||||
</div>
|
||||
|
||||
<p className="text-sm text-muted-foreground mb-4">
|
||||
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"
|
||||
>
|
||||
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"
|
||||
>
|
||||
{isCreatingBranch ? (
|
||||
<>
|
||||
<RefreshCw className="w-3 h-3 animate-spin" />
|
||||
<span>Creating...</span>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Plus className="w-3 h-3" />
|
||||
<span>Create Branch</span>
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user