feat: Improve model group management UI in EditModelsPopup

- Add dynamic group management button that changes based on group's current state
- Simplify group add/remove logic with a single button
- Enhance visual feedback for group-level model management

src/renderer/src/pages/settings/ProviderSettings/EditModelsPopup.tsx

@@ -169,25 +169,29 @@ const PopupContainer: React.FC<Props> = ({ provider: _provider, resolve }) => {
         />
       </SearchContainer>
       <ListContainer>
-        {Object.keys(modelGroups).map((group) => (
+        {Object.keys(modelGroups).map((group) => {
+          const isAllInProvider = modelGroups[group].every((model) => isModelInProvider(provider, model.id))
+          return (
             <div key={group}>
               <ListHeader key={group}>
                 {group}
                 <div>
                   <Button
                     type="text"
-                  icon={<PlusOutlined />}
+                    icon={isAllInProvider ? <MinusOutlined /> : <PlusOutlined />}
-                  title={t(`settings.models.manage.add_whole_group`)}
+                    title={
+                      isAllInProvider
+                        ? t(`settings.models.manage.remove_whole_group`)
+                        : t(`settings.models.manage.add_whole_group`)
+                    }
                     onClick={() => {
+                      if (isAllInProvider) {
+                        modelGroups[group]
+                          .filter((model) => isModelInProvider(provider, model.id))
+                          .forEach(onRemoveModel)
+                      } else {
                         modelGroups[group].filter((model) => !isModelInProvider(provider, model.id)).forEach(onAddModel)
-                  }}
+                      }
-                />
-                <Button
-                  type="text"
-                  icon={<MinusOutlined />}
-                  title={t(`settings.models.manage.remove_whole_group`)}
-                  onClick={() => {
-                    modelGroups[group].filter((model) => isModelInProvider(provider, model.id)).forEach(onRemoveModel)
                     }}
                   />
                 </div>
@@ -224,7 +228,8 @@ const PopupContainer: React.FC<Props> = ({ provider: _provider, resolve }) => {
                 )
               })}
             </div>
-        ))}
+          )
+        })}
         {isEmpty(list) && <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description={t('settings.models.empty')} />}
       </ListContainer>
     </Modal>

src/renderer/src/pages/settings/ProviderSettings/ProviderSetting.tsx

@@ -317,7 +317,7 @@ const ProviderSetting: FC<Props> = ({ provider: _provider }) => {
           title={group}
           extra={
             <Tooltip title={t('settings.models.manage.remove_whole_group')}>
-              <RemoveIcon
+              <HoveredRemoveIcon
                 onClick={() =>
                   modelGroups[group]
                     .filter((model) => provider.models.some((m) => m.id === model.id))
@@ -409,6 +409,14 @@ const RemoveIcon = styled(MinusCircleOutlined)`
   transition: all 0.2s ease-in-out;
 `
 
+const HoveredRemoveIcon = styled(RemoveIcon)`
+  opacity: 0;
+  margin-top: 2px;
+  &:hover {
+    opacity: 1;
+  }
+`
+
 const SettingIcon = styled(SettingOutlined)`
   margin-left: 2px;
   color: var(--color-text);