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/book/settings/story/act/ActChaptersSection.tsx
+++ b/components/book/settings/story/act/ActChaptersSection.tsx
@@ -0,0 +1,93 @@
+import React, {useState} from 'react';
+import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
+import {faChevronDown, faChevronUp} from '@fortawesome/free-solid-svg-icons';
+import {ActChapter, ChapterListProps} from '@/lib/models/Chapter';
+import {SelectBoxProps} from '@/shared/interface';
+import ActChapterItem from './ActChapter';
+import InputField from '@/components/form/InputField';
+import SelectBox from '@/components/form/SelectBox';
+import {useTranslations} from 'next-intl';
+
+interface ActChaptersSectionProps {
+    actId: number;
+    chapters: ActChapter[];
+    mainChapters: ChapterListProps[];
+    onLinkChapter: (actId: number, chapterId: string) => Promise<void>;
+    onUpdateChapterSummary: (chapterId: string, summary: string) => void;
+    onUnlinkChapter: (chapterInfoId: string, chapterId: string) => Promise<void>;
+    sectionKey: string;
+    isExpanded: boolean;
+    onToggleSection: (sectionKey: string) => void;
+}
+
+export default function ActChaptersSection({
+                                               actId,
+                                               chapters,
+                                               mainChapters,
+                                               onLinkChapter,
+                                               onUpdateChapterSummary,
+                                               onUnlinkChapter,
+                                               sectionKey,
+                                               isExpanded,
+                                               onToggleSection,
+                                           }: ActChaptersSectionProps) {
+    const t = useTranslations('actComponent');
+    const [selectedChapterId, setSelectedChapterId] = useState<string>('');
+    
+    function mainChaptersData(): SelectBoxProps[] {
+        return mainChapters.map((chapter: ChapterListProps): SelectBoxProps => ({
+            value: chapter.chapterId,
+            label: `${chapter.chapterOrder}. ${chapter.title}`,
+        }));
+    }
+    
+    return (
+        <div className="mb-4">
+            <button
+                className="flex justify-between items-center w-full bg-secondary/50 p-3 rounded-xl text-left hover:bg-secondary transition-all duration-200 shadow-sm"
+                onClick={(): void => onToggleSection(sectionKey)}
+            >
+                <span className="font-bold text-text-primary">{t('chapters')}</span>
+                <FontAwesomeIcon
+                    icon={isExpanded ? faChevronUp : faChevronDown}
+                    className="text-text-primary w-3.5 h-3.5"
+                />
+            </button>
+            
+            {isExpanded && (
+                <div className="p-2">
+                    {chapters && chapters.length > 0 ? (
+                        chapters.map((chapter: ActChapter) => (
+                            <ActChapterItem
+                                key={`chapter-${chapter.chapterInfoId}`}
+                                chapter={chapter}
+                                onUpdateSummary={(chapterId, summary) =>
+                                    onUpdateChapterSummary(chapterId, summary)
+                                }
+                                onUnlink={(chapterInfoId, chapterId) =>
+                                    onUnlinkChapter(chapterInfoId, chapterId)
+                                }
+                            />
+                        ))
+                    ) : (
+                        <p className="text-text-secondary text-center text-sm p-2">
+                            {t('noLinkedChapter')}
+                        </p>
+                    )}
+                    <InputField
+                        addButtonCallBack={(): Promise<void> => onLinkChapter(actId, selectedChapterId)}
+                        input={
+                            <SelectBox
+                                defaultValue={null}
+                                onChangeCallBack={(e) => setSelectedChapterId(e.target.value)}
+                                data={mainChaptersData()}
+                                placeholder={t('selectChapterPlaceholder')}
+                            />
+                        }
+                        isAddButtonDisabled={!selectedChapterId}
+                    />
+                </div>
+            )}
+        </div>
+    );
+}