user preferences

Reviewed-on: #7

.gitea/workflows/deploy-client.yml

@@ -1,15 +1,55 @@
 name: Deploy
 
 on:
+  workflow_dispatch:
   push:
-    branches:
+    tags:
-      - master
+      - "v[0-9]+.[0-9]+.[0-9]+"
-    paths:
+
-      - '.gitea/workflows/deploy-client.yml'
+# paths:
-      - 'client/**'
+#   - ".gitea/workflows/deploy-client.yml"
+#   - "client/**"
 
 jobs:
-  deploy:
+#  publish-windows:
+#    runs-on: ubuntu-latest
+#
+#    steps:
+#      - name: Keyscan
+#        run: |
+#          ssh-keyscan git.koptilnya.xyz >> ~/.ssh/known_hosts
+#
+#      - name: Checkout
+#        uses: actions/checkout@v4
+#        with:
+#          ssh-key: ${{ secrets.SSH_PRIVATE_KEY }}
+#          ssh-strict: false
+#          persist-credentials: false
+#
+#      - name: Build
+#        run: |
+#          docker build \
+#            -t chad-client-windows-builder \
+#            -f ./client/Dockerfile.windows \
+#            ./client \
+#            --build-arg COMMIT_SHA=${{ gitea.sha }} \
+#            --build-arg API_BASE_URL=${{ vars.API_BASE_URL }} \
+#            --build-arg TAURI_SIGNING_PRIVATE_KEY=${{ secrets.TAURI_SIGNING_PRIVATE_KEY }}
+#
+#          docker create --name chad-client-windows-container chad-client-windows-builder
+#          mkdir -p artifacts
+#          docker cp chad-client-windows-container:/artifacts artifacts/
+#          docker rm chad-client-windows-container
+#          ls -la artifacts
+#
+#      - name: Publish
+#        uses: akkuman/gitea-release-action@v1
+#        with:
+#          files: |
+#            artifacts/**
+#          draft: true
+
+   publish-web:
      runs-on: ubuntu-latest
 
      steps:
@@ -25,7 +65,7 @@ jobs:
            persist-credentials: false
 
        - name: Build
-        run: docker build -t chad-client ./client --build-arg COMMIT_SHA=${{ gitea.sha }} --build-arg API_BASE_URL=${{ vars.API_BASE_URL }}
+         run: docker build -t chad-client -f ./client/Dockerfile.web ./client --build-arg COMMIT_SHA=${{ gitea.sha }} --build-arg API_BASE_URL=${{ vars.API_BASE_URL }}
 
        - name: Stop old container
          run: docker rm -f chad-client || true

client/.gitattributes

