Remove panel-right query and replace with state value

app/assets/javascripts/repo/index.js

@@ -29,7 +29,7 @@ function initRepo() {
     data: () => Store,
     template: `
       <div class="tree-content-holder">
-        <repo-sidebar/><div class="panel-right">
+        <repo-sidebar/><div class="panel-right" :class="{'edit-mode': readOnly}">
           <repo-tabs/>
           <repo-file-buttons/>
           <repo-editor/>

app/assets/javascripts/repo/repo_editor.vue

@@ -66,15 +66,9 @@ const RepoEditor = {
     },
 
     editMode() {
-      const panelClassList = document.querySelector('.panel-right').classList;
-      let readOnly = false;
+      const readOnly = !this.editMode;
 
-      if (this.editMode) {
-        panelClassList.add('edit-mode');
-      } else {
-        panelClassList.remove('edit-mode');
-        readOnly = true;
-      }
+      Store.readOnly = readOnly;
 
       this.monacoInstance.updateOptions({
         readOnly,

app/assets/javascripts/repo/repo_store.js

@@ -59,6 +59,7 @@ const RepoStore = {
     tree: false,
     blob: false,
   },
+  readOnly: true,
 
   // mutations