From 9127bd22d96fbcbecd32a53ff2c1440a06fac829 Mon Sep 17 00:00:00 2001 From: Adam Shiervani Date: Mon, 3 Nov 2025 13:55:57 +0100 Subject: [PATCH] feat: enhance audio settings UI and localization Added new audio-related UI components and improved localization for multiple languages. The SettingsItem component now supports badge links and variants, enhancing the user experience. Updated the AudioPopover to include quick audio controls for speakers and microphone, with descriptions and HTTPS-only warnings where applicable. --- ui/localization/messages/da.json | 6 +++ ui/localization/messages/de.json | 6 +++ ui/localization/messages/en.json | 6 +++ ui/localization/messages/es.json | 6 +++ ui/localization/messages/fr.json | 6 +++ ui/localization/messages/it.json | 6 +++ ui/localization/messages/nb.json | 6 +++ ui/localization/messages/sv.json | 6 +++ ui/localization/messages/zh.json | 6 +++ ui/src/components/SettingsItem.tsx | 38 ++++++++++++--- ui/src/components/popovers/AudioPopover.tsx | 51 ++++++++++----------- 11 files changed, 110 insertions(+), 33 deletions(-) diff --git a/ui/localization/messages/da.json b/ui/localization/messages/da.json index 57d58ad0..00945dca 100644 --- a/ui/localization/messages/da.json +++ b/ui/localization/messages/da.json @@ -64,6 +64,12 @@ "audio_output_failed_enable": "Kunne ikke aktivere lydudgang: {error}", "audio_output_title": "Lydudgang", "audio_popover_title": "Lyd", + "audio_popover_description": "Hurtige lydkontroller til højttalere og mikrofon", + "audio_speakers_title": "Højttalere", + "audio_speakers_description": "Lyd fra mål til højttalere", + "audio_microphone_title": "Mikrofon", + "audio_microphone_description": "Mikrofonindgang til mål", + "audio_https_only": "Kun HTTPS", "audio_settings_description": "Konfigurer lydindgangs- og lydudgangsindstillinger for din JetKVM-enhed", "audio_settings_hdmi_label": "HDMI", "audio_settings_input_description": "Aktiver eller deaktiver mikrofon lyd til fjerncomputeren", diff --git a/ui/localization/messages/de.json b/ui/localization/messages/de.json index 888cb3e5..293c5632 100644 --- a/ui/localization/messages/de.json +++ b/ui/localization/messages/de.json @@ -64,6 +64,12 @@ "audio_output_failed_enable": "Fehler beim Aktivieren des Audioausgangs: {error}", "audio_output_title": "Audioausgang", "audio_popover_title": "Audio", + "audio_popover_description": "Schnelle Audiosteuerung für Lautsprecher und Mikrofon", + "audio_speakers_title": "Lautsprecher", + "audio_speakers_description": "Audio vom Ziel zu Lautsprechern", + "audio_microphone_title": "Mikrofon", + "audio_microphone_description": "Mikrofoneingang zum Ziel", + "audio_https_only": "Nur HTTPS", "audio_settings_description": "Konfigurieren Sie Audio-Eingangs- und Ausgangseinstellungen für Ihr JetKVM-Gerät", "audio_settings_hdmi_label": "HDMI", "audio_settings_input_description": "Mikrofonaudio zum entfernten Computer aktivieren oder deaktivieren", diff --git a/ui/localization/messages/en.json b/ui/localization/messages/en.json index efd7887f..e3f2e966 100644 --- a/ui/localization/messages/en.json +++ b/ui/localization/messages/en.json @@ -64,6 +64,12 @@ "audio_output_failed_enable": "Failed to enable audio output: {error}", "audio_output_title": "Audio Output", "audio_popover_title": "Audio", + "audio_popover_description": "Quick audio controls for speakers and microphone", + "audio_speakers_title": "Speakers", + "audio_speakers_description": "Audio from target to speakers", + "audio_microphone_title": "Microphone", + "audio_microphone_description": "Microphone input to target", + "audio_https_only": "HTTPS only", "audio_settings_description": "Configure audio input and output settings for your JetKVM device", "audio_settings_hdmi_label": "HDMI", "audio_settings_input_description": "Enable or disable microphone audio to the remote computer", diff --git a/ui/localization/messages/es.json b/ui/localization/messages/es.json index 7b40016e..ffaf68b4 100644 --- a/ui/localization/messages/es.json +++ b/ui/localization/messages/es.json @@ -64,6 +64,12 @@ "audio_output_failed_enable": "Error al activar la salida de audio: {error}", "audio_output_title": "Salida de audio", "audio_popover_title": "Audio", + "audio_popover_description": "Controles de audio rápidos para altavoces y micrófono", + "audio_speakers_title": "Altavoces", + "audio_speakers_description": "Audio del objetivo a los altavoces", + "audio_microphone_title": "Micrófono", + "audio_microphone_description": "Entrada de micrófono al objetivo", + "audio_https_only": "Solo HTTPS", "audio_settings_description": "Configure los ajustes de entrada y salida de audio para su dispositivo JetKVM", "audio_settings_hdmi_label": "HDMI", "audio_settings_input_description": "Habilitar o deshabilitar el audio del micrófono a la computadora remota", diff --git a/ui/localization/messages/fr.json b/ui/localization/messages/fr.json index 2b089cf3..7e93ba70 100644 --- a/ui/localization/messages/fr.json +++ b/ui/localization/messages/fr.json @@ -64,6 +64,12 @@ "audio_output_failed_enable": "Échec de l'activation de la sortie audio : {error}", "audio_output_title": "Sortie audio", "audio_popover_title": "Audio", + "audio_popover_description": "Contrôles audio rapides pour haut-parleurs et microphone", + "audio_speakers_title": "Haut-parleurs", + "audio_speakers_description": "Audio de la cible vers les haut-parleurs", + "audio_microphone_title": "Microphone", + "audio_microphone_description": "Entrée microphone vers la cible", + "audio_https_only": "HTTPS uniquement", "audio_settings_description": "Configurez les paramètres d'entrée et de sortie audio pour votre appareil JetKVM", "audio_settings_hdmi_label": "HDMI", "audio_settings_input_description": "Activer ou désactiver l'audio du microphone vers l'ordinateur distant", diff --git a/ui/localization/messages/it.json b/ui/localization/messages/it.json index 2b5dc545..752a0183 100644 --- a/ui/localization/messages/it.json +++ b/ui/localization/messages/it.json @@ -64,6 +64,12 @@ "audio_output_failed_enable": "Impossibile abilitare l'uscita audio: {error}", "audio_output_title": "Uscita audio", "audio_popover_title": "Audio", + "audio_popover_description": "Controlli audio rapidi per altoparlanti e microfono", + "audio_speakers_title": "Altoparlanti", + "audio_speakers_description": "Audio dal target agli altoparlanti", + "audio_microphone_title": "Microfono", + "audio_microphone_description": "Ingresso microfono al target", + "audio_https_only": "Solo HTTPS", "audio_settings_description": "Configura le impostazioni di ingresso e uscita audio per il tuo dispositivo JetKVM", "audio_settings_hdmi_label": "HDMI", "audio_settings_input_description": "Abilita o disabilita l'audio del microfono al computer remoto", diff --git a/ui/localization/messages/nb.json b/ui/localization/messages/nb.json index 2511dea1..4d2a83cc 100644 --- a/ui/localization/messages/nb.json +++ b/ui/localization/messages/nb.json @@ -64,6 +64,12 @@ "audio_output_failed_enable": "Kunne ikke aktivere lydutgang: {error}", "audio_output_title": "Lydutgang", "audio_popover_title": "Lyd", + "audio_popover_description": "Raske lydkontroller for høyttalere og mikrofon", + "audio_speakers_title": "Høyttalere", + "audio_speakers_description": "Lyd fra mål til høyttalere", + "audio_microphone_title": "Mikrofon", + "audio_microphone_description": "Mikrofoninngang til mål", + "audio_https_only": "Kun HTTPS", "audio_settings_description": "Konfigurer lydinngangs- og lydutgangsinnstillinger for JetKVM-enheten din", "audio_settings_hdmi_label": "HDMI", "audio_settings_input_description": "Aktiver eller deaktiver mikrofonlyd til den eksterne datamaskinen", diff --git a/ui/localization/messages/sv.json b/ui/localization/messages/sv.json index 5e4c811d..fecd999d 100644 --- a/ui/localization/messages/sv.json +++ b/ui/localization/messages/sv.json @@ -64,6 +64,12 @@ "audio_output_failed_enable": "Det gick inte att aktivera ljudutgången: {error}", "audio_output_title": "Ljudutgång", "audio_popover_title": "Ljud", + "audio_popover_description": "Snabba ljudkontroller för högtalare och mikrofon", + "audio_speakers_title": "Högtalare", + "audio_speakers_description": "Ljud från mål till högtalare", + "audio_microphone_title": "Mikrofon", + "audio_microphone_description": "Mikrofoningång till mål", + "audio_https_only": "Endast HTTPS", "audio_settings_description": "Konfigurera ljudinmatnings- och ljudutgångsinställningar för din JetKVM-enhet", "audio_settings_hdmi_label": "HDMI", "audio_settings_input_description": "Aktivera eller inaktivera mikrofonljud till fjärrdatorn", diff --git a/ui/localization/messages/zh.json b/ui/localization/messages/zh.json index d8f2eb18..0b0be1f3 100644 --- a/ui/localization/messages/zh.json +++ b/ui/localization/messages/zh.json @@ -64,6 +64,12 @@ "audio_output_failed_enable": "启用音频输出失败：{error}", "audio_output_title": "音频输出", "audio_popover_title": "音频", + "audio_popover_description": "扬声器和麦克风的快速音频控制", + "audio_speakers_title": "扬声器", + "audio_speakers_description": "从目标设备到扬声器的音频", + "audio_microphone_title": "麦克风", + "audio_microphone_description": "麦克风输入到目标设备", + "audio_https_only": "仅限 HTTPS", "audio_settings_description": "配置 JetKVM 设备的音频输入和输出设置", "audio_settings_hdmi_label": "HDMI", "audio_settings_input_description": "启用或禁用到远程计算机的麦克风音频", diff --git a/ui/src/components/SettingsItem.tsx b/ui/src/components/SettingsItem.tsx index e2cd9489..5d225be9 100644 --- a/ui/src/components/SettingsItem.tsx +++ b/ui/src/components/SettingsItem.tsx @@ -1,17 +1,45 @@ -import { cx } from "@/cva.config"; +import { Link } from "react-router"; + +import { cva, cx } from "@/cva.config"; import LoadingSpinner from "@components/LoadingSpinner"; +const badgeVariants = cva({ + base: "ml-2 rounded-full px-2 py-1 text-[10px] font-medium leading-none text-white dark:border", + variants: { + variant: { + error: "bg-red-500 dark:border-red-700 dark:bg-red-800 dark:text-red-50", + info: "bg-blue-500 dark:border-blue-600 dark:bg-blue-700 dark:text-blue-50", + }, + }, +}); + interface SettingsItemProps { readonly title: string; readonly description: string | React.ReactNode; readonly badge?: string; + readonly badgeVariant?: "error" | "info"; + readonly badgeLink?: string; readonly className?: string; readonly loading?: boolean; readonly children?: React.ReactNode; } export function SettingsItem(props: SettingsItemProps) { - const { title, description, badge, children, className, loading } = props; + const { title, description, badge, badgeVariant = "error", badgeLink, children, className, loading } = props; + + const badgeClasses = badgeVariants({ variant: badgeVariant }); + + const badgeContent = badge && ( + badgeLink ? ( + + {badge} + + ) : ( + + {badge} + + ) + ); return (