vzcode 0.57.0 → 0.59.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/dist/assets/{index-C_w_ZF1t.js → index-iYQ0qHNs.js} +48 -48
- package/dist/assets/{index-lCpRU622.css → index-yDxNPcIh.css} +1 -1
- package/dist/assets/worker-DzDiglXJ.js +233 -0
- package/dist/index.html +2 -6
- package/package.json +2 -2
- package/src/client/App/style.scss +6 -6
- package/src/client/Icons/BugSVG.tsx +20 -0
- package/src/client/Icons/{Close.tsx → CloseSVG.tsx} +1 -1
- package/src/client/Icons/DirectoryArrowSVG.tsx +19 -0
- package/src/client/Icons/{Edit.tsx → EditSVG.tsx} +1 -1
- package/src/client/Icons/FileSVG.tsx +19 -0
- package/src/client/Icons/GearSVG.tsx +16 -0
- package/src/client/Icons/{New.tsx → NewSVG.tsx} +3 -2
- package/src/client/Icons/{Trash.tsx → TrashSVG.tsx} +1 -1
- package/src/client/Icons/index.tsx +8 -5
- package/src/client/VZSidebar/DirectoryListing.tsx +1 -1
- package/src/client/VZSidebar/FileListing.tsx +4 -0
- package/src/client/VZSidebar/Item.tsx +39 -7
- package/src/client/VZSidebar/index.tsx +64 -29
- package/src/client/VZSidebar/styles.scss +36 -21
- package/src/client/index.ts +2 -0
- package/src/client/useURLSync.ts +39 -36
- package/dist/assets/worker-Cl_j3b6K.js +0 -233
- package/src/client/Icons/Gear.tsx +0 -25
- package/src/client/VZSidebar/DirectoryArrowSVG.jsx +0 -8
package/dist/index.html
CHANGED
|
@@ -20,12 +20,8 @@
|
|
|
20
20
|
href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap"
|
|
21
21
|
rel="stylesheet"
|
|
22
22
|
/>
|
|
23
|
-
<
|
|
24
|
-
|
|
25
|
-
rel="stylesheet"
|
|
26
|
-
/>
|
|
27
|
-
<script type="module" crossorigin src="/assets/index-C_w_ZF1t.js"></script>
|
|
28
|
-
<link rel="stylesheet" crossorigin href="/assets/index-lCpRU622.css">
|
|
23
|
+
<script type="module" crossorigin src="/assets/index-iYQ0qHNs.js"></script>
|
|
24
|
+
<link rel="stylesheet" crossorigin href="/assets/index-yDxNPcIh.css">
|
|
29
25
|
</head>
|
|
30
26
|
<body>
|
|
31
27
|
<div id="root"></div>
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "vzcode",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.59.0",
|
|
4
4
|
"description": "Multiplayer code editor system",
|
|
5
5
|
"main": "src/index.ts",
|
|
6
6
|
"type": "module",
|
|
@@ -116,7 +116,7 @@
|
|
|
116
116
|
"@types/react-dom": "^18.2.18",
|
|
117
117
|
"@vitejs/plugin-react": "^4.2.1",
|
|
118
118
|
"concurrently": "^8.2.2",
|
|
119
|
-
"prettier": "^3.2.
|
|
119
|
+
"prettier": "^3.2.5",
|
|
120
120
|
"sass": "^1.70.0",
|
|
121
121
|
"typescript": "^5.3.3",
|
|
122
122
|
"vite": "^5.0.12",
|
|
@@ -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 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 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
|
+
);
|
|
@@ -1,13 +1,14 @@
|
|
|
1
|
-
export const
|
|
1
|
+
export const NewSVG = () => {
|
|
2
2
|
return (
|
|
3
3
|
<svg
|
|
4
4
|
xmlns="http://www.w3.org/2000/svg"
|
|
5
5
|
width="24"
|
|
6
6
|
height="24"
|
|
7
|
+
viewBox="0 0 24 24"
|
|
7
8
|
fill="none"
|
|
8
9
|
>
|
|
9
10
|
<path
|
|
10
|
-
stroke="
|
|
11
|
+
stroke="currentColor"
|
|
11
12
|
strokeLinecap="round"
|
|
12
13
|
strokeLinejoin="round"
|
|
13
14
|
strokeWidth="1.5"
|
|
@@ -1,7 +1,10 @@
|
|
|
1
1
|
export { SparklesSVG } from './SparklesSVG';
|
|
2
2
|
export { StopSVG } from './StopSVG';
|
|
3
|
-
export {
|
|
4
|
-
export {
|
|
5
|
-
export {
|
|
6
|
-
export {
|
|
7
|
-
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,7 +4,9 @@ import {
|
|
|
4
4
|
useRef,
|
|
5
5
|
useEffect,
|
|
6
6
|
} from 'react';
|
|
7
|
-
import {
|
|
7
|
+
import { EditSVG, FileSVG, TrashSVG } from '../Icons';
|
|
8
|
+
|
|
9
|
+
import { Tooltip, OverlayTrigger } from '../bootstrap';
|
|
8
10
|
|
|
9
11
|
// TODO consider moving this up to a higher level of the component tree
|
|
10
12
|
import { DeleteConfirmationModal } from './DeleteConfirmationModal';
|
|
@@ -23,6 +25,10 @@ export const Item = ({
|
|
|
23
25
|
handleDeleteClick,
|
|
24
26
|
isDirectory = false,
|
|
25
27
|
isActive = false,
|
|
28
|
+
renameFileTooltipText = 'Rename File',
|
|
29
|
+
deleteFileTooltipText = isDirectory
|
|
30
|
+
? 'Delete Directory'
|
|
31
|
+
: 'Delete File',
|
|
26
32
|
}: {
|
|
27
33
|
name: string;
|
|
28
34
|
children: React.ReactNode;
|
|
@@ -32,6 +38,8 @@ export const Item = ({
|
|
|
32
38
|
handleDeleteClick: () => void;
|
|
33
39
|
isDirectory?: boolean;
|
|
34
40
|
isActive?: boolean;
|
|
41
|
+
renameFileTooltipText?: string;
|
|
42
|
+
deleteFileTooltipText?: string;
|
|
35
43
|
}) => {
|
|
36
44
|
// Tracks whether the mouse is hovering over the file or directory
|
|
37
45
|
const [isHovered, setIsHovered] = useState(false);
|
|
@@ -159,13 +167,37 @@ export const Item = ({
|
|
|
159
167
|
style={{ position: 'relative' }}
|
|
160
168
|
>
|
|
161
169
|
{(isDirectory ? enableRenameDirectory : true) ? (
|
|
162
|
-
<
|
|
163
|
-
|
|
164
|
-
|
|
170
|
+
<OverlayTrigger
|
|
171
|
+
placement="top"
|
|
172
|
+
overlay={
|
|
173
|
+
<Tooltip id="rename-file-tooltip">
|
|
174
|
+
{renameFileTooltipText}
|
|
175
|
+
</Tooltip>
|
|
176
|
+
}
|
|
177
|
+
>
|
|
178
|
+
<i
|
|
179
|
+
onClick={handleRenameIconClick}
|
|
180
|
+
className="icon-button"
|
|
181
|
+
>
|
|
182
|
+
<EditSVG />
|
|
183
|
+
</i>
|
|
184
|
+
</OverlayTrigger>
|
|
165
185
|
) : null}
|
|
166
|
-
<
|
|
167
|
-
|
|
168
|
-
|
|
186
|
+
<OverlayTrigger
|
|
187
|
+
placement="top"
|
|
188
|
+
overlay={
|
|
189
|
+
<Tooltip id="delete-file-tooltip">
|
|
190
|
+
{deleteFileTooltipText}
|
|
191
|
+
</Tooltip>
|
|
192
|
+
}
|
|
193
|
+
>
|
|
194
|
+
<i
|
|
195
|
+
onClick={handleModalOpen}
|
|
196
|
+
className="icon-button"
|
|
197
|
+
>
|
|
198
|
+
<TrashSVG />
|
|
199
|
+
</i>
|
|
200
|
+
</OverlayTrigger>
|
|
169
201
|
</div>
|
|
170
202
|
) : null}
|
|
171
203
|
|
|
@@ -12,10 +12,12 @@ import {
|
|
|
12
12
|
FileTreePath,
|
|
13
13
|
Files,
|
|
14
14
|
} from '../../types';
|
|
15
|
+
import { Tooltip, OverlayTrigger } from '../bootstrap';
|
|
15
16
|
import { getFileTree } from '../getFileTree';
|
|
16
17
|
import { sortFileTree } from '../sortFileTree';
|
|
17
18
|
import { disableSettings } from '../featureFlags';
|
|
18
19
|
import { SplitPaneResizeContext } from '../SplitPaneResizeContext';
|
|
20
|
+
import { BugSVG, GearSVG, NewSVG } from '../Icons';
|
|
19
21
|
import { Listing } from './Listing';
|
|
20
22
|
import { CreateFileModal } from './CreateFileModal';
|
|
21
23
|
import './styles.scss';
|
|
@@ -25,20 +27,10 @@ import './styles.scss';
|
|
|
25
27
|
// See https://github.com/vizhub-core/vzcode/issues/456
|
|
26
28
|
const enableConnectionStatus = false;
|
|
27
29
|
|
|
28
|
-
const CreateFileButton = ({ handleCreateFile }) => {
|
|
29
|
-
return (
|
|
30
|
-
<i
|
|
31
|
-
className="bx bxs-file-plus new-btn"
|
|
32
|
-
style={{ color: '#dbdde1' }}
|
|
33
|
-
onClick={handleCreateFile}
|
|
34
|
-
// TODO better tooltip
|
|
35
|
-
title="Create file"
|
|
36
|
-
></i>
|
|
37
|
-
);
|
|
38
|
-
};
|
|
39
30
|
export const VZSidebar = ({
|
|
40
31
|
files,
|
|
41
32
|
createFile,
|
|
33
|
+
createFileTooltipText = 'New File',
|
|
42
34
|
renameFile,
|
|
43
35
|
deleteFile,
|
|
44
36
|
deleteDirectory,
|
|
@@ -48,9 +40,12 @@ export const VZSidebar = ({
|
|
|
48
40
|
isDirectoryOpen,
|
|
49
41
|
toggleDirectory,
|
|
50
42
|
activeFileId,
|
|
43
|
+
openSettingsTooltipText = 'Open Settings',
|
|
44
|
+
reportBugTooltipText = 'Report Bug',
|
|
51
45
|
}: {
|
|
52
46
|
files: Files;
|
|
53
47
|
createFile: (fileName) => void;
|
|
48
|
+
createFileTooltipText?: string;
|
|
54
49
|
renameFile: (fileId: FileId, newName: string) => void;
|
|
55
50
|
deleteFile: (fileId: FileId) => void;
|
|
56
51
|
deleteDirectory: (path: FileTreePath) => void;
|
|
@@ -66,6 +61,8 @@ export const VZSidebar = ({
|
|
|
66
61
|
isDirectoryOpen: (path: string) => boolean;
|
|
67
62
|
toggleDirectory: (path: string) => void;
|
|
68
63
|
activeFileId?: FileId;
|
|
64
|
+
openSettingsTooltipText?: string;
|
|
65
|
+
reportBugTooltipText?: string;
|
|
69
66
|
}) => {
|
|
70
67
|
const fileTree = useMemo(
|
|
71
68
|
() => (files ? sortFileTree(getFileTree(files)) : null),
|
|
@@ -151,11 +148,60 @@ export const VZSidebar = ({
|
|
|
151
148
|
>
|
|
152
149
|
<div className="files">
|
|
153
150
|
<div className="full-box">
|
|
154
|
-
<div className="sidebar-section-hint">
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
151
|
+
<div className="sidebar-section-hint">
|
|
152
|
+
Project Files
|
|
153
|
+
</div>
|
|
154
|
+
<div className="sidebar-section-buttons">
|
|
155
|
+
<OverlayTrigger
|
|
156
|
+
placement="left"
|
|
157
|
+
overlay={
|
|
158
|
+
<Tooltip id="report-bug-tooltip">
|
|
159
|
+
{reportBugTooltipText}
|
|
160
|
+
</Tooltip>
|
|
161
|
+
}
|
|
162
|
+
>
|
|
163
|
+
<a
|
|
164
|
+
href="https://github.com/vizhub-core/vzcode/issues/new"
|
|
165
|
+
target="_blank"
|
|
166
|
+
rel="noopener noreferrer"
|
|
167
|
+
>
|
|
168
|
+
<i className="icon-button">
|
|
169
|
+
<BugSVG />
|
|
170
|
+
</i>
|
|
171
|
+
</a>
|
|
172
|
+
</OverlayTrigger>
|
|
173
|
+
{disableSettings ? null : (
|
|
174
|
+
<OverlayTrigger
|
|
175
|
+
placement="left"
|
|
176
|
+
overlay={
|
|
177
|
+
<Tooltip id="open-settings-tooltip">
|
|
178
|
+
{openSettingsTooltipText}
|
|
179
|
+
</Tooltip>
|
|
180
|
+
}
|
|
181
|
+
>
|
|
182
|
+
<i
|
|
183
|
+
onClick={handleSettingsClick}
|
|
184
|
+
className="icon-button"
|
|
185
|
+
>
|
|
186
|
+
<GearSVG />
|
|
187
|
+
</i>
|
|
188
|
+
</OverlayTrigger>
|
|
189
|
+
)}
|
|
190
|
+
<OverlayTrigger
|
|
191
|
+
placement="left"
|
|
192
|
+
overlay={
|
|
193
|
+
<Tooltip id="create-file-tooltip">
|
|
194
|
+
{createFileTooltipText}
|
|
195
|
+
</Tooltip>
|
|
196
|
+
}
|
|
197
|
+
>
|
|
198
|
+
<i
|
|
199
|
+
onClick={handleCreateFile}
|
|
200
|
+
className="icon-button"
|
|
201
|
+
>
|
|
202
|
+
<NewSVG />
|
|
203
|
+
</i>
|
|
204
|
+
</OverlayTrigger>
|
|
159
205
|
</div>
|
|
160
206
|
</div>
|
|
161
207
|
{filesExist ? (
|
|
@@ -184,24 +230,13 @@ export const VZSidebar = ({
|
|
|
184
230
|
<div className="empty">
|
|
185
231
|
<div className="empty-text">
|
|
186
232
|
It looks like you don't have any files yet!
|
|
187
|
-
Click the "Create file" button
|
|
233
|
+
Click the "Create file" button above to create
|
|
188
234
|
your first file.
|
|
189
235
|
</div>
|
|
190
|
-
|
|
191
|
-
<CreateFileButton
|
|
192
|
-
handleCreateFile={handleCreateFile}
|
|
193
|
-
/>
|
|
194
236
|
</div>
|
|
195
237
|
)}
|
|
196
238
|
</div>
|
|
197
|
-
|
|
198
|
-
<div
|
|
199
|
-
className="settings"
|
|
200
|
-
onClick={handleSettingsClick}
|
|
201
|
-
>
|
|
202
|
-
Editor Settings
|
|
203
|
-
</div>
|
|
204
|
-
)}
|
|
239
|
+
|
|
205
240
|
{enableConnectionStatus && (
|
|
206
241
|
<div className="connection-status">
|
|
207
242
|
Connection Status
|
|
@@ -1,11 +1,25 @@
|
|
|
1
1
|
.vz-sidebar {
|
|
2
2
|
height: 100%;
|
|
3
|
-
color:
|
|
4
|
-
background:
|
|
3
|
+
color: var(--vh-color-neutral-04);
|
|
4
|
+
background: var(--vh-color-neutral-01);
|
|
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
24
|
padding: 4px;
|
|
11
25
|
display: flex;
|
|
@@ -22,13 +36,14 @@
|
|
|
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;
|
|
31
|
-
padding: 0
|
|
46
|
+
padding: 0 4px 0 8px;
|
|
32
47
|
border-radius: 4px;
|
|
33
48
|
font-family: var(--vzcode-font-family);
|
|
34
49
|
font-weight: 500;
|
|
@@ -37,7 +52,18 @@
|
|
|
37
52
|
.sidebar-section-hint {
|
|
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 {
|
|
@@ -49,18 +75,6 @@
|
|
|
49
75
|
.utils {
|
|
50
76
|
display: flex;
|
|
51
77
|
gap: 2px;
|
|
52
|
-
|
|
53
|
-
i {
|
|
54
|
-
padding: 2px;
|
|
55
|
-
border-radius: 4px;
|
|
56
|
-
display: flex;
|
|
57
|
-
align-items: center;
|
|
58
|
-
justify-content: center;
|
|
59
|
-
}
|
|
60
|
-
|
|
61
|
-
i:hover {
|
|
62
|
-
background-color: rgba(255, 255, 255, 0.2);
|
|
63
|
-
}
|
|
64
78
|
}
|
|
65
79
|
|
|
66
80
|
.file-or-directory:hover,
|
|
@@ -76,19 +90,20 @@
|
|
|
76
90
|
.name {
|
|
77
91
|
display: flex;
|
|
78
92
|
text-overflow: ellipsis;
|
|
93
|
+
align-items: center;
|
|
79
94
|
white-space: nowrap;
|
|
80
95
|
overflow: hidden;
|
|
81
|
-
|
|
96
|
+
gap: 8px;
|
|
97
|
+
.file-icon,
|
|
98
|
+
.arrow-wrapper {
|
|
99
|
+
opacity: 0.5;
|
|
100
|
+
}
|
|
82
101
|
}
|
|
83
102
|
|
|
84
103
|
.indentation {
|
|
85
104
|
margin-left: 20px;
|
|
86
105
|
}
|
|
87
106
|
|
|
88
|
-
.arrow-wrapper {
|
|
89
|
-
margin-right: 4px;
|
|
90
|
-
}
|
|
91
|
-
|
|
92
107
|
.settings {
|
|
93
108
|
height: 30px;
|
|
94
109
|
cursor: pointer;
|
package/src/client/index.ts
CHANGED
package/src/client/useURLSync.ts
CHANGED
|
@@ -78,6 +78,14 @@ export const useURLSync = ({
|
|
|
78
78
|
contentRef.current = content;
|
|
79
79
|
}, [content]);
|
|
80
80
|
|
|
81
|
+
// track setSearchParams in a ref so that we can use it in the
|
|
82
|
+
// effect below without triggering the effect on each render.
|
|
83
|
+
// The definition of `setSearchParams` changes on every render.
|
|
84
|
+
const setSearchParamsRef = useRef(setSearchParams);
|
|
85
|
+
useEffect(() => {
|
|
86
|
+
setSearchParamsRef.current = setSearchParams;
|
|
87
|
+
}, [setSearchParams]);
|
|
88
|
+
|
|
81
89
|
// Update the URL to match the current state whenever
|
|
82
90
|
// the active file or tab list changes.
|
|
83
91
|
useEffect(() => {
|
|
@@ -93,42 +101,37 @@ export const useURLSync = ({
|
|
|
93
101
|
content: contentRef.current,
|
|
94
102
|
});
|
|
95
103
|
|
|
96
|
-
if
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
104
|
+
// Update the URL if the search parameters have changed.
|
|
105
|
+
setSearchParamsRef.current(
|
|
106
|
+
(oldSearchParams: URLSearchParams) => {
|
|
107
|
+
// Create a copy of the old search params
|
|
108
|
+
const updatedSearchParams = new URLSearchParams(
|
|
109
|
+
oldSearchParams,
|
|
110
|
+
);
|
|
111
|
+
|
|
112
|
+
// Set the 'file' parameter
|
|
113
|
+
if (newTabStateParams.file) {
|
|
114
|
+
updatedSearchParams.set(
|
|
115
|
+
'file',
|
|
116
|
+
newTabStateParams.file,
|
|
106
117
|
);
|
|
118
|
+
} else {
|
|
119
|
+
updatedSearchParams.delete('file'); // Remove 'file' if it's not present in newTabStateParams
|
|
120
|
+
}
|
|
107
121
|
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
);
|
|
124
|
-
} else {
|
|
125
|
-
updatedSearchParams.delete('tabs'); // Remove 'tabs' if it's not present in newTabStateParams
|
|
126
|
-
}
|
|
127
|
-
|
|
128
|
-
// Return the updated search params
|
|
129
|
-
return updatedSearchParams;
|
|
130
|
-
},
|
|
131
|
-
);
|
|
132
|
-
}
|
|
133
|
-
}, [searchParams, tabList, activeFileId]);
|
|
122
|
+
// Set the 'tabs' parameter
|
|
123
|
+
if (newTabStateParams.tabs) {
|
|
124
|
+
updatedSearchParams.set(
|
|
125
|
+
'tabs',
|
|
126
|
+
newTabStateParams.tabs,
|
|
127
|
+
);
|
|
128
|
+
} else {
|
|
129
|
+
updatedSearchParams.delete('tabs'); // Remove 'tabs' if it's not present in newTabStateParams
|
|
130
|
+
}
|
|
131
|
+
|
|
132
|
+
// Return the updated search params
|
|
133
|
+
return updatedSearchParams;
|
|
134
|
+
},
|
|
135
|
+
);
|
|
136
|
+
}, [tabList, activeFileId]);
|
|
134
137
|
};
|