@@ -0,0 +1,2 @@
+/.yarn/releases/** binary
+/.yarn/plugins/** binary

client/.gitignore

@@ -23,6 +23,7 @@ logs
 .env.*
 !.env.example
 
+.pnp.*
 .yarn/*
 !.yarn/patches
 !.yarn/plugins
@@ -32,3 +33,5 @@ logs
 
 scripts/release.ps1
 .tauri
+
+updater.json

client/.yarnrc.yml

@@ -1 +1,3 @@
 nodeLinker: node-modules
+
+yarnPath: .yarn/releases/yarn-4.12.0.cjs

client/Dockerfile.web

@@ -6,8 +6,9 @@ RUN corepack enable
 RUN yarn set version stable
 
 COPY package.json yarn.lock .yarnrc.yml ./
+COPY .yarn ./.yarn
 
-RUN yarn install
+RUN yarn install --immutable
 COPY . .
 
 ARG COMMIT_SHA=unknown

client/Dockerfile.windows

@@ -0,0 +1,48 @@
+# === Build ===
+FROM node:lts AS builder
+
+WORKDIR /app
+
+# RUN corepack enable yarn && yarn set version stable
+
+COPY package.json yarn.lock .yarnrc.yml ./
+COPY .yarn ./.yarn
+
+RUN yarn install --immutable
+COPY . .
+
+ARG COMMIT_SHA=unknown
+ARG API_BASE_URL
+ARG TAURI_SIGNING_PRIVATE_KEY
+
+ENV COMMIT_SHA=$COMMIT_SHA \
+    API_BASE_URL=$API_BASE_URL \
+    TAURI_SIGNING_PRIVATE_KEY=$TAURI_SIGNING_PRIVATE_KEY \
+    TAURI_SIGNING_PRIVATE_KEY_PASSWORD=
+
+RUN apt update && apt install -y --no-install-recommends \
+    nsis \
+    clang \
+    lld \
+    llvm \
+    && rm -rf /var/lib/apt/lists/*
+
+RUN curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh -s -- -y
+
+ENV PATH=/root/.cargo/bin:$PATH
+
+RUN rustup target add x86_64-pc-windows-msvc
+
+RUN cargo install --locked cargo-xwin
+
+RUN yarn tauri build --runner cargo-xwin --target x86_64-pc-windows-msvc
+
+RUN node scripts/generate-updater.mjs
+
+# === Artifacts ===
+FROM scratch AS artifacts
+
+COPY --from=builder /app/updater.json ./artifacts
+COPY --from=builder /app/src-tauri/target/x86_64-pc-windows-msvc/release/bundle/nsis/ ./artifacts
+
+CMD ["true"]

client/app/app.vue

@@ -7,7 +7,5 @@
 </template>
 
 <script setup lang="ts">
-console.group('Build Info')
+const route = useRoute()
-console.log(`COMMIT_SHA: ${__COMMIT_SHA__}`)
-console.groupEnd()
 </script>

client/app/assets/styles/main.scss

@@ -6,8 +6,25 @@ body {
 
   height: 100%;
   overflow: hidden;
+  background-image: radial-gradient(var(--p-surface-700), var(--p-surface-800));
+  background-size: 200% 200%;
+  background-position: left -100% top -100%;
 }
 
 #__nuxt {
+  --p-scrollpanel-bar-size: 5px;
+  --p-scrollpanel-bar-background: var(--p-surface-950);
+  --p-divider-horizontal-margin: 2rem 0 1rem;
+
   height: 100%;
 }
+
+.p-divider {
+  &:first-child {
+    --p-divider-horizontal-margin: 1rem 0 1rem;
+  }
+}
+
+.p-scrollpanel-bar-y {
+  translate: -0.25rem;
+}

client/app/components.d.ts

@@ -13,14 +13,18 @@ declare module 'vue' {
     PrimeButton: typeof import('primevue/button')['default']
     PrimeButtonGroup: typeof import('primevue/buttongroup')['default']
     PrimeCard: typeof import('primevue/card')['default']
-    PrimeFieldset: typeof import('primevue/fieldset')['default']
+    PrimeDivider: typeof import('primevue/divider')['default']
     PrimeFloatLabel: typeof import('primevue/floatlabel')['default']
     PrimeInputText: typeof import('primevue/inputtext')['default']
     PrimeMenu: typeof import('primevue/menu')['default']
     PrimePassword: typeof import('primevue/password')['default']
+    PrimeProgressBar: typeof import('primevue/progressbar')['default']
+    PrimeScrollPanel: typeof import('primevue/scrollpanel')['default']
+    PrimeSelect: typeof import('primevue/select')['default']
     PrimeSelectButton: typeof import('primevue/selectbutton')['default']
     PrimeSlider: typeof import('primevue/slider')['default']
     PrimeToast: typeof import('primevue/toast')['default']
+    PrimeToggleSwitch: typeof import('primevue/toggleswitch')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
   }

client/app/components/AppHeader.vue

@@ -1,25 +0,0 @@
-<template>
-  <div
-    class="flex items-center justify-between gap-2 border-b-2 border-surface-800 px-3 py-3"
-    :class="{
-      'bg-surface-950': !secondary,
-      'bg-surface-900': secondary,
-    }"
-    style="height: 75px;"
-  >
-    <slot name="left">
-      <h1>
-        {{ title }}
-      </h1>
-    </slot>
-
-    <slot name="right" />
-  </div>
-</template>
-
-<script setup lang="ts">
-defineProps<{
-  title: string
-  secondary?: boolean
-}>()
-</script>

client/app/components/ClientRow.vue

@@ -1,10 +1,11 @@
 <template>
   <div class="py-3">
     <div class="flex items-center gap-3 ">
-      <PrimeAvatar
+      <PrimeAvatar size="small">
-        icon="pi pi-user"
+        <template #icon>
-        size="small"
+          <User :size="20" />
-      />
+        </template>
+      </PrimeAvatar>
 
       <div class="flex-1">
         <div class="text-sm leading-5 font-medium text-color whitespace-nowrap overflow-ellipsis">
@@ -15,7 +16,8 @@
         </div>
       </div>
 
-      <PrimeBadge v-if="client.inputMuted" severity="info" value="Muted" />
+      <PrimeBadge v-if="inputMuted" severity="info" value="Muted" />
+      <!--      <PrimeBadge v-if="outputMuted" severity="info" value="No sound" /> -->
       <PrimeBadge v-if="isMe" severity="secondary" value="You" />
 
       <template v-if="!isMe">
@@ -40,18 +42,20 @@
 <script setup lang="ts">
 import type { ChadClient } from '#shared/types'
 import type { MenuItem } from 'primevue/menuitem'
+import { useLocalStorage } from '@vueuse/core'
+import { User } from 'lucide-vue-next'
 
 const props = defineProps<{
   client: ChadClient
 }>()
 
-const { inputMuted, outputMuted } = useApp()
+const { outputMuted } = useApp()
-const { getClientConsumers } = useMediasoup()
+const { getClientConsumers, micProducer } = useMediasoup()
 const { me } = useClients()
 
-const menuRef = useTemplateRef<HTMLAudioElement>('menu')
+const volume = useLocalStorage<number>(computed(() => `CLIENT_VOLUME_${props.client.userId}`), 100, { writeDefaults: false })
 
-const volume = ref(100)
+const menuRef = useTemplateRef<HTMLAudioElement>('menu')
 
 const menuItems: MenuItem[] = [
   {
@@ -70,11 +74,23 @@ const isMe = computed(() => {
 })
 
 const audioConsumer = computed(() => {
-  const consumers = getClientConsumers(props.client.id)
+  if (isMe.value)
+    return undefined
+
+  const consumers = getClientConsumers(props.client.socketId)
 
   return consumers.find(consumer => consumer.track.kind === 'audio')
 })
 
+const inputMuted = computed(() => {
+  if (isMe.value)
+    return micProducer.value?.paused ?? false
+
+  const consumers = getClientConsumers(props.client.socketId)
+
+  return consumers.find(consumer => consumer.track.kind === 'audio')?.paused
+})
+
 const audioTrack = computed(() => {
   return audioConsumer.value?.track
 })
@@ -82,13 +98,13 @@ const audioTrack = computed(() => {
 const { setGain } = useAudioContext(audioTrack)
 
 watch(volume, (volume) => {
-  if (outputMuted.value)
+  // if (outputMuted.value)
-    return
+  //   return
 
   setGain(volume * 0.01)
-})
+}, { immediate: true })
 
-watch(outputMuted, (outputMuted) => {
+// watch(outputMuted, (outputMuted) => {
-  setGain(outputMuted ? 0 : (volume.value * 0.01))
+//   setGain(outputMuted ? 0 : (volume.value * 0.01))
-})
+// })
 </script>

client/app/composables/use-app.ts

@@ -1,4 +1,6 @@
-import { createGlobalState } from '@vueuse/core'
+import { getVersion } from '@tauri-apps/api/app'
+
+import { computedAsync, createGlobalState } from '@vueuse/core'
 import { useClients } from '~/composables/use-clients'
 
 export const useApp = createGlobalState(() => {
@@ -6,11 +8,47 @@ export const useApp = createGlobalState(() => {
   const mediasoup = useMediasoup()
   const toast = useToast()
 
+  const ready = ref(false)
+
   const inputMuted = ref(false)
   const outputMuted = ref(false)
 
   const previousInputMuted = ref(inputMuted.value)
 
+  const isTauri = computed(() => '__TAURI_INTERNALS__' in window)
+
+  const commitSha = __COMMIT_SHA__
+
+  const version = computedAsync(() => isTauri.value ? getVersion() : 'web', '-')
+
+  watch(inputMuted, async (inputMuted) => {
+    if (inputMuted) {
+      await mediasoup.pauseProducer('microphone')
+    }
+    else {
+      if (outputMuted.value) {
+        outputMuted.value = false
+      }
+      await mediasoup.resumeProducer('microphone')
+    }
+
+    const toastText = inputMuted ? 'Microphone muted' : 'Microphone activated'
+    toast.add({ severity: 'info', summary: toastText, closable: false, life: 1000 })
+  })
+
+  watch(outputMuted, (outputMuted) => {
+    if (outputMuted) {
+      previousInputMuted.value = inputMuted.value
+      muteInput()
+    }
+    else {
+      inputMuted.value = previousInputMuted.value
+    }
+
+    const toastText = outputMuted ? 'Sound muted' : 'Sound resumed'
+    toast.add({ severity: 'info', summary: toastText, closable: false, life: 1000 })
+  })
+
   function muteInput() {
     inputMuted.value = true
   }
@@ -41,35 +79,8 @@ export const useApp = createGlobalState(() => {
       muteOutput()
   }
 
-  watch(inputMuted, async (inputMuted) => {
-    if (inputMuted) {
-      await mediasoup.muteMic()
-    }
-    else {
-      if (outputMuted.value) {
-        outputMuted.value = false
-      }
-      await mediasoup.unmuteMic()
-    }
-
-    const toastText = inputMuted ? 'Microphone muted' : 'Microphone activated'
-    toast.add({ severity: 'info', summary: toastText, closable: false, life: 1000 })
-  })
-
-  watch(outputMuted, (outputMuted) => {
-    if (outputMuted) {
-      previousInputMuted.value = inputMuted.value
-      muteInput()
-    }
-    else {
-      inputMuted.value = previousInputMuted.value
-    }
-
-    const toastText = outputMuted ? 'Sound muted' : 'Sound resumed'
-    toast.add({ severity: 'info', summary: toastText, closable: false, life: 1000 })
-  })
-
   return {
+    ready,
     clients,
     inputMuted,
     muteInput,
@@ -79,5 +90,8 @@ export const useApp = createGlobalState(() => {
     muteOutput,
     unmuteOutput,
     toggleOutput,
+    version,
+    isTauri,
+    commitSha,
   }
 })

client/app/composables/use-audio-context.ts

@@ -4,13 +4,12 @@ export default function useAudioContext(audioTrack: Ref<MediaStreamTrack | undef
   const ctx = new (window.AudioContext || window.webkitAudioContext)()
 
   const stream = new MediaStream()
+  const audioEl = new Audio()
 
   const sourceNode = shallowRef<MediaStreamAudioSourceNode>()
   const gainNode = ctx.createGain()
 
-  let hackExecuted = false
+  watch(audioTrack, async (track, prevTrack) => {
-
-  watch(audioTrack, (track, prevTrack) => {
     if (prevTrack)
       stream.removeTrack(prevTrack)
 
@@ -19,16 +18,14 @@ export default function useAudioContext(audioTrack: Ref<MediaStreamTrack | undef
 
     stream.addTrack(track)
 
-    if (!hackExecuted) {
+    if (!audioEl.srcObject) {
-      const audioEl = new Audio()
       audioEl.srcObject = stream
       audioEl.muted = true
-      hackExecuted = true
     }
 
     sourceNode.value = ctx.createMediaStreamSource(stream)
 
-    connect()
+    await connect()
   }, { immediate: true })
 
   useEventListener(document, 'click', async () => {
@@ -36,10 +33,16 @@ export default function useAudioContext(audioTrack: Ref<MediaStreamTrack | undef
       await ctx.resume()
     }
 
-    connect()
+    await connect()
   }, { once: true })
 
-  function connect() {
+  onScopeDispose(() => {
+    audioEl.pause()
+    audioEl.srcObject = null
+    ctx.close()
+  })
+
+  async function connect() {
     if (!sourceNode.value || ctx.state === 'suspended')
       return
 

client/app/composables/use-auth.ts

@@ -16,7 +16,7 @@ export const useAuth = createGlobalState(() => {
 
   async function login(username: string, password: string): Promise<void> {
     try {
-      const result = await chadApi('/login', {
+      const result = await chadApi<Me>('/login', {
         method: 'POST',
         body: {
           username,
@@ -33,7 +33,7 @@ export const useAuth = createGlobalState(() => {
 
   async function register(username: string, password: string): Promise<void> {
     try {
-      const result = await chadApi('/register', {
+      const result = await chadApi<Me>('/register', {
         method: 'POST',
         body: {
           username,

client/app/composables/use-mediasoup.ts

@@ -4,6 +4,8 @@ import * as mediasoupClient from 'mediasoup-client'
 import { usePreferences } from '~/composables/use-preferences'
 import { useSignaling } from '~/composables/use-signaling'
 
+type ProducerType = 'microphone' | 'camera' | 'share'
+
 const ICE_SERVERS: RTCIceServer[] = [
   { urls: 'stun:stun.l.google.com:19302' },
   { urls: 'stun:stun.l.google.com:5349' },
@@ -31,7 +33,7 @@ export const useMediasoup = createSharedComposable(() => {
   const recvTransport = shallowRef<mediasoupClient.types.Transport>()
 
   const micProducer = shallowRef<mediasoupClient.types.Producer>()
-  const webcamProducer = shallowRef<mediasoupClient.types.Producer>()
+  const cameraProducer = shallowRef<mediasoupClient.types.Producer>()
   const shareProducer = shallowRef<mediasoupClient.types.Producer>()
 
   const consumers = shallowRef<Map<string, mediasoupClient.types.Consumer>>(new Map())
@@ -145,7 +147,7 @@ export const useMediasoup = createSharedComposable(() => {
     socket.on(
       'newConsumer',
       async (
-        { id, producerId, kind, rtpParameters, peerId: clientId, appData },
+        { id, producerId, kind, rtpParameters, socketId, appData, producerPaused },
         cb,
       ) => {
         if (!recvTransport.value)
@@ -156,12 +158,15 @@ export const useMediasoup = createSharedComposable(() => {
           producerId,
           kind,
           rtpParameters,
-          streamId: `${clientId}-${appData.share ? 'share' : 'mic-webcam'}`,
+          streamId: `${socketId}-${appData.share ? 'share' : 'mic-webcam'}`,
-          appData: { ...appData, clientId },
+          appData: { ...appData, socketId },
         })
 
+        if (producerPaused)
+          consumer.pause()
+
         consumer.on('transportclose', () => {
-          consumers.value.delete(consumer.id)
+          if (consumers.value.delete(consumer.id))
             triggerRef(consumers)
         })
 
@@ -177,12 +182,7 @@ export const useMediasoup = createSharedComposable(() => {
       async (
         { consumerId },
       ) => {
-        const consumer = consumers.value.get(consumerId)
+        if (consumers.value.delete(consumerId))
-
-        if (!consumer)
-          return
-
-        consumers.value.delete(consumer.id)
           triggerRef(consumers)
       },
     )
@@ -198,16 +198,40 @@ export const useMediasoup = createSharedComposable(() => {
       recvTransport.value = undefined
 
       micProducer.value = undefined
-      webcamProducer.value = undefined
+      cameraProducer.value = undefined
       shareProducer.value = undefined
 
       consumers.value = new Map()
       producers.value = new Map()
     })
+
+    socket.on('consumerPaused', ({ consumerId }) => {
+      const consumer = consumers.value.get(consumerId)
+
+      if (!consumer)
+        return
+
+      consumer.pause()
+
+      console.log(consumerId)
+
+      triggerRef(consumers)
+    })
+
+    socket.on('consumerResumed', ({ consumerId }) => {
+      const consumer = consumers.value.get(consumerId)
+
+      if (!consumer)
+        return
+
+      consumer.resume()
+
+      triggerRef(consumers)
+    })
   }, { immediate: true, flush: 'sync' })
 
-  function getClientConsumers(clientId: ChadClient['socketId']) {
+  function getClientConsumers(socketId: ChadClient['socketId']) {
-    return consumers.value.values().filter(consumer => consumer.appData.clientId === clientId)
+    return consumers.value.values().filter(consumer => consumer.appData.socketId === socketId)
   }
 
   async function enableMic() {
@@ -222,12 +246,13 @@ export const useMediasoup = createSharedComposable(() => {
 
     const stream = await navigator.mediaDevices.getUserMedia({
       audio: {
-        autoGainControl: false,
+        deviceId: { exact: preferences.inputDeviceId.value },
-        noiseSuppression: true,
+        autoGainControl: { exact: preferences.autoGainControl.value },
-        echoCancellation: false,
+        echoCancellation: { exact: preferences.echoCancellation.value },
-        channelCount: 2,
+        noiseSuppression: { exact: preferences.noiseSuppression.value },
       },
     })
+
     const track = stream.getAudioTracks()[0]
 
     if (!track)
@@ -244,6 +269,7 @@ export const useMediasoup = createSharedComposable(() => {
 
     producers.value.set(micProducer.value.id, micProducer.value)
     triggerRef(producers)
+    triggerRef(micProducer)
 
     micProducer.value.on('transportclose', () => {
       micProducer.value = undefined
@@ -259,7 +285,6 @@ export const useMediasoup = createSharedComposable(() => {
       return
 
     producers.value.delete(micProducer.value.id)
-    triggerRef(producers)
 
     try {
       micProducer.value.close()
@@ -270,37 +295,64 @@ export const useMediasoup = createSharedComposable(() => {
     }
     catch {
     }
+    finally {
+      triggerRef(producers)
+      triggerRef(micProducer)
+    }
 
     micProducer.value = undefined
   }
 
-  async function muteMic() {
+  async function pauseProducer(type: ProducerType) {
-    if (!signaling.socket.value || !micProducer.value)
+    if (!signaling.socket.value)
+      return
+
+    const producer = getProducerByType(type)
+
+    if (!producer.value)
+      return
+
+    if (producer.value.paused)
       return
 
     try {
-      micProducer.value.pause()
+      producer.value.pause()
 
       await signaling.socket.value.emitWithAck('pauseProducer', {
-        producerId: micProducer.value.id,
+        producerId: producer.value.id,
       })
     }
     catch {
+      producer.value.resume()
+    }
+    finally {
+      triggerRef(producers)
+      triggerRef(producer)
     }
   }
 
-  async function unmuteMic() {
+  async function resumeProducer(type: ProducerType) {
-    if (!signaling.socket.value || !micProducer.value)
+    if (!signaling.socket.value)
+      return
+
+    const producer = getProducerByType(type)
+
+    if (!producer.value)
       return
 
     try {
-      micProducer.value.resume()
+      producer.value.resume()
 
       await signaling.socket.value.emitWithAck('resumeProducer', {
-        producerId: micProducer.value.id,
+        producerId: producer.value.id,
       })
     }
     catch {
+      producer.value.pause()
+    }
+    finally {
+      triggerRef(producers)
+      triggerRef(producer)
     }
   }
 
@@ -308,6 +360,43 @@ export const useMediasoup = createSharedComposable(() => {
     signaling.connect()
   }
 
+  function getProducerByType(type: ProducerType) {
+    switch (type) {
+      case 'microphone':
+        return micProducer
+      case 'camera':
+        return cameraProducer
+      case 'share':
+        return shareProducer
+    }
+  }
+
+  watch(
+    preferences.inputDeviceId,
+    async (inputDeviceId) => {
+      await disableMic()
+
+      if (!inputDeviceId)
+        return
+
+      await enableMic()
+    },
+  )
+
+  watch([
+    preferences.inputDeviceId,
+    preferences.echoCancellation,
+    preferences.autoGainControl,
+    preferences.noiseSuppression,
+  ], async ([inputDeviceId]) => {
+    await disableMic()
+
+    if (!inputDeviceId)
+      return
+
+    await enableMic()
+  })
+
   return {
     init,
     consumers,
@@ -317,10 +406,10 @@ export const useMediasoup = createSharedComposable(() => {
     rtpCapabilities,
     device,
     micProducer,
-    webcamProducer,
+    cameraProducer,
     shareProducer,
     getClientConsumers,
-    muteMic,
+    pauseProducer,
-    unmuteMic,
+    resumeProducer,
   }
 })

client/app/composables/use-preferences.ts

@@ -1,11 +1,74 @@
-import { createGlobalState } from '@vueuse/core'
+import chadApi from '#shared/chad-api'
+import { createGlobalState, useDevicesList, useLocalStorage, watchDebounced } from '@vueuse/core'
+
+export interface SyncedPreferences {
+  toggleInputHotkey: string
+  toggleOutputHotkey: string
+  volumes: Record<Client['id'], number>
+}
 
 export const usePreferences = createGlobalState(() => {
-  const audioDevice = shallowRef()
+  const synced = ref(false)
-  const videoDevice = shallowRef()
+
+  const inputDeviceId = useLocalStorage<MediaDeviceInfo['deviceId']>('INPUT_DEVICE_ID', 'default')
+  const outputDeviceId = useLocalStorage<MediaDeviceInfo['deviceId']>('OUTPUT_DEVICE_ID', 'default')
+
+  const autoGainControl = useLocalStorage('AUTO_GAIN_CONTROL', false)
+  const noiseSuppression = useLocalStorage('NOISE_SUPPRESSION', true)
+  const echoCancellation = useLocalStorage('ECHO_CANCELLATION', true)
+
+  const toggleInputHotkey = ref<SyncedPreferences['toggleInputHotkey']>('')
+  const toggleOutputHotkey = ref<SyncedPreferences['toggleOutputHotkey']>('')
+
+  const {
+    ensurePermissions,
+    permissionGranted,
+    videoInputs,
+    audioInputs,
+    audioOutputs,
+  } = useDevicesList()
+
+  const inputDeviceExist = computed(() => {
+    return audioInputs.value.some(device => device.deviceId === inputDeviceId.value)
+  })
+
+  const outputDeviceExist = computed(() => {
+    return audioOutputs.value.some(device => device.deviceId === outputDeviceId.value)
+  })
+
+  watchDebounced(
+    [toggleInputHotkey, toggleOutputHotkey],
+    async ([toggleInputHotkey, toggleOutputHotkey]) => {
+      try {
+        await chadApi(
+          '/preferences',
+          {
+            method: 'PATCH',
+            body: {
+              toggleInputHotkey,
+              toggleOutputHotkey,
+            },
+          },
+        )
+      }
+      catch {}
+    },
+    { debounce: 1000 },
+  )
 
   return {
-    audioDevice,
+    synced,
-    videoDevice,
+    inputDeviceId,
+    outputDeviceId,
+    autoGainControl,
+    noiseSuppression,
+    echoCancellation,
+    toggleInputHotkey,
+    toggleOutputHotkey,
+    inputDeviceExist,
+    outputDeviceExist,
+    videoInputs: computed(() => JSON.parse(JSON.stringify(videoInputs.value))),
+    audioInputs: computed(() => JSON.parse(JSON.stringify(audioInputs.value))),
+    audioOutputs: computed(() => JSON.parse(JSON.stringify(audioOutputs.value))),
   }
 })

client/app/composables/use-signaling.ts

@@ -1,6 +1,7 @@
 import type { Socket } from 'socket.io-client'
 import { createSharedComposable } from '@vueuse/core'
 import { io } from 'socket.io-client'
+import { parseURL } from 'ufo'
 
 export const useSignaling = createSharedComposable(() => {
   const toast = useToast()
@@ -58,16 +59,19 @@ export const useSignaling = createSharedComposable(() => {
   })
 
   function connect() {
-    if (socket.value)
+    if (socket.value || !me.value)
       return
 
-    socket.value = io('https://api.koptilnya.xyz/webrtc', {
+    const { protocol, host, pathname } = parseURL(__API_BASE_URL__)
-    // socket.value = io('http://localhost:4000/webrtc', {
+
-      path: '/chad/ws',
+    const uri = host ? `${protocol}//${host}` : ``
+
+    socket.value = io(`${uri}/webrtc`, {
+      path: `${pathname}/ws`,
       transports: ['websocket'],
       withCredentials: true,
       auth: {
-        userId: me.value!.id,
+        userId: me.value.id,
       },
     })
   }

client/app/composables/use-updater.ts

@@ -0,0 +1,28 @@
+import type { Update } from '@tauri-apps/plugin-updater'
+import { check } from '@tauri-apps/plugin-updater'
+import { createGlobalState } from '@vueuse/core'
+
+export const useUpdater = createGlobalState(() => {
+  const lastUpdate = shallowRef<Update>()
+
+  const checking = ref(false)
+
+  async function checkForUpdates() {
+    try {
+      checking.value = true
+
+      lastUpdate.value = (await check()) ?? undefined
+    }
+    finally {
+      checking.value = false
+    }
+
+    return lastUpdate.value
+  }
+
+  return {
+    lastUpdate,
+    checking,
+    checkForUpdates,
+  }
+})

client/app/layouts/auth.vue

@@ -10,10 +10,13 @@
       <slot />
     </div>
   </div>
+
+  <PrimeBadge class="fixed top-3 right-3 opacity-50" severity="secondary" :value="version" size="small" />
 </template>
 
 <script setup lang="ts">
 const route = useRoute()
+const { version } = useApp()
 
 const options = computed(() => {
   return [
@@ -24,7 +27,6 @@ const options = computed(() => {
     {
       label: 'Register',
       routeName: 'Register',
-
     },
   ]
 })

client/app/layouts/blank.vue

@@ -1,3 +1,3 @@
 <template>
-  UPDATER
+  <slot />
 </template>

client/app/layouts/default.vue

@@ -1,47 +1,100 @@
 <template>
-  <div v-auto-animate class="grid grid-cols-2 h-screen">
+  <div class="grid grid-cols-2 gap-2 p-2 h-screen grid-rows-[auto_1fr]">
-    <div class="flex flex-col shadow-xl shadow-surface-950 overflow-y-hidden">
+    <div
-      <AppHeader title="Шальные сиськи 18+">
+      class="flex items-center justify-between gap-2 rounded-xl p-3 bg-surface-950"
-        <template #right>
+    >
+      <div class="inline-flex items-center gap-3">
+        <PrimeBadge v-if="isTauri" class="opacity-50" severity="secondary" :value="version" size="small" />
+        <PrimeBadge :severity="connected ? 'success' : 'danger' " />
+      </div>
+
       <PrimeButtonGroup class="ml-auto">
-            <PrimeButton
+        <PrimeButton outlined @click="toggleInput">
-              icon="pi pi-microphone" size="large" :severity="inputMuted ? 'contrast' : 'secondary'"
+          <template #icon>
-              :outlined="!inputMuted" @click="toggleInput"
+            <Component :is="inputMuted ? MicOff : Mic" />
-            />
-            <PrimeButton
-              icon="pi pi-headphones" size="large" :severity="outputMuted ? 'contrast' : 'secondary'"
-              :outlined="!outputMuted" @click="toggleOutput"
-            />
-          </PrimeButtonGroup>
-
-          <PrimeButton icon="pi pi-cog" size="large" :text="!inPreferences" :severity="inPreferences ? 'contrast' : 'secondary'" @click="onClickPreferences" />
           </template>
-      </AppHeader>
+        </PrimeButton>
+        <PrimeButton outlined @click="toggleOutput">
+          <template #icon>
+            <Component :is="outputMuted ? VolumeOff : Volume2" />
+          </template>
+        </PrimeButton>
+      </PrimeButtonGroup>
+    </div>
 
-      <div v-auto-animate class="p-3 overflow-y-auto flex-1 bg-surface-900 overflow-hidden divide-y divide-surface-800">
+    <div
+      class="flex items-center justify-center rounded-xl p-3 bg-surface-950"
+    >
+      <PrimeSelectButton
+        v-model="activeTab"
+        :options="tabs"
+        data-key="id"
+        :allow-empty="false"
+        style="--p-togglebutton-content-padding: 0.25rem 0.5rem"
+      >
+        <template #option="{ option }">
+          <Component :is="option.icon" size="24" />
+        </template>
+      </PrimeSelectButton>
+    </div>
+
+    <PrimeScrollPanel class="bg-surface-900 rounded-xl" style="min-height: 0">
+      <div v-auto-animate class="p-3 divide-y divide-surface-800">
         <ClientRow v-for="client of clients" :key="client.id" :client="client" />
       </div>
-    </div>
+    </PrimeScrollPanel>
 
+    <PrimeScrollPanel class="bg-surface-900 rounded-xl" style="min-height: 0">
+      <div class="p-3">
         <slot />
       </div>
-
+    </PrimeScrollPanel>
-  <PrimeBadge class="fixed top-3 right-3" severity="success" />
+  </div>
 </template>
 
 <script setup lang="ts">
-const { clients, inputMuted, toggleInput, outputMuted, toggleOutput } = useApp()
+import { MessageCircle, Mic, MicOff, Settings, UserPen, Volume2, VolumeOff } from 'lucide-vue-next'
-const { connect } = useSignaling()
+
+const { clients, inputMuted, toggleInput, outputMuted, toggleOutput, version, isTauri } = useApp()
+const { connect, connected } = useSignaling()
+
+interface Tab {
+  id: string
+  icon: Component
+  onClick: () => void | Promise<void>
+}
 
 const route = useRoute()
 
-const inPreferences = computed(() => {
+const tabs: Tab[] = [
-  return route.name === 'Preferences'
+  {
-})
+    id: 'Index',
+    icon: MessageCircle,
+    onClick: () => {
+      navigateTo({ name: 'Index' })
+    },
+  },
+  {
+    id: 'Profile',
+    icon: UserPen,
+    onClick: () => {
+      navigateTo({ name: 'Profile' })
+    },
+  },
+  {
+    id: 'Preferences',
+    icon: Settings,
+    onClick: () => {
+      navigateTo({ name: 'Preferences' })
+    },
+  },
+]
 
-function onClickPreferences() {
+const activeTab = ref<Tab>(tabs.find(tab => tab.id === route.name) ?? tabs[0]!)
-  navigateTo(!inPreferences.value ? { name: 'Preferences' } : '/')
+
-}
+watch(activeTab, (activeTab) => {
+  activeTab.onClick()
+})
 
 connect()
 </script>

client/app/middleware/00.updater.global.ts

@@ -1,41 +1,20 @@
-import { relaunch } from '@tauri-apps/plugin-process'
-import { check } from '@tauri-apps/plugin-updater'
-
 export default defineNuxtRouteMiddleware(async (to, from) => {
-  if (from?.name)
+  if (import.meta.dev || import.meta.server)
     return
 
-  const update = await check()
+  const { isTauri } = useApp()
 
-  console.log(update)
+  if (!isTauri.value)
-
-  if (import.meta.dev)
     return
 
+  if (from?.name || !!to.redirectedFrom)
+    return
+
+  const { checkForUpdates } = useUpdater()
+
+  const update = await checkForUpdates()
+
   if (update) {
-    console.log(
+    return navigateTo({ name: 'Updater' })
-      `found update ${update.version} from ${update.date} with notes ${update.body}`,
-    )
-    let downloaded = 0
-    let contentLength = 0
-    // alternatively we could also call update.download() and update.install() separately
-    await update.downloadAndInstall((event) => {
-      switch (event.event) {
-        case 'Started':
-          contentLength = event.data.contentLength ?? 0
-          console.log(`started downloading ${event.data.contentLength} bytes`)
-          break
-        case 'Progress':
-          downloaded += event.data.chunkLength
-          console.log(`downloaded ${downloaded} from ${contentLength}`)
-          break
-        case 'Finished':
-          console.log('download finished')
-          break
-      }
-    })
-
-    console.log('update installed')
-    await relaunch()
   }
 })

client/app/middleware/01.auth.global.ts

@@ -3,9 +3,10 @@ import chadApi from '#shared/chad-api'
 export default defineNuxtRouteMiddleware(async (to, from) => {
   const { me, setMe } = useAuth()
 
-  if (!me.value && !from?.name) {
+  if (!me.value) {
     try {
-      setMe(await chadApi('/me'))
+      setMe(await chadApi('/me', { method: 'GET' }))
+      return navigateTo({ name: 'Index' })
     }
     catch {
       if (to.meta.auth !== 'guest') {

client/app/middleware/02.user-preferences.global.ts

@@ -0,0 +1,26 @@
+import type { SyncedPreferences } from '~/composables/use-preferences'
+import chadApi from '#shared/chad-api'
+
+export default defineNuxtRouteMiddleware(async () => {
+  const { me } = useAuth()
+
+  if (!me.value)
+    return
+
+  const { synced, toggleInputHotkey, toggleOutputHotkey } = usePreferences()
+
+  if (synced.value)
+    return
+
+  try {
+    const preferences = await chadApi<SyncedPreferences>('/preferences', { method: 'GET' })
+
+    if (!preferences)
+      return
+
+    toggleInputHotkey.value = preferences.toggleInputHotkey ?? toggleInputHotkey.value
+    toggleOutputHotkey.value = preferences.toggleOutputHotkey ?? toggleOutputHotkey.value
+    synced.value = true
+  }
+  catch {}
+})

client/app/pages/index.vue

@@ -1,11 +1,15 @@
 <template>
-  <div class="flex items-center justify-center p-3">
+  <div class="flex items-center justify-center">
-    <PrimeFieldset legend="Important information">
+    <PrimeCard>
+      <template #content>
         The chat is under development.
-    </PrimeFieldset>
+      </template>
+    </PrimeCard>
   </div>
 </template>
 
 <script setup lang="ts">
-const { clients, inputMuted, toggleInput, outputMuted, toggleOutput } = useApp()
+definePageMeta({
+  name: 'Index',
+})
 </script>

client/app/pages/preferences.vue

@@ -1,54 +1,184 @@
 <template>
   <div>
-    <AppHeader title="Preferences" secondary />
+    <PrimeDivider align="left">
+      Audio
+    </PrimeDivider>
 
-    <form class="flex flex-col gap-3 p-3" @submit.prevent="save">
     <PrimeFloatLabel variant="on">
-        <PrimeInputText id="username" v-model="displayName" size="large" fluid autocomplete="off" />
+      <PrimeSelect
-        <label for="username">Username</label>
+        v-model="inputDeviceId"
+        :options="audioInputs"
+        option-label="label"
+        option-value="deviceId"
+        input-id="inputDevice"
+        fluid
+        :invalid="!inputDeviceExist"
+      />
+      <label for="inputDevice">Input device</label>
     </PrimeFloatLabel>
 
-      <PrimeButton label="Save" type="submit" :disabled="!valid" />
+    <div class="flex items-center gap-2 mt-3">
-    </form>
+      <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">
-      <PrimeButton label="Logout" fluid severity="danger" @click="logout" />
+        <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 { me, setMe, logout } = useAuth()
-
-const signaling = useSignaling()
 const toast = useToast()
 
-const displayName = ref(me.value?.displayName || '')
+const setupToggleInputHotkey = (event: KeyboardEvent) => setupHotkey(event, toggleInputHotkey)
+const setupToggleOutputHotkey = (event: KeyboardEvent) => setupHotkey(event, toggleOutputHotkey)
 
-const valid = computed(() => {
+function setupHotkey(event: KeyboardEvent, model: RemovableRef<string>) {
-  if (!displayName.value || !me.value)
+  if (event.key === 'Tab' || event.key === 'Enter') {
-    return false
-
-  if (displayName.value === me.value.displayName)
-    return false
-
-  return true
-})
-
-async function save() {
-  if (!valid.value)
     return
+  }
 
-  const updatedMe = await signaling.socket.value?.emitWithAck('updateClient', {
+  event.preventDefault()
-    displayName: displayName.value,
+
+  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,
   })
-
-  setMe({ ...me.value, displayName: updatedMe.displayName })
-
-  toast.add({ severity: 'success', summary: 'Saved', life: 1000, closable: false })
 }
 </script>

client/app/pages/profile.vue

@@ -0,0 +1,64 @@
+<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>
+
+    <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>
+          <LogOut />
+        </template>
+      </PrimeButton>
+    </div>
+  </form>
+</template>
+
+<script setup lang="ts">
+import { LogOut } from 'lucide-vue-next'
+
+definePageMeta({
+  name: 'Profile',
+})
+
+const { me, setMe, logout } = useAuth()
+const signaling = useSignaling()
+const toast = useToast()
+
+const displayName = ref(me.value?.displayName || '')
+
+const saving = ref(false)
+
+const valid = computed(() => {
+  if (!me.value)
+    return false
+
+  if (displayName.value === me.value.displayName)
+    return false
+
+  return true
+})
+
+async function save() {
+  if (!valid.value)
+    return
+
+  saving.value = true
+
+  const updatedMe = await signaling.socket.value?.emitWithAck('updateClient', {
+    displayName: displayName.value,
+  })
+
+  setMe({ ...me.value!, displayName: (updatedMe.displayName as string) })
+
+  toast.add({ severity: 'success', summary: 'Saved', life: 1000, closable: false })
+
+  saving.value = false
+}
+</script>

client/app/pages/updater.vue

@@ -0,0 +1,41 @@
+<template>
+  <div class="flex h-full">
+    <div class="w-80 m-auto">
+      <p class="text-center text-muted-color mb-4">
+        Updating...
+      </p>
+
+      <PrimeProgressBar mode="indeterminate" style="height: 8px;" />
+
+      <div class="flex items-center justify-center gap-2 mt-8">
+        <PrimeBadge :value="lastUpdate.currentVersion" size="small" severity="secondary" />
+        <i class="pi pi-arrow-right" style="font-size: 0.75rem;" />
+        <PrimeBadge :value="lastUpdate.version" size="small" severity="contrast" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+definePageMeta({
+  name: 'Updater',
+  layout: 'blank',
+  auth: false,
+  middleware: () => {
+    const { lastUpdate } = useUpdater()
+    if (!lastUpdate.value)
+      return navigateTo('/')
+  },
+})
+
+const lastUpdate = useUpdater().lastUpdate.value!
+
+;(async () => {
+  try {
+    await lastUpdate.downloadAndInstall()
+  }
+  catch {
+    await navigateTo('/')
+  }
+})()
+</script>

client/app/plugins/00.build-info.ts

@@ -0,0 +1,7 @@
+export default defineNuxtPlugin({
+  setup() {
+    console.group('Build Info')
+    console.log(`COMMIT_SHA: ${__COMMIT_SHA__}`)
+    console.groupEnd()
+  },
+})

client/app/plugins/01.register-hotkeys.ts

@@ -0,0 +1,45 @@
+import { isRegistered, register, unregister, unregisterAll } from '@tauri-apps/plugin-global-shortcut'
+
+export default defineNuxtPlugin({
+  async setup() {
+    const { isTauri, toggleInput, toggleOutput } = useApp()
+    const preferences = usePreferences()
+
+    if (!isTauri.value)
+      return
+
+    await unregisterAll()
+
+    watch(preferences.toggleInputHotkey, async (shortcut, prevShortcut) => {
+      await registerHotkey(shortcut, prevShortcut, toggleInput)
+    }, {
+      immediate: true,
+    })
+
+    watch(preferences.toggleOutputHotkey, async (shortcut, prevShortcut) => {
+      await registerHotkey(shortcut, prevShortcut, toggleOutput)
+    }, {
+      immediate: true,
+    })
+
+    async function registerHotkey(shortcut: string, prevShortcut: string | undefined, cb: () => void) {
+      if (!!prevShortcut && await isRegistered(prevShortcut)) {
+        await unregister(prevShortcut)
+      }
+
+      if (!shortcut)
+        return
+
+      if (await isRegistered(shortcut)) {
+        await unregister(shortcut)
+      }
+
+      await register(shortcut, ({ state }) => {
+        if (state !== 'Released')
+          return
+
+        cb()
+      })
+    }
+  },
+})

client/globals.d.ts

@@ -1 +1,2 @@
+declare const __API_BASE_URL__: string
 declare const __COMMIT_SHA__: string

client/latest.json

@@ -1,11 +0,0 @@
-{
-  "pub_date": "2025-10-19T18:09:51Z",
-  "version": "0.2.1",
-  "platforms": {
-    "windows-x86_64": {
-      "url": "https://git.koptilnya.xyz/opti1337/chad/releases/download/latest/chad_0.2.1_x64-setup.exe",
-      "signature": "dW50cnVzdGVkIGNvbW1lbnQ6IHNpZ25hdHVyZSBmcm9tIHRhdXJpIHNlY3JldCBrZXkKUlVUMHdwTUN1SnhESjBiY2xtakN0WW1LTHNyQ1RyQjd2YlVXRUozWHp0K003SlFYbmlreHY2UjF5RjAvdEhZKzBpL0J6NVJ1c09VaUVUa3ZCZmFUL1AxN2lCNW9pVW9MY0FvPQp0cnVzdGVkIGNvbW1lbnQ6IHRpbWVzdGFtcDoxNzYwODk3MzkwCWZpbGU6Y2hhZF8wLjIuMV94NjQtc2V0dXAuZXhlCmtqcDJtSVQ0d1ZVdXpoYWxnMXVxQVlwLzM5V3BjM2Q4RGQzRXZBUlRFQzhnaDdqdjNTK0h0RW1zcjR5UFE2ZWx2dVppbWpjMlBYdG1ZUGM3NXVqT0F3PT0K"
-    }
-  },
-  "notes": ""
-}

client/nuxt.config.ts

@@ -1,3 +1,4 @@
+import { definePreset } from '@primeuix/themes'
 import Aura from '@primeuix/themes/aura'
 import tailwindcss from '@tailwindcss/vite'
 
@@ -10,10 +11,60 @@ export default defineNuxtConfig({
     '@primevue/nuxt-module',
     '@formkit/auto-animate/nuxt',
   ],
+  fonts: {
+    provider: 'google',
+  },
   primevue: {
     options: {
       theme: {
-        preset: Aura,
+        preset: definePreset(Aura, {
+          semantic: {
+            transitionDuration: '150ms',
+            primary: {
+              50: '{zinc.50}',
+              100: '{zinc.100}',
+              200: '{zinc.200}',
+              300: '{zinc.300}',
+              400: '{zinc.400}',
+              500: '{zinc.500}',
+              600: '{zinc.600}',
+              700: '{zinc.700}',
+              800: '{zinc.800}',
+              900: '{zinc.900}',
+              950: '{zinc.950}',
+            },
+          },
+          colorScheme: {
+            light: {
+              primary: {
+                color: '{zinc.950}',
+                inverseColor: '#ffffff',
+                hoverColor: '{zinc.900}',
+                activeColor: '{zinc.800}',
+              },
+              highlight: {
+                background: '{zinc.950}',
+                focusBackground: '{zinc.700}',
+                color: '#ffffff',
+                focusColor: '#ffffff',
+              },
+            },
+            dark: {
+              primary: {
+                color: '{zinc.50}',
+                inverseColor: '{zinc.950}',
+                hoverColor: '{zinc.100}',
+                activeColor: '{zinc.200}',
+              },
+              highlight: {
+                background: 'rgba(250, 250, 250, .16)',
+                focusBackground: 'rgba(250, 250, 250, .24)',
+                color: 'rgba(255,255,255,.87)',
+                focusColor: 'rgba(255,255,255,.87)',
+              },
+            },
+          },
+        }),
       },
     },
     components: {
@@ -25,9 +76,6 @@ export default defineNuxtConfig({
     '@/assets/styles/primeicons.css',
     '@/assets/styles/main.scss',
   ],
-  devServer: {
-    // host: '0',
-  },
   vite: {
     plugins: [
       tailwindcss(),
@@ -38,14 +86,18 @@ export default defineNuxtConfig({
       strictPort: true,
       proxy: {
         '/api': {
-          // target: 'http://localhost:4000',
+          target: 'http://localhost:4000/chad',
-          target: 'https://api.koptilnya.xyz',
+          // target: 'https://api.koptilnya.xyz/chad',
+          ws: true,
           changeOrigin: true,
-          rewrite: path => path.replace(/^\/api/, '/chad'),
+          rewrite: (path) => {
+            return path.replace(/^\/api/, '')
+          },
         },
       },
     },
     define: {
+      __API_BASE_URL__: JSON.stringify(import.meta.env.API_BASE_URL || 'http://localhost:4000/chad'),
       __COMMIT_SHA__: JSON.stringify(import.meta.env.COMMIT_SHA || 'local'),
     },
   },

client/package.json

@@ -14,21 +14,25 @@
     "@nuxt/fonts": "^0.11.4",
     "@primeuix/themes": "^1.2.5",
     "@tailwindcss/vite": "^4.1.14",
+    "@tauri-apps/plugin-global-shortcut": "~2",
     "@tauri-apps/plugin-process": "~2",
     "@tauri-apps/plugin-updater": "~2",
     "@vueuse/core": "^13.9.0",
+    "hotkeys-js": "^4.0.0",
+    "lucide-vue-next": "^0.562.0",
     "mediasoup-client": "^3.16.7",
-    "nuxt": "^4.1.2",
+    "nuxt": "^4.2.2",
     "postcss": "^8.5.6",
     "primeicons": "^7.0.0",
     "primevue": "^4.4.0",
     "socket.io-client": "^4.8.1",
     "tailwindcss": "^4.1.14",
     "tailwindcss-primeui": "^0.6.1",
+    "ufo": "^1.6.1",
     "vue": "^3.5.22",
     "vue-router": "^4.5.1"
   },
-  "packageManager": "yarn@4.10.3",
+  "packageManager": "yarn@4.12.0",
   "devDependencies": {
     "@antfu/eslint-config": "^5.4.1",
     "@primevue/nuxt-module": "^4.4.0",

client/scripts/generate-updater.mjs

@@ -0,0 +1,41 @@
+import fs from 'node:fs'
+import path from 'node:path'
+import { fileURLToPath } from 'node:url'
+
+const __filename = fileURLToPath(import.meta.url)
+const __dirname = path.dirname(__filename)
+
+const TAURI_CONF = path.resolve(__dirname, '../src-tauri/tauri.conf.json')
+const OUTPUT = path.resolve(__dirname, '../updater.json')
+
+const PLATFORM = 'windows-x86_64'
+const BASE_URL = 'https://git.koptilnya.xyz/opti1337/chad/releases/download/latest'
+
+const tauriConfRaw = fs.readFileSync(TAURI_CONF, 'utf8')
+const tauriConf = JSON.parse(tauriConfRaw)
+const version = tauriConf.version
+
+const SIG_FILE = path.resolve(
+  __dirname,
+  `../src-tauri/target/x86_64-pc-windows-msvc/release/bundle/nsis/chad_${version}_x64-setup.exe.sig`,
+)
+
+const signature = fs.readFileSync(SIG_FILE, 'utf8').trim()
+
+const installerName = `chad_${version}_x64-setup.exe`
+
+const updater = {
+  pub_date: new Date().toISOString(),
+  version,
+  platforms: {
+    [PLATFORM]: {
+      url: `${BASE_URL}/${installerName}`,
+      signature,
+    },
+  },
+  notes: '',
+}
+
+fs.writeFileSync(OUTPUT, JSON.stringify(updater, null, 2), 'utf8')
+
+console.log('updater.json generated')

client/server/plugins/extend-html.ts

@@ -0,0 +1,4 @@
+export default defineNitroPlugin((nitroApp) => {
+  nitroApp.hooks.hook('render:html', (html, { event }) => {
+  })
+})

client/shared/chad-api.ts

@@ -1,16 +1,64 @@
 import { ToastEventBus } from 'primevue'
 
 const instance = $fetch.create({
-  baseURL: process.env.API_BASE_URL || 'https://api.koptilnya.xyz/chad',
+  baseURL: __API_BASE_URL__,
   credentials: 'include',
-  onResponseError({ response }) {
+  retry: false,
+  onResponseError({ request, response }) {
     if (!import.meta.client)
       return
 
+    if (typeof request === 'string' && request.endsWith('/me'))
+      return
+
     const message = response._data.error || 'Something went wrong'
 
     ToastEventBus.emit('add', { severity: 'error', summary: 'Error', detail: message, closable: false, life: 3000 })
   },
 })
 
+// function instance(url: string, request: Request) {
+//   console.log(url)
+//   return fetch({
+//     url: `https://api.koptilnya.xyz${url}`,
+//     credentials: 'include',
+//     method: 'GET',
+//     headers: {
+//       'Accept': 'application/json',
+//       'Content-Type': 'application/json',
+//       ...request.headers,
+//     },
+//     ...request,
+//     body: request.body ? JSON.stringify(request.body) : undefined,
+//   })
+// }
+
+// async function instance(url: string, options: Partial<Request> = {}) {
+//   const response = await fetch(`https://api.koptilnya.xyz/chad${url}`, {
+//     method: options.method || 'GET',
+//     headers: {
+//       'Content-Type': 'application/json',
+//       ...(options.headers || {}),
+//     },
+//     body: JSON.stringify(options.body ?? {}),
+//     responseType: 2,
+//     credentials: 'include',
+//   })
+//
+//   const data = await response.json()
+//
+//   if (response.status >= 400) {
+//     if (!import.meta.client)
+//       return
+//
+//     const message = data?.error || 'Something went wrong'
+//
+//     ToastEventBus.emit('add', { severity: 'error', summary: 'Error', detail: message, closable: false, life: 3000 })
+//
+//     throw new Error(`HTTP ${response.status}: ${data?.message || 'Ошибка'}`)
+//   }
+//
+//   return data
+// }
+
 export default instance

client/src-tauri/Cargo.lock

@@ -93,6 +93,7 @@ dependencies = [
  "serde_json",
  "tauri",
  "tauri-build",
+ "tauri-plugin-global-shortcut",
  "tauri-plugin-log",
  "tauri-plugin-process",
  "tauri-plugin-single-instance",
@@ -292,7 +293,7 @@ dependencies = [
  "miniz_oxide",
  "object",
  "rustc-demangle",
- "windows-link 0.2.0",
+ "windows-link 0.2.1",
 ]
 
 [[package]]
@@ -603,7 +604,7 @@ dependencies = [
  "iana-time-zone",
  "num-traits",
  "serde",
- "windows-link 0.2.0",
+ "windows-link 0.2.1",
 ]
 
 [[package]]
@@ -1375,6 +1376,16 @@ dependencies = [
  "version_check",
 ]
 
+[[package]]
+name = "gethostname"
+version = "1.1.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "1bd49230192a3797a9a4d6abe9b3eed6f7fa4c8a8a4947977c6f80025f92cbd8"
+dependencies = [
+ "rustix",
+ "windows-link 0.2.1",
+]
+
 [[package]]
 name = "getrandom"
 version = "0.1.16"
@@ -1504,6 +1515,24 @@ version = "0.3.3"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "0cc23270f6e1808e30a928bdc84dea0b9b4136a8bc82338574f23baf47bbd280"
 
+[[package]]
+name = "global-hotkey"
+version = "0.7.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "b9247516746aa8e53411a0db9b62b0e24efbcf6a76e0ba73e5a91b512ddabed7"
+dependencies = [
+ "crossbeam-channel",
+ "keyboard-types",
+ "objc2 0.6.2",
+ "objc2-app-kit",
+ "once_cell",
+ "serde",
+ "thiserror 2.0.17",
+ "windows-sys 0.59.0",
+ "x11rb",
+ "xkeysym",
+]
+
 [[package]]
 name = "gobject-sys"
 version = "0.18.0"
@@ -4180,6 +4209,21 @@ dependencies = [
  "walkdir",
 ]
 
+[[package]]
+name = "tauri-plugin-global-shortcut"
+version = "2.3.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "424af23c7e88d05e4a1a6fc2c7be077912f8c76bd7900fd50aa2b7cbf5a2c405"
+dependencies = [
+ "global-hotkey",
+ "log",
+ "serde",
+ "serde_json",
+ "tauri",
+ "tauri-plugin",
+ "thiserror 2.0.17",
+]
+
 [[package]]
 name = "tauri-plugin-log"
 version = "2.7.0"
@@ -5227,7 +5271,7 @@ checksum = "6844ee5416b285084d3d3fffd743b925a6c9385455f64f6d4fa3031c4c2749a9"
 dependencies = [
  "windows-implement",
  "windows-interface",
- "windows-link 0.2.0",
+ "windows-link 0.2.1",
  "windows-result 0.4.0",
  "windows-strings 0.5.0",
 ]
@@ -5273,9 +5317,9 @@ checksum = "5e6ad25900d524eaabdbbb96d20b4311e1e7ae1699af4fb28c17ae66c80d798a"
 
 [[package]]
 name = "windows-link"
-version = "0.2.0"
+version = "0.2.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "45e46c0661abb7180e7b9c281db115305d49ca1709ab8242adf09666d2173c65"
+checksum = "f0805222e57f7521d6a62e36fa9163bc891acd422f971defe97d64e70d0a4fe5"
 
 [[package]]
 name = "windows-numerics"
@@ -5302,7 +5346,7 @@ version = "0.4.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "7084dcc306f89883455a206237404d3eaf961e5bd7e0f312f7c91f57eb44167f"
 dependencies = [
- "windows-link 0.2.0",
+ "windows-link 0.2.1",
 ]
 
 [[package]]
@@ -5320,7 +5364,7 @@ version = "0.5.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "7218c655a553b0bed4426cf54b20d7ba363ef543b52d515b3e48d7fd55318dda"
 dependencies = [
- "windows-link 0.2.0",
+ "windows-link 0.2.1",
 ]
 
 [[package]]
@@ -5365,7 +5409,7 @@ version = "0.61.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "6f109e41dd4a3c848907eb83d5a42ea98b3769495597450cf6d153507b166f0f"
 dependencies = [
- "windows-link 0.2.0",
+ "windows-link 0.2.1",
 ]
 
 [[package]]
@@ -5405,7 +5449,7 @@ version = "0.53.4"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "2d42b7b7f66d2a06854650af09cfdf8713e427a439c97ad65a6375318033ac4b"
 dependencies = [
- "windows-link 0.2.0",
+ "windows-link 0.2.1",
  "windows_aarch64_gnullvm 0.53.0",
  "windows_aarch64_msvc 0.53.0",
  "windows_i686_gnu 0.53.0",
@@ -5431,7 +5475,7 @@ version = "0.1.6"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "700dad7c058606087f6fdc1f88da5841e06da40334413c6cd4367b25ef26d24e"
 dependencies = [
- "windows-link 0.2.0",
+ "windows-link 0.2.1",
 ]
 
 [[package]]
@@ -5687,6 +5731,23 @@ dependencies = [
  "pkg-config",
 ]
 
+[[package]]
+name = "x11rb"
+version = "0.13.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "9993aa5be5a26815fe2c3eacfc1fde061fc1a1f094bf1ad2a18bf9c495dd7414"
+dependencies = [
+ "gethostname",
+ "rustix",
+ "x11rb-protocol",
+]
+
+[[package]]
+name = "x11rb-protocol"
+version = "0.13.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "ea6fc2961e4ef194dcbfe56bb845534d0dc8098940c7e5c012a258bfec6701bd"
+
 [[package]]
 name = "xattr"
 version = "1.6.1"
@@ -5697,6 +5758,12 @@ dependencies = [
  "rustix",
 ]
 
+[[package]]
+name = "xkeysym"
+version = "0.2.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "b9cc00251562a284751c9973bace760d86c0276c471b4be569fe6b068ee97a56"
+
 [[package]]
 name = "yoke"
 version = "0.8.0"

client/src-tauri/Cargo.toml

@@ -26,5 +26,6 @@ tauri-plugin-log = "2"
 tauri-plugin-process = "2"
 
 [target.'cfg(not(any(target_os = "android", target_os = "ios")))'.dependencies]
+tauri-plugin-global-shortcut = "2"
 tauri-plugin-single-instance = "2"
 tauri-plugin-updater = "2"

client/src-tauri/capabilities/desktop.json

@@ -9,6 +9,10 @@
     "main"
   ],
   "permissions": [
-    "updater:default"
+    "updater:default",
+    "global-shortcut:allow-is-registered",
+    "global-shortcut:allow-register",
+    "global-shortcut:allow-unregister",
+    "global-shortcut:allow-unregister-all"
   ]
 }

client/src-tauri/src/lib.rs

@@ -1,13 +1,10 @@
 #[cfg_attr(mobile, tauri::mobile_entry_point)]
 pub fn run() {
     tauri::Builder::default()
+        .plugin(tauri_plugin_global_shortcut::Builder::new().build())
         .plugin(tauri_plugin_process::init())
         .plugin(tauri_plugin_updater::Builder::new().build())
-        //         .plugin(tauri_plugin_single_instance::init(|app, args, cwd| {
+        .plugin(tauri_plugin_single_instance::init(|_, _, _| {}))
-        //             app.get_webview_window("main")
-        //                .expect("no main window")
-        //                .set_focus();
-        //         }))
         .setup(|app| {
             if cfg!(debug_assertions) {
                 app.handle().plugin(

client/src-tauri/tauri.conf.json

@@ -1,7 +1,7 @@
 {
   "$schema": "../node_modules/@tauri-apps/cli/config.schema.json",
   "productName": "chad",
-  "version": "0.2.2",
+  "version": "0.2.13",
   "identifier": "xyz.koptilnya.chad",
   "build": {
     "frontendDist": "../.output/public",
@@ -21,7 +21,8 @@
         "fullscreen": false,
         "center": true,
         "theme": "Dark",
-        "additionalBrowserArgs": "--disable-features=msWebOOUI,msPdfOOUI,msSmartScreenProtection --autoplay-policy=no-user-gesture-required"
+        "additionalBrowserArgs": "--disable-features=msWebOOUI,msPdfOOUI,msSmartScreenProtection --autoplay-policy=no-user-gesture-required",
+        "incognito": false
       }
     ],
     "security": {
@@ -43,9 +44,9 @@
   },
   "plugins": {
     "updater": {
-      "pubkey": "dW50cnVzdGVkIGNvbW1lbnQ6IG1pbmlzaWduIHB1YmxpYyBrZXk6IDI3NDM5Q0I4MDI5M0MyRjQKUldUMHdwTUN1SnhESjBoUFpuWkJxRzFqcWJxdTY4UkNvMmUzcHFnZnJtbSs3WmJoUmhxQ3R5bWYK",
+      "pubkey": "dW50cnVzdGVkIGNvbW1lbnQ6IG1pbmlzaWduIHB1YmxpYyBrZXk6IEU3MzkxMzM3RkQ3NTg4QUQKUldTdGlIWDlOeE01NStIak9VbmZTTm9HY2NyNUQrVXB5ZEdIN1BkK2lhYW9zWkNCQnZQSjRmelIK",
       "endpoints": [
-        "https://git.koptilnya.xyz/opti1337/chad/releases/download/latest/latest.json"
+        "https://git.koptilnya.xyz/opti1337/chad/releases/download/latest/updater.json"
       ]
     }
   }

server/auth/lucia.ts

@@ -17,6 +17,11 @@ interface DatabaseUserAttributes {
 }
 
 export const auth = new Lucia(new PrismaAdapter(prisma.session, prisma.user), {
+  sessionCookie: {
+    attributes: {
+      sameSite: 'none',
+    },
+  },
   getUserAttributes: ({ id, displayName, username }) => {
     return {
       id,

server/index.ts

@@ -1,47 +0,0 @@
-import { createServer as createHttpServer } from 'node:http'
-import { consola } from 'consola'
-import cors from 'cors'
-import express from 'express'
-import * as mediasoup from 'mediasoup'
-import { Server as SocketServer } from 'socket.io'
-import { webrtcSocket } from './sockets'
-
-(async () => {
-  const app = express()
-
-  app.use(cors())
-
-  const server = createHttpServer(app)
-
-  const worker = await mediasoup.createWorker()
-  worker.on('died', () => {
-    consola.error('[Mediasoup]', 'Worker died, exiting...')
-
-    process.exit(1)
-  })
-
-  const router = await worker.createRouter({
-    mediaCodecs: [
-      {
-        kind: 'audio',
-        mimeType: 'audio/opus',
-        clockRate: 48000,
-        channels: 2,
-        parameters: { useinbandfec: 1, stereo: 1 },
-      },
-    ],
-  })
-
-  const io = new SocketServer(server, {
-    path: '/chad/ws',
-    cors: {
-      origin: process.env.CORS_ORIGIN || '*',
-    },
-  })
-
-  webrtcSocket(io, router)
-
-  server.listen(process.env.PORT || 4000, () => {
-    consola.success('[Server]', 'Server started!')
-  })
-})()

server/plugins/auth.ts

@@ -17,15 +17,20 @@ export default fp(async (fastify) => {
     try {
       const sessionId = auth.readSessionCookie(req.headers.cookie ?? '')
 
+      if (!sessionId)
+        return
+
       const { session, user } = await auth.validateSession(sessionId ?? '')
 
       if (session && session.fresh) {
         const cookie = auth.createSessionCookie(session.id)
+
         reply.setCookie(cookie.name, cookie.value, cookie.attributes)
       }
 
       if (!session) {
         const blank = auth.createBlankSessionCookie()
+
         reply.setCookie(blank.name, blank.value, blank.attributes)
       }
 

server/prisma/migrations/20251225143531_user_preferences/migration.sql

@@ -0,0 +1,10 @@
+-- CreateTable
+CREATE TABLE "UserPreferences" (
+    "userId" TEXT NOT NULL PRIMARY KEY,
+    "toggleInputHotkey" TEXT NOT NULL,
+    "toggleOutputHotkey" TEXT NOT NULL,
+    CONSTRAINT "UserPreferences_userId_fkey" FOREIGN KEY ("userId") REFERENCES "User" ("id") ON DELETE CASCADE ON UPDATE CASCADE
+);
+
+-- CreateIndex
+CREATE INDEX "Session_userId_idx" ON "Session"("userId");

server/prisma/migrations/20251225145827_user_preferences_volumes/migration.sql

@@ -0,0 +1,21 @@
+/*
+  Warnings:
+
+  - Added the required column `volumes` to the `UserPreferences` table without a default value. This is not possible if the table is not empty.
+
+*/
+-- RedefineTables
+PRAGMA defer_foreign_keys=ON;
+PRAGMA foreign_keys=OFF;
+CREATE TABLE "new_UserPreferences" (
+    "userId" TEXT NOT NULL PRIMARY KEY,
+    "toggleInputHotkey" TEXT NOT NULL,
+    "toggleOutputHotkey" TEXT NOT NULL,
+    "volumes" JSONB NOT NULL,
+    CONSTRAINT "UserPreferences_userId_fkey" FOREIGN KEY ("userId") REFERENCES "User" ("id") ON DELETE CASCADE ON UPDATE CASCADE
+);
+INSERT INTO "new_UserPreferences" ("toggleInputHotkey", "toggleOutputHotkey", "userId") SELECT "toggleInputHotkey", "toggleOutputHotkey", "userId" FROM "UserPreferences";
+DROP TABLE "UserPreferences";
+ALTER TABLE "new_UserPreferences" RENAME TO "UserPreferences";
+PRAGMA foreign_keys=ON;
+PRAGMA defer_foreign_keys=OFF;

