From 1467493e1d43c2b878739b3d79285efcb2f0d79d Mon Sep 17 00:00:00 2001
From: icarus <eurfelux@gmail.com>
Date: Sun, 12 Oct 2025 05:32:41 +0800
Subject: [PATCH] refactor(video-settings): improve settings layout and remove
 unused components

- Remove SettingTitle component and move label to Select component
- Update SettingsGroup styling for better spacing and borders
- Clean up unused imports in shared components
---
 .../src/pages/video/settings/ProviderSetting.tsx  |  5 +++--
 src/renderer/src/pages/video/settings/shared.tsx  | 15 +++------------
 2 files changed, 6 insertions(+), 14 deletions(-)

diff --git a/src/renderer/src/pages/video/settings/ProviderSetting.tsx b/src/renderer/src/pages/video/settings/ProviderSetting.tsx
index 5619c5b379..6983b6b6ff 100644
--- a/src/renderer/src/pages/video/settings/ProviderSetting.tsx
+++ b/src/renderer/src/pages/video/settings/ProviderSetting.tsx
@@ -6,7 +6,7 @@ import { getFancyProviderName } from '@renderer/utils'
 import { Dispatch, SetStateAction } from 'react'
 import { useTranslation } from 'react-i18next'
 
-import { SettingItem, SettingTitle } from './shared'
+import { SettingItem } from './shared'
 
 export interface ProviderSettingProps {
   providerId: string
@@ -29,8 +29,9 @@ export const ProviderSetting = ({ providerId, setProviderId }: ProviderSettingPr
 
   return (
     <SettingItem>
-      <SettingTitle name={t('common.provider')} />
       <Select
+        label={t('common.provider')}
+        labelPlacement="outside"
         selectionMode="single"
         items={items}
         defaultSelectedKeys={[providerId]}
diff --git a/src/renderer/src/pages/video/settings/shared.tsx b/src/renderer/src/pages/video/settings/shared.tsx
index 6d929e2afa..8e5b3c5597 100644
--- a/src/renderer/src/pages/video/settings/shared.tsx
+++ b/src/renderer/src/pages/video/settings/shared.tsx
@@ -1,8 +1,8 @@
-import { cn, Divider } from '@heroui/react'
-import { PropsWithChildren, ReactNode } from 'react'
+import { Divider } from '@heroui/react'
+import { PropsWithChildren } from 'react'
 
 export const SettingsGroup = ({ children }: PropsWithChildren) => {
-  return <div className="rounded-2xl bg-foreground-200">{children}</div>
+  return <div className="mb-4 flex flex-col rounded-2xl border border-foreground-200 p-3">{children}</div>
 }
 
 export const SettingItem = ({ children, divider = false }: PropsWithChildren<{ divider?: boolean }>) => {
@@ -13,12 +13,3 @@ export const SettingItem = ({ children, divider = false }: PropsWithChildren<{ d
     </>
   )
 }
-
-export const SettingTitle = ({ name, footer }: { name: string; footer?: ReactNode }) => {
-  return (
-    <div className={cn('mb-2 flex items-center', footer ? 'justify-between' : 'justify-start')}>
-      <span className="font-bold">{name}</span>
-      {footer}
-    </div>
-  )
-}