Remove unused components and models for improved maintainability
- Deleted redundant components (`AddActionButton`, `AlertBox`, `AlertStack`, `BackButton`, `CancelButton`, and `CollapsableArea`) and related files. - Removed unused models (`Book`, `BookSerie`, `BookTables`, `Character`, and `Chapter`) to reduce codebase clutter. - Updated project structure and references to reflect these removals.
This commit is contained in:
natreex
@@ -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>
|
||||
|
||||
@@ -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);
|
||||
|
||||
@@ -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}
|
||||
|
||||
@@ -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}
|
||||
/>
|
||||
);
|
||||
})
|
||||
)}
|
||||
|
||||
Reference in New Issue
Block a user