feat: redesigned Git tab layout with improved organization

2025-12-19 02:48:58 +02:00
parent 71574acf19
commit bbceccfb64
17 changed files with 1726 additions and 1058 deletions
@@ -0,0 +1,74 @@
+import React from 'react';
+import { Input } from '@/components/ui/input';
+import { Textarea } from '@/components/ui/textarea';
+import { cn } from '@/lib/utils';
+
+interface CommitInputProps {
+  value: string;
+  onChange: (value: string) => void;
+  placeholder?: string;
+  disabled?: boolean;
+}
+
+export const CommitInput: React.FC<CommitInputProps> = ({
+  value,
+  onChange,
+  placeholder = 'Commit message',
+  disabled = false,
+}) => {
+  const [isExpanded, setIsExpanded] = React.useState(false);
+  const hasMultipleLines = value.includes('\n');
+  const textareaRef = React.useRef<HTMLTextAreaElement>(null);
+
+  const shouldShowTextarea = isExpanded || hasMultipleLines;
+
+  const handleInputFocus = () => {
+    setIsExpanded(true);
+  };
+
+  const handleTextareaBlur = () => {
+    if (!hasMultipleLines && !value.trim()) {
+      setIsExpanded(false);
+    }
+  };
+
+  React.useEffect(() => {
+    if (shouldShowTextarea && textareaRef.current) {
+      textareaRef.current.focus();
+      const len = textareaRef.current.value.length;
+      textareaRef.current.setSelectionRange(len, len);
+    }
+  }, [shouldShowTextarea]);
+
+  if (shouldShowTextarea) {
+    return (
+      <Textarea
+        ref={textareaRef}
+        value={value}
+        onChange={(e) => onChange(e.target.value)}
+        onBlur={handleTextareaBlur}
+        placeholder={placeholder}
+        rows={4}
+        disabled={disabled}
+        className={cn(
+          'rounded-lg bg-background/80 resize-none min-h-[100px]',
+          disabled && 'opacity-50'
+        )}
+      />
+    );
+  }
+
+  return (
+    <Input
+      value={value}
+      onChange={(e) => onChange(e.target.value)}
+      onFocus={handleInputFocus}
+      placeholder={placeholder}
+      disabled={disabled}
+      className={cn(
+        'rounded-lg bg-background/80',
+        disabled && 'opacity-50'
+      )}
+    />
+  );
+};