Add components for Act management and integrate Electron setup

components/PanelHeader.tsx

@@ -0,0 +1,88 @@
+import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
+import {faSave, faX} from "@fortawesome/free-solid-svg-icons";
+import React from "react";
+import {IconDefinition} from "@fortawesome/fontawesome-svg-core";
+
+interface PanelHeaderProps {
+    title: string;
+    badge?: string;
+    description: string;
+    icon?: IconDefinition;
+    callBackAction?: () => Promise<void>;
+    secondActionIcon?: IconDefinition;
+    secondActionCallback?: () => Promise<void>;
+    actionIcon?: IconDefinition;
+    actionText?: string;
+}
+
+export default function PanelHeader(
+    {
+        title,
+        badge,
+        description,
+        icon,
+        callBackAction,
+        secondActionCallback,
+        secondActionIcon = faSave,
+        actionIcon = faX,
+        actionText
+    }: PanelHeaderProps) {
+    return (
+        <div className={'border-b border-primary/30 shrink-0 bg-gradient-to-r from-dark-background/50 to-transparent'}>
+            <div className="flex justify-between items-center p-4">
+                <div className="flex-1">
+                    <h2 className="text-lg lg:text-xl text-primary font-bold flex items-center gap-3 flex-wrap">
+                        {
+                            icon && (
+                                <div className="w-10 h-10 rounded-lg bg-primary/10 flex items-center justify-center">
+                                    <FontAwesomeIcon icon={icon} className="text-primary w-5 h-5"/>
+                                </div>
+                            )
+                        }
+                        <span className="tracking-wide">{title}</span>
+                        {
+                            badge &&
+                            <span
+                                className="text-xs bg-primary/20 text-primary px-3 py-1 rounded-full font-medium border border-primary/30">{badge}</span>
+                        }
+                    </h2>
+                    {description && <p className="text-text-secondary text-xs mt-2 ml-13">{description}</p>}
+                </div>
+                <div className="flex items-center gap-2">
+                    {
+                        actionText && (
+                            <button onClick={callBackAction}
+                                    className="group text-text-primary px-4 py-2 text-sm bg-secondary/50 rounded-xl hover:bg-secondary transition-all border border-secondary/50 hover:border-primary/30 flex items-center gap-2 hover:shadow-md hover:scale-105">
+                                <div
+                                    className="w-8 h-8 bg-primary rounded-lg flex items-center justify-center transition-transform group-hover:scale-110">
+                                    <FontAwesomeIcon icon={actionIcon} className="w-4 h-4"/>
+                                </div>
+                                {
+                                    actionText && <span className="font-medium">{actionText}</span>
+                                }
+                            </button>
+                        )
+                    }
+                    {
+                        secondActionCallback && (
+                            <button onClick={secondActionCallback}
+                                    className="group w-10 h-10 bg-primary/10 hover:bg-primary/20 rounded-lg flex items-center justify-center transition-all hover:shadow-md hover:scale-110 border border-primary/30">
+                                <FontAwesomeIcon icon={secondActionIcon}
+                                                 className="w-4 h-4 text-primary transition-transform group-hover:scale-110"/>
+                            </button>
+                        )
+                    }
+                    {
+                        callBackAction && actionIcon && !actionText && (
+                            <button onClick={callBackAction}
+                                    className="group text-muted hover:text-text-primary transition-all hover:scale-110">
+                                <FontAwesomeIcon icon={actionIcon}
+                                                 className={'w-5 h-5 transition-transform group-hover:rotate-90'}/>
+                            </button>
+                        )
+                    }
+                </div>
+            </div>
+        </div>
+    );
+}