Standardize Radio Button input (#1701)

ui/desktop/src/components/settings/basic/ModeSelectionItem.tsx

@@ -1,6 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import { Gear } from '../../icons';
 import { ConfigureApproveMode } from './ConfigureApproveMode';
+import { RadioInput } from '../../ui/RadioInput';
 
 export interface GooseMode {
   key: string;
@@ -66,6 +67,17 @@ export function filterGooseModes(
   });
 }
 
+const ConfigureButton = ({ onClick }) => (
+  <button
+    onClick={(event) => {
+      event.stopPropagation();
+      onClick();
+    }}
+  >
+    <Gear className="w-5 h-5 text-textSubtle hover:text-textStandard" />
+  </button>
+);
+
 interface ModeSelectionItemProps {
   currentMode: string;
   mode: GooseMode;
@@ -88,60 +100,29 @@ export function ModeSelectionItem({
     setChecked(currentMode === mode.key);
   }, [currentMode, mode.key]);
 
+  const showConfigure =
+    !isApproveModeConfigure && (mode.key == 'approve' || mode.key == 'smart_approve');
+
   return (
     <div>
-      <div
-        className="flex items-center justify-between p-2 text-textStandard hover:bg-bgSubtle transition-colors"
+      <RadioInput
+        label={mode.label}
+        description={showDescription ? mode.description : null}
+        Accessory={() =>
+          showConfigure ? <ConfigureButton onClick={() => setIsDislogOpen(true)} /> : null
+        }
+        isChecked={checked}
         onClick={() => handleModeChange(mode.key)}
-      >
-        <div>
-          <h3 className="text-sm font-semibold text-textStandard dark:text-gray-200">
-            {mode.label}
-          </h3>
-          {showDescription && (
-            <p className="text-xs text-textSubtle dark:text-gray-400 mt-[2px]">
-              {mode.description}
-            </p>
-          )}
-        </div>
-        <div className="relative flex items-center gap-3">
-          {!isApproveModeConfigure && (mode.key == 'approve' || mode.key == 'smart_approve') && (
-            <button
-              onClick={() => {
-                setIsDislogOpen(true);
-              }}
-            >
-              <Gear className="w-5 h-5 text-textSubtle hover:text-textStandard" />
-            </button>
-          )}
-          <input
-            type="radio"
-            name="modes"
-            value={mode.key}
-            checked={checked}
-            onChange={() => handleModeChange(mode.key)}
-            className="peer sr-only"
-          />
-          <div
-            className="h-5 w-5 rounded-full border border-gray-400 dark:border-gray-500
-                  peer-checked:border-[6px] peer-checked:border-black dark:peer-checked:border-white
-                  peer-checked:bg-white dark:peer-checked:bg-black
-                  transition-all duration-200 ease-in-out"
-          ></div>
-        </div>
-      </div>
+        value={mode.key}
+      />
       <div>
-        <div>
-          {isDislogOpen ? (
-            <ConfigureApproveMode
-              onClose={() => {
-                setIsDislogOpen(false);
-              }}
-              handleModeChange={handleModeChange}
-              currentMode={currentMode}
-            />
-          ) : null}
-        </div>
+        {isDislogOpen ? (
+          <ConfigureApproveMode
+            onClose={() => setIsDislogOpen(false)}
+            handleModeChange={handleModeChange}
+            currentMode={currentMode}
+          />
+        ) : null}
       </div>
     </div>
   );

ui/desktop/src/components/settings/models/ModelRadioList.tsx

@@ -5,11 +5,7 @@ import { useHandleModelSelection } from './utils';
 import type { View } from '@/src/App';
 
 interface ModelRadioListProps {
-  renderItem: (props: {
-    model: Model;
-    isSelected: boolean;
-    onSelect: () => void;
-  }) => React.ReactNode;
+  RenderItem: React.FC<{ model: Model; isSelected: boolean; onSelect: () => void }>;
   className?: string;
 }
 
@@ -29,7 +25,7 @@ export function SeeMoreModelsButtons({ setView }: { setView: (view: View) => voi
   );
 }
 
-export function ModelRadioList({ renderItem, className = '' }: ModelRadioListProps) {
+export function ModelRadioList({ RenderItem, className = '' }: ModelRadioListProps) {
   const { recentModels } = useRecentModels();
   const { currentModel } = useModel();
   const handleModelSelection = useHandleModelSelection();
@@ -53,13 +49,14 @@ export function ModelRadioList({ renderItem, className = '' }: ModelRadioListPro
 
   return (
     <div className={className}>
-      {recentModels.map((model) =>
-        renderItem({
-          model,
-          isSelected: selectedModel === model.name,
-          onSelect: () => handleRadioChange(model),
-        })
-      )}
+      {recentModels.map((model) => (
+        <RenderItem
+          key={model.name}
+          model={model}
+          isSelected={selectedModel === model.name}
+          onSelect={() => handleRadioChange(model)}
+        />
+      ))}
     </div>
   );
 }

ui/desktop/src/components/settings/models/RecentModels.tsx

@@ -137,7 +137,7 @@ export function RecentModelsRadio({ setView }: { setView: (view: View) => void }
       <div className="px-8">
         <div className="space-y-2">
           <ModelRadioList
-            renderItem={({ model, isSelected, onSelect }) => (
+            RenderItem={({ model, isSelected, onSelect }) => (
               <label key={model.name} className="flex items-center py-2 cursor-pointer">
                 <div className="relative mr-4">
                   <input