Menu editor settings

src/editor/EditorContainer.vue

@@ -1,12 +1,11 @@
 <script setup lang="ts">
 import FileSelector from './FileSelector.vue'
 import Message from '../Message.vue'
-import WrapToggle from './WrapToggle.vue'
 import { debounce } from '../utils'
 import { inject, ref, watch } from 'vue'
 import { Store } from '../store'
-import MessageToggle from './MessageToggle.vue'
 import type { EditorComponentType } from './types'
+import EditorSettings from './EditorSettings.vue'
 
 const SHOW_ERROR_KEY = 'repl_show_error'
 const TOGGLE_WRAP_KEY = 'repl_toggle_wrap'
@@ -52,8 +51,7 @@ watch(
       :filename="store.state.activeFile.filename"
     />
     <Message v-show="showMessage" :err="store.state.errors[0]" />
-    <MessageToggle v-model="showMessage" />
-    <WrapToggle v-model="store.state.wordWrap" />
+    <EditorSettings v-model:show-message="showMessage" />
   </div>
 </template>
 

src/editor/EditorSettings.vue

@@ -0,0 +1,51 @@
+<script setup lang="ts">
+import { inject } from 'vue'
+import { Store } from '../store'
+import { VIconBtn } from 'vuetify/lib/labs/components'
+
+const store = inject('store') as Store
+const showMessage = defineModel<boolean>('showMessage')
+</script>
+
+<template>
+  <div class="wrapper">
+    <v-menu :close-on-content-click="false" location="top end">
+      <template v-slot:activator="{ props }">
+        <v-icon-btn icon="mdi-cog" v-bind="props" variant="tonal" />
+      </template>
+
+      <v-list density="compact">
+        <v-list-item>
+          <v-switch
+            v-model="showMessage"
+            label="Show errors"
+            color="primary"
+            inset
+            hide-details
+            density="compact"
+          />
+        </v-list-item>
+        <v-divider />
+        <v-list-item>
+          <v-switch
+            v-model="store.state.wordWrap"
+            label="Word wrap"
+            color="primary"
+            inset
+            hide-details
+            density="compact"
+          />
+        </v-list-item>
+      </v-list>
+    </v-menu>
+  </div>
+</template>
+
+<style>
+.wrapper {
+  position: absolute;
+  bottom: 10px;
+  right: 24px;
+  z-index: 1000;
+}
+</style>