Merge remote-tracking branch 'origin/mainPage' into db

package.json

@@ -1,5 +1,7 @@
 {
   "dependencies": {
+    "@radix-ui/react-avatar": "^1.0.3",
+    "@radix-ui/react-dropdown-menu": "^2.0.5",
     "vite-plugin-svgr": "^3.2.0"
   }
 }

src/frontend/package-lock.json

@@ -13,7 +13,11 @@
                 "@headlessui/react": "^1.7.10",
                 "@heroicons/react": "^2.0.15",
                 "@mui/material": "^5.11.9",
-                "@radix-ui/react-tooltip": "^1.0.6",
+                "@radix-ui/react-dropdown-menu": "^2.0.5",
+                "@radix-ui/react-menubar": "^1.0.3",
+                "@radix-ui/react-separator": "^1.0.3",
+                "@radix-ui/react-slot": "^1.0.2",
+                "@radix-ui/react-tabs": "^1.0.4",
                 "@tabler/icons-react": "^2.18.0",
                 "@tailwindcss/forms": "^0.5.3",
                 "@tailwindcss/line-clamp": "^0.4.4",
@@ -1323,6 +1327,32 @@
                 }
             }
         },
+        "node_modules/@radix-ui/react-collection": {
+            "version": "1.0.3",
+            "resolved": "https://registry.npmjs.org/@radix-ui/react-collection/-/react-collection-1.0.3.tgz",
+            "integrity": "sha512-3SzW+0PW7yBBoQlT8wNcGtaxaD0XSu0uLUFgrtHY08Acx05TaHaOmVLR73c0j/cqpDy53KBMO7s0dx2wmOIDIA==",
+            "dependencies": {
+                "@babel/runtime": "^7.13.10",
+                "@radix-ui/react-compose-refs": "1.0.1",
+                "@radix-ui/react-context": "1.0.1",
+                "@radix-ui/react-primitive": "1.0.3",
+                "@radix-ui/react-slot": "1.0.2"
+            },
+            "peerDependencies": {
+                "@types/react": "*",
+                "@types/react-dom": "*",
+                "react": "^16.8 || ^17.0 || ^18.0",
+                "react-dom": "^16.8 || ^17.0 || ^18.0"
+            },
+            "peerDependenciesMeta": {
+                "@types/react": {
+                    "optional": true
+                },
+                "@types/react-dom": {
+                    "optional": true
+                }
+            }
+        },
         "node_modules/@radix-ui/react-compose-refs": {
             "version": "1.0.1",
             "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.0.1.tgz",
@@ -1357,6 +1387,23 @@
                 }
             }
         },
+        "node_modules/@radix-ui/react-direction": {
+            "version": "1.0.1",
+            "resolved": "https://registry.npmjs.org/@radix-ui/react-direction/-/react-direction-1.0.1.tgz",
+            "integrity": "sha512-RXcvnXgyvYvBEOhCBuddKecVkoMiI10Jcm5cTI7abJRAHYfFxeu+FBQs/DvdxSYucxR5mna0dNsL6QFlds5TMA==",
+            "dependencies": {
+                "@babel/runtime": "^7.13.10"
+            },
+            "peerDependencies": {
+                "@types/react": "*",
+                "react": "^16.8 || ^17.0 || ^18.0"
+            },
+            "peerDependenciesMeta": {
+                "@types/react": {
+                    "optional": true
+                }
+            }
+        },
         "node_modules/@radix-ui/react-dismissable-layer": {
             "version": "1.0.4",
             "resolved": "https://registry.npmjs.org/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.0.4.tgz",
@@ -1384,6 +1431,77 @@
                 }
             }
         },
+        "node_modules/@radix-ui/react-dropdown-menu": {
+            "version": "2.0.5",
+            "resolved": "https://registry.npmjs.org/@radix-ui/react-dropdown-menu/-/react-dropdown-menu-2.0.5.tgz",
+            "integrity": "sha512-xdOrZzOTocqqkCkYo8yRPCib5OkTkqN7lqNCdxwPOdE466DOaNl4N8PkUIlsXthQvW5Wwkd+aEmWpfWlBoDPEw==",
+            "dependencies": {
+                "@babel/runtime": "^7.13.10",
+                "@radix-ui/primitive": "1.0.1",
+                "@radix-ui/react-compose-refs": "1.0.1",
+                "@radix-ui/react-context": "1.0.1",
+                "@radix-ui/react-id": "1.0.1",
+                "@radix-ui/react-menu": "2.0.5",
+                "@radix-ui/react-primitive": "1.0.3",
+                "@radix-ui/react-use-controllable-state": "1.0.1"
+            },
+            "peerDependencies": {
+                "@types/react": "*",
+                "@types/react-dom": "*",
+                "react": "^16.8 || ^17.0 || ^18.0",
+                "react-dom": "^16.8 || ^17.0 || ^18.0"
+            },
+            "peerDependenciesMeta": {
+                "@types/react": {
+                    "optional": true
+                },
+                "@types/react-dom": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/@radix-ui/react-focus-guards": {
+            "version": "1.0.1",
+            "resolved": "https://registry.npmjs.org/@radix-ui/react-focus-guards/-/react-focus-guards-1.0.1.tgz",
+            "integrity": "sha512-Rect2dWbQ8waGzhMavsIbmSVCgYxkXLxxR3ZvCX79JOglzdEy4JXMb98lq4hPxUbLr77nP0UOGf4rcMU+s1pUA==",
+            "dependencies": {
+                "@babel/runtime": "^7.13.10"
+            },
+            "peerDependencies": {
+                "@types/react": "*",
+                "react": "^16.8 || ^17.0 || ^18.0"
+            },
+            "peerDependenciesMeta": {
+                "@types/react": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/@radix-ui/react-focus-scope": {
+            "version": "1.0.3",
+            "resolved": "https://registry.npmjs.org/@radix-ui/react-focus-scope/-/react-focus-scope-1.0.3.tgz",
+            "integrity": "sha512-upXdPfqI4islj2CslyfUBNlaJCPybbqRHAi1KER7Isel9Q2AtSJ0zRBZv8mWQiFXD2nyAJ4BhC3yXgZ6kMBSrQ==",
+            "dependencies": {
+                "@babel/runtime": "^7.13.10",
+                "@radix-ui/react-compose-refs": "1.0.1",
+                "@radix-ui/react-primitive": "1.0.3",
+                "@radix-ui/react-use-callback-ref": "1.0.1"
+            },
+            "peerDependencies": {
+                "@types/react": "*",
+                "@types/react-dom": "*",
+                "react": "^16.8 || ^17.0 || ^18.0",
+                "react-dom": "^16.8 || ^17.0 || ^18.0"
+            },
+            "peerDependenciesMeta": {
+                "@types/react": {
+                    "optional": true
+                },
+                "@types/react-dom": {
+                    "optional": true
+                }
+            }
+        },
         "node_modules/@radix-ui/react-id": {
             "version": "1.0.1",
             "resolved": "https://registry.npmjs.org/@radix-ui/react-id/-/react-id-1.0.1.tgz",
@@ -1402,6 +1520,78 @@
                 }
             }
         },
