Remove CharacterComponent and CharacterDetail components

- Deleted `CharacterComponent` and `CharacterDetail` files from the project.
- Refactored related logic to improve code maintainability and reduce redundancy.

components/form/NumberInput.tsx

@@ -1,8 +1,9 @@
-import {ChangeEvent, Dispatch} from "react";
+import React, {ChangeEvent, Dispatch} from "react";
 
 interface NumberInputProps {
-    value: number;
-    setValue: Dispatch<React.SetStateAction<number>>;
+    value: number | null;
+    setValue?: Dispatch<React.SetStateAction<number>>;
+    onValueChange?: (value: number | null) => void;
     placeholder?: string;
     readOnly?: boolean;
     disabled?: boolean;
@@ -12,22 +13,34 @@ export default function NumberInput(
     {
         value,
         setValue,
+        onValueChange,
         placeholder,
         readOnly = false,
         disabled = false
     }: NumberInputProps
 ) {
-    function handleChange(e: ChangeEvent<HTMLInputElement>) {
-        const newValue: number = parseInt(e.target.value);
+    function handleChange(e: ChangeEvent<HTMLInputElement>): void {
+        const inputValue: string = e.target.value;
+        if (inputValue === '') {
+            if (onValueChange) {
+                onValueChange(null);
+            }
+            return;
+        }
+        const newValue: number = parseInt(inputValue, 10);
         if (!isNaN(newValue)) {
-            setValue(newValue);
+            if (onValueChange) {
+                onValueChange(newValue);
+            } else if (setValue) {
+                setValue(newValue);
+            }
         }
     }
 
     return (
         <input
             type="number"
-            value={value}
+            value={value ?? ''}
             onChange={handleChange}
             className={`w-full bg-secondary/50 text-text-primary px-4 py-2.5 rounded-xl border border-secondary/50
                 focus:border-primary focus:ring-4 focus:ring-primary/20 focus:bg-secondary

components/form/SeriesImportSelector.tsx

@@ -0,0 +1,88 @@
+'use client'
+import React, {useState} from 'react';
+import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
+import {faDownload, faSpinner} from '@fortawesome/free-solid-svg-icons';
+import {useTranslations} from 'next-intl';
+import SelectBox from '@/components/form/SelectBox';
+
+interface SeriesImportItem {
+    id: string;
+    name: string;
+}
+
+interface SeriesImportSelectorProps {
+    availableItems: SeriesImportItem[];
+    onImport: (seriesElementId: string) => Promise<void>;
+    placeholder: string;
+    label?: string;
+}
+
+export default function SeriesImportSelector({
+    availableItems,
+    onImport,
+    placeholder,
+    label
+}: SeriesImportSelectorProps) {
+    const t = useTranslations();
+
+    const [selectedId, setSelectedId] = useState<string>('');
+    const [isImporting, setIsImporting] = useState<boolean>(false);
+
+    async function handleImport(): Promise<void> {
+        if (!selectedId || isImporting) return;
+
+        setIsImporting(true);
+        try {
+            await onImport(selectedId);
+            setSelectedId('');
+        } finally {
+            setIsImporting(false);
+        }
+    }
+
+    if (availableItems.length === 0) {
+        return null;
+    }
+
+    const selectData = availableItems.map((item) => ({
+        label: item.name,
+        value: item.id
+    }));
+
+    return (
+        <div className="bg-primary/10 border border-primary/30 rounded-xl p-4 mb-4">
+            {label && (
+                <h4 className="text-sm font-medium text-primary mb-3 flex items-center gap-2">
+                    <FontAwesomeIcon icon={faDownload} className="w-4 h-4"/>
+                    {label}
+                </h4>
+            )}
+            <div className="flex items-center gap-3">
+                <div className="flex-grow">
+                    <SelectBox
+                        onChangeCallBack={(e) => setSelectedId(e.target.value)}
+                        data={selectData}
+                        defaultValue={selectedId}
+                        placeholder={placeholder}
+                    />
+                </div>
+                <button
+                    onClick={handleImport}
+                    disabled={!selectedId || isImporting}
+                    className={`px-4 py-2 rounded-lg font-medium flex items-center gap-2 transition-all duration-200 ${
+                        selectedId && !isImporting
+                            ? 'bg-primary text-white hover:bg-primary-dark hover:scale-105'
+                            : 'bg-secondary/50 text-muted cursor-not-allowed'
+                    }`}
+                >
+                    {isImporting ? (
+                        <FontAwesomeIcon icon={faSpinner} className="w-4 h-4 animate-spin"/>
+                    ) : (
+                        <FontAwesomeIcon icon={faDownload} className="w-4 h-4"/>
+                    )}
+                    {t('seriesImport.importButton')}
+                </button>
+            </div>
+        </div>
+    );
+}

components/form/SyncFieldWrapper.tsx

@@ -0,0 +1,152 @@
+'use client'
+import React, {ReactNode, useContext, useState} from 'react';
+import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
+import {faArrowDown, faArrowUp, faSpinner} from '@fortawesome/free-solid-svg-icons';
+import {useTranslations} from 'next-intl';
+import {SessionContext} from '@/context/SessionContext';
+import {AlertContext} from '@/context/AlertContext';
+import {LangContext, LangContextProps} from '@/context/LangContext';
+import OfflineContext, {OfflineContextType} from '@/context/OfflineContext';
+import {LocalSyncQueueContext, LocalSyncQueueContextProps} from '@/context/SyncQueueContext';
+import {BooksSyncContext, BooksSyncContextProps} from '@/context/BooksSyncContext';
+import {BookContext} from '@/context/BookContext';
+import {SyncedBook} from '@/lib/models/SyncedBook';
+import System from '@/lib/models/System';
+
+export type SyncElementType = 'character' | 'world' | 'location' | 'spell';
+
+interface SyncFieldWrapperProps {
+    children: ReactNode;
+    seriesElementId: string | null | undefined;
+    seriesValue: string;
+    currentValue: string;
+    bookElementId: string;
+    field: string;
+    elementType: SyncElementType;
+    onDownload: () => void;
+    onSyncComplete?: () => void;
+}
+
+interface SeriesSyncUploadResponse {
+    success: boolean;
+    updatedCount: number;
+}
+
+export default function SyncFieldWrapper({
+    children,
+    seriesElementId,
+    seriesValue,
+    currentValue,
+    bookElementId,
+    field,
+    elementType,
+    onDownload,
+    onSyncComplete
+}: SyncFieldWrapperProps) {
+    const t = useTranslations();
+    const {session} = useContext(SessionContext);
+    const {errorMessage, successMessage} = useContext(AlertContext);
+    const {lang} = useContext<LangContextProps>(LangContext);
+    const {isCurrentlyOffline} = useContext<OfflineContextType>(OfflineContext);
+    const {addToQueue} = useContext<LocalSyncQueueContextProps>(LocalSyncQueueContext);
+    const {localSyncedBooks} = useContext<BooksSyncContextProps>(BooksSyncContext);
+    const {book} = useContext(BookContext);
+
+    const [isUploading, setIsUploading] = useState<boolean>(false);
+
+    const isLinkedToSeries: boolean = !!seriesElementId;
+    const hasSeriesDiff: boolean = isLinkedToSeries && seriesValue !== currentValue;
+
+    async function handleUpload(): Promise<void> {
+        if (!seriesElementId || isUploading) return;
+
+        setIsUploading(true);
+        try {
+            const requestData = {
+                type: elementType,
+                bookElementId: bookElementId,
+                field: field,
+                value: currentValue
+            };
+
+            let response: SeriesSyncUploadResponse;
+
+            if (isCurrentlyOffline() || book?.localBook) {
+                // Offline OU livre local → IPC
+                response = await window.electron.invoke<SeriesSyncUploadResponse>('db:series:sync:upload', requestData);
+            } else {
+                // Online + livre serveur → Server
+                response = await System.authPostToServer<SeriesSyncUploadResponse>(
+                    'series/propagate',
+                    requestData,
+                    session.accessToken,
+                    lang
+                );
+
+                // Si le livre a une copie locale → addToQueue pour sync
+                if (book?.bookId && localSyncedBooks.find((sb: SyncedBook): boolean => sb.id === book.bookId)) {
+                    addToQueue('db:series:sync:upload', requestData);
+                }
+            }
+
+            if (response.success) {
+                successMessage(t('syncField.uploadSuccess', {count: response.updatedCount}));
+                if (onSyncComplete) {
+                    onSyncComplete();
+                }
+            }
+        } catch (e: unknown) {
+            if (e instanceof Error) {
+                errorMessage(e.message);
+            }
+        } finally {
+            setIsUploading(false);
+        }
+    }
+
+    function handleDownload(): void {
+        onDownload();
+    }
+
+    if (!isLinkedToSeries) {
+        return <>{children}</>;
+    }
+
+    return (
+        <div className="flex items-start gap-2 w-full">
+            <button
+                onClick={handleDownload}
+                disabled={!hasSeriesDiff}
+                title={t('syncField.downloadTooltip')}
+                className={`flex-shrink-0 w-8 h-8 rounded-full flex items-center justify-center transition-all duration-200 ${
+                    hasSeriesDiff
+                        ? 'bg-blue-500/20 text-blue-400 hover:bg-blue-500/40 hover:scale-110 cursor-pointer'
+                        : 'bg-secondary/30 text-muted cursor-not-allowed opacity-50'
+                }`}
+            >
+                <FontAwesomeIcon icon={faArrowDown} className="w-3.5 h-3.5"/>
+            </button>
+
+            <div className="flex-grow">
+                {children}
+            </div>
+
+            <button
+                onClick={handleUpload}
+                disabled={isUploading || !hasSeriesDiff}
+                title={t('syncField.uploadTooltip')}
+                className={`flex-shrink-0 w-8 h-8 rounded-full flex items-center justify-center transition-all duration-200 ${
+                    hasSeriesDiff && !isUploading
+                        ? 'bg-primary/20 text-primary hover:bg-primary/40 hover:scale-110 cursor-pointer'
+                        : 'bg-secondary/30 text-muted cursor-not-allowed opacity-50'
+                }`}
+            >
+                {isUploading ? (
+                    <FontAwesomeIcon icon={faSpinner} className="w-3.5 h-3.5 animate-spin"/>
+                ) : (
+                    <FontAwesomeIcon icon={faArrowUp} className="w-3.5 h-3.5"/>
+                )}
+            </button>
+        </div>
+    );
+}