Add components for Act management and integrate Electron setup

2025-11-16 11:00:04 -05:00
parent e192b6dcc2
commit 8167948881
97 changed files with 25378 additions and 3 deletions
--- a/components/form/TexteAreaInput.tsx
+++ b/components/form/TexteAreaInput.tsx
@@ -0,0 +1,117 @@
+import React, {ChangeEvent, useEffect, useState} from "react";
+
+interface TextAreaInputProps {
+    value: string;
+    setValue: (e: ChangeEvent<HTMLTextAreaElement>) => void;
+    placeholder: string;
+    maxLength?: number;
+}
+
+export default function TextAreaInput(
+    {
+        value,
+        setValue,
+        placeholder,
+        maxLength
+    }: TextAreaInputProps) {
+    const [prevLength, setPrevLength] = useState(value.length);
+    const [isGrowing, setIsGrowing] = useState(false);
+    
+    useEffect(() => {
+        if (value.length > prevLength) {
+            setIsGrowing(true);
+            setTimeout(() => setIsGrowing(false), 200);
+        }
+        setPrevLength(value.length);
+    }, [value.length, prevLength]);
+    
+    const getProgressPercentage = () => {
+        if (!maxLength) return 0;
+        return Math.min((value.length / maxLength) * 100, 100);
+    };
+    
+    const getStatusStyles = () => {
+        if (!maxLength) return {};
+        const percentage = getProgressPercentage();
+
+        if (percentage >= 100) return {
+            textColor: 'text-error',
+            bgColor: 'bg-error/10',
+            borderColor: 'border-error/30',
+            progressColor: 'bg-error'
+        };
+
+        if (percentage >= 90) return {
+            textColor: 'text-warning',
+            bgColor: 'bg-warning/10',
+            borderColor: 'border-warning/30',
+            progressColor: 'bg-warning'
+        };
+
+        if (percentage >= 75) return {
+            textColor: 'text-warning',
+            bgColor: 'bg-warning/10',
+            borderColor: 'border-warning/30',
+            progressColor: 'bg-warning'
+        };
+
+        return {
+            textColor: 'text-success',
+            bgColor: 'bg-success/10',
+            borderColor: 'border-success/30',
+            progressColor: 'bg-success'
+        };
+    };
+    
+    const styles = getStatusStyles();
+    
+    return (
+        <div className="flex-grow flex-col flex h-full">
+            <textarea
+                value={value}
+                onChange={setValue}
+                placeholder={placeholder}
+                rows={3}
+                className={`w-full flex-grow text-text-primary p-3 lg:p-4 rounded-xl border-2 outline-none resize-none transition-all duration-300 placeholder:text-muted/60 ${
+                    maxLength && value.length >= maxLength
+                        ? 'border-error focus:ring-4 focus:ring-error/20 bg-error/10 hover:bg-error/15'
+                        : 'bg-secondary/50 border-secondary/50 focus:ring-4 focus:ring-primary/20 focus:border-primary focus:bg-secondary hover:bg-secondary hover:border-secondary'
+                }`}
+                style={{height: '100%', minHeight: '200px'}}
+            />
+            
+            {maxLength && (
+                <div className="flex items-center justify-end gap-3 mt-3">
+                    {/* Compteur avec effet de croissance */}
+                    <div className={`flex items-center gap-3 px-4 py-2 rounded-lg border transition-all duration-300 ${
+                        isGrowing ? 'scale-110 shadow-lg' : 'scale-100'
+                    } ${styles.bgColor} ${styles.borderColor}`}>
+                        
+                        {/* Progress bar visible */}
+                        <div className="flex items-center gap-2">
+                            <span className="text-xs text-muted font-medium">Progression</span>
+                            <div className="w-20 h-2 bg-secondary/50 rounded-full overflow-hidden shadow-inner">
+                                <div
+                                    className={`h-full rounded-full transition-all duration-500 ease-out ${styles.progressColor} shadow-md`}
+                                    style={{width: `${getProgressPercentage()}%`}}
+                                ></div>
+                            </div>
+                        </div>
+                        
+                        {/* Compteur de caractères */}
+                        <div className="flex items-center gap-2">
+                            <div className={`text-sm font-semibold transition-all duration-200 ${
+                                isGrowing ? 'scale-125' : 'scale-100'
+                            } ${styles.textColor}`}>
+                                {value.length}
+                                <span className="text-muted mx-1">/</span>
+                                <span className="text-text-secondary">{maxLength}</span>
+                            </div>
+                            <span className="text-xs text-muted font-medium">caractères</span>
+                        </div>
+                    </div>
+                </div>
+            )}
+        </div>
+    );
+}