+        "node_modules/@radix-ui/react-menu": {
+            "version": "2.0.5",
+            "resolved": "https://registry.npmjs.org/@radix-ui/react-menu/-/react-menu-2.0.5.tgz",
+            "integrity": "sha512-Gw4f9pwdH+w5w+49k0gLjN0PfRDHvxmAgG16AbyJZ7zhwZ6PBHKtWohvnSwfusfnK3L68dpBREHpVkj8wEM7ZA==",
+            "dependencies": {
+                "@babel/runtime": "^7.13.10",
+                "@radix-ui/primitive": "1.0.1",
+                "@radix-ui/react-collection": "1.0.3",
+                "@radix-ui/react-compose-refs": "1.0.1",
+                "@radix-ui/react-context": "1.0.1",
+                "@radix-ui/react-direction": "1.0.1",
+                "@radix-ui/react-dismissable-layer": "1.0.4",
+                "@radix-ui/react-focus-guards": "1.0.1",
+                "@radix-ui/react-focus-scope": "1.0.3",
+                "@radix-ui/react-id": "1.0.1",
+                "@radix-ui/react-popper": "1.1.2",
+                "@radix-ui/react-portal": "1.0.3",
+                "@radix-ui/react-presence": "1.0.1",
+                "@radix-ui/react-primitive": "1.0.3",
+                "@radix-ui/react-roving-focus": "1.0.4",
+                "@radix-ui/react-slot": "1.0.2",
+                "@radix-ui/react-use-callback-ref": "1.0.1",
+                "aria-hidden": "^1.1.1",
+                "react-remove-scroll": "2.5.5"
+            },
+            "peerDependencies": {
+                "@types/react": "*",
+                "@types/react-dom": "*",
+                "react": "^16.8 || ^17.0 || ^18.0",
+                "react-dom": "^16.8 || ^17.0 || ^18.0"
+            },
+            "peerDependenciesMeta": {
+                "@types/react": {
+                    "optional": true
+                },
+                "@types/react-dom": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/@radix-ui/react-menubar": {
+            "version": "1.0.3",
+            "resolved": "https://registry.npmjs.org/@radix-ui/react-menubar/-/react-menubar-1.0.3.tgz",
+            "integrity": "sha512-GqjdxzYCjjKhcgEODDP8SrYfbWNh/Hm3lyuFkP5Q5IbX0QfXklLF1o1AqA3oTV2kulUgN/kOZVS92hIIShEgpA==",
+            "dependencies": {
+                "@babel/runtime": "^7.13.10",
+                "@radix-ui/primitive": "1.0.1",
+                "@radix-ui/react-collection": "1.0.3",
+                "@radix-ui/react-compose-refs": "1.0.1",
+                "@radix-ui/react-context": "1.0.1",
+                "@radix-ui/react-direction": "1.0.1",
+                "@radix-ui/react-id": "1.0.1",
+                "@radix-ui/react-menu": "2.0.5",
+                "@radix-ui/react-primitive": "1.0.3",
+                "@radix-ui/react-roving-focus": "1.0.4",
+                "@radix-ui/react-use-controllable-state": "1.0.1"
+            },
+            "peerDependencies": {
+                "@types/react": "*",
+                "@types/react-dom": "*",
+                "react": "^16.8 || ^17.0 || ^18.0",
+                "react-dom": "^16.8 || ^17.0 || ^18.0"
+            },
+            "peerDependenciesMeta": {
+                "@types/react": {
+                    "optional": true
+                },
+                "@types/react-dom": {
+                    "optional": true
+                }
+            }
+        },
         "node_modules/@radix-ui/react-popper": {
             "version": "1.1.2",
             "resolved": "https://registry.npmjs.org/@radix-ui/react-popper/-/react-popper-1.1.2.tgz",
@@ -1504,6 +1694,60 @@
                 }
             }
         },
+        "node_modules/@radix-ui/react-roving-focus": {
+            "version": "1.0.4",
+            "resolved": "https://registry.npmjs.org/@radix-ui/react-roving-focus/-/react-roving-focus-1.0.4.tgz",
+            "integrity": "sha512-2mUg5Mgcu001VkGy+FfzZyzbmuUWzgWkj3rvv4yu+mLw03+mTzbxZHvfcGyFp2b8EkQeMkpRQ5FiA2Vr2O6TeQ==",
+            "dependencies": {
+                "@babel/runtime": "^7.13.10",
+                "@radix-ui/primitive": "1.0.1",
+                "@radix-ui/react-collection": "1.0.3",
+                "@radix-ui/react-compose-refs": "1.0.1",
+                "@radix-ui/react-context": "1.0.1",
+                "@radix-ui/react-direction": "1.0.1",
+                "@radix-ui/react-id": "1.0.1",
+                "@radix-ui/react-primitive": "1.0.3",
+                "@radix-ui/react-use-callback-ref": "1.0.1",
+                "@radix-ui/react-use-controllable-state": "1.0.1"
+            },
+            "peerDependencies": {
+                "@types/react": "*",
+                "@types/react-dom": "*",
+                "react": "^16.8 || ^17.0 || ^18.0",
+                "react-dom": "^16.8 || ^17.0 || ^18.0"
+            },
+            "peerDependenciesMeta": {
+                "@types/react": {
+                    "optional": true
+                },
+                "@types/react-dom": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/@radix-ui/react-separator": {
+            "version": "1.0.3",
+            "resolved": "https://registry.npmjs.org/@radix-ui/react-separator/-/react-separator-1.0.3.tgz",
+            "integrity": "sha512-itYmTy/kokS21aiV5+Z56MZB54KrhPgn6eHDKkFeOLR34HMN2s8PaN47qZZAGnvupcjxHaFZnW4pQEh0BvvVuw==",
+            "dependencies": {
+                "@babel/runtime": "^7.13.10",
+                "@radix-ui/react-primitive": "1.0.3"
+            },
+            "peerDependencies": {
+                "@types/react": "*",
+                "@types/react-dom": "*",
+                "react": "^16.8 || ^17.0 || ^18.0",
+                "react-dom": "^16.8 || ^17.0 || ^18.0"
+            },
+            "peerDependenciesMeta": {
+                "@types/react": {
+                    "optional": true
+                },
+                "@types/react-dom": {
+                    "optional": true
+                }
+            }
+        },
         "node_modules/@radix-ui/react-slot": {
             "version": "1.0.2",
             "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.0.2.tgz",
@@ -1522,24 +1766,20 @@
                 }
             }
         },
-        "node_modules/@radix-ui/react-tooltip": {
+        "node_modules/@radix-ui/react-tabs": {
-            "version": "1.0.6",
+            "version": "1.0.4",
-            "resolved": "https://registry.npmjs.org/@radix-ui/react-tooltip/-/react-tooltip-1.0.6.tgz",
+            "resolved": "https://registry.npmjs.org/@radix-ui/react-tabs/-/react-tabs-1.0.4.tgz",
-            "integrity": "sha512-DmNFOiwEc2UDigsYj6clJENma58OelxD24O4IODoZ+3sQc3Zb+L8w1EP+y9laTuKCLAysPw4fD6/v0j4KNV8rg==",
+            "integrity": "sha512-egZfYY/+wRNCflXNHx+dePvnz9FbmssDTJBtgRfDY7e8SE5oIo3Py2eCB1ckAbh1Q7cQ/6yJZThJ++sgbxibog==",
             "dependencies": {
                 "@babel/runtime": "^7.13.10",
                 "@radix-ui/primitive": "1.0.1",
-                "@radix-ui/react-compose-refs": "1.0.1",
                 "@radix-ui/react-context": "1.0.1",
-                "@radix-ui/react-dismissable-layer": "1.0.4",
+                "@radix-ui/react-direction": "1.0.1",
                 "@radix-ui/react-id": "1.0.1",
-                "@radix-ui/react-popper": "1.1.2",
-                "@radix-ui/react-portal": "1.0.3",
                 "@radix-ui/react-presence": "1.0.1",
                 "@radix-ui/react-primitive": "1.0.3",
-                "@radix-ui/react-slot": "1.0.2",
+                "@radix-ui/react-roving-focus": "1.0.4",
-                "@radix-ui/react-use-controllable-state": "1.0.1",
+                "@radix-ui/react-use-controllable-state": "1.0.1"
-                "@radix-ui/react-visually-hidden": "1.0.3"
             },
             "peerDependencies": {
                 "@types/react": "*",
@@ -1662,29 +1902,6 @@
                 }
             }
         },
-        "node_modules/@radix-ui/react-visually-hidden": {
-            "version": "1.0.3",
-            "resolved": "https://registry.npmjs.org/@radix-ui/react-visually-hidden/-/react-visually-hidden-1.0.3.tgz",
-            "integrity": "sha512-D4w41yN5YRKtu464TLnByKzMDG/JlMPHtfZgQAu9v6mNakUqGUI9vUrfQKz8NK41VMm/xbZbh76NUTVtIYqOMA==",
-            "dependencies": {
-                "@babel/runtime": "^7.13.10",
-                "@radix-ui/react-primitive": "1.0.3"
-            },
-            "peerDependencies": {
-                "@types/react": "*",
-                "@types/react-dom": "*",
-                "react": "^16.8 || ^17.0 || ^18.0",
-                "react-dom": "^16.8 || ^17.0 || ^18.0"
-            },
-            "peerDependenciesMeta": {
-                "@types/react": {
-                    "optional": true
-                },
-                "@types/react-dom": {
-                    "optional": true
-                }
-            }
-        },
         "node_modules/@radix-ui/rect": {
             "version": "1.0.1",
             "resolved": "https://registry.npmjs.org/@radix-ui/rect/-/rect-1.0.1.tgz",
@@ -3025,6 +3242,17 @@
             "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
             "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q=="
         },
+        "node_modules/aria-hidden": {
+            "version": "1.2.3",
+            "resolved": "https://registry.npmjs.org/aria-hidden/-/aria-hidden-1.2.3.tgz",
+            "integrity": "sha512-xcLxITLe2HYa1cnYnwCjkOO1PqUHQpozB8x9AR0OgWN2woOBi5kSDVxKfd0b7sb1hw5qFeJhXm9H1nu3xSfLeQ==",
+            "dependencies": {
+                "tslib": "^2.0.0"
+            },
+            "engines": {
+                "node": ">=10"
+            }
+        },
         "node_modules/aria-query": {
             "version": "5.1.3",
             "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.1.3.tgz",
@@ -3706,6 +3934,11 @@
                 "node": ">=6"
             }
         },
