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/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]}

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>
-  )
-}