server/prisma/migrations/20251225153018_user_preferences_optional_columns/migration.sql

@@ -0,0 +1,15 @@
+-- RedefineTables
+PRAGMA defer_foreign_keys=ON;
+PRAGMA foreign_keys=OFF;
+CREATE TABLE "new_UserPreferences" (
+    "userId" TEXT NOT NULL PRIMARY KEY,
+    "toggleInputHotkey" TEXT,
+    "toggleOutputHotkey" TEXT,
+    "volumes" JSONB,
+    CONSTRAINT "UserPreferences_userId_fkey" FOREIGN KEY ("userId") REFERENCES "User" ("id") ON DELETE CASCADE ON UPDATE CASCADE
+);
+INSERT INTO "new_UserPreferences" ("toggleInputHotkey", "toggleOutputHotkey", "userId", "volumes") SELECT "toggleInputHotkey", "toggleOutputHotkey", "userId", "volumes" FROM "UserPreferences";
+DROP TABLE "UserPreferences";
+ALTER TABLE "new_UserPreferences" RENAME TO "UserPreferences";
+PRAGMA foreign_keys=ON;
+PRAGMA defer_foreign_keys=OFF;

server/prisma/schema.prisma

@@ -17,6 +17,7 @@ model User {
   updatedAt         DateTime @updatedAt
 
   Session           Session[]
+  UserPreferences   UserPreferences?
 }
 
 model Session {
@@ -28,3 +29,12 @@ model Session {
 
   @@index([userId])
 }
+
+model UserPreferences {
+  userId              String  @id
+  toggleInputHotkey   String? @default("")
+  toggleOutputHotkey  String? @default("")
+  volumes             Json?   @default("{}")
+
+  user                User    @relation(fields: [userId], references: [id], onDelete: Cascade)
+}

server/routes/auth.ts

@@ -1,5 +1,4 @@
 import type { FastifyInstance } from 'fastify'
-import type { RegisterOptions } from 'fastify/types/register.js'
 import bcrypt from 'bcrypt'
 import { z } from 'zod'
 import { auth } from '../auth/lucia.ts'
@@ -71,8 +70,6 @@ export default function (fastify: FastifyInstance) {
       const session = await auth.createSession(user.id, {})
       const cookie = auth.createSessionCookie(session.id)
 
-      cookie.attributes.secure = false
-
       reply.setCookie(cookie.name, cookie.value, cookie.attributes)
 
       return {
@@ -119,7 +116,3 @@ export default function (fastify: FastifyInstance) {
     }
   })
 }
