vzcode 0.57.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/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-C_w_ZF1t.js"></script>
28
- <link rel="stylesheet" crossorigin href="/assets/index-lCpRU622.css">
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.57.0",
3
+ "version": "0.58.0",
4
4
  "description": "Multiplayer code editor system",
5
5
  "main": "src/index.ts",
6
6
  "type": "module",
@@ -15,16 +15,16 @@
15
15
 
16
16
  /* Scrollbar Styles */
17
17
  ::-webkit-scrollbar {
18
- width: 10px;
19
- height: 10px;
18
+ width: 16px;
19
+ height: 16px;
20
20
  }
21
21
 
22
- ::-webkit-scrollbar-track {
23
- background: var(--app-bg-color);
24
- }
22
+ // ::-webkit-scrollbar-track {
23
+ // background: rgb(255, 255, 255, 0.1);
24
+ // }
25
25
 
26
26
  ::-webkit-scrollbar-thumb {
27
- background: rgb(37, 37, 38);
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
+ };
@@ -1,4 +1,4 @@
1
- export const Close = () => {
1
+ export const CloseSVG = () => {
2
2
  return (
3
3
  <svg
4
4
  xmlns="http://www.w3.org/2000/svg"
@@ -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
+ );
@@ -1,4 +1,4 @@
1
- export const Edit = () => {
1
+ export const EditSVG = () => {
2
2
  return (
3
3
  <svg
4
4
  xmlns="http://www.w3.org/2000/svg"
@@ -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 New = () => {
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="#E0E8FF"
11
+ stroke="currentColor"
11
12
  strokeLinecap="round"
12
13
  strokeLinejoin="round"
13
14
  strokeWidth="1.5"
@@ -1,4 +1,4 @@
1
- export const Trash = () => {
1
+ export const TrashSVG = () => {
2
2
  return (
3
3
  <svg
4
4
  xmlns="http://www.w3.org/2000/svg"
@@ -1,7 +1,10 @@
1
1
  export { SparklesSVG } from './SparklesSVG';
2
2
  export { StopSVG } from './StopSVG';
3
- export { Edit } from './Edit';
4
- export { New } from './New';
5
- export { Gear } from './Gear';
6
- export { Close } from './Close';
7
- export { Trash } from './Trash';
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 './DirectoryArrowSVG';
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,7 @@ import {
4
4
  useRef,
5
5
  useEffect,
6
6
  } from 'react';
7
- import { Edit, Trash } from '../Icons';
7
+ import { EditSVG, FileSVG, TrashSVG } from '../Icons';
8
8
 
9
9
  // TODO consider moving this up to a higher level of the component tree
10
10
  import { DeleteConfirmationModal } from './DeleteConfirmationModal';
@@ -159,12 +159,18 @@ export const Item = ({
159
159
  style={{ position: 'relative' }}
160
160
  >
161
161
  {(isDirectory ? enableRenameDirectory : true) ? (
162
- <i onClick={handleRenameIconClick}>
163
- <Edit />
162
+ <i
163
+ onClick={handleRenameIconClick}
164
+ className="icon-button"
165
+ >
166
+ <EditSVG />
164
167
  </i>
165
168
  ) : null}
166
- <i onClick={handleModalOpen}>
167
- <Trash />
169
+ <i
170
+ onClick={handleModalOpen}
171
+ className="icon-button"
172
+ >
173
+ <TrashSVG />
168
174
  </i>
169
175
  </div>
170
176
  ) : null}
@@ -16,6 +16,7 @@ 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';
@@ -151,11 +152,35 @@ export const VZSidebar = ({
151
152
  >
152
153
  <div className="files">
153
154
  <div className="full-box">
154
- <div className="sidebar-section-hint">Files</div>
155
- <div>
156
- <CreateFileButton
157
- handleCreateFile={handleCreateFile}
158
- />
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>
159
184
  </div>
160
185
  </div>
161
186
  {filesExist ? (
@@ -194,14 +219,7 @@ export const VZSidebar = ({
194
219
  </div>
195
220
  )}
196
221
  </div>
197
- {disableSettings ? null : (
198
- <div
199
- className="settings"
200
- onClick={handleSettingsClick}
201
- >
202
- Editor Settings
203
- </div>
204
- )}
222
+
205
223
  {enableConnectionStatus && (
206
224
  <div className="connection-status">
207
225
  Connection Status
@@ -1,11 +1,25 @@
1
1
  .vz-sidebar {
2
2
  height: 100%;
3
- color: #d6d9de;
3
+ color: var(--vh-color-neutral-04);
4
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
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 2px 0 8px;
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
- color: #99a0ad;
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
- padding: 4px 0;
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;
@@ -1,25 +0,0 @@
1
- export const Gear = () => {
2
- return (
3
- <svg
4
- xmlns="http://www.w3.org/2000/svg"
5
- width="24"
6
- height="24"
7
- fill="none"
8
- >
9
- <path
10
- stroke="#E0E8FF"
11
- strokeLinecap="round"
12
- strokeLinejoin="round"
13
- strokeWidth="1.5"
14
- 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"
15
- />
16
- <path
17
- stroke="#E0E8FF"
18
- strokeLinecap="round"
19
- strokeLinejoin="round"
20
- strokeWidth="1.5"
21
- d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"
22
- />
23
- </svg>
24
- );
25
- };
@@ -1,8 +0,0 @@
1
- export const DirectoryArrowSVG = ({
2
- height = 10,
3
- fill = 'currentcolor',
4
- }) => (
5
- <svg height={height} viewBox={'4 4 16 16'}>
6
- <path fill={fill} d="M8 17l9-5-9-5v10z" />
7
- </svg>
8
- );