Add components for Act management and integrate Electron setup

components/book/settings/story/act/ActChapter.tsx

@@ -0,0 +1,37 @@
+import React, {ChangeEvent} from 'react';
+import {faTrash} from '@fortawesome/free-solid-svg-icons';
+import {ActChapter} from '@/lib/models/Chapter';
+import InputField from '@/components/form/InputField';
+import TexteAreaInput from '@/components/form/TexteAreaInput';
+import {useTranslations} from 'next-intl';
+
+interface ActChapterItemProps {
+    chapter: ActChapter;
+    onUpdateSummary: (chapterId: string, summary: string) => void;
+    onUnlink: (chapterInfoId: string, chapterId: string) => Promise<void>;
+}
+
+export default function ActChapterItem({chapter, onUpdateSummary, onUnlink}: ActChapterItemProps) {
+    const t = useTranslations('actComponent');
+    
+    return (
+        <div
+            className="bg-secondary/20 p-4 rounded-xl mb-3 border border-secondary/30 shadow-sm hover:shadow-md transition-all duration-200">
+            <InputField
+                input={
+                    <TexteAreaInput
+                        value={chapter.summary || ''}
+                        setValue={(e: ChangeEvent<HTMLTextAreaElement>) =>
+                            onUpdateSummary(chapter.chapterId, e.target.value)
+                        }
+                        placeholder={t('chapterSummaryPlaceholder')}
+                    />
+                }
+                actionIcon={faTrash}
+                fieldName={chapter.title}
+                action={(): Promise<void> => onUnlink(chapter.chapterInfoId, chapter.chapterId)}
+                actionLabel={t('remove')}
+            />
+        </div>
+    );
+}