feat: add guess code lang option

Signed-off-by: Innei <[email protected]>

src/renderer/src/atoms/settings/helper.ts

@@ -1,7 +1,10 @@
 import { useRefValue } from "@renderer/hooks/common"
 import { createAtomHooks } from "@renderer/lib/jotai"
 import { getStorageNS } from "@renderer/lib/ns"
-import { createSettingBuilder } from "@renderer/modules/settings/setting-builder"
+import type { SettingItem } from "@renderer/modules/settings/setting-builder"
+import {
+  createSettingBuilder,
+} from "@renderer/modules/settings/setting-builder"
 import { useAtomValue } from "jotai"
 import { atomWithStorage, selectAtom } from "jotai/utils"
 import { useMemo } from "react"
@@ -87,9 +90,10 @@ export const createDefineSettingItem =
         label: string
         description?: string
         onChange?: (value: T[K]) => void
+        hide?: boolean
       },
-    ) => {
-    const { label, description, onChange } = options
+    ): any => {
+    const { label, description, onChange, hide } = options
     return {
       key,
       label,
@@ -98,7 +102,8 @@ export const createDefineSettingItem =
         if (onChange) return onChange(value as any)
         setSetting(key, value as any)
       },
-    } as any
+      disabled: hide,
+    } as SettingItem<any>
   }
 
 export const createSetting = <T extends object>(

src/renderer/src/atoms/settings/ui.ts

@@ -26,6 +26,7 @@ const createDefaultSettings = (): UISettings => ({
   // Content
   readerRenderInlineStyle: false,
   codeHighlightTheme: "github-dark",
+  guessCodeLanguage: true,
 
   // View
   pictureViewMasonry: true,

src/renderer/src/components/ui/code-highlighter/shiki/Shiki.tsx

@@ -1,4 +1,8 @@
-import { useUISettingSelector } from "@renderer/atoms/settings/ui"
+import {
+  useUISettingKey,
+  useUISettingSelector,
+} from "@renderer/atoms/settings/ui"
+import { isElectronBuild } from "@renderer/constants"
 import { tipcClient } from "@renderer/lib/client"
 import { cn } from "@renderer/lib/utils"
 import type { FC } from "react"
@@ -53,8 +57,10 @@ export const ShikiHighLighter: FC<ShikiProps> = (props) => {
     language || "plaintext",
   )
 
+  const guessCodeLanguage = useUISettingKey("guessCodeLanguage")
   useInsertionEffect(() => {
-    if (language || !ELECTRON) return
+    if (!guessCodeLanguage) return
+    if (language || !isElectronBuild) return
 
     if (!bundledLanguagesKeysSet) {
       import("shiki/langs")
@@ -79,7 +85,7 @@ export const ShikiHighLighter: FC<ShikiProps> = (props) => {
           }
         })
     }
-  }, [])
+  }, [guessCodeLanguage])
 
   const loadThemesRef = useRef([] as string[])
   const loadLanguagesRef = useRef([] as string[])

src/renderer/src/lib/parse-html.ts

@@ -189,5 +189,5 @@ function extractCodeFromHtml(htmlString: string) {
     return code
   }
 
-  return code
+  return tempDiv.textContent
 }

src/renderer/src/modules/settings/modal/content.tsx

@@ -4,7 +4,7 @@ import { useCurrentModal } from "@renderer/components/ui/modal"
 import { ScrollArea } from "@renderer/components/ui/scroll-area"
 import { SettingsTitle } from "@renderer/modules/settings/title"
 import type { FC } from "react"
-import { Suspense, useDeferredValue } from "react"
+import { Suspense, useDeferredValue, useLayoutEffect, useState } from "react"
 
 import { settings } from "../constants"
 import { SettingTabProvider, useSettingTab } from "./context"
