From a702834034fa888734dba60e086adb1d69c93489 Mon Sep 17 00:00:00 2001
From: Klesti Selimaj <klesti.selimay@icloud.com>
Date: Wed, 26 Aug 2026 01:33:42 +0200
Subject: [PATCH] Audio config

---
 src-tauri/src/commands/audio.rs               |  28 +--
 src-tauri/src/commands/config.rs              |  17 +-
 src-tauri/src/lib.rs                          |   1 +
 .../settings/AudioVideoSettings.tsx           | 125 ++++++++++-
 src/components/ui/select.tsx                  | 199 ++++++++++++++++++
 src/components/ui/slider.tsx                  |  52 +++++
 src/lib/config.ts                             |   5 +-
 7 files changed, 406 insertions(+), 21 deletions(-)
 create mode 100644 src/components/ui/select.tsx
 create mode 100644 src/components/ui/slider.tsx

diff --git a/src-tauri/src/commands/audio.rs b/src-tauri/src/commands/audio.rs
index 9e32d8c..1b0eabd 100644
--- a/src-tauri/src/commands/audio.rs
+++ b/src-tauri/src/commands/audio.rs
@@ -1,14 +1,7 @@
 use cpal::traits::{DeviceTrait, HostTrait};
-use serde::{Deserialize, Serialize};
-
-#[derive(Debug, Clone, Serialize, Deserialize)]
-#[serde(rename_all = "camelCase")]
-pub struct AudioDevice {
-    pub name: String,
-}
 
 #[tauri::command]
