209dc6f85a
- Deleted `CharacterComponent` and `CharacterDetail` files from the project. - Refactored related logic to improve code maintainability and reduce redundancy.
274 lines
12 KiB
TypeScript
274 lines
12 KiB
TypeScript
'use client'
|
|
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
|
|
import {
|
|
faFeather,
|
|
faGlobe,
|
|
faHatWizard,
|
|
faInfoCircle,
|
|
faMapMarkerAlt,
|
|
faUsers
|
|
} from "@fortawesome/free-solid-svg-icons";
|
|
import React, {lazy, Suspense, useContext, useEffect, useState} from "react";
|
|
import {BookContext} from "@/context/BookContext";
|
|
import {PanelComponent} from "@/lib/models/Editor";
|
|
import PanelHeader from "@/components/PanelHeader";
|
|
import AboutEditors from "@/components/rightbar/AboutERitors";
|
|
import {faDiscord, faFacebook} from "@fortawesome/free-brands-svg-icons";
|
|
import QuillSense from "@/components/quillsense/QuillSenseComponent";
|
|
import {useTranslations} from "next-intl";
|
|
import {faSpinner} from "@fortawesome/free-solid-svg-icons";
|
|
import OfflineContext, {OfflineContextType} from "@/context/OfflineContext";
|
|
|
|
// Lazy loaded Editor components
|
|
const WorldEditor = lazy(function () {
|
|
return import('@/components/book/settings/world/editor/WorldEditor');
|
|
});
|
|
const LocationEditor = lazy(function () {
|
|
return import('@/components/book/settings/locations/editor/LocationEditor');
|
|
});
|
|
const CharacterEditor = lazy(function () {
|
|
return import('@/components/book/settings/characters/editor/CharacterEditor');
|
|
});
|
|
const SpellEditor = lazy(function () {
|
|
return import('@/components/book/settings/spells/editor/SpellEditor');
|
|
});
|
|
|
|
function LoadingSpinner(): React.JSX.Element {
|
|
return (
|
|
<div className="flex items-center justify-center py-12">
|
|
<FontAwesomeIcon icon={faSpinner} className="w-8 h-8 text-primary animate-spin"/>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
interface PanelContentProps {
|
|
currentPanelId: number | undefined;
|
|
}
|
|
|
|
function PanelContent({currentPanelId}: PanelContentProps): React.JSX.Element {
|
|
return (
|
|
<Suspense fallback={<LoadingSpinner/>}>
|
|
{currentPanelId === 1 && <QuillSense/>}
|
|
{currentPanelId === 2 && <WorldEditor/>}
|
|
{currentPanelId === 3 && <LocationEditor/>}
|
|
{currentPanelId === 4 && <CharacterEditor/>}
|
|
{currentPanelId === 5 && <SpellEditor/>}
|
|
</Suspense>
|
|
);
|
|
}
|
|
|
|
interface PanelHeaderProps {
|
|
currentPanel: PanelComponent | undefined;
|
|
onClose: () => Promise<void>;
|
|
}
|
|
|
|
function EditorPanelHeader({currentPanel, onClose}: PanelHeaderProps): React.JSX.Element {
|
|
return (
|
|
<PanelHeader
|
|
title={currentPanel?.title ?? ''}
|
|
description={currentPanel?.description ?? ''}
|
|
badge={currentPanel?.badge ?? ''}
|
|
icon={currentPanel?.icon}
|
|
callBackAction={onClose}
|
|
/>
|
|
);
|
|
}
|
|
|
|
export default function ComposerRightBar(): React.JSX.Element {
|
|
const {book} = useContext(BookContext);
|
|
const t = useTranslations();
|
|
const {isCurrentlyOffline} = useContext<OfflineContextType>(OfflineContext);
|
|
|
|
const [panelHidden, setPanelHidden] = useState<boolean>(false);
|
|
const [currentPanel, setCurrentPanel] = useState<PanelComponent | undefined>();
|
|
const [showAbout, setShowAbout] = useState<boolean>(false);
|
|
|
|
function togglePanel(component: PanelComponent): void {
|
|
if (panelHidden) {
|
|
if (currentPanel?.id === component.id) {
|
|
setPanelHidden(!panelHidden);
|
|
return;
|
|
}
|
|
} else {
|
|
setPanelHidden(true);
|
|
}
|
|
}
|
|
|
|
const editorComponents: PanelComponent[] = [
|
|
{
|
|
id: 1,
|
|
title: t("composerRightBar.editorComponents.quillSense.title"),
|
|
description: t("composerRightBar.editorComponents.quillSense.description"),
|
|
badge: t("composerRightBar.editorComponents.quillSense.badge"),
|
|
icon: faFeather
|
|
},
|
|
{
|
|
id: 2,
|
|
title: t("composerRightBar.editorComponents.worlds.title"),
|
|
description: t("composerRightBar.editorComponents.worlds.description"),
|
|
badge: t("composerRightBar.editorComponents.worlds.badge"),
|
|
icon: faGlobe
|
|
},
|
|
{
|
|
id: 3,
|
|
title: t("composerRightBar.editorComponents.locations.title"),
|
|
description: t("composerRightBar.editorComponents.locations.description"),
|
|
badge: t("composerRightBar.editorComponents.locations.badge"),
|
|
icon: faMapMarkerAlt
|
|
},
|
|
{
|
|
id: 4,
|
|
title: t("composerRightBar.editorComponents.characters.title"),
|
|
description: t("composerRightBar.editorComponents.characters.description"),
|
|
badge: t("composerRightBar.editorComponents.characters.badge"),
|
|
icon: faUsers
|
|
},
|
|
{
|
|
id: 5,
|
|
title: t("composerRightBar.editorComponents.spells.title"),
|
|
description: t("composerRightBar.editorComponents.spells.description"),
|
|
badge: t("composerRightBar.editorComponents.spells.badge"),
|
|
icon: faHatWizard
|
|
},
|
|
];
|
|
|
|
const homeComponents: PanelComponent[] = [
|
|
{
|
|
id: 1,
|
|
title: t("composerRightBar.homeComponents.about.title"),
|
|
description: t("composerRightBar.homeComponents.about.description"),
|
|
badge: t("composerRightBar.homeComponents.about.badge"),
|
|
icon: faInfoCircle,
|
|
action: function (): void {
|
|
setShowAbout(true);
|
|
}
|
|
},
|
|
{
|
|
id: 2,
|
|
title: t("composerRightBar.homeComponents.facebook.title"),
|
|
description: t("composerRightBar.homeComponents.facebook.description"),
|
|
badge: t("composerRightBar.homeComponents.facebook.badge"),
|
|
icon: faFacebook,
|
|
action: function (): Promise<void> {
|
|
return window.electron.openExternal('https://www.facebook.com/profile.php?id=61562628720878');
|
|
}
|
|
},
|
|
{
|
|
id: 3,
|
|
title: t("composerRightBar.homeComponents.discord.title"),
|
|
description: t("composerRightBar.homeComponents.discord.description"),
|
|
badge: t("composerRightBar.homeComponents.discord.badge"),
|
|
icon: faDiscord,
|
|
action: function (): Promise<void> {
|
|
return window.electron.openExternal('https://discord.gg/CHXRPvmaXm');
|
|
}
|
|
}
|
|
];
|
|
|
|
function disabled(componentId: number): boolean {
|
|
return book === null;
|
|
}
|
|
|
|
useEffect(function (): void {
|
|
if (!book) {
|
|
setCurrentPanel(undefined);
|
|
setPanelHidden(false);
|
|
}
|
|
}, [book]);
|
|
|
|
async function handleClosePanel(): Promise<void> {
|
|
setPanelHidden(!panelHidden);
|
|
}
|
|
|
|
return (
|
|
<div id="right-panel-container" className="flex transition-all duration-300">
|
|
{panelHidden && (
|
|
<div id="right-panel"
|
|
className="bg-tertiary/95 backdrop-blur-sm border-l border-secondary/50 min-w-[450px] max-w-[450px] h-full transition-all duration-300 overflow-hidden shadow-2xl">
|
|
<div className="flex flex-col h-full">
|
|
<EditorPanelHeader
|
|
currentPanel={currentPanel}
|
|
onClose={handleClosePanel}
|
|
/>
|
|
<div className="flex-grow overflow-auto">
|
|
<PanelContent currentPanelId={currentPanel?.id}/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
<div className="bg-tertiary border-l border-secondary/50 p-3 flex flex-col space-y-3 shadow-xl">
|
|
{book ? editorComponents.filter(function (component: PanelComponent): boolean {
|
|
// Masquer QuillSense (id=1) si offline, livre local ou desactive pour ce livre
|
|
if (component.id === 1) {
|
|
if (isCurrentlyOffline() || book?.localBook) {
|
|
return false;
|
|
}
|
|
if (book.quillsenseEnabled === false) {
|
|
return false;
|
|
}
|
|
}
|
|
// Masquer Worlds (id=2) si desactive pour ce livre
|
|
if (component.id === 2 && !book?.tools?.worlds) {
|
|
return false;
|
|
}
|
|
// Masquer Locations (id=3) si desactive pour ce livre
|
|
if (component.id === 3 && !book?.tools?.locations) {
|
|
return false;
|
|
}
|
|
// Masquer Characters (id=4) si desactive pour ce livre
|
|
if (component.id === 4 && !book?.tools?.characters) {
|
|
return false;
|
|
}
|
|
// Masquer Spells (id=5) si desactive pour ce livre
|
|
if (component.id === 5 && !book?.tools?.spells) {
|
|
return false;
|
|
}
|
|
return true;
|
|
}).map(function (component: PanelComponent) {
|
|
return (
|
|
<button
|
|
key={component.id}
|
|
disabled={disabled(component.id)}
|
|
onClick={function (): void {
|
|
togglePanel(component);
|
|
setCurrentPanel(component);
|
|
}}
|
|
className={`group relative p-3 rounded-xl transition-all duration-200 ${
|
|
disabled(component.id)
|
|
? 'bg-secondary/10 text-muted cursor-not-allowed opacity-40'
|
|
: panelHidden && currentPanel?.id === component.id
|
|
? 'bg-primary text-text-primary shadow-lg shadow-primary/30 scale-105'
|
|
: 'bg-secondary/30 text-muted hover:text-text-primary hover:bg-secondary hover:shadow-md hover:scale-105'
|
|
}`}
|
|
title={component.title}
|
|
>
|
|
<FontAwesomeIcon icon={component.icon}
|
|
className="w-4 h-4 transition-transform duration-200 group-hover:scale-110"/>
|
|
{panelHidden && currentPanel?.id === component.id && (
|
|
<div className="absolute -left-1 top-1/2 -translate-y-1/2 w-1 h-8 bg-primary rounded-r-full"></div>
|
|
)}
|
|
</button>
|
|
);
|
|
}) : homeComponents.map(function (component: PanelComponent) {
|
|
return (
|
|
<button
|
|
key={component.id}
|
|
onClick={component.action ?? function (): void {}}
|
|
className={`group relative p-3 rounded-xl transition-all duration-200 ${panelHidden && currentPanel?.id === component.id
|
|
? 'bg-primary text-text-primary shadow-lg shadow-primary/30 scale-105'
|
|
: 'bg-secondary/30 text-muted hover:text-text-primary hover:bg-secondary hover:shadow-md hover:scale-105'}`}
|
|
title={component.title}
|
|
>
|
|
<FontAwesomeIcon icon={component.icon}
|
|
className="w-4 h-4 transition-transform duration-200 group-hover:scale-110"/>
|
|
</button>
|
|
);
|
|
})}
|
|
</div>
|
|
{showAbout && <AboutEditors onClose={function (): void {
|
|
setShowAbout(false);
|
|
}}/>}
|
|
</div>
|
|
);
|
|
}
|