feat(frontend): Restrict editable content to non-editor user

Author: Brayan-724

frontend/src/features/editor/views/CodeEditor.tsx

@@ -1,8 +1,11 @@
-import { onCleanup } from "solid-js";
+import { observable, onCleanup } from "solid-js";
 import { CodeMirror } from "@solid-codemirror/codemirror";
+import { Compartment, EditorState } from "@codemirror/state";
 
+import { projectAccess } from "@features/colab/stores";
 import { getNodeByPath } from "@features/file-explorer/stores";
 import { FileNodeKind } from "@features/file-explorer/types";
+import { AccessLevel } from "@features/ws/types";
 
 import { rustExtensions, syncExtension, syncExtensionListener } from "../utils";
 import { setEditingFiles, syncFiles } from "../stores";
@@ -16,6 +19,7 @@ export interface CodeEditorProps {
 
 export function CodeEditor(props: CodeEditorProps) {
   const [file, _] = getNodeByPath(props.file);
+  const readOnly = new Compartment();
 
   if (file.kind == FileNodeKind.Folder) {
     throw new Error("Really?? Edit a folder?");
@@ -33,11 +37,20 @@ export function CodeEditor(props: CodeEditorProps) {
       value={syncFiles[props.file]}
       extensions={[
         ...rustExtensions(styles),
+        readOnly.of([]),
         syncExtension(file.data),
       ]}
       onEditorMount={(editor) => {
         editor.setTabFocusMode(true);
         syncExtensionListener(editor, file.data.fullPath);
+
+        observable(projectAccess).subscribe((access) => {
+          editor.dispatch({
+            effects: readOnly.reconfigure(
+              EditorState.readOnly.of(access !== AccessLevel.Editor),
+            ),
+          });
+        });
       }}
     />
   );

frontend/src/features/file-explorer/views/FileExplorer.tsx

@@ -1,9 +1,10 @@
-import { For, getOwner, Index, runWithOwner } from "solid-js";
+import { For } from "solid-js";
 
+import { projectAccess } from "@features/colab/stores";
 import { ContextMenu } from "@features/context-menu/views";
 import { openFile } from "@features/editor/services";
 import { onWsMessage } from "@features/ws/services";
-import { ServerMessageKind } from "@features/ws/types";
+import { AccessLevel, ServerMessageKind } from "@features/ws/types";
 import { FolderPlusIcon } from "@icons/FolderPlus";
 import { FolderMinusIcon } from "@icons/FolderMinus";
 import { BrandsRustIcon } from "@icons/BrandsRust";
@@ -21,6 +22,7 @@ function RenderFolder(props: { data: FolderNode }) {
       <details>
         <ContextMenu
           as="summary"
+          useRightClick={projectAccess() === AccessLevel.Editor}
           options={{
             [props.data.name]: { disabled: true },
             "Add File": {},
@@ -47,6 +49,7 @@ function RenderFile(props: { data: FileNode }) {
   return (
     <ContextMenu
       as="li"
+      useRightClick={projectAccess() === AccessLevel.Editor}
       class={styles.entry}
       options={{
         [props.data.filename]: { disabled: true },
@@ -83,6 +86,7 @@ export function FileExplorer() {
   return (
     <ContextMenu
       as="ul"
+      useRightClick={projectAccess() === AccessLevel.Editor}
       class={styles.container}
       options={{
         "Add File": {