Add components for Act management and integrate Electron setup

components/CollapsableArea.tsx

@@ -0,0 +1,52 @@
+import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
+import {faChevronDown, faChevronUp, IconDefinition} from "@fortawesome/free-solid-svg-icons";
+import React from "react";
+
+interface CollapsableAreaProps {
+    title: string;
+    children: React.ReactNode;
+    icon?: IconDefinition;
+}
+
+export default function CollapsableArea(
+    {
+        title,
+        children,
+        icon,
+    }: CollapsableAreaProps) {
+    const [isExpanded, setIsExpanded] = React.useState(false);
+
+    return (
+        <div
+            className="bg-tertiary/90 backdrop-blur-sm rounded-xl p-4 border border-secondary/50 mb-4 shadow-md hover:shadow-lg transition-all duration-200">
+            <button
+                className="flex justify-between items-center w-full text-left group hover:scale-[1.02] transition-all duration-200"
+                    onClick={() => setIsExpanded(!isExpanded)}>
+                <div className="flex items-center">
+                    {
+                        icon && (
+                            <div
+                                className="w-8 h-8 rounded-full bg-primary flex items-center justify-center mr-2 shadow-md group-hover:shadow-lg group-hover:scale-110 transition-all duration-200">
+                                <FontAwesomeIcon
+                                    icon={icon}
+                                    className="text-white w-4 h-4 group-hover:rotate-12 transition-transform duration-200"
+                                />
+                            </div>
+                        )
+                    }
+                    <span className="text-text-primary font-bold">{title}</span>
+                </div>
+                <FontAwesomeIcon
+                    icon={isExpanded ? faChevronUp : faChevronDown}
+                    className="text-primary w-5 h-5 group-hover:scale-110 transition-all duration-200"
+                />
+            </button>
+
+            {isExpanded && (
+                <div className="mt-4 p-3 bg-secondary/20 rounded-lg border border-secondary/30 animate-fadeIn">
+                    {children}
+                </div>
+            )}
+        </div>
+    );
+}