From e83a99a998e27402f7d8d55d0e775ed7b02067b5 Mon Sep 17 00:00:00 2001
From: N-Pex <npexdev@gmail.com>
Date: Thu, 16 Feb 2023 15:20:12 +0100
Subject: [PATCH] Fix wording and layout of voice mode settings

---
 src/assets/css/chat.scss        | 20 ++++++++++++++++++++
 src/assets/translations/en.json |  5 +++--
 src/components/Chat.vue         |  2 +-
 src/components/RoomInfo.vue     | 14 +++++++++-----
 4 files changed, 33 insertions(+), 8 deletions(-)

diff --git a/src/assets/css/chat.scss b/src/assets/css/chat.scss
index 7494c34..84a260f 100644
--- a/src/assets/css/chat.scss
+++ b/src/assets/css/chat.scss
@@ -894,6 +894,26 @@ body {
 
     text-decoration: underline;
   }
+
+  .with-right-label {
+    display: flex;
+    flex-wrap: nowrap;
+    flex-direction: row;
+    text-align: start;
+    & > * {
+      flex: 1 1 auto;
+    }
+    & > *:last-child {
+      flex: 0 0 auto;
+    }
+    .option-title {
+      color: #000;
+      font-size: 16 * $chat-text-size;
+    }
+    .option-text {
+      font-size: 13 * $chat-text-size;
+    }
+  }
 }
 
 .header-button-left {
diff --git a/src/assets/translations/en.json b/src/assets/translations/en.json
index b19cca5..922693d 100644
--- a/src/assets/translations/en.json
+++ b/src/assets/translations/en.json
@@ -243,8 +243,9 @@
     "export_room": "Export chat",
     "user_admin": "Administrator",
     "user_moderator": "Moderator",
-    "ui_options": "UI Options",
-    "audio_layout": "Use audio layout"
+    "experimental_features": "Experimental Features",
+    "voice_mode": "Voice mode",
+    "voice_mode_info": "Switches the chat interface to a 'listen and record' mode"
   },
   "room_info_sheet": {
     "this_room": "This room",
diff --git a/src/components/Chat.vue b/src/components/Chat.vue
index e3e48c2..36378d7 100644
--- a/src/components/Chat.vue
+++ b/src/components/Chat.vue
@@ -527,7 +527,7 @@ export default {
         if (this.room) {
           const tags = this.room.tags;
           if (tags && tags["ui_options"]) {
-            return tags["ui_options"]["audio_layout"] === 1;
+            return tags["ui_options"]["voice_mode"] === 1;
           }
         }
         return false;
diff --git a/src/components/RoomInfo.vue b/src/components/RoomInfo.vue
index 9dad7e1..1b58c03 100644
--- a/src/components/RoomInfo.vue
+++ b/src/components/RoomInfo.vue
@@ -166,11 +166,14 @@
     </v-card>
 
     <v-card class="account ma-3" flat>
-      <v-card-title class="h2">{{ $t("room_info.ui_options") }}</v-card-title>
-      <v-card-text>
+      <v-card-title class="h2 with-right-label"><div>{{ $t("room_info.experimental_features") }}</div><div></div></v-card-title>
+      <v-card-text class="with-right-label">
+        <div>
+          <div class="option-title">{{ $t('room_info.voice_mode') }}</div>
+          <div class="option-text">{{ $t('room_info.voice_mode_info') }}</div>
+        </div>
         <v-switch
         v-model="useAudioLayout"
-        :label="$t('room_info.audio_layout')"
       ></v-switch>
       </v-card-text>
     </v-card>
@@ -378,7 +381,7 @@ export default {
         if (this.room) {
           const tags = this.room.tags;
           if (tags && tags["ui_options"]) {
-            return tags["ui_options"]["audio_layout"] === 1;
+            return tags["ui_options"]["voice_mode"] === 1;
           }
         }
         return false;
@@ -386,7 +389,7 @@ export default {
       set: function (audioLayout) {
         if (this.room && this.room.tags) {
           let options = this.room.tags["ui_options"] || {}
-          options["audio_layout"] = (audioLayout ? 1 : 0);
+          options["voice_mode"] = (audioLayout ? 1 : 0);
           this.room.tags["ui_options"] = options;
           this.$matrix.matrixClient.setRoomTag(this.room.roomId, "ui_options", options);
         }
@@ -668,4 +671,5 @@ export default {
 
 <style lang="scss">
 @import "@/assets/css/chat.scss";
+
 </style>
\ No newline at end of file