natgitadm/ERitors-Scribe-Desktop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Remove unused components and models for improved maintainability

Browse Source 
- 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.
This commit is contained in:
natreex
2026-03-22 22:37:31 -04:00
parent e8aaef108b
commit 64ed90d993
229 changed files with 15091 additions and 21289 deletions
Download Patch File Download Diff File Expand all files Collapse all files

410
components/book/settings/world/WorldElement.tsx
View File

@@ -1,225 +1,185 @@
'use client';
import {ChangeEvent, useContext, useState} from "react";
import {WorldContext} from "@/context/WorldContext";
import TextInput from "@/components/form/TextInput";
import TexteAreaInput from "@/components/form/TexteAreaInput";
import {WorldElement, WorldProps} from "@/lib/models/World";
import {AlertContext} from "@/context/AlertContext";
import {SessionContext} from "@/context/SessionContext";
import System from "@/lib/models/System";
import InputField from "@/components/form/InputField";
import {useTranslations} from "next-intl";
import {LangContext, LangContextProps} from "@/context/LangContext";
import OfflineContext, {OfflineContextType} from "@/context/OfflineContext";
import {BookContext} from "@/context/BookContext";
import {LocalSyncQueueContext, LocalSyncQueueContextProps} from "@/context/SyncQueueContext";
import {BooksSyncContext, BooksSyncContextProps} from "@/context/BooksSyncContext";
import {SyncedBook} from "@/lib/models/SyncedBook";
import {SeriesContext, SeriesContextProps} from "@/context/SeriesContext";
import {SeriesSyncContext, SeriesSyncContextProps} from "@/context/SeriesSyncContext";
import {SyncedSeries} from "@/lib/models/SyncedSeries";
import * as tauri from '@/lib/tauri';
interface WorldElementInputProps {
sectionLabel: string;
sectionType: string;
}
function getElementTypeNumber(sectionType: string): number {
const typeMap: { [key: string]: number } = {
'laws': 0,
'biomes': 1,
'issues': 2,
'customs': 3,
'kingdoms': 4,
'climate': 5,
'resources': 6,
'wildlife': 7,
'arts': 8,
'ethnicGroups': 9,
'socialClasses': 10,
'importantCharacters': 11,
};
return typeMap[sectionType] ?? 0;
}
export default function WorldElementComponent({sectionLabel, sectionType}: WorldElementInputProps) {
const t = useTranslations();
const {lang} = useContext<LangContextProps>(LangContext);
const {isCurrentlyOffline} = useContext<OfflineContextType>(OfflineContext);
const {addToQueue} = useContext<LocalSyncQueueContextProps>(LocalSyncQueueContext);
const {localSyncedBooks} = useContext<BooksSyncContextProps>(BooksSyncContext);
const {book} = useContext(BookContext);
const {worlds, setWorlds, selectedWorldIndex, isSeriesMode} = useContext(WorldContext);
const {errorMessage} = useContext(AlertContext);
const {session} = useContext(SessionContext);
const {seriesId, localSeries} = useContext<SeriesContextProps>(SeriesContext);
const {localSyncedSeries} = useContext<SeriesSyncContextProps>(SeriesSyncContext);
const [newElementName, setNewElementName] = useState<string>('');
async function handleRemoveElement(
section: keyof WorldProps,
index: number,
): Promise<void> {
try {
let response: boolean;
const elementId = (worlds[selectedWorldIndex][section] as WorldElement[])[index].id;
const deletedAt: number = System.timeStampInSeconds();
if (isSeriesMode) {
const deleteData = {elementId, deletedAt};
if (isCurrentlyOffline() || localSeries) {
response = await tauri.deleteSeriesWorldElement(elementId, deletedAt);
} else {
response = await System.authDeleteToServer<boolean>('series/world/element/delete', deleteData, session.accessToken, lang);
if (localSyncedSeries.find((s: SyncedSeries): boolean => s.id === seriesId)) {
addToQueue('delete_series_world_element', {data: deleteData});
}
}
} else if (isCurrentlyOffline() || book?.localBook) {
response = await tauri.removeWorldElement(elementId, book?.bookId || '', deletedAt);
} else {
response = await System.authDeleteToServer<boolean>('book/world/element/delete', {
elementId, bookId: book?.bookId, deletedAt,
}, session.accessToken, lang);
if (localSyncedBooks.find((syncedBook: SyncedBook): boolean => syncedBook.id === book?.bookId)) {
addToQueue('remove_world_element', {data: {
elementId: elementId, bookId: book?.bookId, deletedAt,
}});
}
}
if (!response) {
errorMessage(t("worldSetting.unknownError"))
}
const updatedWorlds: WorldProps[] = [...worlds];
(updatedWorlds[selectedWorldIndex][section] as WorldElement[]).splice(
index,
1,
);
setWorlds(updatedWorlds);
} catch (e: unknown) {
if (e instanceof Error) {
errorMessage(e.toString());
} else {
errorMessage(t("worldElementComponent.errorUnknown"));
}
}
}
async function handleAddElement(section: keyof WorldProps): Promise<void> {
if (newElementName.trim() === '') {
errorMessage(t("worldElementComponent.emptyField", {section: sectionLabel}));
return;
}
try {
let elementId: string;
if (isSeriesMode) {
const addData = {
worldId: worlds[selectedWorldIndex].id,
elementType: getElementTypeNumber(section as string),
name: newElementName,
};
if (isCurrentlyOffline() || localSeries) {
elementId = await tauri.addSeriesWorldElement(addData);
} else {
elementId = await System.authPostToServer<string>(
'series/world/element/add',
addData,
session.accessToken,
lang
);
if (localSyncedSeries.find((s: SyncedSeries): boolean => s.id === seriesId)) {
addToQueue('add_series_world_element', {data: addData});
}
}
if (!elementId) {
errorMessage(t("worldSetting.unknownError"))
return;
}
} else if (isCurrentlyOffline() || book?.localBook) {
elementId = await tauri.addWorldElement(worlds[selectedWorldIndex].id, newElementName, section as string);
} else {
elementId = await System.authPostToServer('book/world/element/add', {
elementType: section,
worldId: worlds[selectedWorldIndex].id,
elementName: newElementName,
}, session.accessToken, lang);
if (localSyncedBooks.find((syncedBook: SyncedBook): boolean => syncedBook.id === book?.bookId)) {
addToQueue('add_world_element', {data: {
elementType: section,
worldId: worlds[selectedWorldIndex].id,
elementId,
elementName: newElementName,
}});
}
}
if (!elementId) {
errorMessage(t("worldSetting.unknownError"))
return;
}
const updatedWorlds: WorldProps[] = [...worlds];
(updatedWorlds[selectedWorldIndex][section] as WorldElement[]).push({
id: elementId,
name: newElementName,
description: '',
});
setWorlds(updatedWorlds);
setNewElementName('');
} catch (e: unknown) {
if (e instanceof Error) {
errorMessage(e.message);
} else {
errorMessage(t("worldElementComponent.errorUnknown"));
}
}
}
function handleElementChange(
section: keyof WorldProps,
index: number,
field: keyof WorldElement,
value: string,
): void {
const updatedWorlds: WorldProps[] = [...worlds];
const sectionElements = updatedWorlds[selectedWorldIndex][
section
] as WorldElement[];
sectionElements[index] = {...sectionElements[index], [field]: value};
setWorlds(updatedWorlds);
}
return (
<div className="space-y-4">
{Array.isArray(worlds[selectedWorldIndex][sectionType as keyof WorldProps]) &&
(worlds[selectedWorldIndex][sectionType as keyof WorldProps] as WorldElement[]).map(
(element: WorldElement, index: number) => (
<div key={element.id}
className="bg-secondary/30 rounded-xl p-4 border-l-4 border-primary shadow-sm hover:shadow-md transition-all duration-200">
<div className="mb-2">
<InputField input={<TextInput
value={element.name}
setValue={(e: ChangeEvent<HTMLInputElement>) => handleElementChange(sectionType as keyof WorldProps, index, 'name', e.target.value)}
placeholder={t("worldElementComponent.namePlaceholder", {section: sectionLabel.toLowerCase()})}
/>}
removeButtonCallBack={(): Promise<void> => handleRemoveElement(sectionType as keyof WorldProps, index)}/>
</div>
<TexteAreaInput
value={element.description}
setValue={(e) => handleElementChange(sectionType as keyof WorldProps, index, 'description', e.target.value)}
placeholder={t("worldElementComponent.descriptionPlaceholder", {section: sectionLabel.toLowerCase()})}
/>
</div>
)
)
}
<InputField input={<TextInput
value={newElementName}
setValue={(e: ChangeEvent<HTMLInputElement>): void => setNewElementName(e.target.value)}
placeholder={t("worldElementComponent.newPlaceholder", {section: sectionLabel.toLowerCase()})}
/>} addButtonCallBack={(): Promise<void> => handleAddElement(sectionType as keyof WorldProps)}/>
</div>
);
}
'use client';
import React, {ChangeEvent, useContext, useState} from "react";
import {WorldContext, WorldContextProps} from "@/context/WorldContext";
import TextInput from "@/components/form/TextInput";
import TextAreaInput from "@/components/form/TextAreaInput";
import {WorldElement, WorldElementSection, WorldProps} from "@/lib/types/world";
import {AlertContext, AlertContextProps} from "@/context/AlertContext";
import {SessionContext, SessionContextProps} from "@/context/SessionContext";
import {apiDelete, apiPost} from "@/lib/api/client";
import {isDesktop} from '@/lib/configs';
import * as tauri from '@/lib/tauri';
import OfflineContext, {OfflineContextType} from '@/context/OfflineContext';
import {BookContext, BookContextProps} from '@/context/BookContext';
import InputField from "@/components/form/InputField";
import {useTranslations} from '@/lib/i18n';
import {LangContext, LangContextProps} from "@/context/LangContext";
interface WorldElementInputProps {
sectionLabel: string;
sectionType: WorldElementSection;
}
function getElementTypeNumber(sectionType: WorldElementSection): number {
const typeMap: Record<WorldElementSection, number> = {
'laws': 0,
'biomes': 1,
'issues': 2,
'customs': 3,
'kingdoms': 4,
'climate': 5,
'resources': 6,
'wildlife': 7,
'arts': 8,
'ethnicGroups': 9,
'socialClasses': 10,
'importantCharacters': 11,
};
return typeMap[sectionType] ?? 0;
}
export default function WorldElementComponent({sectionLabel, sectionType}: WorldElementInputProps): React.JSX.Element {
const t = useTranslations();
const {lang}: LangContextProps = useContext<LangContextProps>(LangContext);
const {
worlds,
setWorlds,
selectedWorldIndex,
isSeriesMode
}: WorldContextProps = useContext<WorldContextProps>(WorldContext);
const {errorMessage}: AlertContextProps = useContext<AlertContextProps>(AlertContext);
const {session}: SessionContextProps = useContext<SessionContextProps>(SessionContext);
const {book}: BookContextProps = useContext<BookContextProps>(BookContext);
const {isCurrentlyOffline}: OfflineContextType = useContext<OfflineContextType>(OfflineContext);
const [newElementName, setNewElementName] = useState<string>('');
async function handleRemoveElement(
section: WorldElementSection,
index: number,
): Promise<void> {
try {
const elements: WorldElement[] = worlds[selectedWorldIndex][section];
let response: boolean;
if (!isSeriesMode && isDesktop && (isCurrentlyOffline() || book?.localBook)) {
response = await tauri.removeWorldElement(elements[index].id, book?.bookId ?? '', Date.now());
} else {
const endpoint: string = isSeriesMode ? 'series/world/element/delete' : 'book/world/element/delete';
response = await apiDelete<boolean>(endpoint, {
elementId: elements[index].id,
}, session.accessToken, lang);
}
if (!response) {
errorMessage(t("worldSetting.unknownError"))
}
const updatedWorlds: WorldProps[] = [...worlds];
updatedWorlds[selectedWorldIndex][section].splice(index, 1);
setWorlds(updatedWorlds);
} catch (e: unknown) {
if (e instanceof Error) {
errorMessage(e.message);
} else {
errorMessage(t("worldElementComponent.errorUnknown"));
}
}
}
async function handleAddElement(section: WorldElementSection): Promise<void> {
if (newElementName.trim() === '') {
errorMessage(t("worldElementComponent.emptyField", {section: sectionLabel}));
return;
}
try {
let elementId: string;
if (isSeriesMode) {
elementId = await apiPost<string>(
'series/world/element/add',
{
worldId: worlds[selectedWorldIndex].id,
elementType: getElementTypeNumber(section),
name: newElementName,
},
session.accessToken,
lang
);
if (!elementId) {
errorMessage(t("worldSetting.unknownError"))
return;
}
} else if (isDesktop && (isCurrentlyOffline() || book?.localBook)) {
elementId = await tauri.addWorldElement(worlds[selectedWorldIndex].id, newElementName, section);
if (!elementId) {
errorMessage(t("worldSetting.unknownError"))
return;
}
} else {
elementId = await apiPost<string>('book/world/element/add', {
elementType: section,
worldId: worlds[selectedWorldIndex].id,
elementName: newElementName,
}, session.accessToken, lang);
if (!elementId) {
errorMessage(t("worldSetting.unknownError"))
return;
}
}
const updatedWorlds: WorldProps[] = [...worlds];
updatedWorlds[selectedWorldIndex][section].push({
id: elementId,
name: newElementName,
description: '',
});
setWorlds(updatedWorlds);
setNewElementName('');
} catch (e: unknown) {
if (e instanceof Error) {
errorMessage(e.message);
} else {
errorMessage(t("worldElementComponent.errorUnknown"));
}
}
}
function handleElementChange(
section: WorldElementSection,
index: number,
field: keyof WorldElement,
value: string,
): void {
const updatedWorlds: WorldProps[] = [...worlds];
const sectionElements: WorldElement[] = updatedWorlds[selectedWorldIndex][section];
sectionElements[index] = {...sectionElements[index], [field]: value};
setWorlds(updatedWorlds);
}
return (
<div className="space-y-4">
{worlds[selectedWorldIndex][sectionType].map(
(element: WorldElement, index: number): React.JSX.Element => (
<div key={element.id}
className="bg-secondary rounded-xl p-4 border-l-4 border-primary transition-colors duration-200">
<div className="mb-2">
<InputField input={<TextInput
value={element.name}
setValue={(e: ChangeEvent<HTMLInputElement>): void => handleElementChange(sectionType, index, 'name', e.target.value)}
placeholder={t("worldElementComponent.namePlaceholder", {section: sectionLabel.toLowerCase()})}
/>}
removeButtonCallBack={(): Promise<void> => handleRemoveElement(sectionType, index)}/>
</div>
<TextAreaInput
value={element.description}
setValue={(e: ChangeEvent<HTMLTextAreaElement>): void => handleElementChange(sectionType, index, 'description', e.target.value)}
placeholder={t("worldElementComponent.descriptionPlaceholder", {section: sectionLabel.toLowerCase()})}
/>
</div>
)
)}
<InputField input={<TextInput
value={newElementName}
setValue={(e: ChangeEvent<HTMLInputElement>): void => setNewElementName(e.target.value)}
placeholder={t("worldElementComponent.newPlaceholder", {section: sectionLabel.toLowerCase()})}
/>} addButtonCallBack={(): Promise<void> => handleAddElement(sectionType)}/>
</div>
);
}

