user preferences

client/app/pages/preferences.vue

@@ -1,13 +1,17 @@
 <template>
   <div>
+    <PrimeDivider align="left">
+      Audio
+    </PrimeDivider>
+
     <PrimeFloatLabel variant="on">
       <PrimeSelect
         v-model="inputDeviceId"
         :options="audioInputs"
         option-label="label"
         option-value="deviceId"
-        fluid
         input-id="inputDevice"
+        fluid
         :invalid="!inputDeviceExist"
       />
       <label for="inputDevice">Input device</label>
@@ -43,18 +47,41 @@
     <!--      <label for="outputDevice">Output device</label> -->
     <!--    </PrimeFloatLabel> -->
 
-    <template v-if="isTauri">
-      <PrimeDivider />
+    <PrimeDivider align="left">
+      Hotkeys
+    </PrimeDivider>
 
-      <PrimeButton
-        size="small"
-        label="Check for Updates"
-        fluid
-        severity="info"
-        :loading="checking"
-        @click="onCheckForUpdates"
-      />
-    </template>
+    <PrimeFloatLabel variant="on">
+      <PrimeInputText id="microphoneToggle" :model-value="toggleInputHotkey" fluid @keydown="setupToggleInputHotkey" />
+      <label for="microphoneToggle">Toggle microphone</label>
+    </PrimeFloatLabel>
+
+    <PrimeFloatLabel variant="on" class="mt-3">
+      <PrimeInputText id="soundToggle" :model-value="toggleOutputHotkey" fluid @keydown="setupToggleOutputHotkey" />
+      <label for="soundToggle">Toggle sound</label>
+    </PrimeFloatLabel>
+
+    <PrimeDivider align="left">
+      About
+    </PrimeDivider>
+
+    <p v-if="version" class="text-muted-color text-sm">
+      VERSION: {{ version }}
+    </p>
+    <p class="text-muted-color text-sm mt-2">
+      COMMIT_SHA: {{ commitSha }}
+    </p>
+
+    <PrimeButton
+      v-if="isTauri"
+      class="mt-3"
+      size="small"
+      label="Check for Updates"
+      fluid
+      severity="info"
+      :loading="checking"
+      @click="onCheckForUpdates"
+    />
   </div>
 
   <PrimeToast position="bottom-center" group="updater">
@@ -73,10 +100,12 @@
 </template>
 
 <script setup lang="ts">
+import type { RemovableRef } from '@vueuse/core'
+
 definePageMeta({
   name: 'Preferences',
 })
-const { isTauri } = useApp()
+const { isTauri, version, commitSha } = useApp()
 const { checking, checkForUpdates } = useUpdater()
 const {
   inputDeviceId,
@@ -84,6 +113,8 @@ const {
   autoGainControl,
   noiseSuppression,
   echoCancellation,
+  toggleInputHotkey,
+  toggleOutputHotkey,
   inputDeviceExist,
   outputDeviceExist,
   audioInputs,
@@ -92,6 +123,46 @@ const {
 
 const toast = useToast()
 
+const setupToggleInputHotkey = (event: KeyboardEvent) => setupHotkey(event, toggleInputHotkey)
+const setupToggleOutputHotkey = (event: KeyboardEvent) => setupHotkey(event, toggleOutputHotkey)
+
+function setupHotkey(event: KeyboardEvent, model: RemovableRef<string>) {
+  if (event.key === 'Tab' || event.key === 'Enter') {
+    return
+  }
+
+  event.preventDefault()
+
+  const hotkey = []
+
+  if (event.ctrlKey || event.metaKey)
+    hotkey.push('CommandOrControl')
+  if (event.altKey)
+    hotkey.push('Alt')
+  if (event.shiftKey)
+    hotkey.push('Shift')
+
+  const modifierApplied = hotkey.length > 0
+
+  if (!modifierApplied && ['Escape', 'Backspace', 'Delete'].includes(event.key)) {
+    model.value = ''
+
+    return
+  }
+
+  if (!['Control', 'Shift', 'Alt'].includes(event.key)) {
+    hotkey.push(event.key.toUpperCase())
+  }
+
+  if (modifierApplied && hotkey.length === 1) {
+    model.value = ''
+
+    return
+  }
+
+  model.value = hotkey.join('+')
+}
+
 async function onCheckForUpdates() {
   const update = await checkForUpdates()
 

client/app/pages/profile.vue

@@ -1,13 +1,15 @@
 <template>
   <form @submit.prevent="save()">
+    <PrimeDivider align="left">
+      General
+    </PrimeDivider>
+
     <PrimeFloatLabel variant="on">
       <PrimeInputText id="displayName" v-model="displayName" fluid autocomplete="off" />
       <label for="displayName">Display name</label>
     </PrimeFloatLabel>
 
-    <PrimeDivider />
-
-    <div class="flex items-center gap-3">
+    <div class="flex items-center gap-3 mt-6">
       <PrimeButton label="Save" :disabled="!valid" :loading="saving" fluid type="submit" />
       <PrimeButton severity="danger" class="shrink-0" @click="logout()">
         <template #icon>