From 69433bba480460f5ff889fcf6403bc03835601c4 Mon Sep 17 00:00:00 2001
From: abdelouahed oumoussa <abdelwahd.oumouss@gmail.com>
Date: Mon, 21 Apr 2025 23:38:16 +0100
Subject: [PATCH] chore(editor): use menu for editor settings

---
 src/editor/EditorContainer.vue |  6 ++--
 src/editor/EditorSettings.vue  | 51 ++++++++++++++++++++++++++++++++++
 src/editor/MessageToggle.vue   | 28 -------------------
 src/editor/WrapToggle.vue      | 28 -------------------
 4 files changed, 53 insertions(+), 60 deletions(-)
 create mode 100644 src/editor/EditorSettings.vue
 delete mode 100644 src/editor/MessageToggle.vue
 delete mode 100644 src/editor/WrapToggle.vue

diff --git a/src/editor/EditorContainer.vue b/src/editor/EditorContainer.vue
index 40b3de41..db5c751e 100644
--- a/src/editor/EditorContainer.vue
+++ b/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>
 
diff --git a/src/editor/EditorSettings.vue b/src/editor/EditorSettings.vue
new file mode 100644
index 00000000..e834353e
--- /dev/null
+++ b/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>
diff --git a/src/editor/MessageToggle.vue b/src/editor/MessageToggle.vue
deleted file mode 100644
index 81d51e78..00000000
--- a/src/editor/MessageToggle.vue
+++ /dev/null
@@ -1,28 +0,0 @@
-<script setup lang="ts">
-const visible = defineModel<boolean>()
-</script>
-
-<template>
-  <div class="wrapper" @click.self="visible = !visible">
-    <v-switch v-model="visible" label="Show errors" color="primary" inset hide-details density="compact"></v-switch>
-  </div>
-</template>
-
-<style scoped>
-.wrapper {
-  position: absolute;
-  bottom: 8px;
-  right: 24px;
-  z-index: 11;
-  display: flex;
-  align-items: center;
-  background-color: var(--bg);
-  color: var(--text-light);
-  cursor: pointer;
-  padding: 4px 12px;
-  border-radius: 16px;
-  user-select: none;
-  transform: scale(0.85);
-  transform-origin: right;
-}
-</style>
diff --git a/src/editor/WrapToggle.vue b/src/editor/WrapToggle.vue
deleted file mode 100644
index c02539cf..00000000
--- a/src/editor/WrapToggle.vue
+++ /dev/null
@@ -1,28 +0,0 @@
-<script setup lang="ts">
-const visible = defineModel<boolean>()
-</script>
-
-<template>
-  <div class="wrapper" @click.self="visible = !visible">
-    <v-switch v-model="visible" label="Word wrap" color="primary" inset hide-details density="compact" />
-  </div>
-</template>
-
-<style scoped>
-.wrapper {
-  position: absolute;
-  bottom: 8px;
-  right: 180px;
-  z-index: 11;
-  display: flex;
-  align-items: center;
-  background-color: var(--bg);
-  color: var(--text-light);
-  cursor: pointer;
-  padding: 4px 12px;
-  border-radius: 16px;
-  user-select: none;
-  transform: scale(0.85);
-  transform-origin: right;
-}
-</style>