-
-const autoConfig: RegisterOptions = {
-  prefix: '/chad',
-}

server/routes/user.ts

@@ -0,0 +1,50 @@
+import type { FastifyInstance } from 'fastify'
+import { z } from 'zod'
+import prisma from '../prisma/client.ts'
+
+export default function (fastify: FastifyInstance) {
+  fastify.get('/preferences', async (req, reply) => {
+    if (req.user) {
+      return prisma.userPreferences.findFirst({ where: { userId: req.user.id } })
+    }
+
+    reply.code(401).send(false)
+  })
+
+  fastify.patch('/preferences', async (req, reply) => {
+    if (!req.user) {
+      reply.code(401).send(false)
+
+      return
+    }
+
+    try {
+      const schema = z.object({
+        toggleInputHotkey: z.string().optional(),
+        toggleOutputHotkey: z.string().optional(),
+        volumes: z.record(z.string(), z.number()).optional(),
+      })
+      const input = schema.parse(req.body)
+
+      return prisma.userPreferences.upsert({
+        where: { userId: req.user.id },
+        create: {
+          userId: req.user.id,
+          ...input,
+        },
+        update: input,
+      })
+    }
+    catch (err) {
+      fastify.log.error(err)
+      reply.code(400)
+
+      if (err instanceof z.ZodError) {
+        reply.send({ error: z.prettifyError(err) })
+      }
+      else {
+        reply.send({ error: err.message })
+      }
+    }
+  })
+}

