feat: nav to special setting tab

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

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

@@ -3,6 +3,7 @@ import { MotionButtonBase } from "@renderer/components/ui/button"
 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 { SettingTabProvider, useSettingTab } from "./context"
 import { SettingModalLayout } from "./layout"
@@ -18,9 +19,13 @@ const pages = (() => {
   }
   return pages
 })()
-export const SettingModalContent = () => (
+export const SettingModalContent: FC<{
+  initialTab?: string
+}> = ({ initialTab }) => (
   <SettingTabProvider>
-    <SettingModalLayout>
+    <SettingModalLayout
+      initialTab={initialTab ? initialTab in pages ? initialTab : undefined : undefined}
+    >
       <ScrollArea.ScrollArea
         scrollbarClassName="mt-12 mb-2"
         rootClassName="h-full flex-1 shrink-0 overflow-auto pl-8 pr-7"

src/renderer/src/modules/settings/modal/hooks.ts

@@ -3,13 +3,17 @@ import { createElement, useCallback } from "react"
 
 import { SettingModalContent } from "./content"
 
-export const useSettingModal = () => {
+export const useSettingModal = (
+
+) => {
   const { present } = useModalStack()
 
-  return useCallback(() => present({
+  return useCallback((initialTab?: string) => present({
     title: "Setting",
     id: "setting",
-    content: SettingModalContent,
+    content: () => createElement(SettingModalContent, {
+      initialTab,
+    }),
     CustomModalComponent: (props) => createElement("div", {
       className: "center h-full center",
     }, props.children),

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

@@ -12,13 +12,23 @@ import { settings } from "../constants"
 import { SettingsSidebarTitle } from "../title"
 import { useSetSettingTab, useSettingTab } from "./context"
 
-export function SettingModalLayout(props: PropsWithChildren) {
-  const { children } = props
+export function SettingModalLayout(
+  props: PropsWithChildren<{
+    initialTab?: string
+  }>,
+) {
+  const { children, initialTab } = props
   const setTab = useSetSettingTab()
   const tab = useSettingTab()
 
   useEffect(() => {
-    if (!tab) setTab(settings[0].path)
+    if (!tab) {
+      if (initialTab) {
+        setTab(initialTab)
+      } else {
+        setTab(settings[0].path)
+      }
+    }
   }, [])
 
   const { draggable, overlay } = useUIStore(
@@ -57,7 +67,12 @@ export function SettingModalLayout(props: PropsWithChildren) {
         cursor: "grabbing",
       }}
     >
-      {draggable && <div className="absolute inset-x-0 top-0 z-[1] h-8" onPointerDown={handleDrag} />}
+      {draggable && (
+        <div
+          className="absolute inset-x-0 top-0 z-[1] h-8"
+          onPointerDown={handleDrag}
+        />
+      )}
       <div className="flex h-0 flex-1 bg-theme-tooltip-background">
         <div className="w-44 border-r px-2 py-6">
           <div className="mb-4 flex h-8 items-center gap-2 px-4 font-bold">