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

@@ -1,18 +1,15 @@
 'use client';
 import React, {useCallback, useContext, useMemo, useState} from 'react';
 import {useSpells, UseSpellsConfig} from '@/hooks/settings/useSpells';
-import {useTranslations} from 'next-intl';
-import {SpellEditState, SpellListItem} from '@/lib/models/Spell';
-import {SeriesSpellListItem} from '@/lib/models/Series';
-import {BookContext} from '@/context/BookContext';
-import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
-import {faSpinner, faToggleOn} from '@fortawesome/free-solid-svg-icons';
+import {useTranslations} from '@/lib/i18n';
+import {SpellEditState, SpellListItem} from '@/lib/types/spell';
+import {SeriesSpellListItem} from '@/lib/types/series';
+import {BookContext, BookContextProps} from '@/context/BookContext';
+import PulseLoader from '@/components/ui/PulseLoader';
 
 import ToolDetailHeader from '@/components/book/settings/ToolDetailHeader';
-import InputField from '@/components/form/InputField';
-import ToggleSwitch from '@/components/form/ToggleSwitch';
 import SeriesImportSelector from '@/components/form/SeriesImportSelector';
-import AlertBox from '@/components/AlertBox';
+import AlertBox from '@/components/ui/AlertBox';
 import SpellTagManager from '@/components/book/settings/spells/SpellTagManager';
 
 import SpellEditorList from './SpellEditorList';
