fix: setting independent window

Signed-off-by: Innei <tukon479@gmail.com>
RSSNext · Oct 17, 2024 · b6cb042 · b6cb042
1 parent 7a7b621
commit b6cb042
Show file tree

Hide file tree

Showing 3 changed files with 59 additions and 12 deletions.
diff --git a/apps/renderer/src/modules/settings/context.tsx b/apps/renderer/src/modules/settings/context.tsx
@@ -0,0 +1,3 @@
+import { createContext } from "react"
+
+export const IsInSettingIndependentWindowContext = createContext<boolean>(false)
diff --git a/apps/renderer/src/modules/settings/title.tsx b/apps/renderer/src/modules/settings/title.tsx
@@ -1,10 +1,12 @@
+import { useContext } from "react"
 import { useTranslation } from "react-i18next"
 import { useLoaderData } from "react-router-dom"
 
 import { EllipsisHorizontalTextWithTooltip } from "~/components/ui/typography"
 import { cn } from "~/lib/utils"
 
 import { settings } from "./constants"
+import { IsInSettingIndependentWindowContext } from "./context"
 import type { SettingPageConfig } from "./utils"
 
 export const SettingsSidebarTitle = ({ path, className }: { path: string; className?: string }) => {
@@ -37,6 +39,7 @@ export const SettingsTitle = ({
     headerIcon,
   } = (useLoaderData() || loader?.() || {}) as SettingPageConfig
 
+  const isInSettingIndependentWindow = useContext(IsInSettingIndependentWindowContext)
   if (!title) {
     return null
   }
@@ -45,6 +48,7 @@ export const SettingsTitle = ({
       className={cn(
         "flex items-center gap-2 pb-2 pt-6 text-xl font-bold",
         "sticky top-0 mb-4",
+        isInSettingIndependentWindow ? "z-[99] bg-background" : "",
         className,
       )}
     >

diff --git a/apps/renderer/src/pages/settings/layout.tsx b/apps/renderer/src/pages/settings/layout.tsx
@@ -1,11 +1,20 @@
-import { Link, Outlet, useLocation } from "react-router-dom"
+import { IN_ELECTRON } from "@follow/shared/constants"
+import { Outlet, useLocation } from "react-router-dom"
 
 import { Logo } from "~/components/icons/logo"
 import { WindowUnderBlur } from "~/components/ui/background"
 import { isElectronBuild } from "~/constants"
 import { preventDefault } from "~/lib/dom"
-import { useAvailableSettings } from "~/modules/settings/hooks/use-setting-ctx"
+import { cn } from "~/lib/utils"
+import { useActivationModal } from "~/modules/activation"
+import { IsInSettingIndependentWindowContext } from "~/modules/settings/context"
+import {
+  useAvailableSettings,
+  useSettingPageContext,
+} from "~/modules/settings/hooks/use-setting-ctx"
 import { SettingsSidebarTitle } from "~/modules/settings/title"
+import type { SettingPageConfig } from "~/modules/settings/utils"
+import { DisableWhy } from "~/modules/settings/utils"
 
 function Layout() {
   const location = useLocation()
@@ -18,15 +27,7 @@ function Layout() {
         <WindowUnderBlur className="flex h-full w-44 flex-col border-r px-2.5 py-3 pt-3.5">
           <div className="grow pt-8">
             {availableSettings.map((t) => (
-              <Link
-                key={t.path}
-                className={`my-1 flex cursor-menu items-center rounded-md px-2.5 py-0.5 leading-loose text-theme-foreground/70 transition-colors dark:text-theme-foreground/90 ${
-                  tab === t.path ? "bg-native-active text-theme-foreground/90" : ""
-                }`}
-                to={`/settings/${t.path}`}
-              >
-                <SettingsSidebarTitle path={t.path} />
-              </Link>
+              <SettingItemButton key={t.path} tab={tab} item={t} path={t.path} />
             ))}
           </div>
 
@@ -36,11 +37,50 @@ function Layout() {
           </div>
         </WindowUnderBlur>
         <div className="h-screen flex-1 overflow-y-auto bg-theme-background p-8 pt-0">
-          <Outlet />
+          <IsInSettingIndependentWindowContext.Provider value={true}>
+            <Outlet />
+          </IsInSettingIndependentWindowContext.Provider>
         </div>
       </div>
     </div>
   )
 }
 // NOTE: we disable directly nav to setting routes on the web app
 export const Component = isElectronBuild ? Layout : () => null
+
+const SettingItemButton = (props: { tab: string; item: SettingPageConfig; path: string }) => {
+  const { tab, item, path } = props
+  const { disableIf } = item
+
+  const ctx = useSettingPageContext()
+
+  const [disabled, why] = disableIf?.(ctx) || [false, DisableWhy.Noop]
+  const presentActivationModal = useActivationModal()
+
+  return (
+    <button
+      className={cn(
+        "my-0.5 flex w-full items-center rounded-lg px-2.5 py-0.5 leading-loose text-theme-foreground/70",
+        tab === path && "!bg-theme-item-active !text-theme-foreground/90",
+        !IN_ELECTRON && "duration-200 hover:bg-theme-item-hover",
+        disabled && "cursor-not-allowed opacity-50",
+      )}
+      type="button"
+      onClick={() => {
+        if (disabled) {
+          switch (why) {
+            case DisableWhy.NotActivation: {
+              presentActivationModal()
+              break
+            }
+            case DisableWhy.Noop: {
+              break
+            }
+          }
+        }
+      }}
+    >
+      <SettingsSidebarTitle path={path} className="text-[0.94rem] font-medium" />
+    </button>
+  )
+}
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		import { createContext } from "react"

		export const IsInSettingIndependentWindowContext = createContext<boolean>(false)