Add components for Act management and integrate Electron setup

2025-11-16 11:00:04 -05:00
parent e192b6dcc2
commit 8167948881
97 changed files with 25378 additions and 3 deletions
--- a/components/leftbar/ScribeLeftBar.tsx
+++ b/components/leftbar/ScribeLeftBar.tsx
@@ -0,0 +1,137 @@
+import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
+import {faBookMedical, faBookOpen, faFeather} from "@fortawesome/free-solid-svg-icons";
+import React, {useContext, useState} from "react";
+import {BookContext} from "@/context/BookContext";
+import ScribeChapterComponent from "@/components/leftbar/ScribeChapterComponent";
+import PanelHeader from "@/components/PanelHeader";
+import {PanelComponent} from "@/lib/models/Editor";
+import AddNewBookForm from "@/components/book/AddNewBookForm";
+import ShortStoryGenerator from "@/components/ShortStoryGenerator";
+import {SessionContext} from "@/context/SessionContext";
+import {useTranslations} from "next-intl";
+
+export default function ScribeLeftBar() {
+    const {book} = useContext(BookContext);
+    const {session} = useContext(SessionContext);
+    const t = useTranslations();
+    
+    const [panelHidden, setPanelHidden] = useState<boolean>(false);
+    
+    const [currentPanel, setCurrentPanel] = useState<PanelComponent>();
+    
+    const [showAddNewBook, setShowAddNewBook] = useState<boolean>(false);
+    const [showGenerateShortModal, setShowGenerateShortModal] = useState<boolean>(false)
+    
+    const editorComponents: PanelComponent[] = [
+        {
+            id: 1,
+            title: t("scribeLeftBar.editorComponents.structure.title"),
+            description: t("scribeLeftBar.editorComponents.structure.description"),
+            badge: t("scribeLeftBar.editorComponents.structure.badge"),
+            icon: faBookOpen
+        }
+        /*
+        {
+            id: 2,
+            title: 'Ligne directive',
+            icon: faBookmark,
+            badge: 'LD',
+            description: 'Ligne directrice pour ce chapitre.'
+        }, {
+            id: 3,
+            title: 'Statistique',
+            icon: faChartLine,
+            badge: 'STATS',
+            description: 'Vérification des verbes'
+        }*/
+    ]
+    
+    const homeComponents: PanelComponent[] = [
+        {
+            id: 1,
+            title: t("scribeLeftBar.homeComponents.addBook.title"),
+            description: t("scribeLeftBar.homeComponents.addBook.description"),
+            badge: t("scribeLeftBar.homeComponents.addBook.badge"),
+            icon: faBookMedical
+        }, {
+            id: 2,
+            title: t("scribeLeftBar.homeComponents.generateStory.title"),
+            icon: faFeather,
+            badge: t("scribeLeftBar.homeComponents.generateStory.badge"),
+            description: t("scribeLeftBar.homeComponents.generateStory.description")
+        },
+    ]
+    
+    function togglePanel(component: PanelComponent): void {
+        if (panelHidden) {
+            if (currentPanel?.id === component.id) {
+                setPanelHidden(!panelHidden);
+                return;
+            }
+        } else {
+            setPanelHidden(true);
+        }
+    }
+    
+    return (
+        <div id="left-panel-container" data-guide={"left-panel-container"} className="flex transition-all duration-300">
+            <div className="bg-tertiary border-r border-secondary/50 p-3 flex flex-col space-y-3 shadow-xl">
+                {book ? editorComponents.map(component => (
+                    <button
+                        key={component.id}
+                        onClick={(): void => {
+                            togglePanel(component);
+                            setCurrentPanel(component);
+                        }}
+                        title={component.title}
+                        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'
+                            : 'bg-secondary/30 text-muted hover:text-text-primary hover:bg-secondary hover:shadow-md'}`}
+                    >
+                        <FontAwesomeIcon icon={component.icon}
+                                         className={'w-5 h-5 transition-transform duration-200'}/>
+                        {panelHidden && currentPanel?.id === component.id && (
+                            <div
+                                className="absolute -right-1 top-1/2 -translate-y-1/2 w-1 h-8 bg-primary rounded-l-full"></div>
+                        )}
+                    </button>
+                )) : (
+                    homeComponents
+                        .map((component: PanelComponent) => (
+                            <button
+                                key={component.id}
+                                onClick={() => component.id === 1 ? setShowAddNewBook(true) : component.id === 2 ? setShowGenerateShortModal(true) : session.user?.groupId && session.user?.groupId === 1}
+                                title={component.title}
+                                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'
+                                    : 'bg-secondary/30 text-muted hover:text-text-primary hover:bg-secondary hover:shadow-md'}`}
+                            >
+                                <FontAwesomeIcon icon={component.icon}
+                                                 className={'w-5 h-5 transition-transform duration-200'}/>
+                            </button>
+                        ))
+                )}
+            </div>
+
+            {panelHidden && (
+                <div id="left-panel"
+                     className="bg-tertiary/95 backdrop-blur-sm border-r border-secondary/50 h-full min-w-[320px] transition-all duration-300 overflow-y-auto shadow-2xl flex flex-col">
+                    <PanelHeader title={currentPanel?.title ?? ''} description={``} badge={``}
+                                 icon={currentPanel?.icon}
+                                 callBackAction={async () => setPanelHidden(!panelHidden)}/>
+                    {currentPanel?.id === 1 && (
+                        <ScribeChapterComponent/>
+                    )}
+                </div>
+            )}
+            {
+                showAddNewBook &&
+                <AddNewBookForm setCloseForm={setShowAddNewBook}/>
+            }
+            {
+                showGenerateShortModal &&
+                <ShortStoryGenerator onClose={() => setShowGenerateShortModal(false)}/>
+            }
+        </div>
+    )
+}