@@ -25,16 +22,16 @@ import SpellEditorEdit from './SpellEditorEdit';
  */
 export default function SpellEditor(): React.JSX.Element {
     const t = useTranslations();
-    const {book} = useContext(BookContext);
+    const {book}: BookContextProps = useContext<BookContextProps>(BookContext);
     const [showDeleteConfirm, setShowDeleteConfirm] = useState<boolean>(false);
-
+    
     const config: UseSpellsConfig = useMemo(function (): UseSpellsConfig {
         return {
             entityType: 'book',
             entityId: book?.bookId || '',
         };
     }, [book?.bookId]);
-
+    
     const {
         spells,
         seriesSpells,
@@ -64,7 +61,7 @@ export default function SpellEditor(): React.JSX.Element {
         deleteTag,
         handleSyncComplete,
     } = useSpells(config);
-
+    
     const availableSeriesSpells = useMemo(function (): SeriesSpellListItem[] {
         return seriesSpells.filter(function (ss: SeriesSpellListItem): boolean {
             return !spells.some(function (s: SpellListItem): boolean {
@@ -72,19 +69,19 @@ export default function SpellEditor(): React.JSX.Element {
             });
         });
     }, [seriesSpells, spells]);
-
+    
     const handleSpellChange = useCallback(function (key: keyof SpellEditState, value: string | string[] | null): void {
         updateSpellField(key, value);
     }, [updateSpellField]);
-
+    
     async function handleSave(): Promise<void> {
         await exitEditMode(true);
     }
-
+    
     function handleCancel(): void {
         exitEditMode(false);
     }
-
+    
     async function handleDelete(): Promise<void> {
         if (selectedSpell?.id) {
             await deleteSpell(selectedSpell.id);
@@ -92,82 +89,75 @@ export default function SpellEditor(): React.JSX.Element {
             backToList();
         }
     }
-
+    
     if (isLoading) {
-        return (
-            <div className="flex items-center justify-center py-8">
-                <FontAwesomeIcon icon={faSpinner} className="w-6 h-6 text-primary animate-spin"/>
-            </div>
-        );
+        return <PulseLoader size="sm"/>;
     }
-
+    
     const isNew: boolean = selectedSpell?.id === null;
     const canExport: boolean = Boolean(bookSeriesId && selectedSpell?.id && !selectedSpell.seriesSpellId);
-
+    
     return (
         <div className="flex flex-col h-full">
             <ToolDetailHeader
-                title={selectedSpell?.name || ''}
-                defaultTitle={t('spellDetail.newSpell')}
-                viewMode={viewMode}
+                title={showTagManager ? t('spellTagManager.title') : (selectedSpell?.name || '')}
+                defaultTitle={showTagManager ? t('spellTagManager.title') : t('spellDetail.newSpell')}
+                viewMode={showTagManager ? 'detail' : viewMode}
                 isNew={isNew}
-                onBack={backToList}
-                onEdit={enterEditMode}
+                onBack={showTagManager ? function (): void {
+                    setShowTagManager(false);
+                } : backToList}
+                onEdit={showTagManager ? undefined : enterEditMode}
                 onSave={handleSave}
                 onCancel={handleCancel}
-                onDelete={function (): void { setShowDeleteConfirm(true); }}
-                onExport={canExport ? exportToSeries : undefined}
-                showExport={canExport}
-                showDelete={Boolean(selectedSpell?.id)}
+                onDelete={showTagManager ? undefined : function (): void {
+                    setShowDeleteConfirm(true);
+                }}
+                onExport={canExport && !showTagManager ? exportToSeries : undefined}
+                showExport={canExport && !showTagManager}
+                showDelete={!showTagManager && Boolean(selectedSpell?.id)}
             />
-
+            
             <div className="flex-1 overflow-y-auto">
-                {viewMode === 'list' && (
+                {showTagManager && (
+                    <SpellTagManager
+                        tags={tags}
+                        onCreateTag={createTag}
+                        onUpdateTag={updateTag}
+                        onDeleteTag={deleteTag}
+                    />
+                )}
+                
+                {!showTagManager && viewMode === 'list' && (
                     <div className="space-y-3 p-2">
-                        {/* Toggle tool */}
-                        <div className="bg-secondary/20 rounded-lg p-3 border border-secondary/30">
-                            <InputField
-                                icon={faToggleOn}
-                                fieldName={t('spellComponent.enableTool')}
-                                input={
-                                    <ToggleSwitch
-                                        checked={toolEnabled}
-                                        onChange={toggleTool}
-                                    />
-                                }
+                        {/* Import from series */}
+                        {bookSeriesId && availableSeriesSpells.length > 0 && (
+                            <SeriesImportSelector
+                                availableItems={availableSeriesSpells.map(function (ss: SeriesSpellListItem) {
+                                    return {
+                                        id: ss.id,
+                                        name: ss.name
+                                    };
+                                })}
+                                onImport={importFromSeries}
+                                placeholder={t('seriesImport.selectElement')}
+                                label={t('seriesImport.importFromSeries')}
                             />
-                        </div>
-
-                        {toolEnabled && (
-                            <>
-                                {/* Import from series */}
-                                {bookSeriesId && availableSeriesSpells.length > 0 && (
-                                    <SeriesImportSelector
-                                        availableItems={availableSeriesSpells.map(function (ss: SeriesSpellListItem) {
-                                            return {
-                                                id: ss.id,
-                                                name: ss.name
-                                            };
-                                        })}
-                                        onImport={importFromSeries}
-                                        placeholder={t('seriesImport.selectElement')}
-                                        label={t('seriesImport.importFromSeries')}
-                                    />
-                                )}
-
-                                <SpellEditorList
-                                    spells={spells}
-                                    tags={tags}
-                                    onSpellClick={enterDetailMode}
-                                    onAddSpell={addNewSpell}
-                                    onManageTags={function (): void { setShowTagManager(true); }}
-                                />
-                            </>
                         )}
+                        
+                        <SpellEditorList
+                            spells={spells}
+                            tags={tags}
+                            onSpellClick={enterDetailMode}
+                            onAddSpell={addNewSpell}
+                            onManageTags={function (): void {
+                                setShowTagManager(true);
+                            }}
+                        />
                     </div>
                 )}
-
-                {viewMode === 'detail' && selectedSpell && (
+                
+                {!showTagManager && viewMode === 'detail' && selectedSpell && (
                     <div className="p-4">
                         <SpellEditorDetail
                             spell={selectedSpell}
@@ -176,8 +166,8 @@ export default function SpellEditor(): React.JSX.Element {
                         />
                     </div>
                 )}
-
-                {viewMode === 'edit' && selectedSpell && (
+                
+                {!showTagManager && viewMode === 'edit' && selectedSpell && (
                     <div className="p-4">
                         <SpellEditorEdit
                             spell={selectedSpell}
@@ -190,7 +180,7 @@ export default function SpellEditor(): React.JSX.Element {
                     </div>
                 )}
             </div>
-
+            
             {showDeleteConfirm && selectedSpell?.id && (
                 <AlertBox
                     title={t('spellDetail.deleteTitle')}
@@ -199,19 +189,12 @@ export default function SpellEditor(): React.JSX.Element {
                     confirmText={t('common.delete')}
                     cancelText={t('common.cancel')}
                     onConfirm={handleDelete}
-                    onCancel={function (): void { setShowDeleteConfirm(false); }}
-                />
-            )}
-
-            {showTagManager && (
-                <SpellTagManager
-                    tags={tags}
-                    onBack={function (): void { setShowTagManager(false); }}
-                    onCreateTag={createTag}
-                    onUpdateTag={updateTag}
-                    onDeleteTag={deleteTag}
+                    onCancel={function (): void {
+                        setShowDeleteConfirm(false);
+                    }}
                 />
             )}
+            
         </div>
     );
 }