Remove unused components and models for improved maintainability

- Deleted redundant components (`AddActionButton`, `AlertBox`, `AlertStack`, `BackButton`, `CancelButton`, and `CollapsableArea`) and related files.
- Removed unused models (`Book`, `BookSerie`, `BookTables`, `Character`, and `Chapter`) to reduce codebase clutter.
- Updated project structure and references to reflect these removals.

components/book/settings/characters/CharacterSectionElement.tsx

@@ -1,23 +1,23 @@
-import CollapsableArea from "@/components/CollapsableArea";
-import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
-import {useState} from "react";
-import {faTrash} from "@fortawesome/free-solid-svg-icons";
+import Collapse from "@/components/ui/Collapse";
+import React, {ChangeEvent, useState} from "react";
+import {LucideIcon, Trash2} from 'lucide-react';
+import IconButton from "@/components/ui/IconButton";
 import InputField from "@/components/form/InputField";
 import TextInput from "@/components/form/TextInput";
-import {Attribute, CharacterProps} from "@/lib/models/Character";
-import {IconDefinition} from "@fortawesome/fontawesome-svg-core";
-import {useTranslations} from "next-intl";
+import {Attribute, CharacterAttributeSection, CharacterProps} from "@/lib/types/character";
+import {useTranslations} from '@/lib/i18n';
+
 
 interface CharacterSectionElementProps {
     title: string;
-    section: keyof CharacterProps;
+    section: CharacterAttributeSection;
     placeholder: string;
-    icon: IconDefinition;
+    icon: LucideIcon;
     selectedCharacter: CharacterProps;
     setSelectedCharacter: (character: CharacterProps) => void;
-    handleAddElement: (section: keyof CharacterProps, element: Attribute) => void;
+    handleAddElement: (section: CharacterAttributeSection, element: Attribute) => void;
     handleRemoveElement: (
-        section: keyof CharacterProps,
+        section: CharacterAttributeSection,
         index: number,
         attrId: string,
     ) => void;
@@ -33,28 +33,26 @@ export default function CharacterSectionElement(
         setSelectedCharacter,
         handleAddElement,
         handleRemoveElement,
-    }: CharacterSectionElementProps) {
+    }: CharacterSectionElementProps): React.JSX.Element {
     const t = useTranslations();
     const [element, setElement] = useState<string>('');
     
-    function handleAddNewElement() {
+    function handleAddNewElement(): void {
         handleAddElement(section, {id: '', name: element});
         setElement('');
     }
-    
+
     return (
-        <CollapsableArea title={title} icon={icon}>
-            <div className="space-y-3 p-4 bg-secondary/20 rounded-xl border border-secondary/30">
-                {Array.isArray(selectedCharacter?.[section]) &&
-                    selectedCharacter?.[section].map((item, index: number) => (
+        <Collapse variant="card" title={title} icon={icon}>
+            {selectedCharacter[section].map((item: Attribute, index: number): React.JSX.Element => (
                         <div key={index}
-                             className="flex items-center gap-2 bg-secondary/30 rounded-xl border-l-4 border-primary shadow-sm hover:shadow-md transition-all duration-200">
+                             className="flex items-center gap-2 bg-secondary rounded-xl border-l-4 border-primary transition-colors duration-200">
                             <input
                                 className="flex-1 bg-transparent text-text-primary px-3 py-2.5 focus:outline-none placeholder:text-muted/60"
-                                value={item.name || item.type || item.description || item.history || ''}
-                                onChange={(e) => {
-                                    const updatedSection = [...(selectedCharacter[section] as any[])];
-                                    updatedSection[index].name = e.target.value;
+                                value={item.name || ''}
+                                onChange={(e: ChangeEvent<HTMLInputElement>): void => {
+                                    const updatedSection: Attribute[] = [...selectedCharacter[section]];
+                                    updatedSection[index] = {...updatedSection[index], name: e.target.value};
                                     setSelectedCharacter({
                                         ...selectedCharacter,
                                         [section]: updatedSection,
@@ -62,28 +60,28 @@ export default function CharacterSectionElement(
                                 }}
                                 placeholder={placeholder}
                             />
-                            <button
-                                onClick={() => handleRemoveElement(section, index, item.id)}
-                                className="bg-error/90 hover:bg-error w-9 h-9 rounded-full flex items-center justify-center mr-2 shadow-md hover:shadow-lg hover:scale-110 transition-all duration-200"
-                            >
-                                <FontAwesomeIcon icon={faTrash} className="text-white w-4 h-4"/>
-                            </button>
+                            <div className="mr-2">
+                                <IconButton
+                                    icon={Trash2}
+                                    variant="danger"
+                                    onClick={(): void => handleRemoveElement(section, index, item.id)}
+                                />
+                            </div>
                         </div>
                     ))}
-                
-                <div className="border-t border-secondary/50 mt-4 pt-4">
+
+                <div className="border-t border-secondary mt-4 pt-4">
                     <InputField
                         input={
                             <TextInput
                                 value={element}
-                                setValue={(e) => setElement(e.target.value)}
+                                setValue={(e: ChangeEvent<HTMLInputElement>): void => setElement(e.target.value)}
                                 placeholder={t("characterSectionElement.newItem", {item: title.toLowerCase()})}
                             />
                         }
-                        addButtonCallBack={async () => handleAddNewElement()}
+                        addButtonCallBack={async (): Promise<void> => handleAddNewElement()}
                     />
                 </div>
-            </div>
-        </CollapsableArea>
+        </Collapse>
     )
 }