+        "node_modules/detect-node-es": {
+            "version": "1.1.0",
+            "resolved": "https://registry.npmjs.org/detect-node-es/-/detect-node-es-1.1.0.tgz",
+            "integrity": "sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ=="
+        },
         "node_modules/didyoumean": {
             "version": "1.2.2",
             "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
@@ -4139,6 +4372,14 @@
                 "url": "https://github.com/sponsors/ljharb"
             }
         },
+        "node_modules/get-nonce": {
+            "version": "1.0.1",
+            "resolved": "https://registry.npmjs.org/get-nonce/-/get-nonce-1.0.1.tgz",
+            "integrity": "sha512-FJhYRoDaiatfEkUK8HKlicmu/3SGFD51q3itKDGoSTysQJBnfOcxU5GxnhE1E6soB76MbT0MBtnKJuXyAx+96Q==",
+            "engines": {
+                "node": ">=6"
+            }
+        },
         "node_modules/glob-parent": {
             "version": "6.0.2",
             "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
@@ -4490,6 +4731,14 @@
                 "node": ">= 0.4"
             }
         },
+        "node_modules/invariant": {
+            "version": "2.2.4",
+            "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz",
+            "integrity": "sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==",
+            "dependencies": {
+                "loose-envify": "^1.0.0"
+            }
+        },
         "node_modules/is-alphabetical": {
             "version": "1.0.4",
             "resolved": "https://registry.npmjs.org/is-alphabetical/-/is-alphabetical-1.0.4.tgz",
@@ -6673,6 +6922,51 @@
             "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
             "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w=="
         },
+        "node_modules/react-remove-scroll": {
+            "version": "2.5.5",
+            "resolved": "https://registry.npmjs.org/react-remove-scroll/-/react-remove-scroll-2.5.5.tgz",
+            "integrity": "sha512-ImKhrzJJsyXJfBZ4bzu8Bwpka14c/fQt0k+cyFp/PBhTfyDnU5hjOtM4AG/0AMyy8oKzOTR0lDgJIM7pYXI0kw==",
+            "dependencies": {
+                "react-remove-scroll-bar": "^2.3.3",
+                "react-style-singleton": "^2.2.1",
+                "tslib": "^2.1.0",
+                "use-callback-ref": "^1.3.0",
+                "use-sidecar": "^1.1.2"
+            },
+            "engines": {
+                "node": ">=10"
+            },
+            "peerDependencies": {
+                "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+                "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+            },
+            "peerDependenciesMeta": {
+                "@types/react": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/react-remove-scroll-bar": {
+            "version": "2.3.4",
+            "resolved": "https://registry.npmjs.org/react-remove-scroll-bar/-/react-remove-scroll-bar-2.3.4.tgz",
+            "integrity": "sha512-63C4YQBUt0m6ALadE9XV56hV8BgJWDmmTPY758iIJjfQKt2nYwoUrPk0LXRXcB/yIj82T1/Ixfdpdk68LwIB0A==",
+            "dependencies": {
+                "react-style-singleton": "^2.2.1",
+                "tslib": "^2.0.0"
+            },
+            "engines": {
+                "node": ">=10"
+            },
+            "peerDependencies": {
+                "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+                "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+            },
+            "peerDependenciesMeta": {
+                "@types/react": {
+                    "optional": true
+                }
+            }
+        },
         "node_modules/react-router": {
             "version": "6.8.1",
             "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.8.1.tgz",
@@ -6703,6 +6997,28 @@
                 "react-dom": ">=16.8"
             }
         },
+        "node_modules/react-style-singleton": {
+            "version": "2.2.1",
+            "resolved": "https://registry.npmjs.org/react-style-singleton/-/react-style-singleton-2.2.1.tgz",
+            "integrity": "sha512-ZWj0fHEMyWkHzKYUr2Bs/4zU6XLmq9HsgBURm7g5pAVfyn49DgUiNgY2d4lXRlYSiCif9YBGpQleewkcqddc7g==",
+            "dependencies": {
+                "get-nonce": "^1.0.0",
+                "invariant": "^2.2.4",
+                "tslib": "^2.0.0"
+            },
+            "engines": {
+                "node": ">=10"
+            },
+            "peerDependencies": {
+                "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+                "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+            },
+            "peerDependenciesMeta": {
+                "@types/react": {
+                    "optional": true
+                }
+            }
+        },
         "node_modules/react-syntax-highlighter": {
             "version": "15.5.0",
             "resolved": "https://registry.npmjs.org/react-syntax-highlighter/-/react-syntax-highlighter-15.5.0.tgz",
@@ -7615,6 +7931,11 @@
             "resolved": "https://registry.npmjs.org/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz",
             "integrity": "sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA=="
         },
+        "node_modules/tslib": {
+            "version": "2.5.2",
+            "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.5.2.tgz",
+            "integrity": "sha512-5svOrSA2w3iGFDs1HibEVBGbDrAY82bFQ3HZ3ixB+88nsbsWQoKqDRb5UBYAUPEzbBn6dAp5gRNXglySbx1MlA=="
+        },
         "node_modules/typescript": {
             "version": "5.0.4",
             "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.0.4.tgz",
@@ -7793,6 +8114,47 @@
                 "requires-port": "^1.0.0"
             }
         },