346
components/book/settings/world/WorldSetting.tsx
View File

@@ -1,36 +1,29 @@
'use client'
import React, {ChangeEvent, forwardRef, useContext, useEffect, useImperativeHandle, useState} from 'react';
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
import {faPlus, faShare, faToggleOn, IconDefinition} from "@fortawesome/free-solid-svg-icons";
import {LucideIcon, Plus, Share2, ToggleRight} from 'lucide-react';
import {WorldContext} from '@/context/WorldContext';
import {BookContext} from "@/context/BookContext";
import {AlertContext} from "@/context/AlertContext";
import {SelectBoxProps} from "@/shared/interface";
import System from "@/lib/models/System";
import {elementSections, WorldListResponse, WorldProps} from "@/lib/models/World";
import {SessionContext} from "@/context/SessionContext";
import {BookContext, BookContextProps} from "@/context/BookContext";
import {AlertContext, AlertContextProps} from "@/context/AlertContext";
import SelectBox, {SelectBoxProps} from "@/components/form/SelectBox";
import {apiGet, apiPatch, apiPost} from "@/lib/api/client";
import {isDesktop} from '@/lib/configs';
import * as tauri from '@/lib/tauri';
import OfflineContext, {OfflineContextType} from '@/context/OfflineContext';
import {ElementSection, WorldListResponse, WorldProps, WorldTextField} from "@/lib/types/world";
import {SettingRef} from "@/lib/types/settings";
import {elementSections} from "@/lib/constants/world";
import {SessionContext, SessionContextProps} from "@/context/SessionContext";
import InputField from "@/components/form/InputField";
import TextInput from '@/components/form/TextInput';
import TexteAreaInput from "@/components/form/TexteAreaInput";
import TextAreaInput from "@/components/form/TextAreaInput";
import WorldElementComponent from './WorldElement';
import SelectBox from "@/components/form/SelectBox";
import {useTranslations} from "next-intl";
import {useTranslations} from '@/lib/i18n';
import {LangContext, LangContextProps} from "@/context/LangContext";
import OfflineContext, {OfflineContextType} from "@/context/OfflineContext";
import {LocalSyncQueueContext, LocalSyncQueueContextProps} from "@/context/SyncQueueContext";
import {BooksSyncContext, BooksSyncContextProps} from "@/context/BooksSyncContext";
import {SyncedBook} from "@/lib/models/SyncedBook";
import ToggleSwitch from "@/components/form/ToggleSwitch";
import {SeriesWorldProps, SeriesWorldListItem} from "@/lib/models/Series";
import {SeriesWorldListItem, SeriesWorldProps} from "@/lib/types/series";
import SeriesImportSelector from "@/components/form/SeriesImportSelector";
import SyncFieldWrapper from "@/components/form/SyncFieldWrapper";
import * as tauri from '@/lib/tauri';
export interface ElementSection {
title: string;
section: keyof WorldProps;
icon: IconDefinition;
}
import Button from "@/components/ui/Button";
interface WorldSettingProps {
showToggle?: boolean;
@@ -38,16 +31,14 @@ interface WorldSettingProps {
entityId?: string;
}
export function WorldSetting(props: WorldSettingProps, ref: React.Ref<{ handleSave: () => Promise<void> }>) {
export function WorldSetting(props: WorldSettingProps, ref: React.ForwardedRef<SettingRef>): React.JSX.Element {
const {showToggle = true, entityType = 'book', entityId} = props;
const t = useTranslations();
const {lang} = useContext<LangContextProps>(LangContext);
const {isCurrentlyOffline} = useContext<OfflineContextType>(OfflineContext);
const {addToQueue} = useContext<LocalSyncQueueContextProps>(LocalSyncQueueContext);
const {localSyncedBooks} = useContext<BooksSyncContextProps>(BooksSyncContext);
const {errorMessage, successMessage} = useContext(AlertContext);
const {session} = useContext(SessionContext);
const {book, setBook} = useContext(BookContext);
const {lang}: LangContextProps = useContext<LangContextProps>(LangContext);
const {errorMessage, successMessage}: AlertContextProps = useContext<AlertContextProps>(AlertContext);
const {session}: SessionContextProps = useContext<SessionContextProps>(SessionContext);
const {book, setBook}: BookContextProps = useContext<BookContextProps>(BookContext);
const {isCurrentlyOffline}: OfflineContextType = useContext<OfflineContextType>(OfflineContext);
const currentEntityId: string = entityId || book?.bookId || '';
const isSeriesMode: boolean = entityType === 'series';
@@ -60,29 +51,27 @@ export function WorldSetting(props: WorldSettingProps, ref: React.Ref<{ handleSa
const [showAddNewWorld, setShowAddNewWorld] = useState<boolean>(false);
const [toolEnabled, setToolEnabled] = useState<boolean>(isSeriesMode ? true : (book?.tools?.worlds ?? false));
const bookSeriesId: string | null = book?.seriesId || null;
useImperativeHandle(ref, function () {
return {
handleSave: handleUpdateWorld,
};
});
useImperativeHandle(ref, (): SettingRef => ({
handleSave: handleUpdateWorld,
}));
useEffect((): void => {
if (currentEntityId) {
getWorlds().then();
}
}, [currentEntityId]);
useEffect((): void => {
if (bookSeriesId && !isSeriesMode && !isCurrentlyOffline()) {
if (bookSeriesId && !isSeriesMode) {
getSeriesWorlds().then();
}
}, [bookSeriesId]);
async function getSeriesWorlds(): Promise<void> {
if (!bookSeriesId || isCurrentlyOffline()) return;
if (!bookSeriesId) return;
try {
const response: SeriesWorldProps[] = await System.authGetQueryToServer<SeriesWorldProps[]>('series/world/list', session.accessToken, lang, {
const response: SeriesWorldProps[] = await apiGet<SeriesWorldProps[]>('series/world/list', session.accessToken, lang, {
seriesid: bookSeriesId
});
if (response) {
@@ -90,7 +79,7 @@ export function WorldSetting(props: WorldSettingProps, ref: React.Ref<{ handleSa
}
} catch (e: unknown) {
if (e instanceof Error) {
console.error('Error loading series worlds:', e.message);
errorMessage(e.message);
}
}
}
@@ -99,21 +88,14 @@ export function WorldSetting(props: WorldSettingProps, ref: React.Ref<{ handleSa
if (isSeriesMode) return;
try {
let response: boolean;
if (isCurrentlyOffline() || book?.localBook) {
if (isDesktop && (isCurrentlyOffline() || book?.localBook)) {
response = await tauri.updateBookToolSetting(currentEntityId, 'worlds', enabled);
} else {
response = await System.authPatchToServer<boolean>('book/tool-setting', {
response = await apiPatch<boolean>('book/tool-setting', {
bookId: currentEntityId,
toolName: 'worlds',
enabled: enabled
}, session.accessToken, lang);
if (localSyncedBooks.find((syncedBook: SyncedBook): boolean => syncedBook.id === currentEntityId)) {
addToQueue('update_book_tool_setting', {data: {
bookId: currentEntityId,
toolName: 'worlds',
enabled: enabled
}});
}
}
if (response && setBook && book) {
setToolEnabled(enabled);
@@ -132,12 +114,11 @@ export function WorldSetting(props: WorldSettingProps, ref: React.Ref<{ handleSa
}
}
}
async function getWorlds(): Promise<void> {
try {
if (isSeriesMode) {
// Series mode: server only (series are not local)
const response: SeriesWorldProps[] = await System.authGetQueryToServer<SeriesWorldProps[]>('series/world/list', session.accessToken, lang, {
const response: SeriesWorldProps[] = await apiGet<SeriesWorldProps[]>('series/world/list', session.accessToken, lang, {
seriesid: currentEntityId
});
if (response) {
@@ -169,16 +150,31 @@ export function WorldSetting(props: WorldSettingProps, ref: React.Ref<{ handleSa
}));
setWorldsSelector(formattedWorlds);
}
} else {
// Book mode: dual offline/online logic
let response: WorldListResponse;
if (isCurrentlyOffline() || book?.localBook) {
response = await tauri.getWorlds(currentEntityId, true);
} else {
response = await System.authGetQueryToServer<WorldListResponse>('book/worlds', session.accessToken, lang, {
bookid: currentEntityId,
});
} else if (isDesktop && (isCurrentlyOffline() || book?.localBook)) {
const response: WorldListResponse = await tauri.getWorlds(currentEntityId, toolEnabled) as WorldListResponse;
if (response) {
setWorlds(response.worlds);
setToolEnabled(response.enabled);
if (setBook && book) {
setBook({
...book, tools: {
characters: book.tools?.characters ?? false,
worlds: response.enabled,
locations: book.tools?.locations ?? false,
spells: book.tools?.spells ?? false
}
});
}
const formattedWorlds: SelectBoxProps[] = response.worlds.map(
(world: WorldProps): SelectBoxProps => ({
label: world.name,
value: world.id.toString(),
}),
);
setWorldsSelector(formattedWorlds);
}
} else {
const response: WorldListResponse = await apiGet<WorldListResponse>('book/worlds', session.accessToken, lang, {bookid: currentEntityId});
if (response) {
setWorlds(response.worlds);
setToolEnabled(response.enabled);
@@ -209,7 +205,7 @@ export function WorldSetting(props: WorldSettingProps, ref: React.Ref<{ handleSa
}
}
}
async function handleAddNewWorld(): Promise<void> {
if (newWorldName.trim() === '') {
errorMessage(t("worldSetting.newWorldNameError"));
@@ -218,8 +214,7 @@ export function WorldSetting(props: WorldSettingProps, ref: React.Ref<{ handleSa
try {
let newWorldId: string;
if (isSeriesMode) {
// Series mode: server only
newWorldId = await System.authPostToServer<string>(
newWorldId = await apiPost<string>(
'series/world/add',
{
seriesId: currentEntityId,
@@ -232,30 +227,22 @@ export function WorldSetting(props: WorldSettingProps, ref: React.Ref<{ handleSa
errorMessage(t("worldSetting.addWorldError"));
return;
}
} else if (isCurrentlyOffline() || book?.localBook) {
// Book mode: offline/local
} else if (isDesktop && (isCurrentlyOffline() || book?.localBook)) {
newWorldId = await tauri.addWorld(currentEntityId, newWorldName);
if (!newWorldId) {
errorMessage(t("worldSetting.addWorldError"));
return;
}
} else {
// Book mode: online
newWorldId = await System.authPostToServer<string>('book/world/add', {
const worldId: string = await apiPost<string>('book/world/add', {
worldName: newWorldName,
bookId: currentEntityId,
}, session.accessToken, lang);
if (!newWorldId) {
if (!worldId) {
errorMessage(t("worldSetting.addWorldError"));
return;
}
if (localSyncedBooks.find((syncedBook: SyncedBook): boolean => syncedBook.id === currentEntityId)) {
addToQueue('add_world', {data: {
worldName: newWorldName,
worldId: newWorldId,
bookId: currentEntityId,
}});
}
newWorldId = worldId;
}
const newWorld: WorldProps = {
id: newWorldId,
@@ -298,11 +285,8 @@ export function WorldSetting(props: WorldSettingProps, ref: React.Ref<{ handleSa
if (worlds.length === 0) return;
try {
const currentWorld: WorldProps = worlds[selectedWorldIndex];
let response: boolean;
if (isSeriesMode) {
// Series mode: server only
response = await System.authPatchToServer<boolean>('series/world/update', {
const response: boolean = await apiPatch<boolean>('series/world/update', {
worldId: currentWorld.id,
name: currentWorld.name,
history: currentWorld.history,
@@ -311,27 +295,26 @@ export function WorldSetting(props: WorldSettingProps, ref: React.Ref<{ handleSa
religion: currentWorld.religion,
languages: currentWorld.languages,
}, session.accessToken, lang);
} else if (isCurrentlyOffline() || book?.localBook) {
// Book mode: offline/local
response = await tauri.updateWorld(currentWorld);
if (!response) {
errorMessage(t("worldSetting.updateWorldError"));
return;
}
} else if (isDesktop && (isCurrentlyOffline() || book?.localBook)) {
const response: boolean = await tauri.updateWorld(currentWorld);
if (!response) {
errorMessage(t("worldSetting.updateWorldError"));
return;
}
} else {
// Book mode: online
response = await System.authPatchToServer<boolean>('book/world/update', {
const response: boolean = await apiPatch<boolean>('book/world/update', {
world: currentWorld,
bookId: currentEntityId,
}, session.accessToken, lang);
if (localSyncedBooks.find((syncedBook: SyncedBook): boolean => syncedBook.id === currentEntityId)) {
addToQueue('update_world', {data: {
world: currentWorld,
bookId: currentEntityId,
}});
if (!response) {
errorMessage(t("worldSetting.updateWorldError"));
return;
}
}
if (!response) {
errorMessage(t("worldSetting.updateWorldError"));
return;
}
successMessage(t("worldSetting.updateWorldSuccess"));
} catch (e: unknown) {
if (e instanceof Error) {
@@ -341,27 +324,26 @@ export function WorldSetting(props: WorldSettingProps, ref: React.Ref<{ handleSa
}
}
}
function handleWorldSelect(worldId: string): void {
const index: number = worlds.findIndex((world: WorldProps): boolean => world.id === worldId);
if (index !== -1) {
setSelectedWorldIndex(index);
}
}
function handleInputChange(value: string, field: keyof WorldProps) {
const updatedWorlds = [...worlds] as WorldProps[];
(updatedWorlds[selectedWorldIndex][field] as string) = value;
function handleInputChange(value: string, field: WorldTextField): void {
const updatedWorlds: WorldProps[] = [...worlds];
updatedWorlds[selectedWorldIndex][field] = value;
setWorlds(updatedWorlds);
}
async function handleExportToSeries(): Promise<void> {
if (isCurrentlyOffline()) return;
const selectedWorld: WorldProps | undefined = worlds[selectedWorldIndex];
if (!selectedWorld || !bookSeriesId) return;
try {
const seriesWorldId: string = await System.authPostToServer<string>('series/world/add', {
const seriesWorldId: string = await apiPost<string>('series/world/add', {
seriesId: bookSeriesId,
world: {
name: selectedWorld.name,
@@ -372,15 +354,15 @@ export function WorldSetting(props: WorldSettingProps, ref: React.Ref<{ handleSa
languages: selectedWorld.languages || null,
}
}, session.accessToken, lang);
if (seriesWorldId) {
const updateResponse: boolean = await System.authPostToServer<boolean>('book/world/update', {
const updateResponse: boolean = await apiPost<boolean>('book/world/update', {
world: {
...selectedWorld,
seriesWorldId: seriesWorldId
},
}, session.accessToken, lang);
if (updateResponse) {
const updatedWorlds: WorldProps[] = [...worlds];
updatedWorlds[selectedWorldIndex] = {...selectedWorld, seriesWorldId: seriesWorldId};
@@ -395,33 +377,23 @@ export function WorldSetting(props: WorldSettingProps, ref: React.Ref<{ handleSa
}
}
}
async function handleImportFromSeries(seriesWorldId: string): Promise<void> {
if (isCurrentlyOffline()) return;
const seriesWorld: SeriesWorldListItem | undefined = seriesWorlds.find((w) => w.id === seriesWorldId);
const seriesWorld: SeriesWorldListItem | undefined = seriesWorlds.find((w: SeriesWorldListItem): boolean => w.id === seriesWorldId);
if (!seriesWorld) return;
try {
const worldId: string = await System.authPostToServer<string>('book/world/add', {
const worldId: string = await apiPost<string>('book/world/add', {
worldName: seriesWorld.name,
bookId: currentEntityId,
seriesWorldId: seriesWorldId,
}, session.accessToken, lang);
if (!worldId) {
errorMessage(t("worldSetting.importError"));
return;
}
// Sync to local if book is synced
if (localSyncedBooks.find((syncedBook: SyncedBook): boolean => syncedBook.id === currentEntityId)) {
addToQueue('add_world', {data: {
worldName: seriesWorld.name,
worldId: worldId,
bookId: currentEntityId,
}});
}
const newWorld: WorldProps = {
id: worldId,
name: seriesWorld.name,
@@ -455,19 +427,19 @@ export function WorldSetting(props: WorldSettingProps, ref: React.Ref<{ handleSa
}
}
}
function getSeriesWorldForCurrentWorld(): SeriesWorldProps | null {
const currentWorld: WorldProps = worlds[selectedWorldIndex];
if (!currentWorld?.seriesWorldId) return null;
return seriesWorlds.find((world: SeriesWorldListItem): boolean => world.id === currentWorld.seriesWorldId) || null;
}
return (
<div className="space-y-6">
{showToggle && !isSeriesMode && (
<div className="bg-secondary/20 rounded-xl p-5 shadow-inner border border-secondary/30">
<div className="bg-secondary rounded-xl p-4">
<InputField
icon={faToggleOn}
icon={ToggleRight}
fieldName={t('worldSetting.enableTool')}
input={
<ToggleSwitch
@@ -483,25 +455,26 @@ export function WorldSetting(props: WorldSettingProps, ref: React.Ref<{ handleSa
)}
{(toolEnabled || isSeriesMode) && (
<>
{!isSeriesMode && bookSeriesId && !isCurrentlyOffline() &&
{!isSeriesMode && bookSeriesId &&
seriesWorlds.filter((seriesWorld: SeriesWorldProps): boolean => !worlds.some((world: WorldProps): boolean => world.seriesWorldId === seriesWorld.id)).length > 0 && (
<SeriesImportSelector
availableItems={seriesWorlds
.filter((seriesWorld: SeriesWorldProps): boolean => !worlds.some((world: WorldProps): boolean => world.seriesWorldId === seriesWorld.id))
.map((seriesWorld: SeriesWorldProps) => ({id: seriesWorld.id, name: seriesWorld.name}))}
.map((seriesWorld: SeriesWorldProps): { id: string; name: string } => ({
id: seriesWorld.id,
name: seriesWorld.name
}))}
onImport={handleImportFromSeries}
placeholder={t("seriesImport.selectElement")}
label={t("seriesImport.importFromSeries")}
/>
)}
<div
className="bg-tertiary/90 backdrop-blur-sm rounded-xl p-5 border border-secondary/50 shadow-lg">
<div className="grid grid-cols-1 gap-4 mb-4">
<InputField
fieldName={t("worldSetting.selectWorld")}
input={
<SelectBox
onChangeCallBack={(e) => handleWorldSelect(e.target.value)}
onChangeCallBack={(e: ChangeEvent<HTMLSelectElement>): void => handleWorldSelect(e.target.value)}
data={worldsSelector.length > 0 ? worldsSelector : [{
label: t("worldSetting.noWorldAvailable"),
value: '0'
@@ -510,9 +483,9 @@ export function WorldSetting(props: WorldSettingProps, ref: React.Ref<{ handleSa
placeholder={t("worldSetting.selectWorldPlaceholder")}
/>
}
actionIcon={faPlus}
actionIcon={Plus}
actionLabel={t("worldSetting.addWorldLabel")}
action={async () => setShowAddNewWorld(!showAddNewWorld)}
action={async (): Promise<void> => setShowAddNewWorld(!showAddNewWorld)}
/>
{showAddNewWorld && (
@@ -520,31 +493,25 @@ export function WorldSetting(props: WorldSettingProps, ref: React.Ref<{ handleSa
input={
<TextInput
value={newWorldName}
setValue={(e: ChangeEvent<HTMLInputElement>) => setNewWorldName(e.target.value)}
setValue={(e: ChangeEvent<HTMLInputElement>): void => setNewWorldName(e.target.value)}
placeholder={t("worldSetting.newWorldPlaceholder")}
/>
}
actionIcon={faPlus}
actionIcon={Plus}
actionLabel={t("worldSetting.createWorldLabel")}
addButtonCallBack={handleAddNewWorld}
/>
)}
{!isSeriesMode && bookSeriesId && !isCurrentlyOffline() && worlds[selectedWorldIndex] && !worlds[selectedWorldIndex].seriesWorldId && (
<button
onClick={handleExportToSeries}
className="flex items-center gap-2 px-4 py-2 bg-blue-500/90 hover:bg-blue-500 rounded-xl border border-blue-600 shadow-md hover:shadow-lg transition-all duration-200"
>
<FontAwesomeIcon icon={faShare} className="w-4 h-4 text-text-primary"/>
<span className="text-text-primary font-medium">{t("worldSetting.exportToSeries")}</span>
</button>
{!isSeriesMode && bookSeriesId && worlds[selectedWorldIndex] && !worlds[selectedWorldIndex].seriesWorldId && (
<Button variant="secondary" size="sm" icon={Share2} onClick={handleExportToSeries}>
{t("worldSetting.exportToSeries")}
</Button>
)}
</div>
</div>
{worlds.length > 0 && worlds[selectedWorldIndex] ? (
<WorldContext.Provider value={{worlds, setWorlds, selectedWorldIndex, isSeriesMode}}>
<div
className="bg-tertiary/90 backdrop-blur-sm rounded-xl p-5 border border-secondary/50 shadow-lg">
<div className="space-y-6">
<div className="mb-4">
<InputField
fieldName={t("worldSetting.worldName")}
@@ -556,8 +523,8 @@ export function WorldSetting(props: WorldSettingProps, ref: React.Ref<{ handleSa
bookElementId={worlds[selectedWorldIndex].id}
field="name"
elementType="world"
onDownload={() => {
const seriesWorld = getSeriesWorldForCurrentWorld();
onDownload={(): void => {
const seriesWorld: SeriesWorldProps | null = getSeriesWorldForCurrentWorld();
if (seriesWorld) {
const updatedWorlds: WorldProps[] = [...worlds];
updatedWorlds[selectedWorldIndex].name = seriesWorld.name;
@@ -568,7 +535,7 @@ export function WorldSetting(props: WorldSettingProps, ref: React.Ref<{ handleSa
>
<TextInput
value={worlds[selectedWorldIndex].name}
setValue={(e: ChangeEvent<HTMLInputElement>) => {
setValue={(e: ChangeEvent<HTMLInputElement>): void => {
const updatedWorlds: WorldProps[] = [...worlds];
updatedWorlds[selectedWorldIndex].name = e.target.value
setWorlds(updatedWorlds);
@@ -589,24 +556,21 @@ export function WorldSetting(props: WorldSettingProps, ref: React.Ref<{ handleSa
bookElementId={worlds[selectedWorldIndex].id}
field="history"
elementType="world"
onDownload={() => {
const seriesWorld = getSeriesWorldForCurrentWorld();
onDownload={(): void => {
const seriesWorld: SeriesWorldProps | null = getSeriesWorldForCurrentWorld();
if (seriesWorld) handleInputChange(seriesWorld.history || '', 'history');
}}
onSyncComplete={getSeriesWorlds}
>
<TexteAreaInput
<TextAreaInput
value={worlds[selectedWorldIndex].history || ''}
setValue={(e) => handleInputChange(e.target.value, 'history')}
setValue={(e: ChangeEvent<HTMLTextAreaElement>): void => handleInputChange(e.target.value, 'history')}
placeholder={t("worldSetting.worldHistoryPlaceholder")}
/>
</SyncFieldWrapper>
}
/>
</div>
<div
className="bg-tertiary/90 backdrop-blur-sm rounded-xl shadow-lg p-4 border border-secondary/50">
<div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
<InputField
fieldName={t("worldSetting.politics")}
@@ -618,15 +582,15 @@ export function WorldSetting(props: WorldSettingProps, ref: React.Ref<{ handleSa
bookElementId={worlds[selectedWorldIndex].id}
field="politics"
elementType="world"
onDownload={() => {
const seriesWorld = getSeriesWorldForCurrentWorld();
onDownload={(): void => {
const seriesWorld: SeriesWorldProps | null = getSeriesWorldForCurrentWorld();
if (seriesWorld) handleInputChange(seriesWorld.politics || '', 'politics');
}}
onSyncComplete={getSeriesWorlds}
>
<TexteAreaInput
<TextAreaInput
value={worlds[selectedWorldIndex].politics || ''}
setValue={(e) => handleInputChange(e.target.value, 'politics')}
setValue={(e: ChangeEvent<HTMLTextAreaElement>): void => handleInputChange(e.target.value, 'politics')}
placeholder={t("worldSetting.politicsPlaceholder")}
/>
</SyncFieldWrapper>
@@ -642,25 +606,22 @@ export function WorldSetting(props: WorldSettingProps, ref: React.Ref<{ handleSa
bookElementId={worlds[selectedWorldIndex].id}
field="economy"
elementType="world"
onDownload={() => {
const seriesWorld = getSeriesWorldForCurrentWorld();
onDownload={(): void => {
const seriesWorld: SeriesWorldProps | null = getSeriesWorldForCurrentWorld();
if (seriesWorld) handleInputChange(seriesWorld.economy || '', 'economy');
}}
onSyncComplete={getSeriesWorlds}
>
<TexteAreaInput
<TextAreaInput
value={worlds[selectedWorldIndex].economy || ''}
setValue={(e) => handleInputChange(e.target.value, 'economy')}
setValue={(e: ChangeEvent<HTMLTextAreaElement>): void => handleInputChange(e.target.value, 'economy')}
placeholder={t("worldSetting.economyPlaceholder")}
/>
</SyncFieldWrapper>
}
/>
</div>
</div>
<div
className="bg-tertiary/90 backdrop-blur-sm rounded-xl shadow-lg p-4 border border-secondary/50">
<div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
<InputField
fieldName={t("worldSetting.religion")}
@@ -672,15 +633,15 @@ export function WorldSetting(props: WorldSettingProps, ref: React.Ref<{ handleSa
bookElementId={worlds[selectedWorldIndex].id}
field="religion"
elementType="world"
onDownload={() => {
const seriesWorld = getSeriesWorldForCurrentWorld();
onDownload={(): void => {
const seriesWorld: SeriesWorldProps | null = getSeriesWorldForCurrentWorld();
if (seriesWorld) handleInputChange(seriesWorld.religion || '', 'religion');
}}
onSyncComplete={getSeriesWorlds}
>
<TexteAreaInput
<TextAreaInput
value={worlds[selectedWorldIndex].religion || ''}
setValue={(e) => handleInputChange(e.target.value, 'religion')}
setValue={(e: ChangeEvent<HTMLTextAreaElement>): void => handleInputChange(e.target.value, 'religion')}
placeholder={t("worldSetting.religionPlaceholder")}
/>
</SyncFieldWrapper>
@@ -696,31 +657,31 @@ export function WorldSetting(props: WorldSettingProps, ref: React.Ref<{ handleSa
bookElementId={worlds[selectedWorldIndex].id}
field="languages"
elementType="world"
onDownload={() => {
const seriesWorld = getSeriesWorldForCurrentWorld();
onDownload={(): void => {
const seriesWorld: SeriesWorldProps | null = getSeriesWorldForCurrentWorld();
if (seriesWorld) handleInputChange(seriesWorld.languages || '', 'languages');
}}
onSyncComplete={getSeriesWorlds}
>
<TexteAreaInput
<TextAreaInput
value={worlds[selectedWorldIndex].languages || ''}
setValue={(e) => handleInputChange(e.target.value, 'languages')}
setValue={(e: ChangeEvent<HTMLTextAreaElement>): void => handleInputChange(e.target.value, 'languages')}
placeholder={t("worldSetting.languagesPlaceholder")}
/>
</SyncFieldWrapper>
}
/>
</div>
</div>
{elementSections.map((section, index) => (
<div key={index}
className="bg-tertiary/90 backdrop-blur-sm rounded-xl shadow-lg p-4 border border-secondary/50">
{elementSections.map((section: ElementSection, index: number): React.JSX.Element => {
const SectionIcon: LucideIcon = section.icon;
return (
<div key={index}>
<h3 className="text-lg font-semibold text-text-primary mb-4 flex items-center">
<FontAwesomeIcon icon={section.icon} className="mr-2 w-5 h-5"/>
<SectionIcon className="mr-2 w-5 h-5" strokeWidth={1.75}/>
{section.title}
<span
className="ml-2 text-sm bg-dark-background text-text-secondary py-0.5 px-2 rounded-full">
className="ml-2 text-sm bg-secondary text-text-secondary py-0.5 px-2 rounded-full">
{worlds[selectedWorldIndex][section.section]?.length || 0}
</span>
</h3>
@@ -728,13 +689,14 @@ export function WorldSetting(props: WorldSettingProps, ref: React.Ref<{ handleSa
sectionLabel={section.title}
sectionType={section.section}
/>
</div>
))}
</div>
);
})}
</div>
</WorldContext.Provider>
) : (
<div
className="bg-tertiary/90 backdrop-blur-sm rounded-xl shadow-lg p-8 border border-secondary/50 text-center">
<p className="text-text-secondary mb-4">{t("worldSetting.noWorldAvailable")}</p>
<div className="text-center py-8">
<p className="text-text-secondary">{t("worldSetting.noWorldAvailable")}</p>
</div>
)}
</>
@@ -743,4 +705,4 @@ export function WorldSetting(props: WorldSettingProps, ref: React.Ref<{ handleSa
);
}
export default forwardRef(WorldSetting);
export default forwardRef<SettingRef, WorldSettingProps>(WorldSetting);

155
components/book/settings/world/editor/WorldEditor.tsx
View File

@@ -1,17 +1,16 @@
'use client';
import React, {useCallback, useContext, useMemo, useState} from 'react';
import {useWorlds, UseWorldsConfig} from '@/hooks/settings/useWorlds';
import {useTranslations} from 'next-intl';
import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
import {faPlus, faSpinner, faToggleOn} from '@fortawesome/free-solid-svg-icons';
import {BookContext} from '@/context/BookContext';
import {WorldProps} from '@/lib/models/World';
import {SeriesWorldProps} from '@/lib/models/Series';
import {useTranslations} from '@/lib/i18n';
import {Plus} from 'lucide-react';
import PulseLoader from '@/components/ui/PulseLoader';
import {BookContext, BookContextProps} from '@/context/BookContext';
import {WorldProps, WorldTextField} from '@/lib/types/world';
import {SeriesWorldProps} from '@/lib/types/series';
import ToolDetailHeader from '@/components/book/settings/ToolDetailHeader';
import AlertBox from '@/components/AlertBox';
import AlertBox from '@/components/ui/AlertBox';
import InputField from '@/components/form/InputField';
import TextInput from '@/components/form/TextInput';
import ToggleSwitch from '@/components/form/ToggleSwitch';
import SeriesImportSelector from '@/components/form/SeriesImportSelector';
import WorldEditorList from './WorldEditorList';
@@ -25,17 +24,17 @@ import WorldEditorEdit from './WorldEditorEdit';
*/
export default function WorldEditor(): React.JSX.Element {
const t = useTranslations();
const {book} = useContext(BookContext);
const {book}: BookContextProps = useContext<BookContextProps>(BookContext);
const [showDeleteConfirm, setShowDeleteConfirm] = useState<boolean>(false);
const [showAddForm, setShowAddForm] = useState<boolean>(false);
const config: UseWorldsConfig = useMemo(function (): UseWorldsConfig {
return {
entityType: 'book',
entityId: book?.bookId || '',
};
}, [book?.bookId]);
const {
worlds,
seriesWorlds,
@@ -60,7 +59,7 @@ export default function WorldEditor(): React.JSX.Element {
exitEditMode,
backToList,
} = useWorlds(config);
const availableSeriesWorlds = useMemo(function (): SeriesWorldProps[] {
return seriesWorlds.filter(function (sw: SeriesWorldProps): boolean {
return !worlds.some(function (w: WorldProps): boolean {
@@ -68,16 +67,16 @@ export default function WorldEditor(): React.JSX.Element {
});
});
}, [seriesWorlds, worlds]);
const handleWorldFieldChange = useCallback(function (field: keyof WorldProps, value: string): void {
const handleWorldFieldChange = useCallback(function (field: WorldTextField, value: string): void {
updateWorldField(field, value);
}, [updateWorldField]);
// Wrapper pour convertir WorldProps en worldId
const handleWorldClick = useCallback(function (world: WorldProps): void {
enterDetailMode(world.id);
}, [enterDetailMode]);
// Gestion de l'ajout
async function handleAddWorld(): Promise<void> {
if (newWorldName.trim()) {
@@ -87,26 +86,22 @@ export default function WorldEditor(): React.JSX.Element {
setShowAddForm(true);
}
}
async function handleSave(): Promise<void> {
await exitEditMode(true);
}
function handleCancel(): void {
exitEditMode(false);
}
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 selectedWorld: WorldProps | undefined = worlds[selectedWorldIndex];
const canExport: boolean = Boolean(bookSeriesId && selectedWorld && !selectedWorld.seriesWorldId);
return (
<div className="flex flex-col h-full">
<ToolDetailHeader
@@ -122,70 +117,52 @@ export default function WorldEditor(): React.JSX.Element {
showExport={canExport}
showDelete={false}
/>
<div className="flex-1 overflow-y-auto">
{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('worldSetting.enableTool')}
input={
<ToggleSwitch
checked={toolEnabled}
onChange={toggleTool}
/>
}
{/* Import from series */}
{bookSeriesId && availableSeriesWorlds.length > 0 && (
<SeriesImportSelector
availableItems={availableSeriesWorlds.map(function (sw: SeriesWorldProps) {
return {id: sw.id, name: sw.name};
})}
onImport={importFromSeries}
placeholder={t('seriesImport.selectElement')}
label={t('seriesImport.importFromSeries')}
/>
</div>
{toolEnabled && (
<>
{/* Import from series */}
{bookSeriesId && availableSeriesWorlds.length > 0 && (
<SeriesImportSelector
availableItems={availableSeriesWorlds.map(function (sw: SeriesWorldProps) {
return {id: sw.id, name: sw.name};
})}
onImport={importFromSeries}
placeholder={t('seriesImport.selectElement')}
label={t('seriesImport.importFromSeries')}
/>
)}
{showAddForm && (
<div className="px-2">
<InputField
input={
<TextInput
value={newWorldName}
setValue={function (e: React.ChangeEvent<HTMLInputElement>): void {
setNewWorldName(e.target.value);
}}
placeholder={t('worldSetting.newWorldPlaceholder')}
/>
}
actionIcon={faPlus}
actionLabel={t('worldSetting.createWorldLabel')}
addButtonCallBack={async function (): Promise<void> {
await addNewWorld();
setShowAddForm(false);
}}
/>
</div>
)}
<WorldEditorList
worlds={worlds}
onWorldClick={handleWorldClick}
onAddWorld={handleAddWorld}
/>
</>
)}
{showAddForm && (
<div className="px-2">
<InputField
input={
<TextInput
value={newWorldName}
setValue={function (e: React.ChangeEvent<HTMLInputElement>): void {
setNewWorldName(e.target.value);
}}
placeholder={t('worldSetting.newWorldPlaceholder')}
/>
}
actionIcon={Plus}
actionLabel={t('worldSetting.createWorldLabel')}
addButtonCallBack={async function (): Promise<void> {
await addNewWorld();
setShowAddForm(false);
}}
/>
</div>
)}
<WorldEditorList
worlds={worlds}
onWorldClick={handleWorldClick}
onAddWorld={handleAddWorld}
/>
</div>
)}
{viewMode === 'detail' && selectedWorld && (
<div className="p-4">
<WorldEditorDetail
@@ -194,7 +171,7 @@ export default function WorldEditor(): React.JSX.Element {
/>
</div>
)}
{viewMode === 'edit' && selectedWorld && (
<div className="p-4">
<WorldEditorEdit
@@ -209,7 +186,7 @@ export default function WorldEditor(): React.JSX.Element {
</div>
)}
</div>
{showDeleteConfirm && selectedWorld && (
<AlertBox
title={t('worldSetting.deleteTitle')}
@@ -217,8 +194,12 @@ export default function WorldEditor(): React.JSX.Element {
type="danger"
confirmText={t('common.delete')}
cancelText={t('common.cancel')}
onConfirm={async function (): Promise<void> { setShowDeleteConfirm(false); }}
onCancel={function (): void { setShowDeleteConfirm(false); }}
onConfirm={async function (): Promise<void> {
setShowDeleteConfirm(false);
}}
onCancel={function (): void {
setShowDeleteConfirm(false);
}}
/>
)}
</div>

58
components/book/settings/world/editor/WorldEditorDetail.tsx
View File

@@ -1,8 +1,10 @@
'use client';
import React from 'react';
import {WorldProps, elementSections, ElementSection, WorldElement} from '@/lib/models/World';
import {SeriesWorldProps} from '@/lib/models/Series';
import {useTranslations} from 'next-intl';
import {ElementSection, WorldElement, WorldProps} from '@/lib/types/world';
import {elementSections} from '@/lib/constants/world';
import {SeriesWorldProps} from '@/lib/types/series';
import {useTranslations} from '@/lib/i18n';
import DetailField from '@/components/ui/DetailField';
interface WorldEditorDetailProps {
world: WorldProps;
@@ -14,32 +16,22 @@ interface WorldEditorDetailProps {
* Mêmes fonctionnalités que WorldSettingsDetail, layout linéaire
*/
export default function WorldEditorDetail({
world,
seriesWorld,
}: WorldEditorDetailProps): React.JSX.Element {
world,
seriesWorld,
}: WorldEditorDetailProps): React.JSX.Element {
const t = useTranslations();
function renderField(label: string, value: string | null | undefined): React.JSX.Element | null {
if (!value) return null;
return (
<div className="mb-3">
<span className="text-text-secondary text-xs block mb-1">{label}</span>
<p className="text-text-primary text-sm whitespace-pre-wrap">{value}</p>
</div>
);
}
function renderElementSection(section: ElementSection): React.JSX.Element | null {
const elements: WorldElement[] = world[section.section] as WorldElement[];
const elements: WorldElement[] = world[section.section];
if (!elements || elements.length === 0) return null;
return (
<div key={section.section} className="border-b border-secondary/30 pb-3">
<div key={section.section} className="border-b border-secondary pb-3">
<h4 className="text-text-primary font-medium text-sm mb-2">{section.title}</h4>
<div className="space-y-2">
{elements.map(function (element: WorldElement): React.JSX.Element {
return (
<div key={element.id} className="bg-secondary/20 rounded-lg p-2">
<div key={element.id} className="bg-tertiary rounded-lg p-2">
<p className="text-text-primary font-medium text-sm">{element.name}</p>
{element.description && (
<p className="text-text-secondary text-xs mt-1">{element.description}</p>
@@ -51,33 +43,33 @@ export default function WorldEditorDetail({
</div>
);
}
return (
<div className="space-y-4">
{/* Informations de base */}
<div className="border-b border-secondary/30 pb-3">
<div className="border-b border-secondary pb-3">
<h3 className="text-text-primary font-semibold text-base mb-3">{world.name}</h3>
{renderField(t('worldSetting.worldHistory'), world.history)}
<DetailField variant="compact" label={t('worldSetting.worldHistory')} value={world.history}/>
</div>
{/* Politique et économie */}
{(world.politics || world.economy) && (
<div className="border-b border-secondary/30 pb-3">
<div className="border-b border-secondary pb-3">
<h4 className="text-text-primary font-medium text-sm mb-2">{t('worldSetting.politicsEconomy')}</h4>
{renderField(t('worldSetting.politics'), world.politics)}
{renderField(t('worldSetting.economy'), world.economy)}
<DetailField variant="compact" label={t('worldSetting.politics')} value={world.politics}/>
<DetailField variant="compact" label={t('worldSetting.economy')} value={world.economy}/>
</div>
)}
{/* Religion et langues */}
{(world.religion || world.languages) && (
<div className="border-b border-secondary/30 pb-3">
<div className="border-b border-secondary pb-3">
<h4 className="text-text-primary font-medium text-sm mb-2">{t('worldSetting.cultureLanguages')}</h4>
{renderField(t('worldSetting.religion'), world.religion)}
{renderField(t('worldSetting.languages'), world.languages)}
<DetailField variant="compact" label={t('worldSetting.religion')} value={world.religion}/>
<DetailField variant="compact" label={t('worldSetting.languages')} value={world.languages}/>
</div>
)}
{/* Sections d'éléments */}
{elementSections.map(function (section: ElementSection): React.JSX.Element | null {
return renderElementSection(section);

59
components/book/settings/world/editor/WorldEditorEdit.tsx
View File

@@ -1,21 +1,22 @@
'use client';
import React, {ChangeEvent, Dispatch, SetStateAction} from 'react';
import {WorldProps, elementSections, ElementSection} from '@/lib/models/World';
import {SeriesWorldProps} from '@/lib/models/Series';
import {ElementSection, WorldProps, WorldTextField} from '@/lib/types/world';
import {elementSections} from '@/lib/constants/world';
import {SeriesWorldProps} from '@/lib/types/series';
import {WorldContext} from '@/context/WorldContext';
import InputField from '@/components/form/InputField';
import TextInput from '@/components/form/TextInput';
import TexteAreaInput from '@/components/form/TexteAreaInput';
import TextAreaInput from '@/components/form/TextAreaInput';
import SyncFieldWrapper from '@/components/form/SyncFieldWrapper';
import WorldElementComponent from '@/components/book/settings/world/WorldElement';
import {useTranslations} from 'next-intl';
import {useTranslations} from '@/lib/i18n';
interface WorldEditorEditProps {
world: WorldProps;
worlds: WorldProps[];
selectedWorldIndex: number;
setWorlds: Dispatch<SetStateAction<WorldProps[]>>;
onWorldFieldChange: (field: keyof WorldProps, value: string) => void;
onWorldFieldChange: (field: WorldTextField, value: string) => void;
seriesWorld?: SeriesWorldProps | null;
onSyncComplete?: () => void;
}
@@ -26,21 +27,21 @@ interface WorldEditorEditProps {
* SyncFieldWrapper pour tous les champs
*/
export default function WorldEditorEdit({
world,
worlds,
selectedWorldIndex,
setWorlds,
onWorldFieldChange,
seriesWorld,
onSyncComplete,
}: WorldEditorEditProps): React.JSX.Element {
world,
worlds,
selectedWorldIndex,
setWorlds,
onWorldFieldChange,
seriesWorld,
onSyncComplete,
}: WorldEditorEditProps): React.JSX.Element {
const t = useTranslations();
return (
<WorldContext.Provider value={{worlds, setWorlds, selectedWorldIndex, isSeriesMode: false}}>
<div className="space-y-4">
{/* Informations de base */}
<div className="border-b border-secondary/30 pb-3">
<div className="border-b border-secondary pb-3">
<h4 className="text-text-primary font-medium text-sm mb-3">{t('worldSetting.basicInfo')}</h4>
<div className="space-y-3">
<InputField
@@ -74,7 +75,7 @@ export default function WorldEditorEdit({
</SyncFieldWrapper>
}
/>
<InputField
fieldName={t("worldSetting.worldHistory")}
input={
@@ -90,7 +91,7 @@ export default function WorldEditorEdit({
}}
onSyncComplete={onSyncComplete}
>
<TexteAreaInput
<TextAreaInput
value={world.history || ''}
setValue={function (e: ChangeEvent<HTMLTextAreaElement>): void {
onWorldFieldChange('history', e.target.value);
@@ -102,9 +103,9 @@ export default function WorldEditorEdit({
/>
</div>
</div>
{/* Politique et économie */}
<div className="border-b border-secondary/30 pb-3">
<div className="border-b border-secondary pb-3">
<h4 className="text-text-primary font-medium text-sm mb-3">{t('worldSetting.politicsEconomy')}</h4>
<div className="space-y-3">
<InputField
@@ -122,7 +123,7 @@ export default function WorldEditorEdit({
}}
onSyncComplete={onSyncComplete}
>
<TexteAreaInput
<TextAreaInput
value={world.politics || ''}
setValue={function (e: ChangeEvent<HTMLTextAreaElement>): void {
onWorldFieldChange('politics', e.target.value);
@@ -132,7 +133,7 @@ export default function WorldEditorEdit({
</SyncFieldWrapper>
}
/>
<InputField
fieldName={t("worldSetting.economy")}
input={
@@ -148,7 +149,7 @@ export default function WorldEditorEdit({
}}
onSyncComplete={onSyncComplete}
>
<TexteAreaInput
<TextAreaInput
value={world.economy || ''}
setValue={function (e: ChangeEvent<HTMLTextAreaElement>): void {
onWorldFieldChange('economy', e.target.value);
@@ -160,9 +161,9 @@ export default function WorldEditorEdit({
/>
</div>
</div>
{/* Religion et langues */}
<div className="border-b border-secondary/30 pb-3">
<div className="border-b border-secondary pb-3">
<h4 className="text-text-primary font-medium text-sm mb-3">{t('worldSetting.cultureLanguages')}</h4>
<div className="space-y-3">
<InputField
@@ -180,7 +181,7 @@ export default function WorldEditorEdit({
}}
onSyncComplete={onSyncComplete}
>
<TexteAreaInput
<TextAreaInput
value={world.religion || ''}
setValue={function (e: ChangeEvent<HTMLTextAreaElement>): void {
onWorldFieldChange('religion', e.target.value);
@@ -190,7 +191,7 @@ export default function WorldEditorEdit({
</SyncFieldWrapper>
}
/>
<InputField
fieldName={t("worldSetting.languages")}
input={
@@ -206,7 +207,7 @@ export default function WorldEditorEdit({
}}
onSyncComplete={onSyncComplete}
>
<TexteAreaInput
<TextAreaInput
value={world.languages || ''}
setValue={function (e: ChangeEvent<HTMLTextAreaElement>): void {
onWorldFieldChange('languages', e.target.value);
@@ -218,11 +219,11 @@ export default function WorldEditorEdit({
/>
</div>
</div>
{/* Sections d'éléments */}
{elementSections.map(function (section: ElementSection): React.JSX.Element {
return (
<div key={section.section} className="border-b border-secondary/30 pb-3 last:border-b-0">
<div key={section.section} className="border-b border-secondary pb-3 last:border-b-0">
<h4 className="text-text-primary font-medium text-sm mb-3">{section.title}</h4>
<WorldElementComponent
sectionLabel={section.title}

76
components/book/settings/world/editor/WorldEditorList.tsx
View File

@@ -1,11 +1,13 @@
'use client';
import React, {useState} from 'react';
import {WorldProps} from '@/lib/models/World';
import {WorldProps} from '@/lib/types/world';
import InputField from '@/components/form/InputField';
import TextInput from '@/components/form/TextInput';
import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
import {faChevronRight, faGlobe, faPlus} from '@fortawesome/free-solid-svg-icons';
import {useTranslations} from 'next-intl';
import {Globe, Plus} from 'lucide-react';
import EmptyState from '@/components/ui/EmptyState';
import EntityListItem from '@/components/ui/EntityListItem';
import AvatarIcon from '@/components/ui/AvatarIcon';
import {useTranslations} from '@/lib/i18n';
interface WorldEditorListProps {
worlds: WorldProps[];
@@ -19,21 +21,21 @@ interface WorldEditorListProps {
* PAS de scroll interne (géré par parent ComposerRightBar)
*/
export default function WorldEditorList({
worlds,
onWorldClick,
onAddWorld,
}: WorldEditorListProps): React.JSX.Element {
worlds,
onWorldClick,
onAddWorld,
}: WorldEditorListProps): React.JSX.Element {
const t = useTranslations();
const [searchQuery, setSearchQuery] = useState<string>('');
function getFilteredWorlds(): WorldProps[] {
return worlds.filter(function (world: WorldProps): boolean {
return world.name.toLowerCase().includes(searchQuery.toLowerCase());
});
}
const filteredWorlds: WorldProps[] = getFilteredWorlds();
return (
<div className="space-y-3">
<div className="px-2">
@@ -47,57 +49,31 @@ export default function WorldEditorList({
placeholder={t('worldSetting.search')}
/>
}
actionIcon={faPlus}
actionIcon={Plus}
actionLabel={t('worldSetting.addWorldLabel')}
addButtonCallBack={async function (): Promise<void> {
onAddWorld();
}}
/>
</div>
<div className="px-2 space-y-2">
{filteredWorlds.length === 0 ? (
<div className="flex flex-col items-center justify-center py-8 text-center">
<div className="w-16 h-16 rounded-full bg-primary/10 flex items-center justify-center mb-3">
<FontAwesomeIcon icon={faGlobe} className="text-primary w-8 h-8"/>
</div>
<h3 className="text-text-primary font-semibold text-base mb-1">
{t('worldSetting.noWorldAvailable')}
</h3>
<p className="text-muted text-sm max-w-xs">
{t('worldSetting.noWorldDescription')}
</p>
</div>
<EmptyState icon={Globe} title={t('worldSetting.noWorldAvailable')}
description={t('worldSetting.noWorldDescription')}/>
) : (
filteredWorlds.map(function (world: WorldProps): React.JSX.Element {
return (
<div
<EntityListItem
key={world.id}
onClick={function (): void { onWorldClick(world); }}
className="group flex items-center p-3 bg-secondary/30 rounded-lg border-l-4 border-primary border border-secondary/50 cursor-pointer hover:bg-secondary hover:shadow-md transition-all duration-200 hover:border-primary/50"
>
<div className="w-10 h-10 rounded-full border-2 border-primary overflow-hidden bg-secondary shadow-sm group-hover:scale-110 transition-transform flex items-center justify-center">
<FontAwesomeIcon icon={faGlobe} className="text-primary w-5 h-5"/>
</div>
<div className="ml-3 flex-1 min-w-0">
<div className="text-text-primary font-semibold text-sm group-hover:text-primary transition-colors truncate">
{world.name}
</div>
{world.history && (
<div className="text-muted text-xs truncate">
{world.history.substring(0, 50)}{world.history.length > 50 ? '...' : ''}
</div>
)}
</div>
<div className="w-6 flex justify-center">
<FontAwesomeIcon
icon={faChevronRight}
className="text-muted group-hover:text-primary group-hover:translate-x-1 transition-all w-3 h-3"
/>
</div>
</div>
size="sm"
onClick={function (): void {
onWorldClick(world);
}}
avatar={<AvatarIcon size="sm" icon={Globe}/>}
title={world.name}
subtitle={world.history ? world.history.substring(0, 50) + (world.history.length > 50 ? '...' : '') : null}
/>
);
})
)}

84
components/book/settings/world/settings/WorldSettings.tsx
View File

@@ -1,17 +1,13 @@
'use client';
import React, {useCallback, useContext, useMemo, useState} from 'react';
import {useWorlds, UseWorldsConfig} from '@/hooks/settings/useWorlds';
import {useTranslations} from 'next-intl';
import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
import {faSpinner, faToggleOn} from '@fortawesome/free-solid-svg-icons';
import {BookContext} from '@/context/BookContext';
import {WorldProps} from '@/lib/models/World';
import {SeriesWorldProps} from '@/lib/models/Series';
import InputField from '@/components/form/InputField';
import ToggleSwitch from '@/components/form/ToggleSwitch';
import {useTranslations} from '@/lib/i18n';
import PulseLoader from '@/components/ui/PulseLoader';
import {BookContext, BookContextProps} from '@/context/BookContext';
import {WorldProps, WorldTextField} from '@/lib/types/world';
import {SeriesWorldProps} from '@/lib/types/series';
import SeriesImportSelector from '@/components/form/SeriesImportSelector';
import ToolDetailHeader from '@/components/book/settings/ToolDetailHeader';
import AlertBox from '@/components/AlertBox';
import WorldSettingsList from './WorldSettingsList';
import WorldSettingsDetail from './WorldSettingsDetail';
@@ -20,7 +16,7 @@ import WorldSettingsEdit from './WorldSettingsEdit';
interface WorldSettingsProps {
entityType?: 'book' | 'series';
entityId?: string;
showToggle?: boolean;
toolEnabled?: boolean;
}
/**
@@ -29,23 +25,23 @@ interface WorldSettingsProps {
* Inclut: toggle tool, import from series, export to series
*/
export default function WorldSettings({
entityType = 'book',
entityId,
showToggle = true,
}: WorldSettingsProps): React.JSX.Element {
entityType = 'book',
entityId,
toolEnabled: parentToolEnabled,
}: WorldSettingsProps): React.JSX.Element {
const t = useTranslations();
const {book} = useContext(BookContext);
const {book}: BookContextProps = useContext<BookContextProps>(BookContext);
const [showDeleteConfirm, setShowDeleteConfirm] = useState<boolean>(false);
const resolvedEntityId: string = entityId || book?.bookId || '';
const config: UseWorldsConfig = useMemo(function (): UseWorldsConfig {
return {
entityType,
entityId: resolvedEntityId,
};
}, [entityType, resolvedEntityId]);
const {
worlds,
seriesWorlds,
@@ -71,7 +67,7 @@ export default function WorldSettings({
exitEditMode,
backToList,
} = useWorlds(config);
const availableSeriesWorlds = useMemo(function (): SeriesWorldProps[] {
return seriesWorlds.filter(function (sw: SeriesWorldProps): boolean {
return !worlds.some(function (w: WorldProps): boolean {
@@ -79,30 +75,26 @@ export default function WorldSettings({
});
});
}, [seriesWorlds, worlds]);
const handleWorldFieldChange = useCallback(function (field: keyof WorldProps, value: string): void {
const handleWorldFieldChange = useCallback(function (field: WorldTextField, value: string): void {
updateWorldField(field, value);
}, [updateWorldField]);
async function handleSave(): Promise<void> {
await exitEditMode(true);
}
function handleCancel(): void {
exitEditMode(false);
}
if (isLoading) {
return (
<div className="flex items-center justify-center py-12">
<FontAwesomeIcon icon={faSpinner} className="w-8 h-8 text-primary animate-spin"/>
</div>
);
return <PulseLoader/>;
}
const selectedWorld: WorldProps | undefined = worlds[selectedWorldIndex];
const canExport: boolean = Boolean(bookSeriesId && selectedWorld && !selectedWorld.seriesWorldId);
return (
<div className="flex flex-col h-full">
{/* Header - uniquement pour detail/edit */}
@@ -119,32 +111,12 @@ export default function WorldSettings({
showExport={canExport}
showDelete={false}
/>
{/* Contenu principal */}
<div className="flex-1 overflow-y-auto">
{viewMode === 'list' && (
<div className="space-y-5 p-4">
{/* Toggle tool */}
{showToggle && !isSeriesMode && (
<div className="bg-secondary/20 rounded-xl p-5 shadow-inner border border-secondary/30">
<InputField
icon={faToggleOn}
fieldName={t('worldSetting.enableTool')}
input={
<ToggleSwitch
checked={toolEnabled}
onChange={toggleTool}
/>
}
/>
<p className="text-muted text-sm mt-2">
{t('worldSetting.enableToolDescription')}
</p>
</div>
)}
{/* Contenu si outil activé */}
{(toolEnabled || isSeriesMode) && (
{((parentToolEnabled !== undefined ? parentToolEnabled : toolEnabled) || isSeriesMode) && (
<>
{/* Import from series */}
{!isSeriesMode && bookSeriesId && availableSeriesWorlds.length > 0 && (
@@ -157,7 +129,7 @@ export default function WorldSettings({
label={t("seriesImport.importFromSeries")}
/>
)}
{/* Liste des mondes */}
<WorldSettingsList
worlds={worlds}
@@ -170,7 +142,7 @@ export default function WorldSettings({
)}
</div>
)}
{viewMode === 'detail' && selectedWorld && (
<div className="p-4">
<WorldSettingsDetail
@@ -179,7 +151,7 @@ export default function WorldSettings({
/>
</div>
)}
{viewMode === 'edit' && selectedWorld && (
<div className="p-4">
<WorldSettingsEdit

136
components/book/settings/world/settings/WorldSettingsDetail.tsx
View File

@@ -1,19 +1,13 @@
'use client';
import React from 'react';
import {WorldProps, elementSections, ElementSection, WorldElement} from '@/lib/models/World';
import {SeriesWorldProps} from '@/lib/models/Series';
import CollapsableArea from '@/components/CollapsableArea';
import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
import {
faGlobe,
faLandmark,
faBook,
faCoins,
faChurch,
faLanguage,
faScroll
} from '@fortawesome/free-solid-svg-icons';
import {useTranslations} from 'next-intl';
import {ElementSection, WorldElement, WorldProps} from '@/lib/types/world';
import {elementSections} from '@/lib/constants/world';
import {SeriesWorldProps} from '@/lib/types/series';
import Collapse from '@/components/ui/Collapse';
import {Church, Coins, Globe, Landmark, Languages, ScrollText} from 'lucide-react';
import {useTranslations} from '@/lib/i18n';
import DetailHeroSection from '@/components/ui/DetailHeroSection';
import DetailField from '@/components/ui/DetailField';
interface WorldSettingsDetailProps {
world: WorldProps;
@@ -21,104 +15,54 @@ interface WorldSettingsDetailProps {
}
export default function WorldSettingsDetail({
world,
seriesWorld,
}: WorldSettingsDetailProps): React.JSX.Element {
world,
seriesWorld,
}: WorldSettingsDetailProps): React.JSX.Element {
const t = useTranslations();
function renderElementSection(section: ElementSection): React.JSX.Element | null {
const elements: WorldElement[] = world[section.section] as WorldElement[];
const elements: WorldElement[] = world[section.section];
if (!elements || elements.length === 0) return null;
return (
<CollapsableArea key={section.section} title={section.title} icon={section.icon}>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3 p-4 bg-secondary/20 rounded-xl border border-secondary/30">
{elements.map(function (element: WorldElement): React.JSX.Element {
return (
<div key={element.id} className="p-4 bg-dark-background/30 rounded-lg border border-secondary/20 hover:border-primary/30 transition-colors">
<h4 className="text-text-primary font-semibold">{element.name}</h4>
{element.description && (
<p className="text-text-secondary text-sm mt-2 line-clamp-3">{element.description}</p>
)}
</div>
);
})}
</div>
</CollapsableArea>
<Collapse variant="card" key={section.section} title={section.title} icon={section.icon}>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3">
{elements.map(function (element: WorldElement): React.JSX.Element {
return (
<div key={element.id}
className="p-4 rounded-lg">
<h4 className="text-text-primary font-semibold">{element.name}</h4>
{element.description && (
<p className="text-text-secondary text-sm mt-2 line-clamp-3">{element.description}</p>
)}
</div>
);
})}
</div>
</Collapse>
);
}
return (
<div className="space-y-6 px-2 pb-4">
{/* Hero Section */}
<div className="p-6 bg-gradient-to-r from-primary/10 via-secondary/20 to-transparent rounded-2xl border border-secondary/30">
<div className="flex items-start gap-4">
<div className="w-16 h-16 rounded-xl bg-primary/20 flex items-center justify-center shrink-0">
<FontAwesomeIcon icon={faGlobe} className="w-8 h-8 text-primary"/>
</div>
<div className="flex-1 min-w-0">
<h2 className="text-2xl font-bold text-text-primary">{world.name || '—'}</h2>
</div>
</div>
</div>
<DetailHeroSection icon={Globe} title={world.name || '—'}/>
{/* Histoire du monde - Full width */}
<div className="p-5 bg-secondary/20 rounded-xl border border-secondary/30">
<div className="flex items-center gap-2 mb-3">
<FontAwesomeIcon icon={faScroll} className="w-4 h-4 text-primary"/>
<h3 className="text-text-primary font-semibold">{t('worldSetting.worldHistory')}</h3>
</div>
<p className={`whitespace-pre-wrap ${world.history ? 'text-text-primary' : 'text-text-secondary/50 italic'}`}>
{world.history || '—'}
</p>
</div>
<DetailField icon={ScrollText} label={t('worldSetting.worldHistory')} value={world.history}/>
{/* Politique & Économie - Side by side */}
<div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
<div className="p-5 bg-secondary/20 rounded-xl border border-secondary/30">
<div className="flex items-center gap-2 mb-3">
<FontAwesomeIcon icon={faLandmark} className="w-4 h-4 text-primary"/>
<h3 className="text-text-primary font-semibold">{t('worldSetting.politics')}</h3>
</div>
<p className={`whitespace-pre-wrap ${world.politics ? 'text-text-primary' : 'text-text-secondary/50 italic'}`}>
{world.politics || '—'}
</p>
</div>
<div className="p-5 bg-secondary/20 rounded-xl border border-secondary/30">
<div className="flex items-center gap-2 mb-3">
<FontAwesomeIcon icon={faCoins} className="w-4 h-4 text-primary"/>
<h3 className="text-text-primary font-semibold">{t('worldSetting.economy')}</h3>
</div>
<p className={`whitespace-pre-wrap ${world.economy ? 'text-text-primary' : 'text-text-secondary/50 italic'}`}>
{world.economy || '—'}
</p>
</div>
<DetailField icon={Landmark} label={t('worldSetting.politics')} value={world.politics}/>
<DetailField icon={Coins} label={t('worldSetting.economy')} value={world.economy}/>
</div>
{/* Religion & Langues - Side by side */}
<div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
<div className="p-5 bg-secondary/20 rounded-xl border border-secondary/30">
<div className="flex items-center gap-2 mb-3">
<FontAwesomeIcon icon={faChurch} className="w-4 h-4 text-primary"/>
<h3 className="text-text-primary font-semibold">{t('worldSetting.religion')}</h3>
</div>
<p className={`whitespace-pre-wrap ${world.religion ? 'text-text-primary' : 'text-text-secondary/50 italic'}`}>
{world.religion || '—'}
</p>
</div>
<div className="p-5 bg-secondary/20 rounded-xl border border-secondary/30">
<div className="flex items-center gap-2 mb-3">
<FontAwesomeIcon icon={faLanguage} className="w-4 h-4 text-primary"/>
<h3 className="text-text-primary font-semibold">{t('worldSetting.languages')}</h3>
</div>
<p className={`whitespace-pre-wrap ${world.languages ? 'text-text-primary' : 'text-text-secondary/50 italic'}`}>
{world.languages || '—'}
</p>
</div>
<DetailField icon={Church} label={t('worldSetting.religion')} value={world.religion}/>
<DetailField icon={Languages} label={t('worldSetting.languages')} value={world.languages}/>
</div>
{/* Sections d'éléments - Grille de cards */}
{elementSections.map(function (section: ElementSection): React.JSX.Element | null {
return renderElementSection(section);

78
components/book/settings/world/settings/WorldSettingsEdit.tsx
View File

@@ -1,24 +1,24 @@
'use client';
import React, {ChangeEvent, Dispatch, SetStateAction} from 'react';
import {WorldProps, elementSections, ElementSection} from '@/lib/models/World';
import {SeriesWorldProps} from '@/lib/models/Series';
import {ElementSection, WorldProps, WorldTextField} from '@/lib/types/world';
import {elementSections} from '@/lib/constants/world';
import {SeriesWorldProps} from '@/lib/types/series';
import {WorldContext} from '@/context/WorldContext';
import CollapsableArea from '@/components/CollapsableArea';
import Collapse from '@/components/ui/Collapse';
import InputField from '@/components/form/InputField';
import TextInput from '@/components/form/TextInput';
import TexteAreaInput from '@/components/form/TexteAreaInput';
import TextAreaInput from '@/components/form/TextAreaInput';
import SyncFieldWrapper from '@/components/form/SyncFieldWrapper';
import WorldElementComponent from '@/components/book/settings/world/WorldElement';
import {faBook, faGlobe, faLandmark} from '@fortawesome/free-solid-svg-icons';
import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
import {useTranslations} from 'next-intl';
import {Book, Globe, Landmark} from 'lucide-react';
import {useTranslations} from '@/lib/i18n';
interface WorldSettingsEditProps {
world: WorldProps;
worlds: WorldProps[];
selectedWorldIndex: number;
setWorlds: Dispatch<SetStateAction<WorldProps[]>>;
onWorldFieldChange: (field: keyof WorldProps, value: string) => void;
onWorldFieldChange: (field: WorldTextField, value: string) => void;
seriesWorld?: SeriesWorldProps | null;
isSeriesMode: boolean;
onSyncComplete?: () => void;
@@ -30,23 +30,22 @@ interface WorldSettingsEditProps {
* PAS de scroll interne (géré par parent)
*/
export default function WorldSettingsEdit({
world,
worlds,
selectedWorldIndex,
setWorlds,
onWorldFieldChange,
seriesWorld,
isSeriesMode,
onSyncComplete,
}: WorldSettingsEditProps): React.JSX.Element {
world,
worlds,
selectedWorldIndex,
setWorlds,
onWorldFieldChange,
seriesWorld,
isSeriesMode,
onSyncComplete,
}: WorldSettingsEditProps): React.JSX.Element {
const t = useTranslations();
return (
<WorldContext.Provider value={{worlds, setWorlds, selectedWorldIndex, isSeriesMode}}>
<div className="space-y-4 px-2 pb-4">
{/* Informations de base */}
<CollapsableArea title={t('worldSetting.basicInfo')} icon={faGlobe}>
<div className="space-y-4 p-4 bg-secondary/20 rounded-xl border border-secondary/30">
<Collapse variant="card" title={t('worldSetting.basicInfo')} icon={Globe}>
<InputField
fieldName={t("worldSetting.worldName")}
input={
@@ -78,7 +77,7 @@ export default function WorldSettingsEdit({
</SyncFieldWrapper>
}
/>
<InputField
fieldName={t("worldSetting.worldHistory")}
input={
@@ -94,7 +93,7 @@ export default function WorldSettingsEdit({
}}
onSyncComplete={onSyncComplete}
>
<TexteAreaInput
<TextAreaInput
value={world.history || ''}
setValue={function (e: ChangeEvent<HTMLTextAreaElement>): void {
onWorldFieldChange('history', e.target.value);
@@ -104,12 +103,10 @@ export default function WorldSettingsEdit({
</SyncFieldWrapper>
}
/>
</div>
</CollapsableArea>
</Collapse>
{/* Politique et économie */}
<CollapsableArea title={t('worldSetting.politicsEconomy')} icon={faLandmark}>
<div className="space-y-4 p-4 bg-secondary/20 rounded-xl border border-secondary/30">
<Collapse variant="card" title={t('worldSetting.politicsEconomy')} icon={Landmark}>
<InputField
fieldName={t("worldSetting.politics")}
input={
@@ -125,7 +122,7 @@ export default function WorldSettingsEdit({
}}
onSyncComplete={onSyncComplete}
>
<TexteAreaInput
<TextAreaInput
value={world.politics || ''}
setValue={function (e: ChangeEvent<HTMLTextAreaElement>): void {
onWorldFieldChange('politics', e.target.value);
@@ -135,7 +132,7 @@ export default function WorldSettingsEdit({
</SyncFieldWrapper>
}
/>
<InputField
fieldName={t("worldSetting.economy")}
input={
@@ -151,7 +148,7 @@ export default function WorldSettingsEdit({
}}
onSyncComplete={onSyncComplete}
>
<TexteAreaInput
<TextAreaInput
value={world.economy || ''}
setValue={function (e: ChangeEvent<HTMLTextAreaElement>): void {
onWorldFieldChange('economy', e.target.value);
@@ -161,12 +158,10 @@ export default function WorldSettingsEdit({
</SyncFieldWrapper>
}
/>
</div>
</CollapsableArea>
</Collapse>
{/* Religion et langues */}
<CollapsableArea title={t('worldSetting.cultureLanguages')} icon={faBook}>
<div className="space-y-4 p-4 bg-secondary/20 rounded-xl border border-secondary/30">
<Collapse variant="card" title={t('worldSetting.cultureLanguages')} icon={Book}>
<InputField
fieldName={t("worldSetting.religion")}
input={
@@ -182,7 +177,7 @@ export default function WorldSettingsEdit({
}}
onSyncComplete={onSyncComplete}
>
<TexteAreaInput
<TextAreaInput
value={world.religion || ''}
setValue={function (e: ChangeEvent<HTMLTextAreaElement>): void {
onWorldFieldChange('religion', e.target.value);
@@ -192,7 +187,7 @@ export default function WorldSettingsEdit({
</SyncFieldWrapper>
}
/>
<InputField
fieldName={t("worldSetting.languages")}
input={
@@ -208,7 +203,7 @@ export default function WorldSettingsEdit({
}}
onSyncComplete={onSyncComplete}
>
<TexteAreaInput
<TextAreaInput
value={world.languages || ''}
setValue={function (e: ChangeEvent<HTMLTextAreaElement>): void {
onWorldFieldChange('languages', e.target.value);
@@ -218,20 +213,17 @@ export default function WorldSettingsEdit({
</SyncFieldWrapper>
}
/>
</div>
</CollapsableArea>
</Collapse>
{/* Sections d'éléments */}
{elementSections.map(function (section: ElementSection): React.JSX.Element {
return (
<CollapsableArea key={section.section} title={section.title} icon={section.icon}>
<div className="p-4 bg-secondary/20 rounded-xl border border-secondary/30">
<Collapse variant="card" key={section.section} title={section.title} icon={section.icon}>
<WorldElementComponent
sectionLabel={section.title}
sectionType={section.section}
/>
</div>
</CollapsableArea>
</Collapse>
);
})}
</div>

83
components/book/settings/world/settings/WorldSettingsList.tsx
View File

@@ -1,11 +1,13 @@
'use client';
import React, {ChangeEvent, useState} from 'react';
import {WorldProps} from '@/lib/models/World';
import {WorldProps} from '@/lib/types/world';
import InputField from '@/components/form/InputField';
import TextInput from '@/components/form/TextInput';
import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
import {faChevronRight, faGlobe, faPlus} from '@fortawesome/free-solid-svg-icons';
import {useTranslations} from 'next-intl';
import {Globe, Plus} from 'lucide-react';
import {useTranslations} from '@/lib/i18n';
import EntityListItem from '@/components/ui/EntityListItem';
import EmptyState from '@/components/ui/EmptyState';
import AvatarIcon from '@/components/ui/AvatarIcon';
interface WorldSettingsListProps {
worlds: WorldProps[];
@@ -22,28 +24,27 @@ interface WorldSettingsListProps {
* PAS de scroll interne (géré par parent)
*/
export default function WorldSettingsList({
worlds,
onWorldClick,
onAddWorld,
newWorldName,
onNewWorldNameChange,
}: WorldSettingsListProps): React.JSX.Element {
worlds,
onWorldClick,
onAddWorld,
newWorldName,
onNewWorldNameChange,
}: WorldSettingsListProps): React.JSX.Element {
const t = useTranslations();
const [searchQuery, setSearchQuery] = useState<string>('');
function getFilteredWorlds(): WorldProps[] {
return worlds.filter(function (world: WorldProps): boolean {
return world.name.toLowerCase().includes(searchQuery.toLowerCase());
});
}
const filteredWorlds: WorldProps[] = getFilteredWorlds();
return (
<div className="space-y-4">
{/* Recherche et ajout */}
<div className="bg-tertiary/90 backdrop-blur-sm rounded-xl p-5 border border-secondary/50 shadow-lg">
<div className="grid grid-cols-1 gap-4">
<div className="grid grid-cols-1 gap-4">
<InputField
input={
<TextInput
@@ -67,57 +68,29 @@ export default function WorldSettingsList({
placeholder={t('worldSetting.newWorldPlaceholder')}
/>
}
actionIcon={faPlus}
actionIcon={Plus}
actionLabel={t('worldSetting.createWorldLabel')}
addButtonCallBack={onAddWorld}
/>
</div>
</div>
{/* Liste des mondes cliquables */}
<div className="space-y-2 px-2">
{filteredWorlds.length === 0 ? (
<div className="flex flex-col items-center justify-center py-12 text-center">
<div className="w-20 h-20 rounded-full bg-primary/10 flex items-center justify-center mb-4">
<FontAwesomeIcon icon={faGlobe} className="text-primary w-10 h-10"/>
</div>
<h3 className="text-text-primary font-semibold text-lg mb-2">
{t('worldSetting.noWorldAvailable')}
</h3>
<p className="text-muted text-sm max-w-xs">
{t('worldSetting.noWorldDescription')}
</p>
</div>
<EmptyState icon={Globe} title={t('worldSetting.noWorldAvailable')}
description={t('worldSetting.noWorldDescription')}/>
) : (
filteredWorlds.map(function (world: WorldProps): React.JSX.Element {
return (
<div
<EntityListItem
key={world.id}
onClick={function (): void { onWorldClick(world.id); }}
className="group flex items-center p-4 bg-secondary/30 rounded-xl border-l-4 border-primary border border-secondary/50 cursor-pointer hover:bg-secondary hover:shadow-md hover:scale-102 transition-all duration-200 hover:border-primary/50"
>
<div className="w-12 h-12 rounded-full border-2 border-primary overflow-hidden bg-secondary shadow-md group-hover:scale-110 transition-transform flex items-center justify-center">
<FontAwesomeIcon icon={faGlobe} className="text-primary w-6 h-6"/>
</div>
<div className="ml-4 flex-1 min-w-0">
<div className="text-text-primary font-bold text-base group-hover:text-primary transition-colors">
{world.name}
</div>
{world.history && (
<div className="text-text-secondary text-sm mt-0.5 truncate">
{world.history.substring(0, 60)}{world.history.length > 60 ? '...' : ''}
</div>
)}
</div>
<div className="w-8 flex justify-center">
<FontAwesomeIcon
icon={faChevronRight}
className="text-muted group-hover:text-primary group-hover:translate-x-1 transition-all w-4 h-4"
/>
</div>
</div>
onClick={function (): void {
onWorldClick(world.id);
}}
avatar={<AvatarIcon icon={Globe}/>}
title={world.name}
subtitle={world.history ? world.history.substring(0, 60) + (world.history.length > 60 ? '...' : '') : null}
/>
);
})
)}