server/server.ts

@@ -13,7 +13,16 @@ const fastify = Fastify({
   logger: true,
 })
 
-fastify.register(FastifyCors)
+fastify.register(FastifyCors, {
+  origin: [
+    'http://localhost:3000',
+    'http://tauri.localhost',
+    'https://koptilnya.xyz',
+    'https://chad.koptilnya.xyz',
+  ],
+  methods: ['PATCH', 'PUT', 'OPTIONS', 'GET', 'POST', 'DELETE'],
+  credentials: true,
+})
 
 fastify.register(FastifyCookie)
 
@@ -23,13 +32,14 @@ fastify.register(FastifyAutoLoad, {
 
 fastify.register(FastifyAutoLoad, {
   dir: join(__dirname, 'routes'),
+  options: { prefix: 'chad' },
 })
 
 ;(async () => {
   const port = process.env.PORT ? Number(process.env.PORT) : 4000
 
   try {
-    await fastify.listen({ port })
+    await fastify.listen({ port, host: '0.0.0.0' })
 
     await prisma.$connect()
     fastify.log.info('Testing DB Connection. OK')

server/socket/webrtc.ts

@@ -102,7 +102,7 @@ interface ServerToClientEvents {
   producers: (arg: ProducerShort[]) => void
   newConsumer: (
     arg: {
-      peerId: string
+      socketId: string
       producerId: types.Producer['id']
       id: types.Consumer['id']
       kind: types.MediaKind
@@ -141,7 +141,7 @@ type SomeSocket = Socket<ClientToServerEvents, ServerToClientEvents, InterServer
 export default function (io: SocketServer, router: types.Router) {
   const namespace: Namespace<ClientToServerEvents, ServerToClientEvents, InterServerEvent, SocketData> = io.of('/webrtc')
 
-  namespace.on('connection', (socket) => {
+  namespace.on('connection', async (socket) => {
     consola.info('[WebRtc]', 'Client connected', socket.id)
 
     socket.data.joined = false
@@ -153,7 +153,7 @@ export default function (io: SocketServer, router: types.Router) {
     socket.data.producers = new Map()
     socket.data.consumers = new Map()
 
-    prisma.user.findUnique({
+    const { id, username, displayName } = await prisma.user.findUnique({
       where: {
         id: socket.handshake.auth.userId,
       },
@@ -162,13 +162,13 @@ export default function (io: SocketServer, router: types.Router) {
         username: true,
         displayName: true,
       },
-    }).then(({ id, username, displayName }) => {
+    })
+
     socket.data.userId = id
     socket.data.username = username
     socket.data.displayName = displayName
 
     socket.emit('authenticated')
-    })
 
     socket.on('join', async ({ rtpCapabilities }, cb) => {
       if (socket.data.joined) {
@@ -231,7 +231,7 @@ export default function (io: SocketServer, router: types.Router) {
           dtlsParameters: transport.dtlsParameters,
         })
 
-        transport.on('icestatechange', (iceState) => {
+        transport.on('icestatechange', (iceState: types.IceState) => {
           if (iceState === 'disconnected' || iceState === 'closed') {
             consola.info('[WebRtc]', '[WebRtcTransport]', `"icestatechange" event [iceState:${iceState}], closing peer`, transport.id)
 
@@ -239,7 +239,7 @@ export default function (io: SocketServer, router: types.Router) {
           }
         })
 
-        transport.on('dtlsstatechange', (dtlsState) => {
+        transport.on('dtlsstatechange', (dtlsState: types.DtlsState) => {
           if (dtlsState === 'failed' || dtlsState === 'closed') {
             consola.warn('WebRtcTransport "dtlsstatechange" event [dtlsState:%s], closing peer', dtlsState)
 
@@ -364,6 +364,9 @@ export default function (io: SocketServer, router: types.Router) {
         return
       }
 
+      if (producer.paused)
+        return
+
       await producer.pause()
 
       cb({ ok: true })
@@ -547,7 +550,7 @@ export default function (io: SocketServer, router: types.Router) {
       consumerSocket.emit('consumerResumed', { consumerId: consumer.id })
     })
 
-    consumer.on('score', (score) => {
+    consumer.on('score', (score: types.ConsumerScore) => {
       consumerSocket.emit('consumerScore', { consumerId: consumer.id, score })
     })
 
@@ -555,7 +558,7 @@ export default function (io: SocketServer, router: types.Router) {
       await consumerSocket.emitWithAck(
         'newConsumer',
         {
-          peerId: producerSocket.id,
+          socketId: producerSocket.id,
           producerId: producer.id,
           id: consumer.id,
           kind: consumer.kind,

yarn.lock

@@ -1,4 +0,0 @@
-# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
-# yarn lockfile v1
-
-