feat: hide if

Signed-off-by: Innei <tukon479@gmail.com>

apps/renderer/src/modules/settings/hooks/use-setting-ctx.ts

@@ -0,0 +1,16 @@
+import { useUserRole } from "~/atoms/user"
+
+import { settings } from "../constants"
+import type { SettingPageContext } from "../utils"
+
+export const useSettingPageContext = (): SettingPageContext => {
+  const role = useUserRole()
+  return {
+    role,
+  }
+}
+
+export const useAvailableSettings = () => {
+  const ctx = useSettingPageContext()
+  return settings.filter((t) => !t.loader().hideIf?.(ctx))
+}

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

@@ -14,8 +14,8 @@ import { ElECTRON_CUSTOM_TITLEBAR_HEIGHT } from "~/constants"
 import { preventDefault } from "~/lib/dom"
 import { cn, getOS } from "~/lib/utils"
 
-import { settings } from "../constants"
 import { SettingSyncIndicator } from "../helper/SyncIndicator"
+import { useAvailableSettings } from "../hooks/use-setting-ctx"
 import { SettingsSidebarTitle } from "../title"
 import { useSetSettingTab, useSettingTab } from "./context"
 import { defaultCtx, SettingContext } from "./hooks"
@@ -43,15 +43,16 @@ export function SettingModalLayout(
     dragControls: dragController,
   })
 
+  const availableSettings = useAvailableSettings()
   useEffect(() => {
     if (!tab) {
       if (initialTab) {
         setTab(initialTab)
       } else {
-        setTab(settings[0].path)
+        setTab(availableSettings[0].path)
       }
     }
-  }, [])
+  }, [availableSettings])
 
   const { draggable, overlay } = useUISettingSelector((state) => ({
     draggable: state.modalDraggable,
@@ -125,7 +126,7 @@ export function SettingModalLayout(
                   {APP_NAME}
                 </div>
                 <nav className="flex grow flex-col">
-                  {settings.map((t) => (
+                  {availableSettings.map((t) => (
                     <button
                       key={t.path}
                       className={`my-0.5 flex w-full items-center rounded-lg px-2.5 py-0.5 leading-loose text-theme-foreground/70 ${

apps/renderer/src/modules/settings/utils.ts

@@ -1,8 +1,15 @@
+import type { UserRole } from "~/lib/enum"
+
+export interface SettingPageContext {
+  role: Nullable<UserRole>
+}
+
 export interface SettingPageConfig {
   iconName: string
   name: I18nKeysForSettings
   priority: number
   headerIcon?: string
+  hideIf?: (ctx: SettingPageContext) => boolean
 }
 export const defineSettingPageData = (config: SettingPageConfig) => () => ({
   ...config,

apps/renderer/src/pages/settings/(settings)/actions.tsx

@@ -1,3 +1,4 @@
+import { UserRole } from "~/lib/enum"
 import { ActionSetting } from "~/modules/settings/tabs/actions"
 import { SettingsTitle } from "~/modules/settings/title"
 import { defineSettingPageData } from "~/modules/settings/utils"
@@ -9,6 +10,7 @@ export const loader = defineSettingPageData({
   iconName,
   name: "titles.actions",
   priority,
+  hideIf: (ctx) => ctx.role === UserRole.Trial,
 })
 
 export function Component() {

apps/renderer/src/pages/settings/layout.tsx

@@ -4,19 +4,20 @@ import { Logo } from "~/components/icons/logo"
 import { WindowUnderBlur } from "~/components/ui/background"
 import { isElectronBuild } from "~/constants"
 import { preventDefault } from "~/lib/dom"
-import { settings } from "~/modules/settings/constants"
+import { useAvailableSettings } from "~/modules/settings/hooks/use-setting-ctx"
 import { SettingsSidebarTitle } from "~/modules/settings/title"
 
 function Layout() {
   const location = useLocation()
   const tab = location.pathname.replace(/^\/settings\/?/, "")
+  const availableSettings = useAvailableSettings()
 
   return (
     <div className="flex h-screen flex-col" onContextMenu={preventDefault}>
       <div className="flex flex-1">
         <WindowUnderBlur className="flex h-full w-44 flex-col border-r px-2.5 py-3 pt-3.5">
           <div className="grow pt-8">
-            {settings.map((t) => (
+            {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 ${