+        "node_modules/use-callback-ref": {
+            "version": "1.3.0",
+            "resolved": "https://registry.npmjs.org/use-callback-ref/-/use-callback-ref-1.3.0.tgz",
+            "integrity": "sha512-3FT9PRuRdbB9HfXhEq35u4oZkvpJ5kuYbpqhCfmiZyReuRgpnhDlbr2ZEnnuS0RrJAPn6l23xjFg9kpDM+Ms7w==",
+            "dependencies": {
+                "tslib": "^2.0.0"
+            },
+            "engines": {
+                "node": ">=10"
+            },
+            "peerDependencies": {
+                "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+                "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+            },
+            "peerDependenciesMeta": {
+                "@types/react": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/use-sidecar": {
+            "version": "1.1.2",
+            "resolved": "https://registry.npmjs.org/use-sidecar/-/use-sidecar-1.1.2.tgz",
+            "integrity": "sha512-epTbsLuzZ7lPClpz2TyryBfztm7m+28DlEv2ZCQ3MDr5ssiwyOwGH/e5F9CkfWjJ1t4clvI58yF822/GUkjjhw==",
+            "dependencies": {
+                "detect-node-es": "^1.1.0",
+                "tslib": "^2.0.0"
+            },
+            "engines": {
+                "node": ">=10"
+            },
+            "peerDependencies": {
+                "@types/react": "^16.9.0 || ^17.0.0 || ^18.0.0",
+                "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+            },
+            "peerDependenciesMeta": {
+                "@types/react": {
+                    "optional": true
+                }
+            }
+        },
         "node_modules/use-sync-external-store": {
             "version": "1.2.0",
             "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz",

src/frontend/package.json

@@ -8,7 +8,11 @@
         "@headlessui/react": "^1.7.10",
         "@heroicons/react": "^2.0.15",
         "@mui/material": "^5.11.9",
-        "@radix-ui/react-tooltip": "^1.0.6",
+        "@radix-ui/react-dropdown-menu": "^2.0.5",
+        "@radix-ui/react-menubar": "^1.0.3",
+        "@radix-ui/react-separator": "^1.0.3",
+        "@radix-ui/react-slot": "^1.0.2",
+        "@radix-ui/react-tabs": "^1.0.4",
         "@tabler/icons-react": "^2.18.0",
         "@tailwindcss/forms": "^0.5.3",
         "@tailwindcss/line-clamp": "^0.4.4",

src/frontend/src/App.tsx

@@ -10,10 +10,10 @@ import SuccessAlert from "./alerts/success";
 import ExtraSidebar from "./components/ExtraSidebarComponent";
 import { alertContext } from "./contexts/alertContext";
 import { locationContext } from "./contexts/locationContext";
-import TabsManagerComponent from "./pages/FlowPage/components/tabsManagerComponent";
 import { ErrorBoundary } from "react-error-boundary";
 import CrashErrorComponent from "./components/CrashErrorComponent";
 import { TabsContext } from "./contexts/tabsContext";
+import MainPage from "./pages/MainPage";
 
 export default function App() {
   let { setCurrent, setShowSideBar, setIsStackedOpen } =
@@ -112,7 +112,6 @@ export default function App() {
   return (
     //need parent component with width and height
     <div className="h-full flex flex-col">
-      <div className="flex grow-0 shrink basis-auto"></div>
       <ErrorBoundary
         onReset={() => {
           window.localStorage.removeItem("tabsData");
@@ -122,18 +121,8 @@ export default function App() {
         }}
         FallbackComponent={CrashErrorComponent}
       >
-        <div className="flex grow shrink basis-auto min-h-0 flex-1 overflow-hidden">
+        <MainPage />
-          <ExtraSidebar />
-          {/* Main area */}
-          <main className="min-w-0 flex-1 border-t border-gray-200 dark:border-gray-700 flex">
-            {/* Primary column */}
-            <div className="w-full h-full">
-              <TabsManagerComponent></TabsManagerComponent>
-            </div>
-          </main>
-        </div>
       </ErrorBoundary>
-      <div></div>
       <div className="flex z-40 flex-col-reverse fixed bottom-5 left-5">
         {alertsList.map((alert) => (
           <div key={alert.id}>
@@ -167,7 +156,7 @@ export default function App() {
       <a
         target={"_blank"}
         href="https://logspace.ai/"
-        className="absolute left-7 bottom-2 flex h-6 cursor-pointer flex-col items-center justify-start overflow-hidden rounded-lg bg-gray-800 px-2 text-center font-sans text-xs tracking-wide text-gray-300 transition-all duration-500 ease-in-out hover:h-12 dark:bg-gray-100 dark:text-gray-800"
+        className="absolute left-7 bottom-2 flex h-6 cursor-pointer flex-col items-center justify-start overflow-hidden rounded-lg bg-foreground px-2 text-center font-sans text-xs tracking-wide text-secondary transition-all duration-500 ease-in-out hover:h-12"
       >
         {version && <div className="mt-1">⛓️ LangFlow v{version}</div>}
         <div className="mt-2">Created by Logspace</div>

src/frontend/src/components/ui/badge.tsx

@@ -0,0 +1,35 @@
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "../../utils";
+
+const badgeVariants = cva(
+  "inline-flex items-center border rounded-full px-2.5 h-6 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+  {
+    variants: {
+      variant: {
+        default:
+          "bg-primary hover:bg-primary/80 border-transparent text-primary-foreground",
+        secondary:
+          "bg-secondary hover:bg-secondary/80 border-transparent text-secondary-foreground",
+        destructive:
+          "bg-destructive hover:bg-destructive/80 border-transparent text-destructive-foreground",
+        outline: "text-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+);
+
+export interface BadgeProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof badgeVariants> {}
+
+function Badge({ className, variant, ...props }: BadgeProps) {
+  return (
+    <div className={cn(badgeVariants({ variant }), className)} {...props} />
+  );
+}
+
+export { Badge, badgeVariants };

src/frontend/src/components/ui/button.tsx

@@ -0,0 +1,54 @@
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "../../utils";
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none ring-offset-background",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+        outline:
+          "border border-input hover:bg-accent hover:text-accent-foreground",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "underline-offset-4 hover:underline text-primary",
+      },
+      size: {
+        default: "h-10 py-2 px-4",
+        sm: "h-9 px-3 rounded-md",
+        lg: "h-11 px-8 rounded-md",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+);
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean;
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button";
+    return (
+      <Comp
+        className={cn(buttonVariants({ variant, size, className }))}
+        ref={ref}
+        {...props}
+      />
+    );
+  }
+);
+Button.displayName = "Button";
+
+export { Button, buttonVariants };

src/frontend/src/components/ui/card.tsx

@@ -0,0 +1,85 @@
+import * as React from "react";
+import { cn } from "../../utils";
+
+const Card = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn(
+      "rounded-lg border bg-card text-card-foreground shadow-sm hover:shadow-lg transition-all",
+      className
+    )}
+    {...props}
+  />
+));
+Card.displayName = "Card";
+
+const CardHeader = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex flex-col space-y-1.5 p-4", className)}
+    {...props}
+  />
+));
+CardHeader.displayName = "CardHeader";
+
+const CardTitle = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLHeadingElement>
+>(({ className, ...props }, ref) => (
+  <h3
+    ref={ref}
+    className={cn(
+      "text-lg font-semibold leading-none tracking-tight",
+      className
+    )}
+    {...props}
+  />
+));
+CardTitle.displayName = "CardTitle";
+
+const CardDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+  <p
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+));
+CardDescription.displayName = "CardDescription";
+
+const CardContent = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn("p-4 pt-0", className)} {...props} />
+));
+CardContent.displayName = "CardContent";
+
+const CardFooter = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn(" flex items-center p-4 pt-0", className)}
+    {...props}
+  />
+));
+CardFooter.displayName = "CardFooter";
+
+export {
+  Card,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  CardDescription,
+  CardContent,
+};

src/frontend/src/components/ui/dropdown-menu.tsx

@@ -0,0 +1,199 @@
+"use client";
+
+import * as React from "react";
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+import { Check, ChevronRight, Circle } from "lucide-react";
+import { cn } from "../../utils";
+
+const DropdownMenu = DropdownMenuPrimitive.Root;
+
+const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
+
+const DropdownMenuGroup = DropdownMenuPrimitive.Group;
+
+const DropdownMenuPortal = DropdownMenuPrimitive.Portal;
+
+const DropdownMenuSub = DropdownMenuPrimitive.Sub;
+
+const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
+
+const DropdownMenuSubTrigger = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
+    inset?: boolean;
+  }
+>(({ className, inset, children, ...props }, ref) => (
+  <DropdownMenuPrimitive.SubTrigger
+    ref={ref}
+    className={cn(
+      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  >
+    {children}
+    <ChevronRight className="ml-auto h-4 w-4" />
+  </DropdownMenuPrimitive.SubTrigger>
+));
+DropdownMenuSubTrigger.displayName =
+  DropdownMenuPrimitive.SubTrigger.displayName;
+
+const DropdownMenuSubContent = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
+>(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.SubContent
+    ref={ref}
+    className={cn(
+      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md animate-in data-[side=bottom]:slide-in-from-top-1 data-[side=left]:slide-in-from-right-1 data-[side=right]:slide-in-from-left-1 data-[side=top]:slide-in-from-bottom-1",
+      className
+    )}
+    {...props}
+  />
+));
+DropdownMenuSubContent.displayName =
+  DropdownMenuPrimitive.SubContent.displayName;
+
+const DropdownMenuContent = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <DropdownMenuPrimitive.Portal>
+    <DropdownMenuPrimitive.Content
+      ref={ref}
+      sideOffset={sideOffset}
+      className={cn(
+        "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md animate-in data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        className
+      )}
+      {...props}
+    />
+  </DropdownMenuPrimitive.Portal>
+));
+DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
+
+const DropdownMenuItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
+    inset?: boolean;
+  }
+>(({ className, inset, ...props }, ref) => (
+  <DropdownMenuPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  />
+));
+DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
+
+const DropdownMenuCheckboxItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
+>(({ className, children, checked, ...props }, ref) => (
+  <DropdownMenuPrimitive.CheckboxItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    checked={checked}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <DropdownMenuPrimitive.ItemIndicator>
+        <Check className="h-4 w-4" />
+      </DropdownMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </DropdownMenuPrimitive.CheckboxItem>
+));
+DropdownMenuCheckboxItem.displayName =
+  DropdownMenuPrimitive.CheckboxItem.displayName;
+
+const DropdownMenuRadioItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
+>(({ className, children, ...props }, ref) => (
+  <DropdownMenuPrimitive.RadioItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <DropdownMenuPrimitive.ItemIndicator>
+        <Circle className="h-2 w-2 fill-current" />
+      </DropdownMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </DropdownMenuPrimitive.RadioItem>
+));
+DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
+
+const DropdownMenuLabel = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
+    inset?: boolean;
+  }
+>(({ className, inset, ...props }, ref) => (
+  <DropdownMenuPrimitive.Label
+    ref={ref}
+    className={cn(
+      "px-2 pl-2 py-1.5 text-sm font-semibold",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  />
+));
+DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
+
+const DropdownMenuSeparator = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.Separator
+    ref={ref}
+    className={cn("-mx-1 my-1 h-px bg-muted", className)}
+    {...props}
+  />
+));
+DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
+
+const DropdownMenuShortcut = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLSpanElement>) => {
+  return (
+    <span
+      className={cn("ml-auto text-xs tracking-widest opacity-60", className)}
+      {...props}
+    />
+  );
+};
+DropdownMenuShortcut.displayName = "DropdownMenuShortcut";
+
+export {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuGroup,
+  DropdownMenuPortal,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuRadioGroup,
+};

src/frontend/src/components/ui/menubar.tsx

