vzcode 0.56.0 → 0.58.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +3 -1
- package/dist/assets/{index-pF--hgc_.js → index-NAjxbACe.js} +51 -51
- package/dist/assets/{index-mTosxc8C.css → index-aQVpCjcB.css} +1 -1
- package/dist/index.html +2 -2
- package/package.json +7 -6
- package/src/client/AIAssist/AIAssistWidget/style.scss +1 -1
- package/src/client/App/style.scss +6 -6
- package/src/client/Icons/BugSVG.tsx +20 -0
- package/src/client/Icons/CloseSVG.tsx +19 -0
- package/src/client/Icons/DirectoryArrowSVG.tsx +19 -0
- package/src/client/Icons/EditSVG.tsx +19 -0
- package/src/client/Icons/FileSVG.tsx +19 -0
- package/src/client/Icons/GearSVG.tsx +16 -0
- package/src/client/Icons/NewSVG.tsx +19 -0
- package/src/client/Icons/TrashSVG.tsx +19 -0
- package/src/client/Icons/index.tsx +8 -4
- package/src/client/TabList/style.scss +1 -1
- package/src/client/VZSidebar/DirectoryListing.tsx +1 -1
- package/src/client/VZSidebar/FileListing.tsx +4 -0
- package/src/client/VZSidebar/Item.tsx +14 -9
- package/src/client/VZSidebar/index.tsx +43 -11
- package/src/client/VZSidebar/styles.scss +58 -14
- package/src/server/index.js +4 -4
- package/src/client/Icons/Close.tsx +0 -17
- package/src/client/Icons/Edit.tsx +0 -16
- package/src/client/Icons/Gear.tsx +0 -16
- package/src/client/Icons/New.tsx +0 -16
- package/src/client/Icons/Trash.tsx +0 -17
- package/src/client/VZSidebar/DirectoryArrowSVG.jsx +0 -8
package/dist/index.html
CHANGED
|
@@ -24,8 +24,8 @@
|
|
|
24
24
|
href="https://unpkg.com/boxicons@2.0.7/css/boxicons.min.css"
|
|
25
25
|
rel="stylesheet"
|
|
26
26
|
/>
|
|
27
|
-
<script type="module" crossorigin src="/assets/index-
|
|
28
|
-
<link rel="stylesheet" crossorigin href="/assets/index-
|
|
27
|
+
<script type="module" crossorigin src="/assets/index-NAjxbACe.js"></script>
|
|
28
|
+
<link rel="stylesheet" crossorigin href="/assets/index-aQVpCjcB.css">
|
|
29
29
|
</head>
|
|
30
30
|
<body>
|
|
31
31
|
<div id="root"></div>
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "vzcode",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.58.0",
|
|
4
4
|
"description": "Multiplayer code editor system",
|
|
5
5
|
"main": "src/index.ts",
|
|
6
6
|
"type": "module",
|
|
@@ -11,10 +11,10 @@
|
|
|
11
11
|
],
|
|
12
12
|
"scripts": {
|
|
13
13
|
"test": "vitest run",
|
|
14
|
-
"test-interactive": "
|
|
14
|
+
"test-interactive": "cd test/sampleDirectories/kitchenSink && node ../../../src/server/index.js",
|
|
15
15
|
"prettier": "prettier {*.*,**/*.*} --write",
|
|
16
16
|
"tsc": "tsc --noEmit",
|
|
17
|
-
"dev": "vite",
|
|
17
|
+
"dev": "concurrently \"npm run test-interactive\" \"vite\"",
|
|
18
18
|
"build": "vite build",
|
|
19
19
|
"build-release": "vite build --mode release",
|
|
20
20
|
"preview": "vite preview",
|
|
@@ -96,7 +96,7 @@
|
|
|
96
96
|
"diff-match-patch": "^1.0.5",
|
|
97
97
|
"dotenv": "^16.4.1",
|
|
98
98
|
"express": "^4.18.2",
|
|
99
|
-
"ignore": "^5.3.
|
|
99
|
+
"ignore": "^5.3.1",
|
|
100
100
|
"json0-ot-diff": "^1.1.2",
|
|
101
101
|
"ngrok": "^4.3.3",
|
|
102
102
|
"open": "^10.0.3",
|
|
@@ -105,16 +105,17 @@
|
|
|
105
105
|
"react": "^18.2.0",
|
|
106
106
|
"react-bootstrap": "^2.10.0",
|
|
107
107
|
"react-dom": "^18.2.0",
|
|
108
|
-
"react-router-dom": "^6.
|
|
108
|
+
"react-router-dom": "^6.22.0",
|
|
109
109
|
"sharedb": "^4.1.2",
|
|
110
110
|
"sharedb-client-browser": "^4.4.0",
|
|
111
111
|
"vizhub-ui": "^3.18.0",
|
|
112
112
|
"ws": "^8.16.0"
|
|
113
113
|
},
|
|
114
114
|
"devDependencies": {
|
|
115
|
-
"@types/react": "^18.2.
|
|
115
|
+
"@types/react": "^18.2.52",
|
|
116
116
|
"@types/react-dom": "^18.2.18",
|
|
117
117
|
"@vitejs/plugin-react": "^4.2.1",
|
|
118
|
+
"concurrently": "^8.2.2",
|
|
118
119
|
"prettier": "^3.2.4",
|
|
119
120
|
"sass": "^1.70.0",
|
|
120
121
|
"typescript": "^5.3.3",
|
|
@@ -15,16 +15,16 @@
|
|
|
15
15
|
|
|
16
16
|
/* Scrollbar Styles */
|
|
17
17
|
::-webkit-scrollbar {
|
|
18
|
-
width:
|
|
19
|
-
height:
|
|
18
|
+
width: 16px;
|
|
19
|
+
height: 16px;
|
|
20
20
|
}
|
|
21
21
|
|
|
22
|
-
::-webkit-scrollbar-track {
|
|
23
|
-
|
|
24
|
-
}
|
|
22
|
+
// ::-webkit-scrollbar-track {
|
|
23
|
+
// background: rgb(255, 255, 255, 0.1);
|
|
24
|
+
// }
|
|
25
25
|
|
|
26
26
|
::-webkit-scrollbar-thumb {
|
|
27
|
-
background: rgb(
|
|
27
|
+
background: rgb(255, 255, 255, 0.3);
|
|
28
28
|
}
|
|
29
29
|
|
|
30
30
|
::-webkit-scrollbar-thumb:hover {
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
// From Heroicons
|
|
2
|
+
export const BugSVG = () => {
|
|
3
|
+
return (
|
|
4
|
+
<svg
|
|
5
|
+
width="24"
|
|
6
|
+
height="24"
|
|
7
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
8
|
+
fill="none"
|
|
9
|
+
viewBox="0 0 24 24"
|
|
10
|
+
strokeWidth="1.5"
|
|
11
|
+
stroke="currentColor"
|
|
12
|
+
>
|
|
13
|
+
<path
|
|
14
|
+
strokeLinecap="round"
|
|
15
|
+
strokeLinejoin="round"
|
|
16
|
+
d="M12 12.75c1.148 0 2.278.08 3.383.237 1.037.146 1.866.966 1.866 2.013 0 3.728-2.35 6.75-5.25 6.75S6.75 18.728 6.75 15c0-1.046.83-1.867 1.866-2.013A24.204 24.204 0 0 1 12 12.75Zm0 0c2.883 0 5.647.508 8.207 1.44a23.91 23.91 0 0 1-1.152 6.06M12 12.75c-2.883 0-5.647.508-8.208 1.44.125 2.104.52 4.136 1.153 6.06M12 12.75a2.25 2.25 0 0 0 2.248-2.354M12 12.75a2.25 2.25 0 0 1-2.248-2.354M12 8.25c.995 0 1.971-.08 2.922-.236.403-.066.74-.358.795-.762a3.778 3.778 0 0 0-.399-2.25M12 8.25c-.995 0-1.97-.08-2.922-.236-.402-.066-.74-.358-.795-.762a3.734 3.734 0 0 1 .4-2.253M12 8.25a2.25 2.25 0 0 0-2.248 2.146M12 8.25a2.25 2.25 0 0 1 2.248 2.146M8.683 5a6.032 6.032 0 0 1-1.155-1.002c.07-.63.27-1.222.574-1.747m.581 2.749A3.75 3.75 0 0 1 15.318 5m0 0c.427-.283.815-.62 1.155-.999a4.471 4.471 0 0 0-.575-1.752M4.921 6a24.048 24.048 0 0 0-.392 3.314c1.668.546 3.416.914 5.223 1.082M19.08 6c.205 1.08.337 2.187.392 3.314a23.882 23.882 0 0 1-5.223 1.082"
|
|
17
|
+
/>
|
|
18
|
+
</svg>
|
|
19
|
+
);
|
|
20
|
+
};
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
export const CloseSVG = () => {
|
|
2
|
+
return (
|
|
3
|
+
<svg
|
|
4
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
5
|
+
width="24"
|
|
6
|
+
height="24"
|
|
7
|
+
viewBox="0 0 24 24"
|
|
8
|
+
fill="none"
|
|
9
|
+
>
|
|
10
|
+
<path
|
|
11
|
+
d="M6 18L18 6M6 6L18 18"
|
|
12
|
+
stroke="#576786"
|
|
13
|
+
strokeWidth="1.5"
|
|
14
|
+
strokeLinecap="round"
|
|
15
|
+
strokeLinejoin="round"
|
|
16
|
+
/>
|
|
17
|
+
</svg>
|
|
18
|
+
);
|
|
19
|
+
};
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
export const DirectoryArrowSVG = ({
|
|
2
|
+
height = 16,
|
|
3
|
+
fill = 'currentcolor',
|
|
4
|
+
}) => (
|
|
5
|
+
<svg
|
|
6
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
7
|
+
height={height}
|
|
8
|
+
viewBox={'4 4 16 16'}
|
|
9
|
+
>
|
|
10
|
+
<path
|
|
11
|
+
stroke={fill}
|
|
12
|
+
fill="none"
|
|
13
|
+
d="M8 17l9-5-9-5v10z"
|
|
14
|
+
strokeLinecap="round"
|
|
15
|
+
strokeLinejoin="round"
|
|
16
|
+
strokeWidth="1.5"
|
|
17
|
+
/>
|
|
18
|
+
</svg>
|
|
19
|
+
);
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
export const EditSVG = () => {
|
|
2
|
+
return (
|
|
3
|
+
<svg
|
|
4
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
5
|
+
width="24"
|
|
6
|
+
height="24"
|
|
7
|
+
viewBox="0 0 24 24"
|
|
8
|
+
>
|
|
9
|
+
<path
|
|
10
|
+
fill="none"
|
|
11
|
+
stroke="currentColor"
|
|
12
|
+
strokeLinecap="round"
|
|
13
|
+
strokeLinejoin="round"
|
|
14
|
+
strokeWidth="1.5"
|
|
15
|
+
d="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L10.582 16.07a4.5 4.5 0 0 1-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 0 1 1.13-1.897l8.932-8.931Zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0 1 15.75 21H5.25A2.25 2.25 0 0 1 3 18.75V8.25A2.25 2.25 0 0 1 5.25 6H10"
|
|
16
|
+
/>
|
|
17
|
+
</svg>
|
|
18
|
+
);
|
|
19
|
+
};
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
export const FileSVG = () => {
|
|
2
|
+
return (
|
|
3
|
+
<svg
|
|
4
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
5
|
+
width="24"
|
|
6
|
+
height="24"
|
|
7
|
+
fill="none"
|
|
8
|
+
viewBox="0 0 24 24"
|
|
9
|
+
>
|
|
10
|
+
<path
|
|
11
|
+
stroke="currentColor"
|
|
12
|
+
strokeLinecap="round"
|
|
13
|
+
strokeLinejoin="round"
|
|
14
|
+
strokeWidth="1.5"
|
|
15
|
+
d="M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Z"
|
|
16
|
+
/>
|
|
17
|
+
</svg>
|
|
18
|
+
);
|
|
19
|
+
};
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
export const GearSVG = () => (
|
|
2
|
+
<svg
|
|
3
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
4
|
+
width="24"
|
|
5
|
+
height="24"
|
|
6
|
+
viewBox="0 0 24 24"
|
|
7
|
+
fill="none"
|
|
8
|
+
stroke="currentColor"
|
|
9
|
+
strokeLinecap="round"
|
|
10
|
+
strokeLinejoin="round"
|
|
11
|
+
strokeWidth="1.5"
|
|
12
|
+
>
|
|
13
|
+
<path d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.324.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 0 1 1.37.49l1.296 2.247a1.125 1.125 0 0 1-.26 1.431l-1.003.827c-.293.24-.438.613-.431.992a6.759 6.759 0 0 1 0 .255c-.007.378.138.75.43.99l1.005.828c.424.35.534.954.26 1.43l-1.298 2.247a1.125 1.125 0 0 1-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.57 6.57 0 0 1-.22.128c-.331.183-.581.495-.644.869l-.213 1.28c-.09.543-.56.941-1.11.941h-2.594c-.55 0-1.02-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 0 1-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 0 1-1.369-.49l-1.297-2.247a1.125 1.125 0 0 1 .26-1.431l1.004-.827c.292-.24.437-.613.43-.992a6.932 6.932 0 0 1 0-.255c.007-.378-.138-.75-.43-.99l-1.004-.828a1.125 1.125 0 0 1-.26-1.43l1.297-2.247a1.125 1.125 0 0 1 1.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.087.22-.128.332-.183.582-.495.644-.869l.214-1.281Z" />
|
|
14
|
+
<path d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" />
|
|
15
|
+
</svg>
|
|
16
|
+
);
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
export const NewSVG = () => {
|
|
2
|
+
return (
|
|
3
|
+
<svg
|
|
4
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
5
|
+
width="24"
|
|
6
|
+
height="24"
|
|
7
|
+
viewBox="0 0 24 24"
|
|
8
|
+
fill="none"
|
|
9
|
+
>
|
|
10
|
+
<path
|
|
11
|
+
stroke="currentColor"
|
|
12
|
+
strokeLinecap="round"
|
|
13
|
+
strokeLinejoin="round"
|
|
14
|
+
strokeWidth="1.5"
|
|
15
|
+
d="M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m3.75 9v6m3-3H9m1.5-12H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Z"
|
|
16
|
+
/>
|
|
17
|
+
</svg>
|
|
18
|
+
);
|
|
19
|
+
};
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
export const TrashSVG = () => {
|
|
2
|
+
return (
|
|
3
|
+
<svg
|
|
4
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
5
|
+
width="24"
|
|
6
|
+
height="24"
|
|
7
|
+
viewBox="0 0 24 24"
|
|
8
|
+
>
|
|
9
|
+
<path
|
|
10
|
+
fill="none"
|
|
11
|
+
stroke="currentColor"
|
|
12
|
+
d="M14.7404 9L14.3942 18M9.60577 18L9.25962 9M19.2276 5.79057C19.5696 5.84221 19.9104 5.89747 20.25 5.95629M19.2276 5.79057L18.1598 19.6726C18.0696 20.8448 17.0921 21.75 15.9164 21.75H8.08357C6.90786 21.75 5.93037 20.8448 5.8402 19.6726L4.77235 5.79057M19.2276 5.79057C18.0812 5.61744 16.9215 5.48485 15.75 5.39432M3.75 5.95629C4.08957 5.89747 4.43037 5.84221 4.77235 5.79057M4.77235 5.79057C5.91878 5.61744 7.07849 5.48485 8.25 5.39432M15.75 5.39432V4.47819C15.75 3.29882 14.8393 2.31423 13.6606 2.27652C13.1092 2.25889 12.5556 2.25 12 2.25C11.4444 2.25 10.8908 2.25889 10.3394 2.27652C9.16065 2.31423 8.25 3.29882 8.25 4.47819V5.39432M15.75 5.39432C14.5126 5.2987 13.262 5.25 12 5.25C10.738 5.25 9.48744 5.2987 8.25 5.39432"
|
|
13
|
+
strokeWidth="1.5"
|
|
14
|
+
strokeLinecap="round"
|
|
15
|
+
strokeLinejoin="round"
|
|
16
|
+
/>
|
|
17
|
+
</svg>
|
|
18
|
+
);
|
|
19
|
+
};
|
|
@@ -1,6 +1,10 @@
|
|
|
1
1
|
export { SparklesSVG } from './SparklesSVG';
|
|
2
2
|
export { StopSVG } from './StopSVG';
|
|
3
|
-
export {
|
|
4
|
-
export {
|
|
5
|
-
export {
|
|
6
|
-
export {
|
|
3
|
+
export { EditSVG } from './EditSVG';
|
|
4
|
+
export { NewSVG } from './NewSVG';
|
|
5
|
+
export { GearSVG } from './GearSVG';
|
|
6
|
+
export { CloseSVG } from './CloseSVG';
|
|
7
|
+
export { TrashSVG } from './TrashSVG';
|
|
8
|
+
export { BugSVG } from './BugSVG';
|
|
9
|
+
export { FileSVG } from './FileSVG';
|
|
10
|
+
export { DirectoryArrowSVG } from './DirectoryArrowSVG';
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { useCallback, useMemo } from 'react';
|
|
2
2
|
import { Item } from './Item';
|
|
3
3
|
import { Listing } from './Listing';
|
|
4
|
-
import { DirectoryArrowSVG } from '
|
|
4
|
+
import { DirectoryArrowSVG } from '../Icons';
|
|
5
5
|
import type {
|
|
6
6
|
FileTree,
|
|
7
7
|
FileTreeFile,
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { useCallback } from 'react';
|
|
2
2
|
import { Item } from './Item';
|
|
3
3
|
import { FileId } from '../../types';
|
|
4
|
+
import { FileSVG } from '../Icons';
|
|
4
5
|
|
|
5
6
|
export const FileListing = ({
|
|
6
7
|
name,
|
|
@@ -47,6 +48,9 @@ export const FileListing = ({
|
|
|
47
48
|
handleRenameClick={handleRenameClick}
|
|
48
49
|
isActive={isActive}
|
|
49
50
|
>
|
|
51
|
+
<i className="file-icon">
|
|
52
|
+
<FileSVG />
|
|
53
|
+
</i>
|
|
50
54
|
{name}
|
|
51
55
|
</Item>
|
|
52
56
|
);
|
|
@@ -4,6 +4,7 @@ import {
|
|
|
4
4
|
useRef,
|
|
5
5
|
useEffect,
|
|
6
6
|
} from 'react';
|
|
7
|
+
import { EditSVG, FileSVG, TrashSVG } from '../Icons';
|
|
7
8
|
|
|
8
9
|
// TODO consider moving this up to a higher level of the component tree
|
|
9
10
|
import { DeleteConfirmationModal } from './DeleteConfirmationModal';
|
|
@@ -125,7 +126,7 @@ export const Item = ({
|
|
|
125
126
|
|
|
126
127
|
return (
|
|
127
128
|
<div
|
|
128
|
-
className={`
|
|
129
|
+
className={`file-or-directory user-select-none ${
|
|
129
130
|
isActive ? 'active-file' : ''
|
|
130
131
|
}`}
|
|
131
132
|
onClick={isRenaming ? null : handleClick}
|
|
@@ -153,20 +154,24 @@ export const Item = ({
|
|
|
153
154
|
)}
|
|
154
155
|
</div>
|
|
155
156
|
{isHovered && !isRenaming ? (
|
|
156
|
-
<div
|
|
157
|
+
<div
|
|
158
|
+
className="utils"
|
|
159
|
+
style={{ position: 'relative' }}
|
|
160
|
+
>
|
|
157
161
|
{(isDirectory ? enableRenameDirectory : true) ? (
|
|
158
162
|
<i
|
|
159
|
-
className="bx bxs-edit utilities"
|
|
160
|
-
style={{ color: '#9edcff' }}
|
|
161
163
|
onClick={handleRenameIconClick}
|
|
162
|
-
|
|
164
|
+
className="icon-button"
|
|
165
|
+
>
|
|
166
|
+
<EditSVG />
|
|
167
|
+
</i>
|
|
163
168
|
) : null}
|
|
164
|
-
|
|
165
169
|
<i
|
|
166
|
-
className="bx bx-trash utilities"
|
|
167
|
-
style={{ color: '#ff006b' }}
|
|
168
170
|
onClick={handleModalOpen}
|
|
169
|
-
|
|
171
|
+
className="icon-button"
|
|
172
|
+
>
|
|
173
|
+
<TrashSVG />
|
|
174
|
+
</i>
|
|
170
175
|
</div>
|
|
171
176
|
) : null}
|
|
172
177
|
|
|
@@ -16,10 +16,16 @@ import { getFileTree } from '../getFileTree';
|
|
|
16
16
|
import { sortFileTree } from '../sortFileTree';
|
|
17
17
|
import { disableSettings } from '../featureFlags';
|
|
18
18
|
import { SplitPaneResizeContext } from '../SplitPaneResizeContext';
|
|
19
|
+
import { BugSVG, GearSVG, NewSVG } from '../Icons';
|
|
19
20
|
import { Listing } from './Listing';
|
|
20
21
|
import { CreateFileModal } from './CreateFileModal';
|
|
21
22
|
import './styles.scss';
|
|
22
23
|
|
|
24
|
+
// TODO turn this UI back on when we are actually detecting
|
|
25
|
+
// the connection status.
|
|
26
|
+
// See https://github.com/vizhub-core/vzcode/issues/456
|
|
27
|
+
const enableConnectionStatus = false;
|
|
28
|
+
|
|
23
29
|
const CreateFileButton = ({ handleCreateFile }) => {
|
|
24
30
|
return (
|
|
25
31
|
<i
|
|
@@ -146,11 +152,35 @@ export const VZSidebar = ({
|
|
|
146
152
|
>
|
|
147
153
|
<div className="files">
|
|
148
154
|
<div className="full-box">
|
|
149
|
-
<div className="sidebar-section-hint">
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
155
|
+
<div className="sidebar-section-hint">
|
|
156
|
+
Project Files
|
|
157
|
+
</div>
|
|
158
|
+
<div className="sidebar-section-buttons">
|
|
159
|
+
<a
|
|
160
|
+
href="https://github.com/vizhub-core/vzcode/issues/new"
|
|
161
|
+
target="_blank"
|
|
162
|
+
rel="noopener noreferrer"
|
|
163
|
+
>
|
|
164
|
+
<i className="icon-button">
|
|
165
|
+
<BugSVG />
|
|
166
|
+
</i>
|
|
167
|
+
</a>
|
|
168
|
+
|
|
169
|
+
{disableSettings ? null : (
|
|
170
|
+
<i
|
|
171
|
+
onClick={handleSettingsClick}
|
|
172
|
+
className="icon-button"
|
|
173
|
+
>
|
|
174
|
+
<GearSVG />
|
|
175
|
+
</i>
|
|
176
|
+
)}
|
|
177
|
+
|
|
178
|
+
<i
|
|
179
|
+
onClick={handleCreateFile}
|
|
180
|
+
className="icon-button"
|
|
181
|
+
>
|
|
182
|
+
<NewSVG />
|
|
183
|
+
</i>
|
|
154
184
|
</div>
|
|
155
185
|
</div>
|
|
156
186
|
{filesExist ? (
|
|
@@ -189,12 +219,14 @@ export const VZSidebar = ({
|
|
|
189
219
|
</div>
|
|
190
220
|
)}
|
|
191
221
|
</div>
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
222
|
+
|
|
223
|
+
{enableConnectionStatus && (
|
|
224
|
+
<div className="connection-status">
|
|
225
|
+
Connection Status
|
|
226
|
+
<div className="connection">
|
|
227
|
+
Saved
|
|
228
|
+
<div className="saved" />
|
|
229
|
+
</div>
|
|
198
230
|
</div>
|
|
199
231
|
)}
|
|
200
232
|
<CreateFileModal
|
|
@@ -1,13 +1,27 @@
|
|
|
1
1
|
.vz-sidebar {
|
|
2
2
|
height: 100%;
|
|
3
|
-
color:
|
|
4
|
-
background: #
|
|
3
|
+
color: var(--vh-color-neutral-04);
|
|
4
|
+
background: #1f2022;
|
|
5
5
|
display: flex;
|
|
6
6
|
flex-direction: column;
|
|
7
7
|
justify-content: space-between;
|
|
8
8
|
|
|
9
|
+
.icon-button {
|
|
10
|
+
padding: 4px;
|
|
11
|
+
border-radius: 4px;
|
|
12
|
+
/* These are required to center the icon */
|
|
13
|
+
display: flex;
|
|
14
|
+
align-items: center;
|
|
15
|
+
justify-content: center;
|
|
16
|
+
cursor: pointer;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
.icon-button:hover {
|
|
20
|
+
background-color: rgba(255, 255, 255, 0.2);
|
|
21
|
+
}
|
|
22
|
+
|
|
9
23
|
.full-box {
|
|
10
|
-
padding:
|
|
24
|
+
padding: 4px;
|
|
11
25
|
display: flex;
|
|
12
26
|
flex-direction: row;
|
|
13
27
|
align-items: center;
|
|
@@ -22,22 +36,34 @@
|
|
|
22
36
|
}
|
|
23
37
|
|
|
24
38
|
.file-or-directory {
|
|
39
|
+
min-height: 40px;
|
|
25
40
|
display: flex;
|
|
26
41
|
flex-direction: row;
|
|
27
42
|
align-items: center;
|
|
28
43
|
justify-content: space-between;
|
|
29
44
|
cursor: pointer;
|
|
30
45
|
margin: 0 10px;
|
|
46
|
+
padding: 0 4px 0 8px;
|
|
31
47
|
border-radius: 4px;
|
|
32
48
|
font-family: var(--vzcode-font-family);
|
|
33
49
|
font-weight: 500;
|
|
34
50
|
}
|
|
35
51
|
|
|
36
52
|
.sidebar-section-hint {
|
|
37
|
-
// margin-top: 30px;
|
|
38
53
|
margin-left: 10px;
|
|
39
54
|
font-size: 12px;
|
|
40
|
-
|
|
55
|
+
font-weight: 500;
|
|
56
|
+
font-family: Poppins;
|
|
57
|
+
color: var(--vh-color-neutral-04);
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
.sidebar-section-buttons {
|
|
61
|
+
display: flex;
|
|
62
|
+
flex-direction: row;
|
|
63
|
+
align-items: center;
|
|
64
|
+
a {
|
|
65
|
+
color: inherit;
|
|
66
|
+
}
|
|
41
67
|
}
|
|
42
68
|
|
|
43
69
|
.new-btn {
|
|
@@ -48,10 +74,7 @@
|
|
|
48
74
|
|
|
49
75
|
.utils {
|
|
50
76
|
display: flex;
|
|
51
|
-
gap:
|
|
52
|
-
}
|
|
53
|
-
.utilities {
|
|
54
|
-
transform: scale(1.2);
|
|
77
|
+
gap: 2px;
|
|
55
78
|
}
|
|
56
79
|
|
|
57
80
|
.file-or-directory:hover,
|
|
@@ -61,24 +84,26 @@
|
|
|
61
84
|
|
|
62
85
|
.active-file,
|
|
63
86
|
.active-file:hover {
|
|
64
|
-
background-color: #
|
|
87
|
+
background-color: #264399;
|
|
65
88
|
}
|
|
66
89
|
|
|
67
90
|
.name {
|
|
68
91
|
display: flex;
|
|
69
92
|
text-overflow: ellipsis;
|
|
93
|
+
align-items: center;
|
|
70
94
|
white-space: nowrap;
|
|
71
95
|
overflow: hidden;
|
|
96
|
+
gap: 8px;
|
|
97
|
+
.file-icon,
|
|
98
|
+
.arrow-wrapper {
|
|
99
|
+
opacity: 0.5;
|
|
100
|
+
}
|
|
72
101
|
}
|
|
73
102
|
|
|
74
103
|
.indentation {
|
|
75
104
|
margin-left: 20px;
|
|
76
105
|
}
|
|
77
106
|
|
|
78
|
-
.arrow-wrapper {
|
|
79
|
-
margin-right: 4px;
|
|
80
|
-
}
|
|
81
|
-
|
|
82
107
|
.settings {
|
|
83
108
|
height: 30px;
|
|
84
109
|
cursor: pointer;
|
|
@@ -107,4 +132,23 @@
|
|
|
107
132
|
margin-bottom: 10px;
|
|
108
133
|
font-size: 14px;
|
|
109
134
|
}
|
|
135
|
+
|
|
136
|
+
.connection-status {
|
|
137
|
+
display: flex;
|
|
138
|
+
justify-content: space-between;
|
|
139
|
+
padding: 10px;
|
|
140
|
+
}
|
|
141
|
+
|
|
142
|
+
.connection {
|
|
143
|
+
display: flex;
|
|
144
|
+
gap: 6px;
|
|
145
|
+
align-items: center;
|
|
146
|
+
}
|
|
147
|
+
|
|
148
|
+
.saved {
|
|
149
|
+
width: 16px;
|
|
150
|
+
height: 16px;
|
|
151
|
+
border-radius: 99px;
|
|
152
|
+
background-color: #34eb52;
|
|
153
|
+
}
|
|
110
154
|
}
|
package/src/server/index.js
CHANGED
|
@@ -272,9 +272,9 @@ server.listen(port, async () => {
|
|
|
272
272
|
open(url);
|
|
273
273
|
})();
|
|
274
274
|
} else {
|
|
275
|
-
console.log(
|
|
276
|
-
|
|
277
|
-
);
|
|
278
|
-
open(`http://localhost:${port}`);
|
|
275
|
+
// console.log(
|
|
276
|
+
// `Editor is live at http://localhost:${port}`,
|
|
277
|
+
// );
|
|
278
|
+
// open(`http://localhost:${port}`);
|
|
279
279
|
}
|
|
280
280
|
});
|
|
@@ -1,17 +0,0 @@
|
|
|
1
|
-
export const Close = () => {
|
|
2
|
-
<svg
|
|
3
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
4
|
-
width="24"
|
|
5
|
-
height="24"
|
|
6
|
-
viewBox="0 0 24 24"
|
|
7
|
-
fill="none"
|
|
8
|
-
>
|
|
9
|
-
<path
|
|
10
|
-
d="M6 18L18 6M6 6L18 18"
|
|
11
|
-
stroke="#576786"
|
|
12
|
-
strokeWidth="1.5"
|
|
13
|
-
strokeLinecap="round"
|
|
14
|
-
strokeLinejoin="round"
|
|
15
|
-
/>
|
|
16
|
-
</svg>
|
|
17
|
-
};
|
|
@@ -1,16 +0,0 @@
|
|
|
1
|
-
export const Edit = () => {
|
|
2
|
-
<svg
|
|
3
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
4
|
-
width="24"
|
|
5
|
-
height="24"
|
|
6
|
-
fill="none"
|
|
7
|
-
>
|
|
8
|
-
<path
|
|
9
|
-
stroke="#E0E8FF"
|
|
10
|
-
strokeLinecap="round"
|
|
11
|
-
strokeLinejoin="round"
|
|
12
|
-
strokeWidth="1.5"
|
|
13
|
-
d="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L10.582 16.07a4.5 4.5 0 0 1-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 0 1 1.13-1.897l8.932-8.931Zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0 1 15.75 21H5.25A2.25 2.25 0 0 1 3 18.75V8.25A2.25 2.25 0 0 1 5.25 6H10"
|
|
14
|
-
/>
|
|
15
|
-
</svg>
|
|
16
|
-
};
|
|
@@ -1,16 +0,0 @@
|
|
|
1
|
-
export const Gear = () => {
|
|
2
|
-
<svg
|
|
3
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
4
|
-
width="24"
|
|
5
|
-
height="24"
|
|
6
|
-
fill="none"
|
|
7
|
-
>
|
|
8
|
-
<path
|
|
9
|
-
stroke="#E0E8FF"
|
|
10
|
-
strokeLinecap="round"
|
|
11
|
-
strokeLinejoin="round"
|
|
12
|
-
strokeWidth="1.5"
|
|
13
|
-
d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.324.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 0 1 1.37.49l1.296 2.247a1.125 1.125 0 0 1-.26 1.431l-1.003.827c-.293.24-.438.613-.431.992a6.759 6.759 0 0 1 0 .255c-.007.378.138.75.43.99l1.005.828c.424.35.534.954.26 1.43l-1.298 2.247a1.125 1.125 0 0 1-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.57 6.57 0 0 1-.22.128c-.331.183-.581.495-.644.869l-.213 1.28c-.09.543-.56.941-1.11.941h-2.594c-.55 0-1.02-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 0 1-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 0 1-1.369-.49l-1.297-2.247a1.125 1.125 0 0 1 .26-1.431l1.004-.827c.292-.24.437-.613.43-.992a6.932 6.932 0 0 1 0-.255c.007-.378-.138-.75-.43-.99l-1.004-.828a1.125 1.125 0 0 1-.26-1.43l1.297-2.247a1.125 1.125 0 0 1 1.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.087.22-.128.332-.183.582-.495.644-.869l.214-1.281Z"/><path stroke="#E0E8FF" strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.5" d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"
|
|
14
|
-
/>
|
|
15
|
-
</svg>
|
|
16
|
-
};
|
package/src/client/Icons/New.tsx
DELETED
|
@@ -1,16 +0,0 @@
|
|
|
1
|
-
export const New = () => {
|
|
2
|
-
<svg
|
|
3
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
4
|
-
width="24"
|
|
5
|
-
height="24"
|
|
6
|
-
fill="none"
|
|
7
|
-
>
|
|
8
|
-
<path
|
|
9
|
-
stroke="#E0E8FF"
|
|
10
|
-
strokeLinecap="round"
|
|
11
|
-
strokeLinejoin="round"
|
|
12
|
-
strokeWidth="1.5"
|
|
13
|
-
d="M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m3.75 9v6m3-3H9m1.5-12H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Z"
|
|
14
|
-
/>
|
|
15
|
-
</svg>
|
|
16
|
-
};
|