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/spells/SpellDetail.tsx

@@ -8,6 +8,7 @@ import TextInput from "@/components/form/TextInput";
 import TexteAreaInput from "@/components/form/TexteAreaInput";
 import SelectBox from "@/components/form/SelectBox";
 import SpellTagChip from "@/components/book/settings/spells/SpellTagChip";
+import DeleteButton from "@/components/form/DeleteButton";
 import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
 import {
     faArrowLeft,
@@ -20,11 +21,9 @@ import {
     faSave,
     faStickyNote,
     faTags,
-    faTrash,
     faTriangleExclamation
 } from "@fortawesome/free-solid-svg-icons";
 import {useTranslations} from "next-intl";
-import AlertBox from "@/components/AlertBox";
 
 interface SpellDetailProps {
     selectedSpell: SpellEditState;
@@ -52,7 +51,6 @@ export default function SpellDetail(
     const [showTagDropdown, setShowTagDropdown] = useState<boolean>(false);
     const [isCreatingTag, setIsCreatingTag] = useState<boolean>(false);
     const [newTagColor, setNewTagColor] = useState<string>(defaultTagColors[0]);
-    const [showDeleteConfirm, setShowDeleteConfirm] = useState<boolean>(false);
     
     function handleAddTag(tagId: string): void {
         if (!selectedSpell.tags.includes(tagId)) {
@@ -118,12 +116,13 @@ export default function SpellDetail(
                 </span>
                 <div className="flex items-center gap-2">
                     {selectedSpell.id && (
-                        <button
-                            onClick={() => setShowDeleteConfirm(true)}
-                            className="flex items-center justify-center bg-error/90 hover:bg-error w-10 h-10 rounded-xl border border-error shadow-md hover:shadow-lg hover:scale-110 transition-all duration-200"
-                        >
-                            <FontAwesomeIcon icon={faTrash} className="text-text-primary w-5 h-5"/>
-                        </button>
+                        <DeleteButton
+                            onDelete={(): Promise<void> => handleDeleteSpell(selectedSpell.id as string)}
+                            confirmTitle={t("spellDetail.deleteTitle")}
+                            confirmMessage={t("spellDetail.deleteMessage", {name: selectedSpell.name})}
+                            confirmButtonText={t("common.delete")}
+                            cancelButtonText={t("common.cancel")}
+                        />
                     )}
                     <button
                         onClick={handleSaveSpell}
@@ -133,20 +132,6 @@ export default function SpellDetail(
                                          className="text-text-primary w-5 h-5"/>
                     </button>
                 </div>
-                {showDeleteConfirm && selectedSpell.id && (
-                    <AlertBox
-                        title={t("spellDetail.deleteTitle")}
-                        message={t("spellDetail.deleteMessage", {name: selectedSpell.name})}
-                        type="danger"
-                        confirmText={t("common.delete")}
-                        cancelText={t("common.cancel")}
-                        onConfirm={async (): Promise<void> => {
-                            await handleDeleteSpell(selectedSpell.id as string);
-                            setShowDeleteConfirm(false);
-                        }}
-                        onCancel={(): void => setShowDeleteConfirm(false)}
-                    />
-                )}
             </div>
             
             <div className="overflow-y-auto max-h-[calc(100vh-350px)] space-y-4 px-2 pb-4">