@@ -0,0 +1,236 @@
+"use client";
+
+import * as React from "react";
+import * as MenubarPrimitive from "@radix-ui/react-menubar";
+import { Check, ChevronRight, Circle } from "lucide-react";
+
+import { cn } from "../../utils";
+
+const MenubarMenu = MenubarPrimitive.Menu;
+
+const MenubarGroup = MenubarPrimitive.Group;
+
+const MenubarPortal = MenubarPrimitive.Portal;
+
+const MenubarSub = MenubarPrimitive.Sub;
+
+const MenubarRadioGroup = MenubarPrimitive.RadioGroup;
+
+const Menubar = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <MenubarPrimitive.Root
+    ref={ref}
+    className={cn(
+      "flex h-10 items-center space-x-1 rounded-md border bg-background p-1",
+      className
+    )}
+    {...props}
+  />
+));
+Menubar.displayName = MenubarPrimitive.Root.displayName;
+
+const MenubarTrigger = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Trigger>
+>(({ className, ...props }, ref) => (
+  <MenubarPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      "flex cursor-default select-none items-center rounded-sm px-3 py-1.5 text-sm font-medium outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
+      className
+    )}
+    {...props}
+  />
+));
+MenubarTrigger.displayName = MenubarPrimitive.Trigger.displayName;
+
+const MenubarSubTrigger = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.SubTrigger>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.SubTrigger> & {
+    inset?: boolean;
+  }
+>(({ className, inset, children, ...props }, ref) => (
+  <MenubarPrimitive.SubTrigger
+    ref={ref}
+    className={cn(
+      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  >
+    {children}
+    <ChevronRight className="ml-auto h-4 w-4" />
+  </MenubarPrimitive.SubTrigger>
+));
+MenubarSubTrigger.displayName = MenubarPrimitive.SubTrigger.displayName;
+
+const MenubarSubContent = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.SubContent>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.SubContent>
+>(({ className, ...props }, ref) => (
+  <MenubarPrimitive.SubContent
+    ref={ref}
+    className={cn(
+      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md animate-in data-[side=bottom]:slide-in-from-top-1 data-[side=left]:slide-in-from-right-1 data-[side=right]:slide-in-from-left-1 data-[side=top]:slide-in-from-bottom-1",
+      className
+    )}
+    {...props}
+  />
+));
+MenubarSubContent.displayName = MenubarPrimitive.SubContent.displayName;
+
+const MenubarContent = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Content>
+>(
+  (
+    { className, align = "start", alignOffset = -4, sideOffset = 8, ...props },
+    ref
+  ) => (
+    <MenubarPrimitive.Portal>
+      <MenubarPrimitive.Content
+        ref={ref}
+        align={align}
+        alignOffset={alignOffset}
+        sideOffset={sideOffset}
+        className={cn(
+          "z-50 min-w-[12rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md animate-in slide-in-from-top-1",
+          className
+        )}
+        {...props}
+      />
+    </MenubarPrimitive.Portal>
+  )
+);
+MenubarContent.displayName = MenubarPrimitive.Content.displayName;
+
+const MenubarItem = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Item> & {
+    inset?: boolean;
+  }
+>(({ className, inset, ...props }, ref) => (
+  <MenubarPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  />
+));
+MenubarItem.displayName = MenubarPrimitive.Item.displayName;
+
+const MenubarCheckboxItem = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.CheckboxItem>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.CheckboxItem>
+>(({ className, children, checked, ...props }, ref) => (
+  <MenubarPrimitive.CheckboxItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    checked={checked}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <MenubarPrimitive.ItemIndicator>
+        <Check className="h-4 w-4" />
+      </MenubarPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </MenubarPrimitive.CheckboxItem>
+));
+MenubarCheckboxItem.displayName = MenubarPrimitive.CheckboxItem.displayName;
+
+const MenubarRadioItem = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.RadioItem>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.RadioItem>
+>(({ className, children, ...props }, ref) => (
+  <MenubarPrimitive.RadioItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <MenubarPrimitive.ItemIndicator>
+        <Circle className="h-2 w-2 fill-current" />
+      </MenubarPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </MenubarPrimitive.RadioItem>
+));
+MenubarRadioItem.displayName = MenubarPrimitive.RadioItem.displayName;
+
+const MenubarLabel = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Label> & {
+    inset?: boolean;
+  }
+>(({ className, inset, ...props }, ref) => (
+  <MenubarPrimitive.Label
+    ref={ref}
+    className={cn(
+      "px-2 py-1.5 text-sm font-semibold",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  />
+));
+MenubarLabel.displayName = MenubarPrimitive.Label.displayName;
+
+const MenubarSeparator = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <MenubarPrimitive.Separator
+    ref={ref}
+    className={cn("-mx-1 my-1 h-px bg-muted", className)}
+    {...props}
+  />
+));
+MenubarSeparator.displayName = MenubarPrimitive.Separator.displayName;
+
+const MenubarShortcut = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLSpanElement>) => {
+  return (
+    <span
+      className={cn(
+        "ml-auto text-xs tracking-widest text-muted-foreground",
+        className
+      )}
+      {...props}
+    />
+  );
+};
+MenubarShortcut.displayname = "MenubarShortcut";
+
+export {
+  Menubar,
+  MenubarMenu,
+  MenubarTrigger,
+  MenubarContent,
+  MenubarItem,
+  MenubarSeparator,
+  MenubarLabel,
+  MenubarCheckboxItem,
+  MenubarRadioGroup,
+  MenubarRadioItem,
+  MenubarPortal,
+  MenubarSubContent,
+  MenubarSubTrigger,
+  MenubarGroup,
+  MenubarSub,
+  MenubarShortcut,
+};

src/frontend/src/components/ui/rename-label.tsx

@@ -0,0 +1,89 @@
+import { useState, useEffect, useRef } from "react";
+import { cn } from "../../utils";
+
+export default function RenameLabel(props) {
+  const [internalState, setInternalState] = useState(false);
+  const [isRename, setIsRename] = props.rename
+    ? [props.rename, props.setRename]
+    : [internalState, setInternalState];
+
+  useEffect(() => {
+    if (props.value) setMyValue(props.value);
+  }, [props.value]);
+
+  const [myValue, setMyValue] = useState(props.value);
+  useEffect(() => {
+    if (isRename) {
+      setMyValue(props.value);
+      document.addEventListener("keydown", (e) => {
+        if (e.key === "Escape") {
+          setIsRename(false);
+          props.setValue("");
+        }
+      });
+      if (inputRef.current) {
+        setTimeout(() => {
+          inputRef.current.focus();
+        }, 100);
+      }
+    }
+    resizeInput();
+  }, [isRename]);
+
+  const inputRef = useRef(null);
+
+  const resizeInput = () => {
+    const input = inputRef.current;
+    if (input) {
+      const span = document.createElement("span");
+      span.style.position = "absolute";
+      span.style.visibility = "hidden";
+      span.style.whiteSpace = "pre";
+      span.style.font = window.getComputedStyle(input).font;
+      span.textContent = input.value;
+
+      document.body.appendChild(span);
+      const textWidth = span.getBoundingClientRect().width;
+      document.body.removeChild(span);
+
+      input.style.width = `${textWidth + 16}px`;
+    }
+  };
+  return (
+    <div>
+      {isRename ? (
+        <input
+          autoFocus
+          ref={inputRef}
+          onInput={resizeInput}
+          className={cn(
+            "px-2 bg-transparent focus:border-none active:outline hover:outline focus:outline outline-gray-300 rounded-md",
+            props.className
+          )}
+          onBlur={() => {
+            setIsRename(false);
+            if (props.value !== "") {
+              props.setValue(myValue);
+            }
+          }}
+          value={myValue}
+          onChange={(e) => {
+            setMyValue(e.target.value);
+          }}
+        />
+      ) : (
+        <div className="flex items-center gap-2">
+          <span
+            className={cn("px-2 text-left truncate", props.className)}
+            onDoubleClick={() => {
+              setIsRename(true);
+              setMyValue(props.value);
+            }}
+          >
+            {props.value}
+          </span>
+        </div>
+      )}
+    </div>
+  );
+}

src/frontend/src/components/ui/separator.tsx

@@ -0,0 +1,30 @@
+"use client";
+
+import * as React from "react";
+import * as SeparatorPrimitive from "@radix-ui/react-separator";
+import { cn } from "../../utils";
+
+const Separator = React.forwardRef<
+  React.ElementRef<typeof SeparatorPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
+>(
+  (
+    { className, orientation = "horizontal", decorative = true, ...props },
+    ref
+  ) => (
+    <SeparatorPrimitive.Root
+      ref={ref}
+      decorative={decorative}
+      orientation={orientation}
+      className={cn(
+        "shrink-0 bg-border",
+        orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
+        className
+      )}
+      {...props}
+    />
+  )
+);
+Separator.displayName = SeparatorPrimitive.Root.displayName;
+
+export { Separator };

src/frontend/src/components/ui/tabs.tsx

@@ -0,0 +1,54 @@
+"use client";
+
+import * as React from "react";
+import * as TabsPrimitive from "@radix-ui/react-tabs";
+import { cn } from "../../utils";
+
+const Tabs = TabsPrimitive.Root;
+
+const TabsList = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.List
+    ref={ref}
+    className={cn(
+      "inline-flex items-center justify-center rounded-md bg-muted text-muted-foreground",
+      className
+    )}
+    {...props}
+  />
+));
+TabsList.displayName = TabsPrimitive.List.displayName;
+
+const TabsTrigger = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      "inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm",
+      className
+    )}
+    {...props}
+  />
+));
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
+
+const TabsContent = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Content
+    ref={ref}
+    className={cn(
+      "ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+      className
+    )}
+    {...props}
+  />
+));
+TabsContent.displayName = TabsPrimitive.Content.displayName;
+
+export { Tabs, TabsList, TabsTrigger, TabsContent };

