Add components for Act management and integrate Electron setup

components/CreditMeters.tsx

@@ -0,0 +1,30 @@
+import React, {useContext} from "react";
+import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
+import {faCoins, faDollarSign} from "@fortawesome/free-solid-svg-icons";
+import {AIUsageContext, AIUsageContextProps} from "@/context/AIUsageContext";
+
+export default function CreditCounter({isCredit}: { isCredit: boolean }) {
+    const {totalCredits, totalPrice} = useContext<AIUsageContextProps>(AIUsageContext)
+
+    if (isCredit) {
+        return (
+            <div
+                className="flex items-center space-x-2 bg-secondary/50 rounded-xl px-3 py-2 border border-secondary/50 shadow-sm">
+                <FontAwesomeIcon icon={faCoins} className="w-4 h-4 text-warning"/>
+                <span className="text-sm text-text-primary font-medium">
+                    {Math.round(totalCredits)} crédits
+                </span>
+            </div>
+        );
+    }
+
+    return (
+        <div
+            className="flex items-center space-x-2 bg-secondary/50 rounded-xl px-3 py-2 border border-secondary/50 shadow-sm">
+            <FontAwesomeIcon icon={faDollarSign} className="w-4 h-4 text-primary"/>
+            <span className="text-sm text-text-primary font-medium">
+                {totalPrice ? totalPrice.toFixed(2) : '0.00'}
+            </span>
+        </div>
+    );
+}