fix: changing UI/UX according to the review/feedback from daniel-lxs

webview-ui/src/components/settings/providers/Gemini.tsx

@@ -1,7 +1,9 @@
 import { useCallback, useState, useMemo } from "react"
 import { Checkbox } from "vscrui"
 import { VSCodeTextField } from "@vscode/webview-ui-toolkit/react"
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@src/components/ui/collapsible"
 import { Slider } from "@src/components/ui"
+import { ChevronRight } from "lucide-react"
 
 import type { ProviderSettings } from "@roo-code/types"
 import { geminiModels, geminiDefaultModelId, type GeminiModelId } from "@roo-code/types"
@@ -23,6 +25,7 @@ export const Gemini = ({ apiConfiguration, setApiConfigurationField, currentMode
 	const [googleGeminiBaseUrlSelected, setGoogleGeminiBaseUrlSelected] = useState(
 		!!apiConfiguration?.googleGeminiBaseUrl,
 	)
+	const [isModelParametersOpen, setIsModelParametersOpen] = useState(false)
 
 	const modelInfo = useMemo(() => {
 		const modelId = (
@@ -84,84 +87,8 @@ export const Gemini = ({ apiConfiguration, setApiConfigurationField, currentMode
 				)}
 			</div>
 
-			<div className="mt-6 border-t border-vscode-widget-border pt-4">
-				<h3 className="font-semibold text-lg mb-4">{t("settings:providers.geminiSections.modelParameters")}</h3>
-
-				<div className="mt-4">
-					<label className="block font-medium mb-1">
-						{t("settings:providers.geminiParameters.topP.title")}
-					</label>
-					<div className="flex items-center space-x-2">
-						<Slider
-							data-testid="slider-top-p"
-							min={0}
-							max={1}
-							step={0.01}
-							value={[apiConfiguration.topP ?? 0.95]}
-							onValueChange={(values: number[]) => setApiConfigurationField("topP", values[0])}
-							className="flex-grow"
-						/>
-						<span className="w-10 text-right">{(apiConfiguration.topP ?? 0.95).toFixed(2)}</span>
-					</div>
-					<div className="text-sm text-vscode-descriptionForeground">
-						{t("settings:providers.geminiParameters.topP.description")}
-					</div>
-				</div>
-
-				<div className="mt-4">
-					<label className="block font-medium mb-1">
-						{t("settings:providers.geminiParameters.topK.title")}
-					</label>
-					<div className="flex items-center space-x-2">
-						<Slider
-							data-testid="slider-top-k"
-							min={0}
-							max={100}
-							step={1}
-							value={[apiConfiguration.topK ?? 64]}
-							onValueChange={(values: number[]) => setApiConfigurationField("topK", values[0])}
-							className="flex-grow"
-						/>
-						<span className="w-10 text-right">{apiConfiguration.topK ?? 64}</span>
-					</div>
-					<div className="text-sm text-vscode-descriptionForeground">
-						{t("settings:providers.geminiParameters.topK.description")}
-					</div>
-				</div>
-
-				<div className="mt-4">
-					<label className="block font-medium mb-1">
-						{t("settings:providers.geminiParameters.maxOutputTokens.title")}
-					</label>
-					<div className="flex items-center space-x-2">
-						<Slider
-							data-testid="slider-max-output-tokens"
-							min={3000}
-							max={modelInfo.maxTokens}
-							step={1}
-							value={[apiConfiguration.maxOutputTokens ?? modelInfo.maxTokens]}
-							onValueChange={(values: number[]) => setApiConfigurationField("maxOutputTokens", values[0])}
-							className="flex-grow"
-						/>
-						<VSCodeTextField
-							value={(apiConfiguration.maxOutputTokens ?? modelInfo.maxTokens).toString()}
-							type="text"
-							inputMode="numeric"
-							onInput={handleInputChange("maxOutputTokens", (e) => {
-								const val = parseInt((e as any).target.value, 10)
-								return Number.isNaN(val) ? 0 : Math.min(val, modelInfo.maxTokens)
-							})}
-							className="w-16"
-						/>
-					</div>
-					<div className="text-sm text-vscode-descriptionForeground">
-						{t("settings:providers.geminiParameters.maxOutputTokens.description")}
-					</div>
-				</div>
-			</div>
-
-			<div className="mt-6 border-t border-vscode-widget-border pt-4">
-				<h3 className="font-semibold text-lg mb-4">{t("settings:providers.geminiSections.tools")}</h3>
+			<div>
+				<h3 className="font-semibold text-base mb-4">{t("settings:providers.geminiSections.tools")}</h3>
 
 				<Checkbox
 					data-testid="checkbox-url-context"
@@ -183,6 +110,104 @@ export const Gemini = ({ apiConfiguration, setApiConfigurationField, currentMode
 					{t("settings:providers.geminiParameters.groundingSearch.description")}
 				</div>
 			</div>
+
+			<div className="mb-2">
+				<Collapsible onOpenChange={setIsModelParametersOpen}>
+					<CollapsibleTrigger className="w-full text-left">
+						<div className="flex items-center justify-between">
+							<div className="flex flex-col">
+								<h3 className="font-semibold text-base">
+									{t("settings:providers.geminiSections.modelParameters.title")}
+								</h3>
+								<p className="text-sm text-vscode-descriptionForeground -mt-3">
+									{t("settings:providers.geminiSections.modelParameters.description")}
+								</p>
+							</div>
+							<ChevronRight
+								className={`transform transition-transform duration-200 mr-2 ${
+									isModelParametersOpen ? "rotate-90" : ""
+								}`}
+								size={20}
+							/>
+						</div>
+					</CollapsibleTrigger>
+					<CollapsibleContent>
+						<div className="mt-4">
+							<label className="block font-medium mb-1">
+								{t("settings:providers.geminiParameters.topP.title")}
+							</label>
+							<div className="flex items-center space-x-2">
+								<Slider
+									data-testid="slider-top-p"
+									min={0}
+									max={1}
+									step={0.01}
+									value={[apiConfiguration.topP ?? 0.95]}
+									onValueChange={(values: number[]) => setApiConfigurationField("topP", values[0])}
+									className="flex-grow"
+								/>
+								<span className="w-10 text-right">{(apiConfiguration.topP ?? 0.95).toFixed(2)}</span>
+							</div>
+							<div className="text-sm text-vscode-descriptionForeground">
+								{t("settings:providers.geminiParameters.topP.description")}
+							</div>
+						</div>
+
+						<div className="mt-4">
+							<label className="block font-medium mb-1">
+								{t("settings:providers.geminiParameters.topK.title")}
+							</label>
+							<div className="flex items-center space-x-2">
+								<Slider
+									data-testid="slider-top-k"
+									min={0}
+									max={100}
+									step={1}
+									value={[apiConfiguration.topK ?? 64]}
+									onValueChange={(values: number[]) => setApiConfigurationField("topK", values[0])}
+									className="flex-grow"
+								/>
+								<span className="w-10 text-right">{apiConfiguration.topK ?? 64}</span>
+							</div>
+							<div className="text-sm text-vscode-descriptionForeground">
+								{t("settings:providers.geminiParameters.topK.description")}
+							</div>
+						</div>
+
+						<div className="mt-4">
+							<label className="block font-medium mb-1">
+								{t("settings:providers.geminiParameters.maxOutputTokens.title")}
+							</label>
+							<div className="flex items-center space-x-2">
+								<Slider
+									data-testid="slider-max-output-tokens"
+									min={3000}
+									max={modelInfo.maxTokens}
+									step={1}
+									value={[apiConfiguration.maxOutputTokens ?? modelInfo.maxTokens]}
+									onValueChange={(values: number[]) =>
+										setApiConfigurationField("maxOutputTokens", values[0])
+									}
+									className="flex-grow"
+								/>
+								<VSCodeTextField
+									value={(apiConfiguration.maxOutputTokens ?? modelInfo.maxTokens).toString()}
+									type="text"
+									inputMode="numeric"
+									onInput={handleInputChange("maxOutputTokens", (e) => {
+										const val = parseInt((e as any).target.value, 10)
+										return Number.isNaN(val) ? 0 : Math.min(val, modelInfo.maxTokens)
+									})}
+									className="w-16"
+								/>
+							</div>
+							<div className="text-sm text-vscode-descriptionForeground">
+								{t("settings:providers.geminiParameters.maxOutputTokens.description")}_{" "}
+							</div>
+						</div>
+					</CollapsibleContent>
+				</Collapsible>
+			</div>
 		</>
 	)
 }

webview-ui/src/i18n/locales/ca/settings.json

@@ -303,7 +303,10 @@
 			}
 		},
 		"geminiSections": {
-			"modelParameters": "Paràmetres del model",
+			"modelParameters": {
+				"title": "Paràmetres del model",
+				"description": "Ajusta la temperatura, top-p i altres paràmetres avançats."
+			},
 			"tools": "Eines"
 		},
 		"googleCloudSetup": {

webview-ui/src/i18n/locales/de/settings.json

@@ -299,7 +299,10 @@
 			}
 		},
 		"geminiSections": {
-			"modelParameters": "Model Parameter",
+			"modelParameters": {
+				"title": "Modellparameter",
+				"description": "Feinabstimmung von Temperatur, Top-P und anderen erweiterten Einstellungen."
+			},
 			"tools": "Werkzeuge"
 		},
 		"googleCloudSetup": {

webview-ui/src/i18n/locales/en/settings.json

@@ -277,7 +277,10 @@
 		"vscodeLmModel": "Language Model",
 		"vscodeLmWarning": "Note: This is a very experimental integration and provider support will vary. If you get an error about a model not being supported, that's an issue on the provider's end.",
 		"geminiSections": {
-			"modelParameters": "Model Parameters",
+			"modelParameters": {
+				"title": "Model Parameters",
+				"description": "Fine-tune topP, topK and maxOutputTokens"
+			},
 			"tools": "Tools"
 		},
 		"geminiParameters": {

webview-ui/src/i18n/locales/es/settings.json

@@ -299,7 +299,10 @@
 			}
 		},
 		"geminiSections": {
-			"modelParameters": "Parámetros del modelo",
+			"modelParameters": {
+				"title": "Parámetros del modelo",
+				"description": "Ajusta la temperatura, top-p y otros parámetros avanzados."
+			},
 			"tools": "Herramientas"
 		},
 		"googleCloudSetup": {

webview-ui/src/i18n/locales/fr/settings.json

@@ -299,7 +299,10 @@
 			}
 		},
 		"geminiSections": {
-			"modelParameters": "Paramètres du modèle",
+			"modelParameters": {
+				"title": "Paramètres du modèle",
+				"description": "Ajustez la température, top-p et d'autres paramètres avancés."
+			},
 			"tools": "Outils"
 		},
 		"googleCloudSetup": {

webview-ui/src/i18n/locales/hi/settings.json

@@ -299,7 +299,10 @@
 			}
 		},
 		"geminiSections": {
-			"modelParameters": "मॉडल पैरामीटर",
+			"modelParameters": {
+				"title": "मॉडल पैरामीटर",
+				"description": "टेम्परेचर, टॉप-पी और अन्य उन्नत सेटिंग्स को फाइन-ट्यून करें।"
+			},
 			"tools": "उपकरण"
 		},
 		"googleCloudSetup": {

webview-ui/src/i18n/locales/id/settings.json

@@ -303,7 +303,10 @@
 			}
 		},
 		"geminiSections": {
-			"modelParameters": "Parameter Model",
+			"modelParameters": {
+				"title": "Parameter Model",
+				"description": "Menyesuaikan suhu, top-p, dan pengaturan lanjutan lainnya."
+			},
 			"tools": "Alat"
 		},
 		"googleCloudSetup": {

webview-ui/src/i18n/locales/it/settings.json

@@ -299,7 +299,10 @@
 			}
 		},
 		"geminiSections": {
-			"modelParameters": "Parametri del modello",
+			"modelParameters": {
+				"title": "Parametri del modello",
+				"description": "Regola la temperatura, top-p e altre impostazioni avanzate."
+			},
 			"tools": "Strumenti"
 		},
 		"googleCloudSetup": {

webview-ui/src/i18n/locales/ja/settings.json

@@ -299,7 +299,10 @@
 			}
 		},
 		"geminiSections": {
-			"modelParameters": "モデルパラメータ",
+			"modelParameters": {
+				"title": "モデルパラメータ",
+				"description": "温度、top-p、およびその他の詳細設定を調整します。"
+			},
 			"tools": "ツール"
 		},
 		"googleCloudSetup": {

webview-ui/src/i18n/locales/ko/settings.json

@@ -299,7 +299,10 @@
 			}
 		},
 		"geminiSections": {
-			"modelParameters": "모델 매개변수",
+			"modelParameters": {
+				"title": "모델 매개변수",
+				"description": "온도, top-p 및 기타 고급 설정을 조정합니다."
+			},
 			"tools": "도구"
 		},
 		"googleCloudSetup": {

webview-ui/src/i18n/locales/nl/settings.json

@@ -299,7 +299,10 @@
 			}
 		},
 		"geminiSections": {
-			"modelParameters": "Modelparameters",
+			"modelParameters": {
+				"title": "Modelparameters",
+				"description": "Pas de temperatuur, top-p en andere geavanceerde instellingen aan."
+			},
 			"tools": "Gereedschap"
 		},
 		"googleCloudSetup": {

webview-ui/src/i18n/locales/pl/settings.json

@@ -299,7 +299,10 @@
 			}
 		},
 		"geminiSections": {
-			"modelParameters": "Parametry modelu",
+			"modelParameters": {
+				"title": "Parametry modelu",
+				"description": "Dostosuj temperaturę, top-p i inne zaawansowane ustawienia."
+			},
 			"tools": "Narzędzia"
 		},
 		"googleCloudSetup": {

webview-ui/src/i18n/locales/pt-BR/settings.json

@@ -299,7 +299,10 @@
 			}
 		},
 		"geminiSections": {
-			"modelParameters": "Parâmetros do modelo",
+			"modelParameters": {
+				"title": "Parâmetros do modelo",
+				"description": "Ajuste a temperatura, top-p e outras configurações avançadas."
+			},
 			"tools": "Ferramentas"
 		},
 		"googleCloudSetup": {

webview-ui/src/i18n/locales/ru/settings.json

@@ -299,7 +299,10 @@
 			}
 		},
 		"geminiSections": {
-			"modelParameters": "Параметры модели",
+			"modelParameters": {
+				"title": "Параметры модели",
+				"description": "Настройте температуру, top-p и другие расширенные параметры."
+			},
 			"tools": "Инструменты"
 		},
 		"googleCloudSetup": {

webview-ui/src/i18n/locales/tr/settings.json

@@ -299,7 +299,10 @@
 			}
 		},
 		"geminiSections": {
-			"modelParameters": "Model Parametreleri",
+			"modelParameters": {
+				"title": "Model Parametreleri",
+				"description": "Sıcaklık, top-p ve diğer gelişmiş ayarları yapın."
+			},
 			"tools": "Araçlar"
 		},
 		"googleCloudSetup": {

webview-ui/src/i18n/locales/vi/settings.json

@@ -299,7 +299,10 @@
 			}
 		},
 		"geminiSections": {
-			"modelParameters": "Tham số mô hình",
+			"modelParameters": {
+				"title": "Tham số mô hình",
+				"description": "Điều chỉnh nhiệt độ, top-p và các cài đặt nâng cao khác."
+			},
 			"tools": "Công cụ"
 		},
 		"googleCloudSetup": {

webview-ui/src/i18n/locales/zh-CN/settings.json

@@ -299,7 +299,10 @@
 			}
 		},
 		"geminiSections": {
-			"modelParameters": "模型参数",
+			"modelParameters": {
+				"title": "模型参数",
+				"description": "调整温度、top-p 和其他高级设置。"
+			},
 			"tools": "工具"
 		},
 		"googleCloudSetup": {

webview-ui/src/i18n/locales/zh-TW/settings.json

@@ -299,7 +299,10 @@
 			}
 		},
 		"geminiSections": {
-			"modelParameters": "模型參數",
+			"modelParameters": {
+				"title": "模型參數",
+				"description": "調整溫度、top-p 和其他進階設定。"
+			},
 			"tools": "工具"
 		},
 		"googleCloudSetup": {