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.
This commit is contained in:
natreex
2026-01-19 23:00:33 -05:00
parent e7d35c0f0b
commit 9461eb6120
10 changed files with 64 additions and 6 deletions

View File

@@ -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) => (