Revert "Standardize Radio Button input" (#1758)

ui/desktop/src/components/BottomMenu.tsx

@@ -6,7 +6,6 @@ import { ModelRadioList } from './settings/models/ModelRadioList';
 import { Document, ChevronUp, ChevronDown } from './icons';
 import type { View } from '../App';
 import { BottomMenuModeSelection } from './BottomMenuModeSelection';
-import { RadioInput } from './ui/RadioInput';
 
 export default function BottomMenu({
   hasMessages,
@@ -97,14 +96,34 @@ export default function BottomMenu({
             <div className="">
               <ModelRadioList
                 className="divide-y divide-borderSubtle"
-                RenderItem={({ model, isSelected, onSelect }) => (
+                renderItem={({ model, isSelected, onSelect }) => (
-                  <RadioInput
+                  <label key={model.alias ?? model.name} className="block cursor-pointer">
-                    label={model.alias ?? model.name}
+                    <div
-                    description={model.subtext ?? model.provider}
+                      className="flex items-center justify-between p-2 text-textStandard hover:bg-bgSubtle transition-colors"
-                    value={model.name}
+                      onClick={onSelect}
-                    isChecked={isSelected}
+                    >
-                    onClick={onSelect}
+                      <div>
-                  />
+                        <p className="text-sm ">{model.alias ?? model.name}</p>
+                        <p className="text-xs text-textSubtle">{model.subtext ?? model.provider}</p>
+                      </div>
+                      <div className="relative">
+                        <input
+                          type="radio"
+                          name="recentModels"
+                          value={model.name}
+                          checked={isSelected}
+                          onChange={onSelect}
+                          className="peer sr-only"
+                        />
+                        <div
+                          className="h-4 w-4 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>
+                  </label>
                 )}
               />
               <div

ui/desktop/src/components/BottomMenuModeSelection.tsx

@@ -123,7 +123,7 @@ export const BottomMenuModeSelection = () => {
       {/* Dropdown Menu */}
       {isGooseModeMenuOpen && (
         <div className="absolute bottom-[24px] right-0 w-[240px] bg-bgApp rounded-lg border border-borderSubtle">
-          <div className="divide-y divide-borderSubtle">
+          <div>
             {filterGooseModes(gooseMode, all_goose_modes, previousApproveModel).map((mode) => (
               <ModeSelectionItem
                 key={mode.key}

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

@@ -1,7 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import { Gear } from '../../icons';
 import { ConfigureApproveMode } from './ConfigureApproveMode';
-import { RadioInput } from '../../ui/RadioInput';
 
 export interface GooseMode {
   key: string;
@@ -67,17 +66,6 @@ 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;
@@ -100,29 +88,60 @@ export function ModeSelectionItem({
     setChecked(currentMode === mode.key);
   }, [currentMode, mode.key]);
 
-  const showConfigure =
-    !isApproveModeConfigure && (mode.key == 'approve' || mode.key == 'smart_approve');
-
   return (
     <div>
-      <RadioInput
+      <div
-        label={mode.label}
+        className="flex items-center justify-between p-2 text-textStandard hover:bg-bgSubtle transition-colors"
-        description={showDescription ? mode.description : null}
-        Accessory={() =>
-          showConfigure ? <ConfigureButton onClick={() => setIsDislogOpen(true)} /> : null
-        }
-        isChecked={checked}
         onClick={() => handleModeChange(mode.key)}
-        value={mode.key}
+      >
-      />
+        <div>
-      <div>
+          <h3 className="text-sm font-semibold text-textStandard dark:text-gray-200">
-        {isDislogOpen ? (
+            {mode.label}
-          <ConfigureApproveMode
+          </h3>
-            onClose={() => setIsDislogOpen(false)}
+          {showDescription && (
-            handleModeChange={handleModeChange}
+            <p className="text-xs text-textSubtle dark:text-gray-400 mt-[2px]">
-            currentMode={currentMode}
+              {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"
           />
-        ) : null}
+          <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>
+      <div>
+        <div>
+          {isDislogOpen ? (
+            <ConfigureApproveMode
+              onClose={() => {
+                setIsDislogOpen(false);
+              }}
+              handleModeChange={handleModeChange}
+              currentMode={currentMode}
+            />
+          ) : null}
+        </div>
       </div>
     </div>
   );

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

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

ui/desktop/src/components/ui/RadioInput.tsx

@@ -1,49 +0,0 @@
-import React from 'react';
-
-export interface RadioInputProps {
-  label: string;
-  description: string | null;
-  Accessory?: React.FC;
-  value: string;
-  isChecked: boolean;
-  onClick: () => void;
-}
-export const RadioInput = ({
-  label,
-  description,
-  Accessory,
-  value,
-  isChecked,
-  onClick,
-}: RadioInputProps) => {
-  return (
-    <div className="block cursor-pointer" onClick={onClick}>
-      <div
-        className="flex items-center justify-between p-2 text-textStandard hover:bg-bgSubtle transition-colors"
-        onClick={onClick}
-      >
-        <div>
-          <p className="text-sm ">{label}</p>
-          <p className="text-xs text-textSubtle">{description}</p>
-        </div>
-        <div className="relative flex items-center gap-3">
-          {Accessory ? <Accessory /> : null}
-          <input
-            type="radio"
-            name="recentModels"
-            value={value}
-            checked={isChecked}
-            onChange={onClick}
-            className="peer sr-only"
-          />
-          <div
-            className="h-4 w-4 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>
-    </div>
-  );
-};