Add spell management to book settings

- Moved spell-related components to the `book/settings/spells` directory for better organization.
- Added "Spells" as a new tool in book settings and composer sidebar with localization support.
- Integrated spell-related UI elements (`SpellComponent`, `SpellList`, `SpellTagManager`) into settings and sidebars.
- Updated logic to handle enabling/disabling of the spells tool per book.

components/book/settings/BookSettingOption.tsx

@@ -7,6 +7,7 @@ import {RefObject, useRef} from "react";
 import PanelHeader from "@/components/PanelHeader";
 import LocationComponent from "@/components/book/settings/locations/LocationComponent";
 import CharacterComponent from "@/components/book/settings/characters/CharacterComponent";
+import SpellComponent from "@/components/book/settings/spells/SpellComponent";
 import QuillSenseSetting from "@/components/book/settings/quillsense/QuillSenseSetting";
 import {useTranslations} from "next-intl"; // Ajouté pour la traduction
 
@@ -36,6 +37,9 @@ export default function BookSettingOption(
     const characterRef: RefObject<{ handleSave: () => Promise<void> } | null> = useRef<{
         handleSave: () => Promise<void>
     }>(null);
+    const spellRef: RefObject<{ handleSave: () => Promise<void> } | null> = useRef<{
+        handleSave: () => Promise<void>
+    }>(null);
     const quillSenseRef: RefObject<{ handleSave: () => Promise<void> } | null> = useRef<{
         handleSave: () => Promise<void>
     }>(null);
@@ -54,6 +58,8 @@ export default function BookSettingOption(
                 return t("bookSettingOption.yourLocations");
             case 'characters':
                 return t("bookSettingOption.characters");
+            case 'spells':
+                return t("bookSettingOption.spells");
             case 'objects':
                 return t("bookSettingOption.objectsList");
             case 'goals':
@@ -85,6 +91,9 @@ export default function BookSettingOption(
             case 'characters':
                 characterRef.current?.handleSave();
                 break;
+            case 'spells':
+                spellRef.current?.handleSave();
+                break;
             case 'quillsense':
                 quillSenseRef.current?.handleSave();
                 break;
@@ -118,6 +127,8 @@ export default function BookSettingOption(
                         <LocationComponent ref={locationRef}/>
                     ) : setting === 'characters' ? (
                         <CharacterComponent ref={characterRef}/>
+                    ) : setting === 'spells' ? (
+                        <SpellComponent ref={spellRef}/>
                     ) : setting === 'quillsense' ? (
                         <QuillSenseSetting ref={quillSenseRef}/>
                     ) : <div

components/book/settings/BookSettingSidebar.tsx

@@ -1,7 +1,16 @@
 'use client'
 // Removed Next.js Link import for Electron
 import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
-import {faBook, faFeather, faGlobe, faListAlt, faMapMarkedAlt, faPencilAlt, faUser} from "@fortawesome/free-solid-svg-icons";
+import {
+    faBook,
+    faGlobe,
+    faHatWizard,
+    faListAlt,
+    faMapMarkedAlt,
+    faPencilAlt,
+    faUser,
+    faWandMagicSparkles
+} from "@fortawesome/free-solid-svg-icons";
 import {Dispatch, SetStateAction} from "react";
 import {IconDefinition} from "@fortawesome/fontawesome-svg-core";
 import {useTranslations} from "next-intl";
@@ -53,10 +62,15 @@ export default function BookSettingSidebar(
             name: 'bookSetting.characters',
             icon: faUser
         },
+        {
+            id: 'spells',
+            name: 'bookSetting.spells',
+            icon: faHatWizard
+        },
         {
             id: 'quillsense',
             name: 'bookSetting.quillsense',
-            icon: faFeather
+            icon: faWandMagicSparkles
         },
         // {
         //     id: 'objects',

components/rightbar/ComposerRightBar.tsx

@@ -1,5 +1,5 @@
 import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
-import {faFeather, faGlobe, faInfoCircle, faMapMarkerAlt, faUsers} from "@fortawesome/free-solid-svg-icons";
+import {faFeather, faGlobe, faHatWizard, faInfoCircle, faMapMarkerAlt, faUsers} from "@fortawesome/free-solid-svg-icons";
 import {RefObject, useContext, useEffect, useRef, useState} from "react";
 import {BookContext} from "@/context/BookContext";
 import {PanelComponent} from "@/lib/models/Editor";
@@ -9,6 +9,7 @@ import {faDiscord, faFacebook} from "@fortawesome/free-brands-svg-icons";
 import WorldSetting from "@/components/book/settings/world/WorldSetting";
 import LocationComponent from "@/components/book/settings/locations/LocationComponent";
 import CharacterComponent from "@/components/book/settings/characters/CharacterComponent";
+import SpellComponent from "@/components/book/settings/spells/SpellComponent";
 import QuillSense from "@/components/quillsense/QuillSenseComponent";
 import {useTranslations} from "next-intl";
 import OfflineContext, {OfflineContextType} from "@/context/OfflineContext";
@@ -28,6 +29,7 @@ export default function ComposerRightBar() {
     const worldRef: RefObject<{ handleSave: () => Promise<void> } | null> = useRef<{ handleSave: () => Promise<void> }>(null);
     const locationRef: RefObject<{ handleSave: () => Promise<void> } | null> = useRef<{ handleSave: () => Promise<void> }>(null);
     const characterRef: RefObject<{ handleSave: () => Promise<void> } | null> = useRef<{ handleSave: () => Promise<void> }>(null);
+    const spellRef: RefObject<{ handleSave: () => Promise<void> } | null> = useRef<{ handleSave: () => Promise<void> }>(null);
     
     async function handleSaveClick(): Promise<void> {
         switch (currentPanel?.id) {
@@ -40,11 +42,14 @@ export default function ComposerRightBar() {
             case 4:
                 characterRef.current?.handleSave();
                 break;
+            case 5:
+                spellRef.current?.handleSave();
+                break;
             default:
                 break;
         }
     }
-    
+
     function togglePanel(component: PanelComponent): void {
         if (panelHidden) {
             if (currentPanel?.id === component.id) {
@@ -93,8 +98,15 @@ export default function ComposerRightBar() {
             badge: t("composerRightBar.editorComponents.characters.badge"),
             icon: faUsers
         },
-        /*{
+        {
             id: 5,
+            title: t("composerRightBar.editorComponents.spells.title"),
+            description: t("composerRightBar.editorComponents.spells.description"),
+            badge: t("composerRightBar.editorComponents.spells.badge"),
+            icon: faHatWizard
+        },
+        /*{
+            id: 6,
             title: t("composerRightBar.editorComponents.items.title"),
             description: t("composerRightBar.editorComponents.items.description"),
             badge: t("composerRightBar.editorComponents.items.badge"),
@@ -148,7 +160,7 @@ export default function ComposerRightBar() {
                                      description={currentPanel?.description ?? ''}
                                      badge={currentPanel?.badge ?? ''}
                                      icon={currentPanel?.icon}
-                                     secondActionCallback={currentPanel?.id === 2 || currentPanel?.id === 3 || currentPanel?.id === 4 ? handleSaveClick : undefined}
+                                     secondActionCallback={currentPanel?.id === 2 || currentPanel?.id === 3 || currentPanel?.id === 4 || currentPanel?.id === 5 ? handleSaveClick : undefined}
                                      callBackAction={async () => setPanelHidden(!panelHidden)}
                         />
                         <div className="flex-grow overflow-auto">
@@ -164,6 +176,9 @@ export default function ComposerRightBar() {
                             {currentPanel?.id === 4 && (
                                 <CharacterComponent ref={characterRef} showToggle={false}/>
                             )}
+                            {currentPanel?.id === 5 && (
+                                <SpellComponent ref={spellRef} showToggle={false}/>
+                            )}
                         </div>
                     </div>
                 </div>
@@ -192,6 +207,10 @@ export default function ComposerRightBar() {
                         if (component.id === 4 && !book?.tools?.characters) {
                             return false;
                         }
+                        // Filter Spells if tools.spells is disabled
+                        if (component.id === 5 && !book?.tools?.spells) {
+                            return false;
+                        }
                         return true;
                     })
                     .map((component: PanelComponent) => (