chad/client/app/pages/preferences.vue

<template>
  <div>
    <PrimeDivider align="left">
      Audio
    </PrimeDivider>

    <PrimeFloatLabel variant="on">
      <PrimeSelect
        v-model="inputDeviceId"
        :options="audioInputs"
        option-label="label"
        option-value="deviceId"
        input-id="inputDevice"
        fluid
        :invalid="!inputDeviceExist"
      />
      <label for="inputDevice">Input device</label>
    </PrimeFloatLabel>

    <div class="flex items-center gap-2 mt-3">
      <PrimeToggleSwitch v-model="autoGainControl" input-id="autoGainControl" />
      <label for="autoGainControl">Auto Gain Control</label>
    </div>

    <div class="flex items-center gap-2 mt-3">
      <PrimeToggleSwitch v-model="echoCancellation" input-id="echoCancellation" />
      <label for="echoCancellation">Echo Cancellation</label>
    </div>

    <div class="flex items-center gap-2 mt-3">
      <PrimeToggleSwitch v-model="noiseSuppression" input-id="noiseSuppression" />
      <label for="noiseSuppression">Noise Suppression</label>
    </div>

    <!--    <PrimeFloatLabel variant="on"> -->
    <!--      <PrimeSelect -->
    <!--        v-model="outputDeviceId" -->
    <!--        :options="audioOutputs" -->
    <!--        option-label="label" -->
    <!--        option-value="deviceId" -->
    <!--        fluid -->
    <!--        class="mt-6" -->
    <!--        input-id="outputDevice" -->
    <!--        :invalid="!outputDeviceExist" -->
    <!--        -->
    <!--      /> -->
    <!--      <label for="outputDevice">Output device</label> -->
    <!--    </PrimeFloatLabel> -->

    <PrimeDivider align="left">
      Hotkeys
    </PrimeDivider>

    <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">
    <template #container="slotProps">
      <div class="p-3">
        <div class="font-medium text-lg mb-4">
          {{ slotProps.message.detail }}
        </div>
        <div class="flex gap-3">
          <PrimeButton size="small" label="Update now" @click="() => {}" />
          <PrimeButton size="small" label="Later" severity="secondary" outlined @click="slotProps.closeCallback()" />
        </div>
      </div>
    </template>
  </PrimeToast>
</template>

<script setup lang="ts">
import type { RemovableRef } from '@vueuse/core'

definePageMeta({
  name: 'Preferences',
})
const { isTauri, version, commitSha } = useApp()
const { checking, checkForUpdates } = useUpdater()
const {
  inputDeviceId,
  outputDeviceId,
  autoGainControl,
  noiseSuppression,
  echoCancellation,
  toggleInputHotkey,
  toggleOutputHotkey,
  inputDeviceExist,
  outputDeviceExist,
  audioInputs,
  audioOutputs,
} = usePreferences()

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()

  toast.removeGroup('updater')

  if (!update) {
    toast.add({ severity: 'success', summary: 'You are up to date', closable: false, life: 1000 })

    return
  }

  toast.add({
    group: 'updater',
    severity: 'info',
    detail: `Version ${update?.version ?? '1.0.1'} is available!`,
    closable: false,
  })
}
</script>