diff --git a/frontend/package-lock.json b/frontend/package-lock.json index 9d34b60df2..14d1333b1e 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -12,16 +12,10 @@ "@nextui-org/react": "^2.2.10", "@react-types/shared": "^3.22.1", "@reduxjs/toolkit": "^2.2.2", - "@testing-library/jest-dom": "^6.4.2", - "@testing-library/react": "^13.4.0", - "@testing-library/user-event": "^13.5.0", - "@types/node": "^18.0.0 ", - "@types/react": "^18.2.66", - "@types/react-dom": "^18.2.22", - "@types/react-syntax-highlighter": "^15.5.11", - "@typescript-eslint/eslint-plugin": "^7.4.0", "@vitejs/plugin-react": "^4.2.1", "@xterm/xterm": "^5.4.0", + "clsx": "^2.1.0", + "eslint-config-airbnb-typescript": "^18.0.0", "framer-motion": "^11.0.24", "i18next": "^23.10.1", "i18next-browser-languagedetector": "^7.2.1", @@ -2712,6 +2706,14 @@ "tailwind-variants": ">=0.1.13" } }, + "node_modules/@nextui-org/system-rsc/node_modules/clsx": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.2.1.tgz", + "integrity": "sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==", + "engines": { + "node": ">=6" + } + }, "node_modules/@nextui-org/table": { "version": "2.0.28", "resolved": "https://registry.npmjs.org/@nextui-org/table/-/table-2.0.28.tgz", @@ -3246,14 +3248,6 @@ "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0" } }, - "node_modules/@react-aria/focus/node_modules/clsx": { - "version": "2.1.0", - "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.0.tgz", - "integrity": "sha512-m3iNNWpd9rl3jvvcBnu70ylMdrXt8Vlq4HYadnU5fwcOtvkSQWPmj7amUcDT2qYI7risszBjI5AUIUox9D16pg==", - "engines": { - "node": ">=6" - } - }, "node_modules/@react-aria/form": { "version": "3.0.3", "resolved": "https://registry.npmjs.org/@react-aria/form/-/form-3.0.3.tgz", @@ -3643,14 +3637,6 @@ "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0" } }, - "node_modules/@react-aria/utils/node_modules/clsx": { - "version": "2.1.0", - "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.0.tgz", - "integrity": "sha512-m3iNNWpd9rl3jvvcBnu70ylMdrXt8Vlq4HYadnU5fwcOtvkSQWPmj7amUcDT2qYI7risszBjI5AUIUox9D16pg==", - "engines": { - "node": ">=6" - } - }, "node_modules/@react-aria/visually-hidden": { "version": "3.8.10", "resolved": "https://registry.npmjs.org/@react-aria/visually-hidden/-/visually-hidden-3.8.10.tgz", @@ -4211,9 +4197,9 @@ } }, "node_modules/@rollup/rollup-android-arm-eabi": { - "version": "4.14.0", - "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.14.0.tgz", - "integrity": "sha512-jwXtxYbRt1V+CdQSy6Z+uZti7JF5irRKF8hlKfEnF/xJpcNGuuiZMBvuoYM+x9sr9iWGnzrlM0+9hvQ1kgkf1w==", + "version": "4.14.1", + "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.14.1.tgz", + "integrity": "sha512-fH8/o8nSUek8ceQnT7K4EQbSiV7jgkHq81m9lWZFIXjJ7lJzpWXbQFpT/Zh6OZYnpFykvzC3fbEvEAFZu03dPA==", "cpu": [ "arm" ], @@ -4223,9 +4209,9 @@ ] }, "node_modules/@rollup/rollup-android-arm64": { - "version": "4.14.0", - "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.14.0.tgz", - "integrity": "sha512-fI9nduZhCccjzlsA/OuAwtFGWocxA4gqXGTLvOyiF8d+8o0fZUeSztixkYjcGq1fGZY3Tkq4yRvHPFxU+jdZ9Q==", + "version": "4.14.1", + "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.14.1.tgz", + "integrity": "sha512-Y/9OHLjzkunF+KGEoJr3heiD5X9OLa8sbT1lm0NYeKyaM3oMhhQFvPB0bNZYJwlq93j8Z6wSxh9+cyKQaxS7PQ==", "cpu": [ "arm64" ], @@ -4235,9 +4221,9 @@ ] }, "node_modules/@rollup/rollup-darwin-arm64": { - "version": "4.14.0", - "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.14.0.tgz", - "integrity": "sha512-BcnSPRM76/cD2gQC+rQNGBN6GStBs2pl/FpweW8JYuz5J/IEa0Fr4AtrPv766DB/6b2MZ/AfSIOSGw3nEIP8SA==", + "version": "4.14.1", + "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.14.1.tgz", + "integrity": "sha512-+kecg3FY84WadgcuSVm6llrABOdQAEbNdnpi5X3UwWiFVhZIZvKgGrF7kmLguvxHNQy+UuRV66cLVl3S+Rkt+Q==", "cpu": [ "arm64" ], @@ -4247,9 +4233,9 @@ ] }, "node_modules/@rollup/rollup-darwin-x64": { - "version": "4.14.0", - "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.14.0.tgz", - "integrity": "sha512-LDyFB9GRolGN7XI6955aFeI3wCdCUszFWumWU0deHA8VpR3nWRrjG6GtGjBrQxQKFevnUTHKCfPR4IvrW3kCgQ==", + "version": "4.14.1", + "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.14.1.tgz", + "integrity": "sha512-2pYRzEjVqq2TB/UNv47BV/8vQiXkFGVmPFwJb+1E0IFFZbIX8/jo1olxqqMbo6xCXf8kabANhp5bzCij2tFLUA==", "cpu": [ "x64" ], @@ -4259,9 +4245,9 @@ ] }, "node_modules/@rollup/rollup-linux-arm-gnueabihf": { - "version": "4.14.0", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.14.0.tgz", - "integrity": "sha512-ygrGVhQP47mRh0AAD0zl6QqCbNsf0eTo+vgwkY6LunBcg0f2Jv365GXlDUECIyoXp1kKwL5WW6rsO429DBY/bA==", + "version": "4.14.1", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.14.1.tgz", + "integrity": "sha512-mS6wQ6Do6/wmrF9aTFVpIJ3/IDXhg1EZcQFYHZLHqw6AzMBjTHWnCG35HxSqUNphh0EHqSM6wRTT8HsL1C0x5g==", "cpu": [ "arm" ], @@ -4271,9 +4257,9 @@ ] }, "node_modules/@rollup/rollup-linux-arm64-gnu": { - "version": "4.14.0", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.14.0.tgz", - "integrity": "sha512-x+uJ6MAYRlHGe9wi4HQjxpaKHPM3d3JjqqCkeC5gpnnI6OWovLdXTpfa8trjxPLnWKyBsSi5kne+146GAxFt4A==", + "version": "4.14.1", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.14.1.tgz", + "integrity": "sha512-p9rGKYkHdFMzhckOTFubfxgyIO1vw//7IIjBBRVzyZebWlzRLeNhqxuSaZ7kCEKVkm/kuC9fVRW9HkC/zNRG2w==", "cpu": [ "arm64" ], @@ -4283,9 +4269,9 @@ ] }, "node_modules/@rollup/rollup-linux-arm64-musl": { - "version": "4.14.0", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.14.0.tgz", - "integrity": "sha512-nrRw8ZTQKg6+Lttwqo6a2VxR9tOroa2m91XbdQ2sUUzHoedXlsyvY1fN4xWdqz8PKmf4orDwejxXHjh7YBGUCA==", + "version": "4.14.1", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.14.1.tgz", + "integrity": "sha512-nDY6Yz5xS/Y4M2i9JLQd3Rofh5OR8Bn8qe3Mv/qCVpHFlwtZSBYSPaU4mrGazWkXrdQ98GB//H0BirGR/SKFSw==", "cpu": [ "arm64" ], @@ -4295,9 +4281,9 @@ ] }, "node_modules/@rollup/rollup-linux-powerpc64le-gnu": { - "version": "4.14.0", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-powerpc64le-gnu/-/rollup-linux-powerpc64le-gnu-4.14.0.tgz", - "integrity": "sha512-xV0d5jDb4aFu84XKr+lcUJ9y3qpIWhttO3Qev97z8DKLXR62LC3cXT/bMZXrjLF9X+P5oSmJTzAhqwUbY96PnA==", + "version": "4.14.1", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-powerpc64le-gnu/-/rollup-linux-powerpc64le-gnu-4.14.1.tgz", + "integrity": "sha512-im7HE4VBL+aDswvcmfx88Mp1soqL9OBsdDBU8NqDEYtkri0qV0THhQsvZtZeNNlLeCUQ16PZyv7cqutjDF35qw==", "cpu": [ "ppc64le" ], @@ -4307,9 +4293,9 @@ ] }, "node_modules/@rollup/rollup-linux-riscv64-gnu": { - "version": "4.14.0", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.14.0.tgz", - "integrity": "sha512-SDDhBQwZX6LPRoPYjAZWyL27LbcBo7WdBFWJi5PI9RPCzU8ijzkQn7tt8NXiXRiFMJCVpkuMkBf4OxSxVMizAw==", + "version": "4.14.1", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.14.1.tgz", + "integrity": "sha512-RWdiHuAxWmzPJgaHJdpvUUlDz8sdQz4P2uv367T2JocdDa98iRw2UjIJ4QxSyt077mXZT2X6pKfT2iYtVEvOFw==", "cpu": [ "riscv64" ], @@ -4319,9 +4305,9 @@ ] }, "node_modules/@rollup/rollup-linux-s390x-gnu": { - "version": "4.14.0", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.14.0.tgz", - "integrity": "sha512-RxB/qez8zIDshNJDufYlTT0ZTVut5eCpAZ3bdXDU9yTxBzui3KhbGjROK2OYTTor7alM7XBhssgoO3CZ0XD3qA==", + "version": "4.14.1", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.14.1.tgz", + "integrity": "sha512-VMgaGQ5zRX6ZqV/fas65/sUGc9cPmsntq2FiGmayW9KMNfWVG/j0BAqImvU4KTeOOgYSf1F+k6at1UfNONuNjA==", "cpu": [ "s390x" ], @@ -4331,9 +4317,9 @@ ] }, "node_modules/@rollup/rollup-linux-x64-gnu": { - "version": "4.14.0", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.14.0.tgz", - "integrity": "sha512-C6y6z2eCNCfhZxT9u+jAM2Fup89ZjiG5pIzZIDycs1IwESviLxwkQcFRGLjnDrP+PT+v5i4YFvlcfAs+LnreXg==", + "version": "4.14.1", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.14.1.tgz", + "integrity": "sha512-9Q7DGjZN+hTdJomaQ3Iub4m6VPu1r94bmK2z3UeWP3dGUecRC54tmVu9vKHTm1bOt3ASoYtEz6JSRLFzrysKlA==", "cpu": [ "x64" ], @@ -4343,9 +4329,9 @@ ] }, "node_modules/@rollup/rollup-linux-x64-musl": { - "version": "4.14.0", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.14.0.tgz", - "integrity": "sha512-i0QwbHYfnOMYsBEyjxcwGu5SMIi9sImDVjDg087hpzXqhBSosxkE7gyIYFHgfFl4mr7RrXksIBZ4DoLoP4FhJg==", + "version": "4.14.1", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.14.1.tgz", + "integrity": "sha512-JNEG/Ti55413SsreTguSx0LOVKX902OfXIKVg+TCXO6Gjans/k9O6ww9q3oLGjNDaTLxM+IHFMeXy/0RXL5R/g==", "cpu": [ "x64" ], @@ -4355,9 +4341,9 @@ ] }, "node_modules/@rollup/rollup-win32-arm64-msvc": { - "version": "4.14.0", - "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.14.0.tgz", - "integrity": "sha512-Fq52EYb0riNHLBTAcL0cun+rRwyZ10S9vKzhGKKgeD+XbwunszSY0rVMco5KbOsTlwovP2rTOkiII/fQ4ih/zQ==", + "version": "4.14.1", + "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.14.1.tgz", + "integrity": "sha512-ryS22I9y0mumlLNwDFYZRDFLwWh3aKaC72CWjFcFvxK0U6v/mOkM5Up1bTbCRAhv3kEIwW2ajROegCIQViUCeA==", "cpu": [ "arm64" ], @@ -4367,9 +4353,9 @@ ] }, "node_modules/@rollup/rollup-win32-ia32-msvc": { - "version": "4.14.0", - "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.14.0.tgz", - "integrity": "sha512-e/PBHxPdJ00O9p5Ui43+vixSgVf4NlLsmV6QneGERJ3lnjIua/kim6PRFe3iDueT1rQcgSkYP8ZBBXa/h4iPvw==", + "version": "4.14.1", + "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.14.1.tgz", + "integrity": "sha512-TdloItiGk+T0mTxKx7Hp279xy30LspMso+GzQvV2maYePMAWdmrzqSNZhUpPj3CGw12aGj57I026PgLCTu8CGg==", "cpu": [ "ia32" ], @@ -4379,9 +4365,9 @@ ] }, "node_modules/@rollup/rollup-win32-x64-msvc": { - "version": "4.14.0", - "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.14.0.tgz", - "integrity": "sha512-aGg7iToJjdklmxlUlJh/PaPNa4PmqHfyRMLunbL3eaMO0gp656+q1zOKkpJ/CVe9CryJv6tAN1HDoR8cNGzkag==", + "version": "4.14.1", + "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.14.1.tgz", + "integrity": "sha512-wQGI+LY/Py20zdUPq+XCem7JcPOyzIJBm3dli+56DJsQOHbnXZFEwgmnC6el1TPAfC8lBT3m+z69RmLykNUbew==", "cpu": [ "x64" ], @@ -5681,9 +5667,9 @@ } }, "node_modules/caniuse-lite": { - "version": "1.0.30001606", - "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001606.tgz", - "integrity": "sha512-LPbwnW4vfpJId225pwjZJOgX1m9sGfbw/RKJvw/t0QhYOOaTXHvkjVGFGPpvwEzufrjvTlsULnVTxdy4/6cqkg==", + "version": "1.0.30001607", + "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001607.tgz", + "integrity": "sha512-WcvhVRjXLKFB/kmOFVwELtMxyhq3iM/MvmXcyCe2PNf166c39mptscOc/45TTS96n2gpNV2z7+NakArTWZCQ3w==", "funding": [ { "type": "opencollective", @@ -5904,9 +5890,9 @@ } }, "node_modules/clsx": { - "version": "1.2.1", - "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.2.1.tgz", - "integrity": "sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==", + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.0.tgz", + "integrity": "sha512-m3iNNWpd9rl3jvvcBnu70ylMdrXt8Vlq4HYadnU5fwcOtvkSQWPmj7amUcDT2qYI7risszBjI5AUIUox9D16pg==", "engines": { "node": ">=6" } @@ -9671,9 +9657,9 @@ } }, "node_modules/jose": { - "version": "5.2.3", - "resolved": "https://registry.npmjs.org/jose/-/jose-5.2.3.tgz", - "integrity": "sha512-KUXdbctm1uHVL8BYhnyHkgp3zDX5KW8ZhAKVFEfUbU2P8Alpzjb+48hHvjOdQIyPshoblhzsuqOwEEAbtHVirA==", + "version": "5.2.4", + "resolved": "https://registry.npmjs.org/jose/-/jose-5.2.4.tgz", + "integrity": "sha512-6ScbIk2WWCeXkmzF6bRPmEuaqy1m8SbsRFMa/FLrSCkGIhj8OLVG/IH+XHVmNMx/KUo8cVWEE6oKR4dJ+S0Rkg==", "funding": { "url": "https://github.com/sponsors/panva" } @@ -11721,9 +11707,9 @@ } }, "node_modules/rollup": { - "version": "4.14.0", - "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.14.0.tgz", - "integrity": "sha512-Qe7w62TyawbDzB4yt32R0+AbIo6m1/sqO7UPzFS8Z/ksL5mrfhA0v4CavfdmFav3D+ub4QeAgsGEe84DoWe/nQ==", + "version": "4.14.1", + "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.14.1.tgz", + "integrity": "sha512-4LnHSdd3QK2pa1J6dFbfm1HN0D7vSK/ZuZTsdyUAlA6Rr1yTouUTL13HaDOGJVgby461AhrNGBS7sCGXXtT+SA==", "dependencies": { "@types/estree": "1.0.5" }, @@ -11735,21 +11721,21 @@ "npm": ">=8.0.0" }, "optionalDependencies": { - "@rollup/rollup-android-arm-eabi": "4.14.0", - "@rollup/rollup-android-arm64": "4.14.0", - "@rollup/rollup-darwin-arm64": "4.14.0", - "@rollup/rollup-darwin-x64": "4.14.0", - "@rollup/rollup-linux-arm-gnueabihf": "4.14.0", - "@rollup/rollup-linux-arm64-gnu": "4.14.0", - "@rollup/rollup-linux-arm64-musl": "4.14.0", - "@rollup/rollup-linux-powerpc64le-gnu": "4.14.0", - "@rollup/rollup-linux-riscv64-gnu": "4.14.0", - "@rollup/rollup-linux-s390x-gnu": "4.14.0", - "@rollup/rollup-linux-x64-gnu": "4.14.0", - "@rollup/rollup-linux-x64-musl": "4.14.0", - "@rollup/rollup-win32-arm64-msvc": "4.14.0", - "@rollup/rollup-win32-ia32-msvc": "4.14.0", - "@rollup/rollup-win32-x64-msvc": "4.14.0", + "@rollup/rollup-android-arm-eabi": "4.14.1", + "@rollup/rollup-android-arm64": "4.14.1", + "@rollup/rollup-darwin-arm64": "4.14.1", + "@rollup/rollup-darwin-x64": "4.14.1", + "@rollup/rollup-linux-arm-gnueabihf": "4.14.1", + "@rollup/rollup-linux-arm64-gnu": "4.14.1", + "@rollup/rollup-linux-arm64-musl": "4.14.1", + "@rollup/rollup-linux-powerpc64le-gnu": "4.14.1", + "@rollup/rollup-linux-riscv64-gnu": "4.14.1", + "@rollup/rollup-linux-s390x-gnu": "4.14.1", + "@rollup/rollup-linux-x64-gnu": "4.14.1", + "@rollup/rollup-linux-x64-musl": "4.14.1", + "@rollup/rollup-win32-arm64-msvc": "4.14.1", + "@rollup/rollup-win32-ia32-msvc": "4.14.1", + "@rollup/rollup-win32-x64-msvc": "4.14.1", "fsevents": "~2.3.2" } }, diff --git a/frontend/package.json b/frontend/package.json index 0e945fb7e4..6d0b03474e 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -13,17 +13,19 @@ "@reduxjs/toolkit": "^2.2.2", "@vitejs/plugin-react": "^4.2.1", "@xterm/xterm": "^5.4.0", + "clsx": "^2.1.0", + "eslint-config-airbnb-typescript": "^18.0.0", "framer-motion": "^11.0.24", - "jose": "^5.2.3", "i18next": "^23.10.1", "i18next-browser-languagedetector": "^7.2.1", "i18next-http-backend": "^2.5.0", + "jose": "^5.2.3", "monaco-editor": "^0.47.0", "react": "^18.2.0", "react-accessible-treeview": "^2.8.3", "react-dom": "^18.2.0", - "react-icons": "^5.0.1", "react-i18next": "^14.1.0", + "react-icons": "^5.0.1", "react-redux": "^9.1.0", "react-syntax-highlighter": "^15.5.0", "tailwind-merge": "^2.2.2", diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index d5cfccfc36..1063da5405 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -19,7 +19,7 @@ interface Props { function LeftNav({ setSettingOpen }: Props): JSX.Element { return ( -
+
setSettingOpen(true)} @@ -69,18 +69,18 @@ function App(): JSX.Element { }; return ( -
+
-
+
-
+
-
+
diff --git a/frontend/src/components/Browser.tsx b/frontend/src/components/Browser.tsx index 7fa5fac242..081b2b0258 100644 --- a/frontend/src/components/Browser.tsx +++ b/frontend/src/components/Browser.tsx @@ -13,7 +13,7 @@ function Browser(): JSX.Element { : `data:image/png;base64,${screenshotSrc || ""}`; return ( -
+
{url}
diff --git a/frontend/src/components/ChatInterface.tsx b/frontend/src/components/ChatInterface.tsx index 95fad0a5c3..14179ca18e 100644 --- a/frontend/src/components/ChatInterface.tsx +++ b/frontend/src/components/ChatInterface.tsx @@ -139,8 +139,8 @@ function ChatInterface(): JSX.Element { const { initialized } = useSelector((state: RootState) => state.task); return ( -
-
Chat
+
+
Chat
{initialized ? : }
diff --git a/frontend/src/components/CodeEditor.tsx b/frontend/src/components/CodeEditor.tsx index d6be6dc009..fc7d7ab367 100644 --- a/frontend/src/components/CodeEditor.tsx +++ b/frontend/src/components/CodeEditor.tsx @@ -1,166 +1,17 @@ import Editor, { Monaco } from "@monaco-editor/react"; import type { editor } from "monaco-editor"; -import React, { useEffect, useState } from "react"; -import TreeView, { flattenTree } from "react-accessible-treeview"; -import { DiJavascript } from "react-icons/di"; -import { - FaCss3, - FaFile, - FaFolder, - FaFolderOpen, - FaHtml5, - FaList, - FaMarkdown, - FaNpm, - FaPython, -} from "react-icons/fa"; -import { VscClose, VscListTree, VscRefresh } from "react-icons/vsc"; +import React, { useState } from "react"; +import { Tabs, Tab } from "@nextui-org/react"; import { useSelector } from "react-redux"; -import { getWorkspace, selectFile } from "../services/fileService"; -import { setCode, updateWorkspace } from "../state/codeSlice"; -import store, { RootState } from "../store"; - -interface FileIconProps { - filename: string; -} - -function FileIcon({ filename }: FileIconProps): JSX.Element | null { - const extension = filename.slice(filename.lastIndexOf(".") + 1); - switch (extension) { - case "js": - return ; - case "ts": - return ; - case "py": - return ; - case "css": - return ; - case "json": - return ; - case "npmignore": - return ; - case "html": - return ; - case "md": - return ; - default: - return ; - } -} - -interface FolderIconProps { - isOpen: boolean; -} - -function FolderIcon({ isOpen }: FolderIconProps): JSX.Element { - return isOpen ? ( - - ) : ( - - ); -} - -function Files(): JSX.Element | null { - const workspaceFolder = useSelector( - (state: RootState) => state.code.workspaceFolder, - ); - const selectedIds = useSelector((state: RootState) => state.code.selectedIds); - const [explorerOpen, setExplorerOpen] = useState(true); - const workspaceTree = flattenTree(workspaceFolder); - - useEffect(() => { - getWorkspace().then((file) => store.dispatch(updateWorkspace(file))); - }, []); - - if (workspaceTree.length <= 1) { - return null; - } - if (!explorerOpen) { - return ( -
-
- setExplorerOpen(true)} - /> -
-
- ); - } - return ( -
-
- - getWorkspace().then((file) => store.dispatch(updateWorkspace(file))) - } - className="cursor-pointer" - /> - setExplorerOpen(false)} - /> -
-
- node.id)} - onNodeSelect={(node) => { - if (!node.isBranch) { - let fullPath = node.element.name; - let currentNode = workspaceTree.find( - (file) => file.id === node.element.id, - ); - while (currentNode !== undefined && currentNode.parent) { - currentNode = workspaceTree.find( - (file) => file.id === node.element.parent, - ); - fullPath = `${currentNode!.name}/${fullPath}`; - } - selectFile(fullPath).then((code) => { - store.dispatch(setCode(code)); - }); - } - }} - // eslint-disable-next-line react/no-unstable-nested-components - nodeRenderer={({ - element, - isBranch, - isExpanded, - getNodeProps, - level, - }) => ( -
-
- {isBranch ? ( - - ) : ( - - )} -
- {element.name} -
- )} - /> -
-
- ); -} +import { RootState } from "../store"; +import Files from "./Files"; +import { cn } from "../utils/utils"; function CodeEditor(): JSX.Element { + const [selectedFileName, setSelectedFileName] = useState("welcome"); + const [explorerOpen, setExplorerOpen] = useState(true); const code = useSelector((state: RootState) => state.code.code); - const bgColor = getComputedStyle(document.documentElement) - .getPropertyValue("--bg-workspace") - .trim(); - const handleEditorDidMount = ( editor: editor.IStandaloneCodeEditor, monaco: Monaco, @@ -171,7 +22,7 @@ function CodeEditor(): JSX.Element { inherit: true, rules: [], colors: { - "editor.background": bgColor, + "editor.background": "#171717", }, }); @@ -180,16 +31,50 @@ function CodeEditor(): JSX.Element { }; return ( -
- - +
+
+ +
+
+ + +
+ +
+ + +
); } diff --git a/frontend/src/components/FileIcons.tsx b/frontend/src/components/FileIcons.tsx new file mode 100644 index 0000000000..2ad6068d0c --- /dev/null +++ b/frontend/src/components/FileIcons.tsx @@ -0,0 +1,41 @@ +import React from "react"; +import { DiJavascript } from "react-icons/di"; +import { + FaCss3, + FaFile, + FaHtml5, + FaList, + FaMarkdown, + FaNpm, + FaPython, +} from "react-icons/fa"; + +interface FileIconProps { + filename: string; +} + +function FileIcon({ filename }: FileIconProps): JSX.Element | null { + const extension = filename.slice(filename.lastIndexOf(".") + 1); + switch (extension) { + case "js": + return ; + case "ts": + return ; + case "py": + return ; + case "css": + return ; + case "json": + return ; + case "npmignore": + return ; + case "html": + return ; + case "md": + return ; + default: + return ; + } +} + +export default FileIcon; diff --git a/frontend/src/components/Files.tsx b/frontend/src/components/Files.tsx new file mode 100644 index 0000000000..05273ca101 --- /dev/null +++ b/frontend/src/components/Files.tsx @@ -0,0 +1,175 @@ +import React, { useEffect } from "react"; +import TreeView, { flattenTree } from "react-accessible-treeview"; +import { AiOutlineFolder } from "react-icons/ai"; +import { Accordion, AccordionItem, Button } from "@nextui-org/react"; +import { + TbLayoutSidebarLeftCollapseFilled, + TbLayoutSidebarRightCollapseFilled, +} from "react-icons/tb"; + +import { IoIosArrowDown } from "react-icons/io"; +import { VscRefresh } from "react-icons/vsc"; +import { useSelector } from "react-redux"; +import { getWorkspace, selectFile } from "../services/fileService"; +import { setCode, updateWorkspace } from "../state/codeSlice"; +import store, { RootState } from "../store"; +import FolderIcon from "./FolderIcon"; +import FileIcon from "./FileIcons"; + +interface FilesProps { + setSelectedFileName: React.Dispatch>; + setExplorerOpen: React.Dispatch>; + explorerOpen: boolean; +} + +function Files({ + setSelectedFileName, + setExplorerOpen, + explorerOpen, +}: FilesProps): JSX.Element { + const workspaceFolder = useSelector( + (state: RootState) => state.code.workspaceFolder, + ); + + const selectedIds = useSelector((state: RootState) => state.code.selectedIds); + const workspaceTree = flattenTree(workspaceFolder); + + useEffect(() => { + getWorkspace().then((file) => store.dispatch(updateWorkspace(file))); + }, []); + + if (workspaceTree.length <= 1) { +
+
No workspace found
+
; + } + + if (!explorerOpen) { + return ( +
+
+ setExplorerOpen(true)} + /> +
+
+ ); + } + return ( +
+
+ + + {workspaceFolder.name} +
+ + +
+
+ } + className="editor-accordion" + startContent={ +
+ + +
+ } + > +
+ node.id)} + onNodeSelect={(node) => { + if (!node.isBranch) { + let fullPath = node.element.name; + setSelectedFileName(fullPath); + let currentNode = workspaceTree.find( + (file) => file.id === node.element.id, + ); + while (currentNode !== undefined && currentNode.parent) { + currentNode = workspaceTree.find( + (file) => file.id === node.element.parent, + ); + fullPath = `${currentNode!.name}/${fullPath}`; + } + selectFile(fullPath).then((code) => { + store.dispatch(setCode(code)); + }); + } + }} + // eslint-disable-next-line react/no-unstable-nested-components + nodeRenderer={({ + element, + isBranch, + isExpanded, + getNodeProps, + level, + }) => ( +
+
+ {isBranch ? ( + + ) : ( + + )} +
+ {element.name} +
+ )} + /> +
+ + +
+
+ ); +} + +export default Files; diff --git a/frontend/src/components/FolderIcon.tsx b/frontend/src/components/FolderIcon.tsx new file mode 100644 index 0000000000..4e51f100b3 --- /dev/null +++ b/frontend/src/components/FolderIcon.tsx @@ -0,0 +1,16 @@ +import React from "react"; +import { FaFolder, FaFolderOpen } from "react-icons/fa"; + +interface FolderIconProps { + isOpen: boolean; +} + +function FolderIcon({ isOpen }: FolderIconProps): JSX.Element { + return isOpen ? ( + + ) : ( + + ); +} + +export default FolderIcon; diff --git a/frontend/src/components/Planner.tsx b/frontend/src/components/Planner.tsx index b704abfacd..37428d7ffb 100644 --- a/frontend/src/components/Planner.tsx +++ b/frontend/src/components/Planner.tsx @@ -1,7 +1,7 @@ import React from "react"; function Planner(): JSX.Element { - return
Coming soon...
; + return
Coming soon...
; } export default Planner; diff --git a/frontend/src/components/Terminal.tsx b/frontend/src/components/Terminal.tsx index cf4d1f7b0a..0107714de3 100644 --- a/frontend/src/components/Terminal.tsx +++ b/frontend/src/components/Terminal.tsx @@ -52,10 +52,6 @@ function Terminal(): JSX.Element { const { commands } = useSelector((state: RootState) => state.cmd); useEffect(() => { - const bgColor = getComputedStyle(document.documentElement) - .getPropertyValue("--bg-workspace") - .trim(); - const terminal = new XtermTerminal({ // This value is set to the appropriate value by the // `fitAddon.fit()` call below. @@ -66,7 +62,7 @@ function Terminal(): JSX.Element { fontFamily: "Menlo, Monaco, 'Courier New', monospace", fontSize: 14, theme: { - background: bgColor, + background: "#262626", }, }); terminal.write("$ "); @@ -104,7 +100,9 @@ function Terminal(): JSX.Element { return (
-
Terminal
+
+ Terminal +
diff --git a/frontend/src/components/Workspace.tsx b/frontend/src/components/Workspace.tsx index 8eedea7f3c..ede677a803 100644 --- a/frontend/src/components/Workspace.tsx +++ b/frontend/src/components/Workspace.tsx @@ -1,9 +1,9 @@ import { Tab, Tabs } from "@nextui-org/react"; import React, { useMemo, useState } from "react"; import { useTranslation } from "react-i18next"; +import { FaCode } from "react-icons/fa6"; +import { IoIosGlobe } from "react-icons/io"; import Calendar from "../assets/calendar"; -import Earth from "../assets/earth"; -import Pencil from "../assets/pencil"; import { I18nKey } from "../i18n/declaration"; import { AllTabs, TabOption, TabType } from "../types/TabOption"; import Browser from "./Browser"; @@ -23,12 +23,12 @@ function Workspace() { }, [TabOption.CODE]: { name: t(I18nKey.WORKSPACE$CODE_EDITOR_TAB_LABEL), - icon: , + icon: , component: , }, [TabOption.BROWSER]: { name: t(I18nKey.WORKSPACE$BROWSER_TAB_LABEL), - icon: , + icon: , component: , }, }), @@ -39,9 +39,17 @@ function Workspace() { <>
{ @@ -52,7 +60,7 @@ function Workspace() { +
{tabData[tab].icon} {tabData[tab].name}
@@ -63,7 +71,7 @@ function Workspace() {
{Object.keys(tabData).map((tab) => (