refactor(translate): add markdown toggle preference and refactor state management

Move markdown toggle state to preferences system and remove direct database operations

packages/shared/data/preference/preferenceSchemas.ts

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

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

@@ -59,11 +59,16 @@ const TranslatePage: FC = () => {
   const { t } = useTranslation()
   const { translateModel, setTranslateModel } = useDefaultModel()
   const { prompt, getLanguageByLangcode, getLanguageLabel } = useTranslate()
-  const [autoCopy] = usePreference('translate.settings.auto_copy')
   const { shikiMarkdownIt } = useCodeStyle()
   const { onSelectFile, selecting, clearFiles } = useFiles({ extensions: [...imageExts, ...textExts] })
   const { ocr } = useOcr()
   const { setTimeoutTimer } = useTimer()
+
+  // Preferences
+  const [autoCopy] = usePreference('translate.settings.auto_copy')
+  const [enableMarkdown, setEnableMarkdown] = usePreference('translate.settings.enable_markdown')
+
+  // Cache
   const [text, setText] = useCache('translate.input')
   const [output, setOutput] = useCache('translate.output')
   const [isDetecting, setIsDetecting] = useCache('translate.detecting')
@@ -77,7 +82,6 @@ const TranslatePage: FC = () => {
   const [copied, setCopied] = useTemporaryValue(false, 2000)
   const [historyDrawerVisible, setHistoryDrawerVisible] = useState(false)
   const [isScrollSyncEnabled, setIsScrollSyncEnabled] = useState(false)
-  const [enableMarkdown, setEnableMarkdown] = useState(false)
   const [settingsVisible, setSettingsVisible] = useState(false)
   const [detectedLanguage, setDetectedLanguage] = useState<TranslateLanguage | null>(null)
   const [sourceLanguage, setSourceLanguage] = useState<TranslateLanguage | 'auto'>(_sourceLanguage)
@@ -327,9 +331,6 @@ const TranslatePage: FC = () => {
 
       const scrollSyncSetting = await db.settings.get({ id: 'translate:scroll:sync' })
       setIsScrollSyncEnabled(scrollSyncSetting ? scrollSyncSetting.value : false)
-
-      const markdownSetting = await db.settings.get({ id: 'translate:markdown:enabled' })
-      setEnableMarkdown(markdownSetting ? markdownSetting.value : false)
     })
   }, [getLanguageByLangcode])
 
@@ -735,8 +736,6 @@ const TranslatePage: FC = () => {
         onClose={() => setSettingsVisible(false)}
         isScrollSyncEnabled={isScrollSyncEnabled}
         setIsScrollSyncEnabled={setIsScrollSyncEnabled}
-        enableMarkdown={enableMarkdown}
-        setEnableMarkdown={setEnableMarkdown}
         translateModel={translateModel}
       />
     </Container>

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

@@ -17,13 +17,12 @@ const TranslateSettings: FC<{
   onClose: () => void
   isScrollSyncEnabled: boolean
   setIsScrollSyncEnabled: (value: boolean) => void
-  enableMarkdown: boolean
-  setEnableMarkdown: (value: boolean) => void
   translateModel: Model | undefined
-}> = ({ visible, onClose, isScrollSyncEnabled, setIsScrollSyncEnabled, enableMarkdown, setEnableMarkdown }) => {
+}> = ({ visible, onClose, isScrollSyncEnabled, setIsScrollSyncEnabled }) => {
   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 [bidirectional, setBidirectional] = useCache('translate.bidirectional')
   const { enabled: isBidirectional } = bidirectional
   const onMoreSetting = () => {
@@ -48,7 +47,6 @@ const TranslateSettings: FC<{
               isSelected={enableMarkdown}
               onValueChange={(checked) => {
                 setEnableMarkdown(checked)
-                db.settings.put({ id: 'translate:markdown:enabled', value: checked })
               }}
             />
           </Flex>