Changed icons based on wether we are at the main or at the store page

src/frontend/package-lock.json

@@ -5064,15 +5064,15 @@
       }
     },
     "node_modules/deep-equal": {
-      "version": "2.2.2",
-      "resolved": "https://registry.npmjs.org/deep-equal/-/deep-equal-2.2.2.tgz",
-      "integrity": "sha512-xjVyBf0w5vH0I42jdAZzOKVldmPgSulmiyPRywoyq7HXC9qdgo17kxJE+rdnif5Tz6+pIrpJI8dCpMNLIGkUiA==",
+      "version": "2.2.3",
+      "resolved": "https://registry.npmjs.org/deep-equal/-/deep-equal-2.2.3.tgz",
+      "integrity": "sha512-ZIwpnevOurS8bpT4192sqAowWM76JDKSHYzMLty3BZGSswgq6pBaH3DhCSW5xVAZICZyKdOBPjwww5wfgT/6PA==",
       "dev": true,
       "dependencies": {
         "array-buffer-byte-length": "^1.0.0",
-        "call-bind": "^1.0.2",
+        "call-bind": "^1.0.5",
         "es-get-iterator": "^1.1.3",
-        "get-intrinsic": "^1.2.1",
+        "get-intrinsic": "^1.2.2",
         "is-arguments": "^1.1.1",
         "is-array-buffer": "^3.0.2",
         "is-date-object": "^1.0.5",
@@ -5082,11 +5082,14 @@
         "object-is": "^1.1.5",
         "object-keys": "^1.1.1",
         "object.assign": "^4.1.4",
-        "regexp.prototype.flags": "^1.5.0",
+        "regexp.prototype.flags": "^1.5.1",
         "side-channel": "^1.0.4",
         "which-boxed-primitive": "^1.0.2",
         "which-collection": "^1.0.1",
-        "which-typed-array": "^1.1.9"
+        "which-typed-array": "^1.1.13"
+      },
+      "engines": {
+        "node": ">= 0.4"
       },
       "funding": {
         "url": "https://github.com/sponsors/ljharb"

src/frontend/src/pages/MainPage/components/added-components/index.tsx

@@ -34,7 +34,7 @@ export default function AddedComponents(): JSX.Element {
   return (
     <CardsWrapComponent isLoading={loading}>
       {data.map((item, idx) => (
-        <MarketCardComponent key={idx} data={item} />
+        <MarketCardComponent key={idx} data={item} installable />
       ))}
     </CardsWrapComponent>
   );

src/frontend/src/pages/StorePage/components/market-card.tsx

@@ -27,13 +27,16 @@ export const MarketCardComponent = ({
   data,
   authorized = true,
   disabled = false,
+  installable = false,
 }: {
   data: storeComponent;
   authorized?: boolean;
   disabled?: boolean;
+  installable?: boolean;
 }) => {
   const { savedFlows } = useContext(StoreContext);
   const [added, setAdded] = useState(savedFlows.has(data.id) ? true : false);
+  const [installed, setInstalled] = useState(false);
   const [loading, setLoading] = useState(false);
   const { addFlow } = useContext(TabsContext);
   const { setSuccessData, setErrorData } = useContext(alertContext);
@@ -76,6 +79,15 @@ export const MarketCardComponent = ({
     );
   }
 
+  function handleInstall() {
+    console.log("installed");
+    setLoading(true);
+    setTimeout(() => {
+      setInstalled(true);
+      setLoading(false);
+    }, 500);
+  }
+
   function handleLike() {
     if (liked_by_user !== undefined || liked_by_user !== null) {
       const temp = liked_by_user;
@@ -119,9 +131,7 @@ export const MarketCardComponent = ({
         <CardHeader>
           <div>
             <CardTitle className="flex w-full items-center justify-between gap-3 text-xl">
-              <span className="flex w-full items-center gap-2 word-break-break-word">
-                {data.name}
-              </span>
+              <span className="w-full truncate">{data.name}</span>
               <div className="flex gap-3">
                 {!data.is_component && (
                   <ShadTooltip content="Components">
@@ -202,7 +212,9 @@ export const MarketCardComponent = ({
                 content={
                   authorized
                     ? added
-                      ? "Added to Account"
+                      ? installable
+                        ? "Install Locally"
+                        : "Added to Account"
                       : "Add to Account"
                     : "Please review your API key."
                 }
@@ -220,14 +232,31 @@ export const MarketCardComponent = ({
                     }
                     if (!added) {
                       handleAdd();
+                    } else if (installable) {
+                      handleInstall();
                     }
                   }}
                 >
                   <IconComponent
-                    name={loading ? "Loader2" : added ? "Check" : "Plus"}
+                    name={
+                      loading
+                        ? "Loader2"
+                        : added && installable && !installed
+                        ? "ExternalLink"
+                        : added
+                        ? "Check"
+                        : "Plus"
+                    }
                     className={classNames(
-                      "h-6 w-6",
-                      added ? "text-chat-send" : "",
+                      !added && !installable && !loading
+                        ? "h-6 w-6"
+                        : "h-5 w-5",
+                      ((added && !installable) || installed) && !loading
+                        ? "text-chat-send"
+                        : "",
+                      added && installable && !installed && !loading
+                        ? "text-high-indigo"
+                        : "",
                       loading ? " animate-spin" : "",
                       !authorized ? " text-ring" : ""
                     )}