src/frontend/src/index.css

@@ -3,52 +3,72 @@
 @tailwind utilities;
 
 @layer base {
-  :root {
+	:root {
-    --background: 0 0% 100%;
+	  --background: 0 0% 100%;
-    --foreground: 222.2 47.4% 11.2%;
+	  --foreground: 222.2 47.4% 11.2%;
-    --muted: 210 40% 96.1%;
+
-    --muted-foreground: 215.4 16.3% 46.9%;
+	  --muted: 210 40% 96.1%;
-    --popover: 0 0% 100%;
+	  --muted-foreground: 215.4 16.3% 46.9%;
-    --popover-foreground: 222.2 47.4% 11.2%;
+
-    --card: 0 0% 100%;
+	  --popover: 0 0% 100%;
-    --card-foreground: 222.2 47.4% 11.2%;
+	  --popover-foreground: 222.2 47.4% 11.2%;
-    --border: 214.3 31.8% 91.4%;
+
-    --input: 214.3 31.8% 91.4%;
+	  --card: 0 0% 100%;
-    --primary: 222.2 47.4% 11.2%;
+	  --card-foreground: 222.2 47.4% 11.2%;
-    --primary-foreground: 210 40% 98%;
+
-    --secondary: 210 40% 96.1%;
+	  --border: 214.3 31.8% 91.4%;
-    --secondary-foreground: 222.2 47.4% 11.2%;
+	  --input: 214.3 31.8% 91.4%;
-    --accent: 210 40% 96.1%;
+
-    --accent-foreground: 222.2 47.4% 11.2%;
+	  --primary: 222.2 47.4% 11.2%;
-    --destructive: 0 100% 50%;
+	  --primary-foreground: 210 40% 98%;
-    --destructive-foreground: 210 40% 98%;
+
-    --ring: 215 20.2% 65.1%;
+	  --secondary: 210 40% 96.1%;
-    --radius: 0.5rem;
+	  --secondary-foreground: 222.2 47.4% 11.2%;
+
+	  --accent: 210 40% 96.1%;
+	  --accent-foreground: 222.2 47.4% 11.2%;
+
+	  --destructive: 0 100% 50%;
+	  --destructive-foreground: 210 40% 98%;
+
+	  --ring: 215 20.2% 65.1%;
+
+	  --radius: 0.5rem;
 	}
 
-  .dark {
+	.dark {
-    -background: 224 71% 4%;
+	  --background: 224 71% 4%;
-    -foreground: 213 31% 91%;
+	  --foreground: 213 31% 91%;
-    -muted: 223 47% 11%;
+
-    -muted-foreground: 215.4 16.3% 56.9%;
+	  --muted: 223 47% 11%;
-    -popover: 224 71% 4%;
+	  --muted-foreground: 215.4 16.3% 56.9%;
-    -popover-foreground: 215 20.2% 65.1%;
+
-    -card: 224 71% 4%;
+	  --popover: 224 71% 4%;
-    -card-foreground: 213 31% 91%;
+	  --popover-foreground: 215 20.2% 65.1%;
-    -border: 216 34% 17%;
+
-    -input: 216 34% 17%;
+	  --card: 224 71% 4%;
-    -primary: 210 40% 98%;
+	  --card-foreground: 213 31% 91%;
-    -primary-foreground: 222.2 47.4% 1.2%;
+
-    -secondary: 222.2 47.4% 11.2%;
+	  --border: 216 34% 17%;
-    -secondary-foreground: 210 40% 98%;
+	  --input: 216 34% 17%;
-    -accent: 216 34% 17%;
+
-    -accent-foreground: 210 40% 98%;
+	  --primary: 210 40% 98%;
-    -destructive: 0 63% 31%;
+	  --primary-foreground: 222.2 47.4% 1.2%;
-    -destructive-foreground: 210 40% 98%;
+
-    -ring: 216 34% 17%;
+	  --secondary: 222.2 47.4% 11.2%;
-    -radius: 0.5rem;
+	  --secondary-foreground: 210 40% 98%;
+
+	  --accent: 216 34% 17%;
+	  --accent-foreground: 210 40% 98%;
+
+	  --destructive: 0 63% 31%;
+	  --destructive-foreground: 210 40% 98%;
+
+	  --ring: 216 34% 17%;
+
+	  --radius: 0.5rem;
 	}
-}
+  }
 
   @layer base {
 	* {
@@ -60,16 +80,6 @@
 	}
   }
 
-@layer base {
-  * {
-    @apply border-border;
-  }
-  body {
-    @apply bg-background text-foreground;
-    font-feature-settings: "rlig" 1, "calt" 1;
-  }
-}
-
 body {
   margin: 0;
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",

src/frontend/src/pages/FlowPage/components/tabComponent/index.tsx

@@ -1,94 +0,0 @@
-import { PlusIcon, XMarkIcon } from "@heroicons/react/24/solid";
-import { useContext, useState } from "react";
-import { TabsContext } from "../../../../contexts/tabsContext";
-import { FlowType } from "../../../../types/flow";
-
-import _ from "lodash";
-
-export default function TabComponent({
-  selected,
-  flow,
-  onClick,
-}: {
-  flow: FlowType;
-  selected: boolean;
-  onClick: () => void;
-}) {
-  const { removeFlow, updateFlow, flows } = useContext(TabsContext);
-  const [isRename, setIsRename] = useState(false);
-  const [value, setValue] = useState("");
-  return (
-    <>
-      {flow ? (
-        !selected ? (
-          <div
-            className="dark:text-white flex justify-between select-none truncate w-44 items-center px-4 my-1.5 border-x border-x-gray-300 dark:border-x-gray-600 -ml-px"
-            onClick={onClick}
-          >
-            <span className="w-32 truncate text-left">{flow.name}</span>
-
-            <button
-              onClick={(e) => {
-                e.stopPropagation();
-                removeFlow(flow.id);
-              }}
-            >
-              <XMarkIcon className="h-4 hover:bg-white dark:hover:bg-gray-600 rounded-full" />
-            </button>
-          </div>
-        ) : (
-          <div className="bg-white dark:text-white dark:bg-gray-700/60 flex select-none justify-between w-44 items-center border border-b-0 border-gray-300 dark:border-gray-600 px-4 py-1 rounded-t-xl -ml-px">
-            {isRename ? (
-              <input
-                autoFocus
-                className="bg-transparent focus:border-none active:outline hover:outline focus:outline outline-gray-300 rounded-md  w-28"
-                onBlur={() => {
-                  setIsRename(false);
-                  if (value !== "") {
-                    let newFlow = _.cloneDeep(flow);
-                    newFlow.name = value;
-                    updateFlow(newFlow);
-                  }
-                }}
-                value={value}
-                onChange={(e) => {
-                  setValue(e.target.value);
-                }}
-              />
-            ) : (
-              <div className="flex items-center gap-2">
-                <span
-                  className="text-left w-32 truncate"
-                  onDoubleClick={() => {
-                    setIsRename(true);
-                    setValue(flow.name);
-                  }}
-                >
-                  {flow.name}
-                </span>
-              </div>
-            )}
-            <button
-              onClick={() => {
-                removeFlow(flow.id);
-              }}
-            >
-              {flows.length > 1 && (
-                <XMarkIcon className="h-4 hover:bg-gray-100 dark:hover:bg-gray-600 rounded-full" />
-              )}
-            </button>
-          </div>
-        )
-      ) : (
-        <div className="h-full py-1.5 flex justify-center items-center">
-          <button
-            className="px-3 flex items-center h-full pb-0.5 pt-0.5 border-x-gray-300 dark:border-x-gray-600 dark:text-white -ml-px"
-            onClick={onClick}
-          >
-            <PlusIcon className="h-5 rounded-full hover:bg-white dark:hover:bg-gray-600" />
-          </button>
-        </div>
-      )}
-    </>
-  );
-}

src/frontend/src/pages/FlowPage/components/tabsManagerComponent/index.tsx

@@ -1,130 +0,0 @@
-import { useContext, useEffect, useState } from "react";
-import { ReactFlowProvider } from "reactflow";
-import TabComponent from "../tabComponent";
-import { TabsContext } from "../../../../contexts/tabsContext";
-import FlowPage from "../..";
-import { darkContext } from "../../../../contexts/darkContext";
-import {
-  ArrowDownTrayIcon,
-  ArrowUpTrayIcon,
-  BellIcon,
-  CodeBracketSquareIcon,
-  MoonIcon,
-  SunIcon,
-} from "@heroicons/react/24/outline";
-import { PopUpContext } from "../../../../contexts/popUpContext";
-import AlertDropdown from "../../../../alerts/alertDropDown";
-import { alertContext } from "../../../../contexts/alertContext";
-import ImportModal from "../../../../modals/importModal";
-import ExportModal from "../../../../modals/exportModal";
-import { typesContext } from "../../../../contexts/typesContext";
-import ApiModal from "../../../../modals/ApiModal";
-
-export default function TabsManagerComponent() {
-  const { flows, addFlow, tabIndex, setTabIndex, uploadFlow, downloadFlow } =
-    useContext(TabsContext);
-  const { openPopUp } = useContext(PopUpContext);
-  const { templates } = useContext(typesContext);
-  const AlertWidth = 384;
-  const { dark, setDark } = useContext(darkContext);
-  const { notificationCenter, setNotificationCenter } =
-    useContext(alertContext);
-  useEffect(() => {
-    //create the first flow
-    if (flows.length === 0 && Object.keys(templates).length > 0) {
-      addFlow();
-    }
-  }, [addFlow, flows.length, templates]);
-
-  return (
-    <div className="h-full w-full flex flex-col">
-      <div className="w-full flex pr-2 flex-row text-center items-center bg-gray-100 dark:bg-gray-800 px-2">
-        {flows.map((flow, index) => {
-          return (
-            <TabComponent
-              onClick={() => setTabIndex(index)}
-              selected={index === tabIndex}
-              key={index}
-              flow={flow}
-            />
-          );
-        })}
-        <TabComponent
-          onClick={() => {
-            addFlow();
-          }}
-          selected={false}
-          flow={null}
-        />
-        <div className="ml-auto mr-2 flex gap-3">
-          <button
-            onClick={() =>
-              openPopUp(<ApiModal flowName={flows[tabIndex].name} />)
-            }
-            className="flex items-center gap-1 pr-2 border-gray-400 border-r text-sm text-gray-600 hover:text-gray-500 dark:text-gray-300 dark:hover:text-gray-200"
-          >
-            Code <CodeBracketSquareIcon className="w-5 h-5" />
-          </button>
-          <button
-            onClick={() => openPopUp(<ImportModal />)}
-            className="flex items-center gap-1 pr-2 border-gray-400 border-r text-sm text-gray-600 hover:text-gray-500 dark:text-gray-300 dark:hover:text-gray-200"
-          >
-            Import <ArrowUpTrayIcon className="w-5 h-5" />
-          </button>
-          <button
-            onClick={() => openPopUp(<ExportModal />)}
-            className="flex items-center gap-1 pr-2 text-sm text-gray-600  border-gray-400 border-r hover:text-gray-500 dark:text-gray-300 dark:hover:text-gray-200"
-          >
-            Export <ArrowDownTrayIcon className="h-5 w-5" />
-          </button>
-          <button
-            className="text-gray-600 hover:text-gray-500 dark:text-gray-300 dark:hover:text-gray-200"
-            onClick={() => {
-              setDark(!dark);
-            }}
-          >
-            {dark ? (
-              <SunIcon className="h-5 w-5" />
-            ) : (
-              <MoonIcon className="h-5 w-5" />
-            )}
-          </button>
-          <button
-            className="text-gray-600 hover:text-gray-500 dark:text-gray-300 dark:hover:text-gray-200 relative"
-            onClick={(event: React.MouseEvent<HTMLElement>) => {
-              setNotificationCenter(false);
-              const top = (event.target as Element).getBoundingClientRect().top;
-              const left = (event.target as Element).getBoundingClientRect()
-                .left;
-              openPopUp(
-                <>
-                  <div
-                    className="z-10 absolute"
-                    style={{ top: top + 34, left: left - AlertWidth }}
-                  >
-                    <AlertDropdown />
-                  </div>
-                  <div className="h-screen w-screen fixed top-0 left-0"></div>
-                </>
-              );
-            }}
-          >
-            {notificationCenter && (
-              <div className="absolute w-1.5 h-1.5 rounded-full bg-red-600 right-[3px]"></div>
-            )}
-            <BellIcon className="h-5 w-5" aria-hidden="true" />
-          </button>
-        </div>
-      </div>
-      <div className="w-full h-full dark:bg-gray-800">
-        <ReactFlowProvider>
-          {flows[tabIndex] ? (
-            <FlowPage flow={flows[tabIndex]}></FlowPage>
-          ) : (
-            <></>
-          )}
-        </ReactFlowProvider>
-      </div>
-    </div>
-  );
-}

src/frontend/src/pages/MainPage/index.tsx

@@ -0,0 +1,356 @@
+import {
+  Tabs,
+  TabsList,
+  TabsTrigger,
+  TabsContent,
+} from "../../components/ui/tabs";
+import ExtraSidebar from "../../components/ExtraSidebarComponent";
+import { ReactFlowProvider } from "reactflow";
+import FlowPage from "../FlowPage";
+import { useContext, useEffect, useState } from "react";
+import { SunIcon, MoonIcon, BellIcon, GithubIcon } from "lucide-react";
+import { TabsContext } from "../../contexts/tabsContext";
+import AlertDropdown from "../../alerts/alertDropDown";
+import { alertContext } from "../../contexts/alertContext";
+import { darkContext } from "../../contexts/darkContext";
+import { PopUpContext } from "../../contexts/popUpContext";
+import { typesContext } from "../../contexts/typesContext";
+import {
+  ArrowDownTrayIcon,
+  ArrowTopRightOnSquareIcon,
+  ArrowUpTrayIcon,
+  ChevronDownIcon,
+  CodeBracketSquareIcon,
+  GlobeAltIcon,
+  PencilSquareIcon,
+  PlusCircleIcon,
+  PlusIcon,
+  PlusSmallIcon,
+  TrashIcon,
+} from "@heroicons/react/24/outline";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "../../components/ui/dropdown-menu";
+import ImportModal from "../../modals/importModal";
+import ExportModal from "../../modals/exportModal";
+import ApiModal from "../../modals/ApiModal";
+import { Separator } from "../../components/ui/separator";
+import { Button } from "../../components/ui/button";
+import { FaGithub } from "react-icons/fa";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "../../components/ui/card";
+import RenameLabel from "../../components/ui/rename-label";
+import _ from "lodash";
+import { Badge } from "../../components/ui/badge";
+import { OpenAiIcon } from "../../icons/OpenAi";
+import { Menu } from "@mui/material";
+import {
+  Menubar,
+  MenubarContent,
+  MenubarItem,
+  MenubarMenu,
+  MenubarRadioGroup,
+  MenubarRadioItem,
+  MenubarTrigger,
+} from "../../components/ui/menubar";
+
+export default function HomePage() {
+  const {
+    flows,
+    addFlow,
+    removeFlow,
+    tabIndex,
+    setTabIndex,
+    uploadFlow,
+    downloadFlow,
+  } = useContext(TabsContext);
+  const { openPopUp } = useContext(PopUpContext);
+  const { updateFlow } = useContext(TabsContext);
+  const { templates } = useContext(typesContext);
+  const AlertWidth = 384;
+  const { dark, setDark } = useContext(darkContext);
+  const [activeTab, setActiveTab] = useState("myflow");
+  const [rename, setRename] = useState(false);
+  const { notificationCenter, setNotificationCenter } =
+    useContext(alertContext);
+  useEffect(() => {
+    //create the first flow
+    if (flows.length === 0 && Object.keys(templates).length > 0) {
+      addFlow();
+    }
+  }, [addFlow, flows.length, templates]);
+  return (
+    flows.length !== 0 && (
+      <Tabs
+        defaultValue="myflow"
+        value={activeTab}
+        onValueChange={setActiveTab}
+        className="w-full h-full flex flex-col"
+      >
+        <TabsList className="w-full h-16 flex justify-between items-center border-b">
+          <div className="flex gap-2 justify-start items-center w-96">
+            <span className="text-2xl ml-4">⛓️</span>
+            {activeTab === "myflow" && (
+              <div className="flex gap-2 p-2">
+                <Menubar>
+                  <MenubarMenu>
+                    <MenubarTrigger className="px-2">
+                      <b>
+                        <RenameLabel
+                          value={flows[tabIndex].name}
+                          setValue={(value) => {
+                            if (value !== "") {
+                              let newFlow = _.cloneDeep(flows[tabIndex]);
+                              newFlow.name = value;
+                              updateFlow(newFlow);
+                            }
+                          }}
+                          rename={rename}
+                          setRename={setRename}
+                        />
+                      </b>
+                    </MenubarTrigger>
+                    <MenubarContent>
+                      <MenubarItem
+                        onClick={() => {
+                          openPopUp(<ImportModal />);
+                        }}
+                      >
+                        <ArrowUpTrayIcon className="w-4 h-4 mr-2" />
+                        Import
+                      </MenubarItem>
+                      <MenubarItem
+                        onClick={() => {
+                          openPopUp(<ExportModal />);
+                        }}
+                      >
+                        <ArrowDownTrayIcon className="w-4 h-4 mr-2" />
+                        Export
+                      </MenubarItem>
+                      <MenubarItem
+                        onClick={() => {
+                          openPopUp(
+                            <ApiModal flowName={flows[tabIndex].name} />
+                          );
+                        }}
+                      >
+                        <CodeBracketSquareIcon className="w-4 h-4 mr-2" />
+                        Code
+                      </MenubarItem>
+                    </MenubarContent>
+                  </MenubarMenu>
+                  <MenubarMenu>
+                    <MenubarTrigger>Edit</MenubarTrigger>
+                    <MenubarContent>
+                      <MenubarItem
+                        onClick={() => {
+                          setRename(true);
+                        }}
+                      >
+                        <PencilSquareIcon className="w-4 h-4 mr-2" />
+                        Rename
+                      </MenubarItem>
+                    </MenubarContent>
+                  </MenubarMenu>
+                  <MenubarMenu>
+                    <MenubarTrigger>Flows</MenubarTrigger>
+                    <MenubarContent>
+                      <MenubarRadioGroup
+                        value={tabIndex.toString()}
+                        onValueChange={(value) => {
+                          setTabIndex(parseInt(value));
+                        }}
+                      >
+                        {flows.map((flow, idx) => {
+                          return (
+                            <MenubarRadioItem value={idx.toString()}>
+                              {flow.name}
+                            </MenubarRadioItem>
+                          );
+                        })}
+                      </MenubarRadioGroup>
+                      <MenubarItem
+                        onClick={() => {
+                          addFlow();
+                        }}
+                      >
+                        <PlusIcon className="w-4 h-4 mr-2" />
+                        Add Flow
+                      </MenubarItem>
+                    </MenubarContent>
+                  </MenubarMenu>
+                </Menubar>
+              </div>
+            )}
+          </div>
+          <div className="flex">
+            <TabsTrigger value="community">Explore</TabsTrigger>
+            <TabsTrigger value="myflows">My Flows</TabsTrigger>
+          </div>
+          <div className="flex justify-end px-2 w-96">
+            <div className="ml-auto mr-2 flex gap-5">
+              <Button
+                asChild
+                variant="outline"
+                className="text-gray-600 dark:text-gray-300"
+              >
+                <a
+                  href="https://github.com/logspace-ai/langflow"
+                  target="_blank"
+                  rel="noreferrer"
+                  className="flex"
+                >
+                  <FaGithub className="h-5 w-5 mr-2" />
+                  Join The Community
+                </a>
+              </Button>
+              <button
+                className="text-gray-600 hover:text-gray-500 dark:text-gray-300 dark:hover:text-gray-200"
+                onClick={() => {
+                  setDark(!dark);
+                }}
+              >
+                {dark ? (
+                  <SunIcon className="h-5 w-5" />
+                ) : (
+                  <MoonIcon className="h-5 w-5" />
+                )}
+              </button>
+              <button
+                className="text-gray-600 hover:text-gray-500 dark:text-gray-300 dark:hover:text-gray-200 relative"
+                onClick={(event: React.MouseEvent<HTMLElement>) => {
+                  setNotificationCenter(false);
+                  const top = (event.target as Element).getBoundingClientRect()
+                    .top;
+                  const left = (event.target as Element).getBoundingClientRect()
+                    .left;
+                  openPopUp(
+                    <>
+                      <div
+                        className="z-10 absolute"
+                        style={{ top: top + 34, left: left - AlertWidth }}
+                      >
+                        <AlertDropdown />
+                      </div>
+                      <div className="h-screen w-screen fixed top-0 left-0"></div>
+                    </>
+                  );
+                }}
+              >
+                {notificationCenter && (
+                  <div className="absolute w-1.5 h-1.5 rounded-full bg-destructive right-[3px]"></div>
+                )}
+                <BellIcon className="h-5 w-5" aria-hidden="true" />
+              </button>
+              <button>
+                <img
+                  src="https://github.com/shadcn.png"
+                  className="rounded-full w-8"
+                />
+              </button>
+            </div>
+          </div>
+        </TabsList>
+
+        <TabsContent value="myflow" className="w-full h-full">
+          <div className="h-full w-full flex basis-auto flex-1 overflow-hidden">
+            <ExtraSidebar />
+            <main className="h-full w-full flex-1 border-t border-gray-200 dark:border-gray-700 flex">
+              {/* Primary column */}
+              <div className="w-full h-full">
+                <ReactFlowProvider>
+                  {flows[tabIndex] ? (
+                    <FlowPage flow={flows[tabIndex]}></FlowPage>
+                  ) : (
+                    <></>
+                  )}
+                </ReactFlowProvider>
+              </div>
+            </main>
+          </div>
+        </TabsContent>
+        <TabsContent value="myflows" className="w-full h-full bg-muted">
+          <div className="w-full p-4 grid gap-4 md:grid-cols-2 lg:grid-cols-4">
+            {flows.map((flow, idx) => (
+              <Card className="group">
+                <CardHeader>
+                  <CardTitle className="flex justify-between items-start">
+                    <div className="flex gap-4 items-center">
+                      <span
+                        className={
+                          "rounded-md w-10 h-10 flex items-center justify-center text-2xl " +
+                          (idx === 0 ? "bg-blue-100" : " bg-orange-100")
+                        }
+                      >
+                        {idx === 0 ? "🤖" : "🛠️"}
+                      </span>
+                      {flow.name}
+                    </div>
+                    <button
+                      onClick={() => {
+                        removeFlow(flow.id);
+                      }}
+                    >
+                      <TrashIcon className="w-5 text-primary opacity-0 group-hover:opacity-100 transition-all" />
+                    </button>
+                  </CardTitle>
+                  <CardDescription className="pt-2 pb-2">
+                    <div className="truncate-doubleline">
+                      {idx === 0
+                        ? "This flow creates an agent that accesses a department store database and APIs to monitor customer activity and overall storage."
+                        : "This is a new tool"}
+                      {/* {flow.description} */}
+                    </div>
+                  </CardDescription>
+                </CardHeader>
+
+                <CardFooter>
+                  <div className="flex gap-2 w-full justify-between items-end">
+                    <div className="flex flex-wrap gap-2">
+                      <Badge variant="secondary">
+                        {idx === 0 ? "Agent" : "Tool"}
+                      </Badge>
+                      {idx === 0 && (
+                        <Badge variant="secondary">
+                          <div className="w-3">
+                            <OpenAiIcon />
+                          </div>
+                          <span className="text-base">&nbsp;</span>OpenAI+
+                        </Badge>
+                      )}
+                    </div>
+                    <Button
+                      variant="outline"
+                      size="sm"
+                      className="whitespace-nowrap opacity-0 group-hover:opacity-100 transition-all"
+                      onClick={() => {
+                        setTabIndex(idx);
+                        setActiveTab("myflow");
+                      }}
+                    >
+                      <ArrowTopRightOnSquareIcon className="w-4 mr-2" />
+                      Edit
+                    </Button>
+                  </div>
+                </CardFooter>
+              </Card>
+            ))}
+          </div>
+        </TabsContent>
+      </Tabs>
+    )
+  );
+}

src/frontend/src/utils.ts

@@ -7,7 +7,6 @@ import {
   WrenchScrewdriverIcon,
   WrenchIcon,
   ComputerDesktopIcon,
-  Bars3CenterLeftIcon,
   GiftIcon,
   PaperClipIcon,
   QuestionMarkCircleIcon,
@@ -15,6 +14,7 @@ import {
   ScissorsIcon,
   CircleStackIcon,
   Squares2X2Icon,
+  Bars3CenterLeftIcon,
 } from "@heroicons/react/24/outline";
 import { Connection, Edge, Node, ReactFlowInstance, addEdge } from "reactflow";
 import { FlowType, NodeType } from "./types/flow";
@@ -48,13 +48,9 @@ import { WolframIcon } from "./icons/Wolfram";
 import { WordIcon } from "./icons/Word";
 import { SerperIcon } from "./icons/Serper";
 import { v4 as uuidv4 } from "uuid";
-import { clsx, type ClassValue } from "clsx";
+import clsx, { ClassValue } from "clsx";
 import { twMerge } from "tailwind-merge";
 
-export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs));
-}
-
 export function classNames(...classes: Array<string>) {
   return classes.filter(Boolean).join(" ");
 }
@@ -352,6 +348,10 @@ export function measureTextWidth(text: string, fontSize: number) {
   return wordWidth;
 }
 
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}
+
 export function measureTextHeight(
   text: string,
   width: number,

src/frontend/tailwind.config.js

@@ -111,6 +111,13 @@ module.exports = {
           "overflow": "hidden",
           "text-overflow": "ellipsis",
         },
+        ".truncate-doubleline": {
+          "display": "-webkit-box",
+          "-webkit-line-clamp": "2", /* Change this number to the number of lines you want to show */
+          "-webkit-box-orient": "vertical",
+          "overflow": "hidden",
+          "text-overflow": "ellipsis",
+        },
 
         ".arrow-hide": {
           "&::-webkit-inner-spin-button": {