Add character deletion functionality with confirmation workflow

- Added `handleDeleteCharacter` method to handle character deletion with confirmation prompts.
- Updated `CharacterComponent` and `CharacterDetail` to include delete button and related logic.
- Localized new strings for character deletion (e.g., confirmation prompts, success/error messages).
- Enhanced database repository methods (`deleteCharacter`) to handle character deletion securely.
- Improved synchronization workflows to accommodate character deletion.

components/book/settings/characters/CharacterDetail.tsx

@@ -28,6 +28,7 @@ import {
 import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
 import {Dispatch, SetStateAction, useContext, useEffect} from "react";
 import CharacterSectionElement from "@/components/book/settings/characters/CharacterSectionElement";
+import DeleteButton from "@/components/form/DeleteButton";
 import {useTranslations} from "next-intl";
 import {LangContext} from "@/context/LangContext";
 import OfflineContext, {OfflineContextType} from "@/context/OfflineContext";
@@ -46,6 +47,7 @@ interface CharacterDetailProps {
         attrId: string,
     ) => void;
     handleSaveCharacter: () => void;
+    handleDeleteCharacter: (characterId: string) => Promise<void>;
 }
 
 export default function CharacterDetail(
@@ -56,6 +58,7 @@ export default function CharacterDetail(
         handleRemoveElement,
         handleAddElement,
         handleSaveCharacter,
+        handleDeleteCharacter,
     }: CharacterDetailProps
 ) {
     const t = useTranslations();
@@ -64,7 +67,7 @@ export default function CharacterDetail(
     const {book} = useContext(BookContext);
     const {session} = useContext(SessionContext);
     const {errorMessage} = useContext(AlertContext);
-    
+
     useEffect((): void => {
         if (selectedCharacter?.id !== null) {
             getAttributes().then();
@@ -139,11 +142,22 @@ export default function CharacterDetail(
                 <span className="text-text-primary font-semibold text-lg">
                   {selectedCharacter?.name || t("characterDetail.newCharacter")}
                 </span>
-                <button onClick={handleSaveCharacter}
-                        className="flex items-center justify-center bg-primary w-10 h-10 rounded-xl border border-primary-dark shadow-md hover:shadow-lg hover:scale-110 transition-all duration-200">
-                    <FontAwesomeIcon icon={selectedCharacter?.id ? faSave : faPlus}
-                                     className="text-text-primary w-5 h-5"/>
-                </button>
+                <div className="flex items-center gap-2">
+                    {selectedCharacter?.id && (
+                        <DeleteButton
+                            onDelete={(): Promise<void> => handleDeleteCharacter(selectedCharacter.id as string)}
+                            confirmTitle={t("characterDetail.deleteTitle")}
+                            confirmMessage={t("characterDetail.deleteMessage", {name: selectedCharacter.name})}
+                            confirmButtonText={t("common.delete")}
+                            cancelButtonText={t("common.cancel")}
+                        />
+                    )}
+                    <button onClick={handleSaveCharacter}
+                            className="flex items-center justify-center bg-primary w-10 h-10 rounded-xl border border-primary-dark shadow-md hover:shadow-lg hover:scale-110 transition-all duration-200">
+                        <FontAwesomeIcon icon={selectedCharacter?.id ? faSave : faPlus}
+                                         className="text-text-primary w-5 h-5"/>
+                    </button>
+                </div>
             </div>
             
             <div className="overflow-y-auto max-h-[calc(100vh-350px)] space-y-4 px-2 pb-4">