better disabled states for parakeet

src/components/settings/LanguageSelector.tsx

@@ -61,15 +61,17 @@ export const LanguageSelector: React.FC<LanguageSelectorProps> = ({
   }, [isOpen]);
 
   const filteredLanguages = useMemo(
-    () => LANGUAGES.filter((language) =>
+    () =>
+      LANGUAGES.filter((language) =>
         language.label.toLowerCase().includes(searchQuery.toLowerCase()),
       ),
-    [searchQuery]
+    [searchQuery],
   );
 
   const selectedLanguageName = isParakeetModel
     ? "Auto"
-    : LANGUAGES.find((lang) => lang.value === selectedLanguage)?.label || "Auto";
+    : LANGUAGES.find((lang) => lang.value === selectedLanguage)?.label ||
+      "Auto";
 
   const handleLanguageSelect = async (languageCode: string) => {
     await updateSetting("selected_language", languageCode);
@@ -103,12 +105,14 @@ export const LanguageSelector: React.FC<LanguageSelectorProps> = ({
   return (
     <SettingContainer
       title="Language"
-      description={isParakeetModel 
+      description={
+        isParakeetModel
           ? "Parakeet model automatically detects the language. No manual selection is needed."
           : "Select the language for speech recognition. Auto will automatically determine the language, while selecting a specific language can improve accuracy for that language."
       }
       descriptionMode={descriptionMode}
       grouped={grouped}
+      disabled={isLanguageSelectionDisabled}
     >
       <div className="flex items-center space-x-1">
         <div className="relative" ref={dropdownRef}>
@@ -120,7 +124,9 @@ export const LanguageSelector: React.FC<LanguageSelectorProps> = ({
                 : "hover:bg-logo-primary/10 cursor-pointer hover:border-logo-primary"
             }`}
             onClick={handleToggle}
-            disabled={isUpdating("selected_language") || isLanguageSelectionDisabled}
+            disabled={
+              isUpdating("selected_language") || isLanguageSelectionDisabled
+            }
           >
             <span className="truncate">{selectedLanguageName}</span>
             <svg
@@ -140,7 +146,9 @@ export const LanguageSelector: React.FC<LanguageSelectorProps> = ({
             </svg>
           </button>
 
-          {isOpen && !isUpdating("selected_language") && !isLanguageSelectionDisabled && (
+          {isOpen &&
+            !isUpdating("selected_language") &&
+            !isLanguageSelectionDisabled && (
               <div className="absolute top-full left-0 right-0 mt-1 bg-background border border-mid-gray/80 rounded shadow-lg z-50 max-h-60 overflow-hidden">
                 {/* Search input */}
                 <div className="p-2 border-b border-mid-gray/80">
@@ -184,7 +192,9 @@ export const LanguageSelector: React.FC<LanguageSelectorProps> = ({
         </div>
         <ResetButton
           onClick={handleReset}
-          disabled={isUpdating("selected_language") || isLanguageSelectionDisabled}
+          disabled={
+            isUpdating("selected_language") || isLanguageSelectionDisabled
+          }
         />
       </div>
       {isUpdating("selected_language") && (

src/components/settings/TranslateToEnglish.tsx

@@ -1,29 +1,48 @@
-import React from "react";
+import React, { useEffect } from "react";
+import { listen } from "@tauri-apps/api/event";
 import { ToggleSwitch } from "../ui/ToggleSwitch";
 import { useSettings } from "../../hooks/useSettings";
+import { useModels } from "../../hooks/useModels";
 
 interface TranslateToEnglishProps {
   descriptionMode?: "inline" | "tooltip";
   grouped?: boolean;
 }
 
-export const TranslateToEnglish: React.FC<TranslateToEnglishProps> = React.memo(({
+export const TranslateToEnglish: React.FC<TranslateToEnglishProps> = React.memo(
-  descriptionMode = "tooltip",
+  ({ descriptionMode = "tooltip", grouped = false }) => {
-  grouped = false,
-}) => {
     const { getSetting, updateSetting, isUpdating } = useSettings();
+    const { currentModel, loadCurrentModel } = useModels();
 
     const translateToEnglish = getSetting("translate_to_english") || false;
+    const isParakeetModel = currentModel === "parakeet-tdt-0.6b-v3";
+
+    // Listen for model state changes to update UI reactively
+    useEffect(() => {
+      const modelStateUnlisten = listen("model-state-changed", () => {
+        loadCurrentModel();
+      });
+
+      return () => {
+        modelStateUnlisten.then((fn) => fn());
+      };
+    }, [loadCurrentModel]);
 
     return (
       <ToggleSwitch
         checked={translateToEnglish}
         onChange={(enabled) => updateSetting("translate_to_english", enabled)}
         isUpdating={isUpdating("translate_to_english")}
+        disabled={isParakeetModel}
         label="Translate to English"
-      description="Automatically translate speech from other languages to English during transcription."
+        description={
+          isParakeetModel
+            ? "Translation is not supported by the Parakeet model."
+            : "Automatically translate speech from other languages to English during transcription."
+        }
         descriptionMode={descriptionMode}
         grouped={grouped}
       />
     );
-});
+  },
+);

src/components/ui/ToggleSwitch.tsx

@@ -28,8 +28,11 @@ export const ToggleSwitch: React.FC<ToggleSwitchProps> = ({
       description={description}
       descriptionMode={descriptionMode}
       grouped={grouped}
+      disabled={disabled}
+    >
+      <label
+        className={`inline-flex items-center ${disabled || isUpdating ? "cursor-not-allowed" : "cursor-pointer"}`}
       >
-      <label className="inline-flex items-center cursor-pointer">
         <input
           type="checkbox"
           value=""