Add components for Act management and integrate Electron setup

components/CollapsableButton.tsx

@@ -0,0 +1,33 @@
+import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
+import React from "react";
+import {IconDefinition} from "@fortawesome/fontawesome-svg-core";
+
+interface CollapsableButtonProps {
+    showCollapsable: boolean;
+    text: string;
+    onClick: () => void;
+    icon?: IconDefinition;
+}
+
+export default function CollapsableButton(
+    {
+        showCollapsable,
+        text,
+        icon,
+        onClick
+    }: CollapsableButtonProps) {
+    return (
+        <button
+            onClick={onClick}
+            className={`group px-4 py-2 rounded-lg mr-2 transition-all duration-200 flex items-center gap-2 ${
+                showCollapsable
+                    ? 'bg-primary/20 text-primary border border-primary/40 shadow-md shadow-primary/20 scale-105'
+                    : 'bg-secondary/30 text-muted hover:text-text-primary hover:bg-secondary hover:shadow-sm hover:scale-105'
+            }`}
+        >
+            {icon && <FontAwesomeIcon icon={icon}
+                                      className="w-4 h-4 transition-transform duration-200 group-hover:scale-110"/>}
+            <span className={'hidden lg:block text-sm font-medium'}>{text}</span>
+        </button>
+    )
+}