From 43e7d12a54073c40424721eff91440ddd76ea5bf Mon Sep 17 00:00:00 2001
From: Innei <i@innei.in>
Date: Wed, 26 Jun 2024 18:05:59 +0800
Subject: [PATCH] feat: nav to special setting tab

Signed-off-by: Innei <i@innei.in>
---
 .../src/modules/settings/modal/content.tsx    |  9 ++++++--
 .../src/modules/settings/modal/hooks.ts       | 10 +++++---
 .../src/modules/settings/modal/layout.tsx     | 23 +++++++++++++++----
 3 files changed, 33 insertions(+), 9 deletions(-)

diff --git a/src/renderer/src/modules/settings/modal/content.tsx b/src/renderer/src/modules/settings/modal/content.tsx
index 5d2b22e63..91a8eabeb 100644
--- a/src/renderer/src/modules/settings/modal/content.tsx
+++ b/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"
diff --git a/src/renderer/src/modules/settings/modal/hooks.ts b/src/renderer/src/modules/settings/modal/hooks.ts
index 51c189724..b2cc2a071 100644
--- a/src/renderer/src/modules/settings/modal/hooks.ts
+++ b/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),
diff --git a/src/renderer/src/modules/settings/modal/layout.tsx b/src/renderer/src/modules/settings/modal/layout.tsx
index b336b1427..9c1d688a9 100644
--- a/src/renderer/src/modules/settings/modal/layout.tsx
+++ b/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">