@@ -53,6 +53,14 @@ const Content = () => {
   const key = useDeferredValue(useSettingTab() || "general")
   const { Component, loader } = pages[key]
 
+  const [scroller, setScroller] = useState<HTMLDivElement | null>(null)
+
+  useLayoutEffect(() => {
+    if (scroller) {
+      scroller.scrollTop = 0
+    }
+  }, [key])
+
   if (!Component) return null
 
   return (
@@ -61,6 +69,7 @@ const Content = () => {
       <Close />
       <ScrollArea.ScrollArea
         mask={false}
+        ref={setScroller}
         rootClassName="h-full grow flex-1 shrink-0 overflow-auto pl-8 pr-7"
         viewportClassName="pr-1 min-h-full [&>div]:min-h-full [&>div]:relative pb-8"
       >

src/renderer/src/modules/settings/tabs/apperance.tsx

@@ -1,3 +1,4 @@
+import { createDefineSettingItem } from "@renderer/atoms/settings/helper"
 import {
   setUISetting,
   useUISettingKey,
@@ -11,6 +12,7 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@renderer/components/ui/select"
+import { isElectronBuild } from "@renderer/constants"
 import { useDark, useSetDarkInWebApp } from "@renderer/hooks/common"
 import { tipcClient } from "@renderer/lib/client"
 import { getOS } from "@renderer/lib/utils"
@@ -22,6 +24,7 @@ import { createSettingBuilder } from "../setting-builder"
 import { SettingsTitle } from "../title"
 
 const SettingBuilder = createSettingBuilder(useUISettingValue)
+const defineItem = createDefineSettingItem(useUISettingValue, setUISetting)
 
 export const SettingAppearance = () => {
   const isDark = useDark()
@@ -50,31 +53,26 @@ export const SettingAppearance = () => {
                 }
               }}
             />,
-            {
+
+            defineItem("opaqueSidebar", {
               label: "Opaque sidebars",
-              key: "opaqueSidebar",
-              disabled:
-                !window.electron || !["macOS", "Linux"].includes(getOS()),
-              onChange: (value) => setUISetting("opaqueSidebar", value),
-            },
+              hide: !window.electron || !["macOS", "Linux"].includes(getOS()),
+            }),
 
             {
               type: "title",
               value: "Unread count",
             },
-            {
-              disabled:
-                !window.electron || !["macOS", "Linux"].includes(getOS()),
+
+            defineItem("showDockBadge", {
               label: "Show as Dock badge",
-              key: "showDockBadge",
-              onChange: (value) => setUISetting("showDockBadge", value),
-            },
-            {
+              hide: !window.electron || !["macOS", "Linux"].includes(getOS()),
+            }),
+
+            defineItem("sidebarShowUnreadCount", {
               label: "Show in sidebar",
-              key: "sidebarShowUnreadCount",
-              onChange: (value) =>
-                setUISetting("sidebarShowUnreadCount", value),
-            },
+            }),
+
             {
               type: "title",
               value: "Fonts",
@@ -87,27 +85,33 @@ export const SettingAppearance = () => {
               value: "Content",
             },
             ShikiTheme,
-            {
+
+            defineItem("guessCodeLanguage", {
+              label: "Guess code language",
+              hide: !isElectronBuild,
+              description:
+                "Major programming languages that use models to infer unlabeled code blocks",
+            }),
+
+            defineItem("readerRenderInlineStyle", {
               label: "Render inline style",
-              key: "readerRenderInlineStyle",
-              onChange: (value) =>
-                setUISetting("readerRenderInlineStyle", value),
-            },
+              description:
+                "Allows rendering of the inline style of the original HTML.",
+            }),
             {
               type: "title",
               value: "Misc",
             },
-            {
+
+            defineItem("modalOverlay", {
               label: "Show modal overlay",
-              key: "modalOverlay",
-              onChange: (value) => setUISetting("modalOverlay", value),
-            },
-            {
+              description: "Show modal overlay",
+            }),
+            defineItem("reduceMotion", {
               label: "Reduce motion",
-              key: "reduceMotion",
-              onChange: (value) => setUISetting("reduceMotion", value),
-              description: `Reducing the motion of elements to improve performance and reduce energy consumption.`,
-            },
+              description:
+                "Reducing the motion of elements to improve performance and reduce energy consumption",
+            }),
           ]}
         />
       </div>

src/shared/src/interface/settings.ts

@@ -24,6 +24,7 @@ export interface UISettings {
   readerFontFamily: string
   readerRenderInlineStyle: boolean
   codeHighlightTheme: string
+  guessCodeLanguage: boolean
 
   // view
   pictureViewMasonry: boolean