refactor(translate): migrate scroll sync setting to preferences

Remove local state management for scroll sync and use preference system instead
Clean up unused imports and props in translate components

packages/shared/data/preference/preferenceSchemas.ts

@@ -400,6 +400,7 @@ export interface PreferenceSchemas {
     // indexedDB/translate
     'translate.settings.auto_detection_method': PreferenceTypes.AutoDetectionMethod
     'translate.settings.enable_markdown': boolean
+    'translate.settings.scroll_sync': boolean
     // redux/settings/customCss
     'ui.custom_css': string
     // redux/settings/navbarPosition
@@ -662,6 +663,7 @@ export const DefaultPreferences: PreferenceSchemas = {
     'translate.settings.auto_copy': false,
     'translate.settings.auto_detection_method': 'franc',
     'translate.settings.enable_markdown': false,
+    'translate.settings.scroll_sync': false,
     'ui.custom_css': '',
     'ui.navbar.position': 'top',
     'ui.sidebar.icons.invisible': [],

src/renderer/src/pages/translate/TranslateHistory.tsx

@@ -30,7 +30,7 @@ const ITEM_HEIGHT = 160
 
 const TranslateHistoryList: FC<TranslateHistoryProps> = ({ isOpen, onHistoryItemClick, onClose }) => {
   const { t } = useTranslation()
-  const { getLanguageByLangcode, getLanguageLabel } = useTranslate()
+  const { getLanguageLabel } = useTranslate()
   const _translateHistory = useLiveQuery(() => db.translate_history.orderBy('createdAt').reverse().toArray(), [])
   const [search, setSearch] = useState('')
   const [displayedHistory, setDisplayedHistory] = useState<TranslateHistory[]>([])

src/renderer/src/pages/translate/TranslatePage.tsx

@@ -66,7 +66,8 @@ const TranslatePage: FC = () => {
 
   // Preferences
   const [autoCopy] = usePreference('translate.settings.auto_copy')
-  const [enableMarkdown, setEnableMarkdown] = usePreference('translate.settings.enable_markdown')
+  const [enableMarkdown] = usePreference('translate.settings.enable_markdown')
+  const [isScrollSyncEnabled] = usePreference('translate.settings.scroll_sync')
 
   // Cache
   const [text, setText] = useCache('translate.input')
@@ -81,7 +82,6 @@ const TranslatePage: FC = () => {
   const [renderedMarkdown, setRenderedMarkdown] = useState<string>('')
   const [copied, setCopied] = useTemporaryValue(false, 2000)
   const [historyDrawerVisible, setHistoryDrawerVisible] = useState(false)
-  const [isScrollSyncEnabled, setIsScrollSyncEnabled] = useState(false)
   const [settingsVisible, setSettingsVisible] = useState(false)
   const [detectedLanguage, setDetectedLanguage] = useState<TranslateLanguage | null>(null)
   const [sourceLanguage, setSourceLanguage] = useState<TranslateLanguage | 'auto'>(_sourceLanguage)
@@ -328,9 +328,6 @@ const TranslatePage: FC = () => {
       const sourceLang = await db.settings.get({ id: 'translate:source:language' })
       sourceLang &&
         setSourceLanguage(sourceLang.value === 'auto' ? sourceLang.value : getLanguageByLangcode(sourceLang.value))
-
-      const scrollSyncSetting = await db.settings.get({ id: 'translate:scroll:sync' })
-      setIsScrollSyncEnabled(scrollSyncSetting ? scrollSyncSetting.value : false)
     })
   }, [getLanguageByLangcode])
 
@@ -734,8 +731,6 @@ const TranslatePage: FC = () => {
       <TranslateSettings
         visible={settingsVisible}
         onClose={() => setSettingsVisible(false)}
-        isScrollSyncEnabled={isScrollSyncEnabled}
-        setIsScrollSyncEnabled={setIsScrollSyncEnabled}
         translateModel={translateModel}
       />
     </Container>

src/renderer/src/pages/translate/TranslateSettings.tsx

@@ -2,7 +2,6 @@ import { Button, ColFlex, Flex, HelpTooltip, RowFlex, Switch, Tooltip } from '@c
 import { useCache } from '@data/hooks/useCache'
 import { usePreference } from '@data/hooks/usePreference'
 import LanguageSelect from '@renderer/components/LanguageSelect'
-import db from '@renderer/databases'
 import type { Model } from '@renderer/types'
 import { Modal, Radio, Space } from 'antd'
 import type { FC } from 'react'
@@ -11,18 +10,16 @@ import { useTranslation } from 'react-i18next'
 
 import TranslateSettingsPopup from '../settings/TranslateSettingsPopup/TranslateSettingsPopup'
 
-// TODO: Just don't send so many props. Migrate them to redux.
 const TranslateSettings: FC<{
   visible: boolean
   onClose: () => void
-  isScrollSyncEnabled: boolean
-  setIsScrollSyncEnabled: (value: boolean) => void
   translateModel: Model | undefined
-}> = ({ visible, onClose, isScrollSyncEnabled, setIsScrollSyncEnabled }) => {
+}> = ({ visible, onClose }) => {
   const { t } = useTranslation()
   const [autoCopy, setAutoCopy] = usePreference('translate.settings.auto_copy')
   const [autoDetectionMethod, setAutoDetectionMethod] = usePreference('translate.settings.auto_detection_method')
   const [enableMarkdown, setEnableMarkdown] = usePreference('translate.settings.enable_markdown')
+  const [isScrollSyncEnabled, setIsScrollSyncEnabled] = usePreference('translate.settings.scroll_sync')
   const [bidirectional, setBidirectional] = useCache('translate.bidirectional')
   const { enabled: isBidirectional } = bidirectional
   const onMoreSetting = () => {
@@ -73,7 +70,6 @@ const TranslateSettings: FC<{
               color="primary"
               onValueChange={(isSelected) => {
                 setIsScrollSyncEnabled(isSelected)
-                db.settings.put({ id: 'translate:scroll:sync', value: isSelected })
               }}
             />
           </Flex>