Remove CharacterComponent and CharacterDetail components

- Deleted `CharacterComponent` and `CharacterDetail` files from the project. - Refactored related logic to improve code maintainability and reduce redundancy.
2026-02-05 14:12:08 -05:00
parent cec5830360
commit 209dc6f85a
133 changed files with 17673 additions and 3110 deletions
--- a/components/book/settings/ToolDetailHeader.tsx
+++ b/components/book/settings/ToolDetailHeader.tsx
@@ -0,0 +1,169 @@
+'use client';
+import React from 'react';
+import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
+import {faArrowLeft, faEdit, faPlus, faSave, faShare, faTrash, faTimes} from '@fortawesome/free-solid-svg-icons';
+import {IconDefinition} from '@fortawesome/fontawesome-svg-core';
+import {useTranslations} from 'next-intl';
+import {ViewMode} from '@/shared/interface';
+
+interface ActionButton {
+    icon: IconDefinition;
+    onClick: () => void;
+    title?: string;
+    variant?: 'primary' | 'danger' | 'secondary' | 'blue';
+}
+
+interface SidebarHeaderProps {
+    title: string;
+    defaultTitle: string;
+    viewMode: ViewMode;
+    isNew: boolean;
+    onBack: () => void;
+    onEdit?: () => void;
+    onSave?: () => void;
+    onCancel?: () => void;
+    onDelete?: () => void;
+    onExport?: () => void;
+    showExport?: boolean;
+    showDelete?: boolean;
+}
+
+/**
+ * ToolDetailHeader - Header pour les composants Editor (ComposerRightBar) et Settings Detail/Edit
+ * Comportement par mode:
+ * - list: Retourne null (pas de header)
+ * - detail: Boutons Back, Edit, Delete, Export (si applicable)
+ * - edit: Boutons Cancel, Save/Create
+ */
+export default function ToolDetailHeader({
+    title,
+    defaultTitle,
+    viewMode,
+    isNew,
+    onBack,
+    onEdit,
+    onSave,
+    onCancel,
+    onDelete,
+    onExport,
+    showExport = false,
+    showDelete = true,
+}: SidebarHeaderProps): React.JSX.Element | null {
+    const t = useTranslations();
+    
+    if (viewMode === 'list') {
+        return null;
+    }
+
+    function getVariantClasses(variant: 'primary' | 'danger' | 'secondary' | 'blue'): string {
+        switch (variant) {
+            case 'primary':
+                return 'bg-primary/10 hover:bg-primary/20 border-primary/30';
+            case 'danger':
+                return 'bg-error/10 hover:bg-error/20 border-error/30';
+            case 'blue':
+                return 'bg-blue-500/10 hover:bg-blue-500/20 border-blue-500/30';
+            case 'secondary':
+            default:
+                return 'bg-secondary/50 hover:bg-secondary border-secondary/50 hover:border-secondary';
+        }
+    }
+
+    function getIconColorClass(variant: 'primary' | 'danger' | 'secondary' | 'blue'): string {
+        switch (variant) {
+            case 'primary':
+                return 'text-primary';
+            case 'danger':
+                return 'text-error';
+            case 'blue':
+                return 'text-blue-500';
+            case 'secondary':
+            default:
+                return 'text-text-primary';
+        }
+    }
+
+    function renderActionButton(button: ActionButton, index: number): React.JSX.Element {
+        const variant = button.variant || 'secondary';
+        return (
+            <button
+                key={`action-${index}`}
+                onClick={button.onClick}
+                title={button.title}
+                className={`group flex items-center justify-center w-10 h-10 rounded-lg border hover:shadow-md hover:scale-110 transition-all duration-200 ${getVariantClasses(variant)}`}
+            >
+                <FontAwesomeIcon icon={button.icon} className={`w-4 h-4 transition-transform group-hover:scale-110 ${getIconColorClass(variant)}`}/>
+            </button>
+        );
+    }
+
+    function getActionButtons(): ActionButton[] {
+        const buttons: ActionButton[] = [];
+
+        if (viewMode === 'detail') {
+            if (showExport && onExport) {
+                buttons.push({
+                    icon: faShare,
+                    onClick: onExport,
+                    title: t('common.exportToSeries'),
+                    variant: 'blue',
+                });
+            }
+            if (showDelete && onDelete) {
+                buttons.push({
+                    icon: faTrash,
+                    onClick: onDelete,
+                    title: t('common.delete'),
+                    variant: 'danger',
+                });
+            }
+            if (onEdit) {
+                buttons.push({
+                    icon: faEdit,
+                    onClick: onEdit,
+                    title: t('common.edit'),
+                    variant: 'primary',
+                });
+            }
+        } else if (viewMode === 'edit') {
+            if (onCancel) {
+                buttons.push({
+                    icon: faTimes,
+                    onClick: onCancel,
+                    title: t('common.cancel'),
+                    variant: 'danger',
+                });
+            }
+            if (onSave) {
+                buttons.push({
+                    icon: isNew ? faPlus : faSave,
+                    onClick: onSave,
+                    title: isNew ? t('common.create') : t('common.save'),
+                    variant: 'primary',
+                });
+            }
+        }
+
+        return buttons;
+    }
+
+    return (
+        <div className="flex justify-between items-center p-4 border-b border-secondary/50 bg-tertiary/50 backdrop-blur-sm">
+            <button
+                onClick={onBack}
+                className="flex items-center gap-2 bg-secondary/50 py-2 px-4 rounded-xl border border-secondary/50 hover:bg-secondary hover:border-secondary hover:shadow-md hover:scale-105 transition-all duration-200"
+            >
+                <FontAwesomeIcon icon={faArrowLeft} className="text-primary w-4 h-4"/>
+                <span className="text-text-primary font-medium">{t('common.back')}</span>
+            </button>
+
+            <span className="text-text-primary font-semibold text-lg">
+                {title || defaultTitle}
+            </span>
+
+            <div className="flex items-center gap-2">
+                {getActionButtons().map(renderActionButton)}
+            </div>
+        </div>
+    );
+}