-pub fn list_input_devices() -> Result<Vec<AudioDevice>, String> {
+pub fn list_input_devices() -> Result<Vec<String>, String> {
     let host = cpal::default_host();
 
     let devices = host
@@ -16,10 +9,19 @@ pub fn list_input_devices() -> Result<Vec<AudioDevice>, String> {
         .map_err(|e| format!("Failed to enumerate input devices: {e}"))?;
 
     Ok(devices
-        .filter_map(|d| {
-            Some(AudioDevice {
-                name: d.description().ok()?.name().to_string(),
-            })
-        })
+        .filter_map(|d| Some(d.description().ok()?.name().to_string()))
+        .collect())
+}
+
+#[tauri::command]
+pub fn list_output_devices() -> Result<Vec<String>, String> {
+    let host = cpal::default_host();
+
+    let devices = host
+        .output_devices()
+        .map_err(|e| format!("Failed to enumerate output devices: {e}"))?;
+
+    Ok(devices
+        .filter_map(|d| Some(d.description().ok()?.name().to_string()))
         .collect())
 }
diff --git a/src-tauri/src/commands/config.rs b/src-tauri/src/commands/config.rs
index 961b2da..cc7cc22 100644
--- a/src-tauri/src/commands/config.rs
+++ b/src-tauri/src/commands/config.rs
@@ -1,3 +1,4 @@
+use cpal::traits::{DeviceTrait, HostTrait};
 use serde::{Deserialize, Serialize};
 use std::fs;
 use std::sync::Mutex;
@@ -6,13 +7,25 @@ use tauri::{AppHandle, Manager, State};
 #[derive(Debug, Clone, Serialize, Deserialize)]
 #[serde(rename_all = "camelCase")]
 pub struct Config {
-    pub audio_device_name: Option<String>,
+    pub input_device_name: Option<String>,
+    pub output_device_name: Option<String>,
+    pub input_volume: u8,
+    pub output_volume: u8,
 }
 
 impl Default for Config {
     fn default() -> Self {
+        let host = cpal::default_host();
+
         Self {
-            audio_device_name: None,
+            input_device_name: host
+                .default_input_device()
+                .and_then(|d| Some(d.description().ok()?.name().to_string())),
+            output_device_name: host
+                .default_output_device()
+                .and_then(|d| Some(d.description().ok()?.name().to_string())),
+            input_volume: 0,
+            output_volume: 0,
         }
     }
 }
diff --git a/src-tauri/src/lib.rs b/src-tauri/src/lib.rs
index 5309958..c7845d6 100644
--- a/src-tauri/src/lib.rs
+++ b/src-tauri/src/lib.rs
@@ -16,6 +16,7 @@ pub fn run() {
             commands::accounts::save_accounts,
             commands::accounts::get_accounts,
             commands::audio::list_input_devices,
+            commands::audio::list_output_devices,
             commands::config::update_config,
             commands::config::save_config,
             commands::config::get_config,
diff --git a/src/components/settings/AudioVideoSettings.tsx b/src/components/settings/AudioVideoSettings.tsx
index 11b75c2..a474f92 100644
--- a/src/components/settings/AudioVideoSettings.tsx
+++ b/src/components/settings/AudioVideoSettings.tsx
@@ -1,14 +1,129 @@
-import { Volume2 } from "lucide-react";
+import { useEffect, useState } from "react";
+import { Volume2, Mic, Speaker } from "lucide-react";
+import { invoke } from "@tauri-apps/api/core";
+import { Label } from "@/components/ui/label";
+import { Slider } from "@/components/ui/slider";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { getConfig, updateConfig, saveConfig, Config } from "@/lib/config";
 
 export function AudioVideoSettings() {
+  const [config, setConfig] = useState<Config | null>(null);
+  const [inputDevices, setInputDevices] = useState<string[]>([]);
+  const [outputDevices, setOutputDevices] = useState<string[]>([]);
+
+  useEffect(() => {
+    getConfig().then(setConfig);
+    invoke<string[]>("list_input_devices").then(setInputDevices);
+    invoke<string[]>("list_output_devices").then(setOutputDevices);
+  }, []);
+
+  async function handleChange(patch: Partial<Config>) {
+    if (!config) return;
+    const updated = { ...config, ...patch };
+    setConfig(updated);
+    await updateConfig(updated);
+    await saveConfig();
+  }
+
+  if (!config) return null;
+
   return (
-    <div className="space-y-5 w-full">
+    <div className="space-y-8 w-full">
       <h2 className="text-lg font-semibold flex items-center gap-2">
         <Volume2 /> Audio & Video
       </h2>
-      <p className="text-sm text-muted-foreground">
-        Microphone/camera device selection goes here.
-      </p>
+
+      <div className="space-y-4">
+        <div className="flex items-center gap-2 text-sm font-medium">
+          <Mic className="h-4 w-4" />
+          Input
+        </div>
+
+        <div className="space-y-2">
+          <Label>Input device</Label>
+          <Select
+            value={config.inputDeviceName ?? undefined}
+            onValueChange={(value) => handleChange({ inputDeviceName: value })}
+          >
+            <SelectTrigger className="w-full">
+              <SelectValue placeholder="Select a microphone" />
+            </SelectTrigger>
+            <SelectContent>
+              {inputDevices.map((device) => (
+                <SelectItem key={device} value={device}>
+                  {device}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </div>
+
+        <div className="space-y-2">
+          <div className="flex items-center justify-between">
+            <Label>Input volume</Label>
+            <span className="text-xs text-muted-foreground">
+              {config.inputVolume}%
+            </span>
+          </div>
+          <Slider
+            value={[config.inputVolume]}
+            onValueChange={(value) =>
+              handleChange({ inputVolume: value as any })
+            }
+            max={100}
+            step={1}
+          />
+        </div>
+      </div>
+
+      <div className="space-y-4">
+        <div className="flex items-center gap-2 text-sm font-medium">
+          <Speaker className="h-4 w-4" />
+          Output
+        </div>
+
+        <div className="space-y-2">
+          <Label>Output device</Label>
+          <Select
+            value={config.outputDeviceName ?? undefined}
+            onValueChange={(value) => handleChange({ outputDeviceName: value })}
+          >
+            <SelectTrigger className="w-full">
+              <SelectValue placeholder="Select a speaker" />
+            </SelectTrigger>
+            <SelectContent>
+              {outputDevices.map((device) => (
+                <SelectItem key={device} value={device}>
+                  {device}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </div>
+
+        <div className="space-y-2">
+          <div className="flex items-center justify-between">
+            <Label>Output volume</Label>
+            <span className="text-xs text-muted-foreground">
+              {config.outputVolume}%
+            </span>
+          </div>
+          <Slider
+            value={[config.outputVolume]}
+            onValueChange={(value) =>
+              handleChange({ outputVolume: value as any })
+            }
+            max={100}
+            step={1}
+          />
+        </div>
+      </div>
     </div>
   );
 }
diff --git a/src/components/ui/select.tsx b/src/components/ui/select.tsx
new file mode 100644
index 0000000..56a7734
--- /dev/null
+++ b/src/components/ui/select.tsx
@@ -0,0 +1,199 @@
+import * as React from "react"
+import { Select as SelectPrimitive } from "@base-ui/react/select"
+
+import { cn } from "@/lib/utils"
+import { ChevronDownIcon, CheckIcon, ChevronUpIcon } from "lucide-react"
+
+const Select = SelectPrimitive.Root
+
+function SelectGroup({ className, ...props }: SelectPrimitive.Group.Props) {
+  return (
+    <SelectPrimitive.Group
+      data-slot="select-group"
+      className={cn("scroll-my-1 p-1", className)}
+      {...props}
+    />
+  )
+}
+
+function SelectValue({ className, ...props }: SelectPrimitive.Value.Props) {
+  return (
+    <SelectPrimitive.Value
+      data-slot="select-value"
+      className={cn("flex flex-1 text-left", className)}
+      {...props}
+    />
+  )
+}
+
+function SelectTrigger({
+  className,
+  size = "default",
+  children,
+  ...props
+}: SelectPrimitive.Trigger.Props & {
+  size?: "sm" | "default"
+}) {
+  return (
+    <SelectPrimitive.Trigger
+      data-slot="select-trigger"
+      data-size={size}
+      className={cn(
+        "flex w-fit items-center justify-between gap-1.5 rounded-lg border border-input bg-transparent py-2 pr-2 pl-2.5 text-sm whitespace-nowrap transition-colors outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-placeholder:text-muted-foreground data-[size=default]:h-8 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <SelectPrimitive.Icon
+        render={
+          <ChevronDownIcon className="pointer-events-none size-4 text-muted-foreground" />
+        }
+      />
+    </SelectPrimitive.Trigger>
+  )
+}
+
+function SelectContent({
+  className,
+  children,
+  side = "bottom",
+  sideOffset = 4,
+  align = "center",
+  alignOffset = 0,
+  alignItemWithTrigger = true,
+  ...props
+}: SelectPrimitive.Popup.Props &
+  Pick<
+    SelectPrimitive.Positioner.Props,
+    "align" | "alignOffset" | "side" | "sideOffset" | "alignItemWithTrigger"
+  >) {
+  return (
+    <SelectPrimitive.Portal>
+      <SelectPrimitive.Positioner
+        side={side}
+        sideOffset={sideOffset}
+        align={align}
+        alignOffset={alignOffset}
+        alignItemWithTrigger={alignItemWithTrigger}
+        className="isolate z-50"
+      >
+        <SelectPrimitive.Popup
+          data-slot="select-content"
+          data-align-trigger={alignItemWithTrigger}
+          className={cn("relative isolate z-50 max-h-(--available-height) w-(--anchor-width) min-w-36 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[align-trigger=true]:animate-none data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className )}
+          {...props}
+        >
+          <SelectScrollUpButton />
+          <SelectPrimitive.List>{children}</SelectPrimitive.List>
+          <SelectScrollDownButton />
+        </SelectPrimitive.Popup>
+      </SelectPrimitive.Positioner>
+    </SelectPrimitive.Portal>
+  )
+}
+
+function SelectLabel({
+  className,
+  ...props
+}: SelectPrimitive.GroupLabel.Props) {
+  return (
+    <SelectPrimitive.GroupLabel
+      data-slot="select-label"
+      className={cn("px-1.5 py-1 text-xs text-muted-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+function SelectItem({
+  className,
+  children,
+  ...props
+}: SelectPrimitive.Item.Props) {
+  return (
+    <SelectPrimitive.Item
+      data-slot="select-item"
+      className={cn(
+        "relative flex w-full cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
+        className
+      )}
+      {...props}
+    >
+      <SelectPrimitive.ItemText className="flex flex-1 shrink-0 gap-2 whitespace-nowrap">
+        {children}
+      </SelectPrimitive.ItemText>
+      <SelectPrimitive.ItemIndicator
+        render={
+          <span className="pointer-events-none absolute right-2 flex size-4 items-center justify-center" />
+        }
+      >
+        <CheckIcon className="pointer-events-none" />
+      </SelectPrimitive.ItemIndicator>
+    </SelectPrimitive.Item>
+  )
+}
+
+function SelectSeparator({
+  className,
+  ...props
+}: SelectPrimitive.Separator.Props) {
+  return (
+    <SelectPrimitive.Separator
+      data-slot="select-separator"
+      className={cn("pointer-events-none -mx-1 my-1 h-px bg-border", className)}
+      {...props}
+    />
+  )
+}
+
+function SelectScrollUpButton({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.ScrollUpArrow>) {
+  return (
+    <SelectPrimitive.ScrollUpArrow
+      data-slot="select-scroll-up-button"
+      className={cn(
+        "top-0 z-10 flex w-full cursor-default items-center justify-center bg-popover py-1 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      <ChevronUpIcon
+      />
+    </SelectPrimitive.ScrollUpArrow>
+  )
+}
+
+function SelectScrollDownButton({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.ScrollDownArrow>) {
+  return (
+    <SelectPrimitive.ScrollDownArrow
+      data-slot="select-scroll-down-button"
+      className={cn(
+        "bottom-0 z-10 flex w-full cursor-default items-center justify-center bg-popover py-1 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      <ChevronDownIcon
+      />
+    </SelectPrimitive.ScrollDownArrow>
+  )
+}
+
+export {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectScrollDownButton,
+  SelectScrollUpButton,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue,
+}
diff --git a/src/components/ui/slider.tsx b/src/components/ui/slider.tsx
new file mode 100644
index 0000000..691fff3
--- /dev/null
+++ b/src/components/ui/slider.tsx
@@ -0,0 +1,52 @@
+import { Slider as SliderPrimitive } from "@base-ui/react/slider"
+
+import { cn } from "@/lib/utils"
+
+function Slider({
+  className,
+  defaultValue,
+  value,
+  min = 0,
+  max = 100,
+  ...props
+}: SliderPrimitive.Root.Props) {
+  const _values = Array.isArray(value)
+    ? value
+    : Array.isArray(defaultValue)
+      ? defaultValue
+      : [min, max]
+
+  return (
+    <SliderPrimitive.Root
+      className={cn("data-horizontal:w-full data-vertical:h-full", className)}
+      data-slot="slider"
+      defaultValue={defaultValue}
+      value={value}
+      min={min}
+      max={max}
+      thumbAlignment="edge"
+      {...props}
+    >
+      <SliderPrimitive.Control className="relative flex w-full touch-none items-center select-none data-disabled:opacity-50 data-vertical:h-full data-vertical:min-h-40 data-vertical:w-auto data-vertical:flex-col">
+        <SliderPrimitive.Track
+          data-slot="slider-track"
+          className="relative grow overflow-hidden rounded-full bg-muted select-none data-horizontal:h-1 data-horizontal:w-full data-vertical:h-full data-vertical:w-1"
+        >
+          <SliderPrimitive.Indicator
+            data-slot="slider-range"
+            className="bg-primary select-none data-horizontal:h-full data-vertical:w-full"
+          />
+        </SliderPrimitive.Track>
+        {Array.from({ length: _values.length }, (_, index) => (
+          <SliderPrimitive.Thumb
+            data-slot="slider-thumb"
+            key={index}
+            className="relative block size-3 shrink-0 rounded-full border border-ring bg-white ring-ring/50 transition-[color,box-shadow] select-none after:absolute after:-inset-2 hover:ring-3 focus-visible:ring-3 focus-visible:outline-hidden active:ring-3 disabled:pointer-events-none disabled:opacity-50"
+          />
+        ))}
+      </SliderPrimitive.Control>
+    </SliderPrimitive.Root>
+  )
+}
+
+export { Slider }
diff --git a/src/lib/config.ts b/src/lib/config.ts
index a7194e8..270e766 100644
--- a/src/lib/config.ts
+++ b/src/lib/config.ts
@@ -1,7 +1,10 @@
 import { invoke } from "@tauri-apps/api/core";
 
 export type Config = {
-  audioDeviceName: string | null;
+  outputDeviceName: string | null;
+  inputDeviceName: string | null;
+  inputVolume: number;
+  outputVolume: number;
 };
 
 export async function updateConfig(config: Config): Promise<void> {